fix: misc ui fixes

Author: sumitbhanushali

desk/src/components/ticket/TicketAgentActivities.vue

@@ -1,27 +1,32 @@
 <template>
-  <div v-for="(activity, i) in activities" :key="activity.key">
-    <div class="flex gap-4 px-10">
-      <div
-        class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
-      >
+  <div class="overflow-y-auto">
+    <div v-for="(activity, i) in activities" :key="activity.key">
+      <div class="flex gap-4 px-10">
         <div
-          class="z-10 mt-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
-          :class="[
-            i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
-            activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
-          ]"
+          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
         >
-          <component
-            :is="getActivityIcon(activity.type)"
-            :class="'text-gray-800'"
+          <div
+            class="z-10 mt-3 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100"
+            :class="[
+              i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
+              activity.type === 'history' ? 'bg-white' : 'bg-gray-100',
+            ]"
+          >
+            <component
+              :is="getActivityIcon(activity.type)"
+              :class="'text-gray-800'"
+            />
+          </div>
+        </div>
+        <div class="mt-4 w-full">
+          <EmailBox v-if="activity.type === 'email'" v-bind="activity" />
+          <CommentBox
+            v-else-if="activity.type === 'comment'"
+            v-bind="activity"
           />
+          <HistoryBox v-else v-bind="activity" />
         </div>
       </div>
-      <div class="mt-4 w-full">
-        <EmailBox v-if="activity.type === 'email'" v-bind="activity" />
-        <CommentBox v-else-if="activity.type === 'comment'" v-bind="activity" />
-        <HistoryBox v-else v-bind="activity" />
-      </div>
     </div>
   </div>
 </template>
@@ -35,10 +40,6 @@ defineProps({
     type: Array,
     required: true,
   },
-  type: {
-    type: String,
-    default: "all",
-  },
 });
 
 function getActivityIcon(type) {

desk/src/components/ticket/TicketAgentCustomer.vue

@@ -23,14 +23,19 @@
             />
           </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>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Avatar } from "frappe-ui";
-import { EmailIcon, LinkIcon } from "@/components/icons/";
+import { Avatar, Tooltip } from "frappe-ui";
+import { EmailIcon, LinkIcon, TicketIcon } from "@/components/icons/";
 import { errorMessage } from "@/utils";
 
 defineProps({

desk/src/components/ticket/TicketAgentFields.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto"
+    class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto border-b"
   >
     <div
       v-for="o in options"
@@ -15,7 +15,7 @@
       >
         <Autocomplete
           :options="o.store.dropdown"
-          :placeholder="`Select a ${o.label}`"
+          :placeholder="`Add ${o.label}`"
           :value="ticket[o.field]"
         />
       </div>

desk/src/pages/TicketAgent2.vue

@@ -30,31 +30,19 @@
         </Dropdown>
       </template>
     </LayoutHeader>
-    <div v-if="ticket.data" class="flex h-full">
+    <div v-if="ticket.data" class="flex h-screen overflow-hidden">
       <div class="flex flex-col">
-        <Tabs
-          v-slot="{ tab }"
-          v-model="tabIndex"
-          :tabs="tabs"
-          class="overflow-hidden"
+        <div
+          class="pr-7.5 flex items-center justify-between border-b py-1 pl-10"
         >
-          <div v-if="tab.label === 'Customer Tickets'" class="py-2">
-            <TicketsAgentList
-              :rows="customerTickets?.data?.data"
-              :columns="customerTickets?.data?.columns"
-              :options="{
-                selectable: false,
-                openInNewTab: true,
-              }"
-              :paginate="false"
-            />
-          </div>
-          <TicketAgentActivities
-            v-else
-            :activities="activities"
-            :type="tab.label === 'Emails' ? 'email' : 'all'"
+          <span class="text-lg font-semibold">Activity</span>
+          <Switch
+            v-model="showFullActivity"
+            size="sm"
+            label="Show all activity"
           />
-        </Tabs>
+        </div>
+        <TicketAgentActivities :activities="activities" />
         <CommunicationArea
           v-model="ticket.data"
           v-model:reload="reload_email"
@@ -73,7 +61,7 @@
 
 <script setup lang="ts">
 import { computed, ref, h } from "vue";
-import { Breadcrumbs, createResource, Dropdown, Tabs } from "frappe-ui";
+import { Breadcrumbs, createResource, Dropdown, Switch } from "frappe-ui";
 
 import { useTicketStatusStore } from "@/stores/ticketStatus";
 import { createToast } from "@/utils";
@@ -87,32 +75,12 @@ import {
 
 import { TicketAgentActivities, TicketAgentSidebar } from "@/components/ticket";
 
-import {
-  ActivityIcon,
-  EmailIcon,
-  IndicatorIcon,
-  TicketIcon,
-} from "@/components/icons";
+import { IndicatorIcon } from "@/components/icons";
 
 const ticketStatusStore = useTicketStatusStore();
 
-const tabIndex = ref(0);
-const tabs = [
-  {
-    label: "Activity",
-    icon: ActivityIcon,
-  },
-  {
-    label: "Emails",
-    icon: EmailIcon,
-  },
-  {
-    label: "Customer Tickets",
-    icon: TicketIcon,
-  },
-];
+const showFullActivity = ref(true);
 
-const customerTickets = ref([]);
 const reload_email = ref(false);
 
 const props = defineProps({
@@ -149,30 +117,6 @@ const ticket = createResource({
     ];
     return data;
   },
-  onSuccess(data) {
-    customerTickets.value = createResource({
-      url: "helpdesk.api.doc.get_list_data",
-      params: {
-        doctype: "HD Ticket",
-        filters: {
-          customer: ["=", data.customer],
-          name: ["!=", props.ticketId],
-        },
-        columns: [
-          { label: "Name", type: "Data", key: "name", width: "5rem" },
-          { label: "Subject", type: "Data", key: "subject", width: "25rem" },
-          { label: "Status", type: "Data", key: "status", width: "8rem" },
-        ],
-        rows: ["name", "subject", "status"],
-      },
-      auto: true,
-      transform(data) {
-        data.data.forEach((row) => {
-          row.name = row.name.toString();
-        });
-      },
-    });
-  },
 });
 
 const dropdownOptions = computed(() =>
@@ -203,10 +147,6 @@ const activities = computed(() => {
     };
   });
 
-  if (tabIndex.value === 1) {
-    return emailProps;
-  }
-
   const commentProps = ticket.data.comments.map((comment) => {
     return {
       type: "comment",
@@ -217,6 +157,12 @@ const activities = computed(() => {
     };
   });
 
+  if (!showFullActivity.value) {
+    return [...emailProps, ...commentProps].sort(
+      (a, b) => new Date(a.creation) - new Date(b.creation)
+    );
+  }
+
   const historyProps = [...ticket.data.history, ...ticket.data.views].map(
     (h) => {
       return {