fix: misc fixes

frappe · May 6, 2024 · 0d83566 · 0d83566
1 parent 1b99216
commit 0d83566
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 63 deletions.
diff --git a/desk/package.json b/desk/package.json
@@ -23,7 +23,7 @@
 		"autoprefixer": "^10.4.13",
 		"dayjs": "^1.11.7",
 		"echarts": "^5.4.1",
-		"frappe-ui": "^0.1.45",
+		"frappe-ui": "^0.1.53",
 		"lodash": "^4.17.21",
 		"lucide-static": "^0.276.0",
 		"mime": "^3.0.0",

diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
@@ -10,7 +10,7 @@
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
     :placeholder="placeholder"
     :editable="editable"
-    :mentions="agentStore.dropdown"
+    :mentions="agents"
     @change="editable ? (newComment = $event) : null"
   >
     <template #bottom>
@@ -100,7 +100,7 @@ import { AttachmentItem } from "@/components/";
 import { useAgentStore } from "@/stores/agent";
 import { useStorage } from "@vueuse/core";
 
-const agentStore = useAgentStore();
+const { agents: agentsList } = useAgentStore();
 
 const props = defineProps({
   placeholder: {
@@ -125,6 +125,15 @@ const commentEmpty = computed(() => {
   return !newComment.value || newComment.value === "<p></p>";
 });
 
+const agents = computed(() => {
+  return (
+    agentsList.data?.map((agent) => ({
+      label: agent.agent_name.trimEnd(),
+      value: agent.name,
+    })) || []
+  );
+});
+
 function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment);
 }

diff --git a/desk/src/components/UniInput2.vue b/desk/src/components/UniInput2.vue
@@ -7,7 +7,8 @@
     <div class="min-h-[28px] flex-1 items-center overflow-hidden text-base">
       <component
         :is="component"
-        :placeholder="field.placeholder || `Add ${field.label}`"
+        class="form-control"
+        :placeholder="`Add ${field.label}`"
         :value="transValue"
         :model-value="transValue"
         @update:model-value="emitUpdate(field.fieldname, $event)"
@@ -99,3 +100,31 @@ function emitUpdate(fieldname: Field["fieldname"], value: Value) {
   emit("change", { fieldname, value });
 }
 </script>
+<style scoped>
+:deep(.form-control input:not([type="checkbox"])),
+:deep(.form-control select),
+:deep(.form-control textarea),
+:deep(.form-control button) {
+  border-color: transparent;
+  background: white;
+}
+
+:deep(.form-control button) {
+  gap: 0;
+}
+:deep(.form-control [type="checkbox"]) {
+  margin-left: 9px;
+  cursor: pointer;
+}
+
+:deep(.form-control button > div) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.form-control button svg) {
+  color: white;
+  width: 0;
+}
+</style>
diff --git a/desk/src/components/ticket/TicketAgentActivities.vue b/desk/src/components/ticket/TicketAgentActivities.vue
@@ -20,7 +20,9 @@
           >
             <component
               :is="getActivityIcon(activity.type)"
-              class="'text-gray-800'"
+              :class="[
+                activity.type == 'history' ? 'text-gray-600' : 'text-gray-800',
+              ]"
             />
           </div>
         </div>

diff --git a/desk/src/components/ticket/TicketAgentCustomer.vue b/desk/src/components/ticket/TicketAgentCustomer.vue
@@ -11,32 +11,34 @@
         <Button class="h-7 w-7">
           <EmailIcon class="h-4 w-4" @click="openEmailBox()" />
         </Button>
-        <Tooltip text="Go to website...">
-          <Button class="h-7 w-7">
-            <LinkIcon
-              class="h-4 w-4"
-              @click="
-                website
-                  ? openWebsite()
-                  : errorMessage('error', 'Website not available')
-              "
-            />
+        <!-- <RouterLink
+          class="group cursor-pointer space-x-1 hover:text-gray-900"
+          :to="{
+            name: 'TicketsAgent',
+          }"
+          target="_blank"
+        >
+          <Button
+            class="h-7 w-7"
+            @click="
+              () => {
+                console.log('Show Contact Tickets');
+              }
+            "
+          >
+            <Tooltip text="Show Contact Tickets">
+              <TicketIcon class="h-4 w-4" />
+            </Tooltip>
           </Button>
-        </Tooltip>
-        <Tooltip text="Show Customer Tickets">
-          <Button class="h-7 w-7">
-            <TicketIcon class="h-4 w-4" @click="console.log('tick')" />
-          </Button>
-        </Tooltip>
+        </RouterLink> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Avatar, Tooltip } from "frappe-ui";
-import { EmailIcon, LinkIcon, TicketIcon } from "@/components/icons/";
-import { errorMessage } from "@/utils";
+import { EmailIcon, TicketIcon } from "@/components/icons/";
 
 const props = defineProps({
   name: {
@@ -58,8 +60,4 @@ const emit = defineEmits(["email:open"]);
 function openEmailBox() {
   emit("email:open", props.email);
 }
-
-function openWebsite() {
-  console.log("Open website");
-}
 </script>
diff --git a/desk/src/components/ticket/TicketAgentFields.vue b/desk/src/components/ticket/TicketAgentFields.vue
@@ -11,13 +11,16 @@
       <div class="min-h-[28px] flex-1 items-center overflow-hidden text-base">
         <FormControl
           v-if="o.type === 'select'"
+          class="form-control"
           :type="o.type"
+          :placeholder="`Add ${o.label}`"
           :value="ticket[o.field]"
           :options="customers?.data"
           @change="update(o.field, $event.target.value)"
         />
         <Autocomplete
           v-else
+          class="form-control"
           :options="o.store.dropdown"
           :placeholder="`Add ${o.label}`"
           :value="ticket[o.field]"
@@ -96,3 +99,31 @@ function update(field, value) {
   emit("update", { field, value });
 }
 </script>
+<style scoped>
+:deep(.form-control input:not([type="checkbox"])),
+:deep(.form-control select),
+:deep(.form-control textarea),
+:deep(.form-control button) {
+  border-color: transparent;
+  background: white;
+}
+
+:deep(.form-control button) {
+  gap: 0;
+}
+:deep(.form-control [type="checkbox"]) {
+  margin-left: 9px;
+  cursor: pointer;
+}
+
+:deep(.form-control button > div) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.form-control button svg) {
+  color: white;
+  width: 0;
+}
+</style>
diff --git a/desk/src/components/ticket/TicketAgentSidebar.vue b/desk/src/components/ticket/TicketAgentSidebar.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="flex w-[382px] flex-col justify-between border-l">
     <div class="h-10.5 flex items-center justify-between border-b px-5 py-2.5">
-      <span class="text-lg font-semibold">About this Ticket</span>
-      <span>#{{ ticket.name }}</span>
+      <span class="cursor-copy text-lg font-semibold" @click="copyToClipboard()"
+        >#{{ ticket.name }}</span
+      >
     </div>
     <TicketAgentCustomer
       v-if="ticket.contact"
@@ -12,28 +13,37 @@
       :email="ticket.contact.email_id"
       @email:open="(e) => emit('email:open', e)"
     />
-    <TicketAgentDetails
-      :first-responded-on="ticket.first_responded_on"
-      :response-by="ticket.response_by"
-      :resolution-date="ticket.resolution_date"
-      :resolution-by="ticket.resolution_by"
-      :source="ticket.via_customer_portal ? 'Portal' : 'Mail'"
-    />
-    <TicketAgentFields :ticket="ticket" @update="update" />
-    <div v-if="ticket.feedback_rating" class="px-6 py-3 text-gray-600">
+    <div
+      v-if="ticket.feedback_rating"
+      class="border-b px-6 py-3 text-base text-gray-600"
+    >
       <div class="flex">
-        <div class="w-[106px] pb-1.5 text-sm">Feedback</div>
+        <div class="min-w-[106px] pb-1.5">Rating</div>
         <div class="px-1.5">
           <StarRating :rating="ticket.feedback_rating" />
         </div>
       </div>
-      <div class="pb-1.5 text-base">
-        {{ ticket.feedback_text }}
+      <div class="flex">
+        <div class="w-[106px] pb-1.5">Feedback</div>
+        <div class="px-1.5 text-gray-800">
+          {{ ticket.feedback_text }}
+        </div>
       </div>
-      <div class="pb-1.5 text-sm">
-        {{ ticket.feedback_extra }}
+      <div v-if="ticket.feedback_extra" class="flex">
+        <div class="min-w-[106px] pb-1.5">Comment</div>
+        <div class="px-1.5 text-gray-800">
+          {{ ticket.feedback_extra }}
+        </div>
       </div>
     </div>
+    <TicketAgentDetails
+      :first-responded-on="ticket.first_responded_on"
+      :response-by="ticket.response_by"
+      :resolution-date="ticket.resolution_date"
+      :resolution-by="ticket.resolution_by"
+      :source="ticket.via_customer_portal ? 'Portal' : 'Mail'"
+    />
+    <TicketAgentFields :ticket="ticket" @update="update" />
   </div>
 </template>
 
@@ -56,4 +66,8 @@ const emit = defineEmits(["update", "email:open"]);
 function update(val) {
   emit("update", val);
 }
+
+function copyToClipboard() {
+  navigator.clipboard.writeText(`${props.ticket.name}`);
+}
 </script>
diff --git a/desk/src/stores/agent.ts b/desk/src/stores/agent.ts
@@ -1,36 +1,24 @@
-import { computed, ComputedRef } from "vue";
+import { computed } from "vue";
 import { defineStore } from "pinia";
 import { createListResource } from "frappe-ui";
 
-type Agent = {
-  name: string;
-  agent_name: string;
-  is_active: boolean;
-  user: string;
-  user_image: string;
-};
-
 export const useAgentStore = defineStore("agent", () => {
-  const d__ = createListResource({
+  const agents = createListResource({
     doctype: "HD Agent",
     fields: ["name", "agent_name", "is_active", "user", "user.user_image"],
     auto: true,
     pageLength: 99999,
   });
 
-  const options: ComputedRef<Array<Agent>> = computed(
-    () => d__.list?.data || []
-  );
-
   const dropdown = computed(() =>
-    options.value.map((o) => ({
+    agents.data?.map((o) => ({
       label: o.agent_name,
       value: o.name,
     }))
   );
 
   return {
     dropdown,
-    options,
+    agents,
   };
 });
diff --git a/desk/yarn.lock b/desk/yarn.lock
@@ -1383,10 +1383,10 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
-frappe-ui@^0.1.45:
-  version "0.1.50"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.50.tgz#143e5df667d49421524c1694fb8c5df41c628adb"
-  integrity sha512-ONbxpUM0HNu6DgNwt6Pcq+zPm/xzB78zpUoZZZoGzwNhsF9UexqiMAUSe9i34P7y8vWod40cC4cD3KjCQHYJrA==
+frappe-ui@^0.1.53:
+  version "0.1.53"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.53.tgz#45bfc6015458de11fe5e84d33d59bfe53cb1f9c2"
+  integrity sha512-kJdqY4KWFTA2670m+2NkSim01gAUWeLKijo7MqjWoCAfkUHBVgXsnucqEOXAi70J31F6V5tpQLH7SV40/z/1PA==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"