feat(TicketsAgent): filter on field click (select, link, assign)

desk/src/pages/tickets/TicketsAgent2.vue

@@ -23,12 +23,14 @@
     <TicketsAgentList2
       :rows="rows"
       :columns="columns"
-      :page-length-count="pageLength"
+      :page-length="pageLength"
+      :col-field-type="colFieldType"
       :options="{
         rowCount: rowCount,
         totalCount: totalCount,
       }"
       @update:page-length="updatePageLength"
+      @event:field-click="processFieldClick"
     />
   </div>
 </template>
@@ -52,6 +54,7 @@ let storage = useStorage("tickets_agent", {
 
 let columns = ref([]);
 let rows = ref([]);
+let colFieldType = ref({});
 let rowCount = ref(0);
 let totalCount = ref(0);
 
@@ -62,6 +65,7 @@ let sorts = ref(storage.value.sorts);
 let sortsToApply = storage.value.sortsToApply;
 
 let pageLength = ref(20);
+let pageLengthCount = pageLength.value;
 
 const tickets = createResource({
   url: "helpdesk.api.doc.get_list_data",
@@ -75,46 +79,63 @@ const tickets = createResource({
   transform(data) {
     data.data.forEach((row) => {
       row.name = row.name.toString();
-      let _user = getUser(JSON.parse(row._assign)[0]);
-
-      row._assign = {
-        name: _user.name,
-        label: _user.full_name,
-        image: _user.user_image,
-      };
+      let _assign = JSON.parse(row._assign);
+
+      if (_assign && _assign.length) {
+        let _user = getUser(_assign[0]);
+        row._assign = {
+          name: _user.name,
+          label: _user.full_name,
+          image: _user.user_image,
+        };
+      } else {
+        row._assign = {
+          name: "",
+          label: "Unassigned",
+          image: "",
+        };
+      }
     });
   },
   onSuccess(data) {
     columns.value = data.columns;
     rows.value = data.data;
     rowCount.value = data.row_count;
     totalCount.value = data.total_count;
+
+    data.fields.forEach((field) => {
+      colFieldType.value[field.value] = field.type;
+    });
   },
 });
 
 function updatePageLength(value) {
   if (value == "loadMore") {
-    tickets.update({
-      params: {
-        doctype: "HD Ticket",
-        filters: filtersToApply,
-        order_by: sortsToApply,
-        page_length: tickets.data.data.length + pageLength.value,
-      },
-    });
+    pageLengthCount = tickets.data.data.length + pageLength.value;
   } else {
     pageLength.value = value;
-    tickets.update({
-      params: {
-        doctype: "HD Ticket",
-        filters: filtersToApply,
-        order_by: sortsToApply,
-        page_length: pageLength.value,
-      },
-    });
+    pageLengthCount = value;
   }
 
-  tickets.reload();
+  apply();
+}
+
+function processFieldClick(event) {
+  filters.value.push({
+    field: filterableFields.data.find((f) => f.fieldname === event.name),
+    operator: "is",
+    value: event.value,
+  });
+
+  if (event.name == "_assign") {
+    filtersToApply[event.name] = ["LIKE", `%${event.value}%`];
+  } else {
+    filtersToApply[event.name] = ["=", event.value];
+  }
+  storage.value.filters = filters.value;
+  storage.value.filtersToApply = filtersToApply;
+
+  apply();
 }
 
 function processSorts(sortEvent) {
@@ -135,15 +156,6 @@ function processSorts(sortEvent) {
   storage.value.sorts = sorts.value;
   storage.value.sortsToApply = sortsToApply;
 
-  tickets.update({
-    params: {
-      order_by: sortsToApply,
-      filters: filtersToApply,
-      page_length: 100,
-      doctype: "HD Ticket",
-    },
-  });
-
   apply();
 }
 
@@ -185,6 +197,15 @@ function processFilters(filterEvent) {
 }
 
 function apply() {
+  tickets.update({
+    params: {
+      order_by: sortsToApply,
+      filters: filtersToApply,
+      page_length: pageLengthCount,
+      doctype: "HD Ticket",
+    },
+  });
+
   tickets.reload();
 }
 

desk/src/pages/tickets/TicketsAgentList2.vue

@@ -9,7 +9,7 @@
         params: { ticketId: row.name },
       }),
       selectable: true,
-      showTooltip: true,
+      showTooltip: false,
     }"
     row-key="name"
   >
@@ -21,7 +21,18 @@
         v-slot="{ column, item }"
         :row="row"
       >
-        <ListRowItem :item="item" class="text-base text-gray-700">
+        <div
+          v-if="column.key === '_assign'"
+          @click="(e) => handleFieldClick(e, column.key, item)"
+        >
+          <MultipleAvatar :avatars="[item]" />
+        </div>
+        <ListRowItem
+          v-else
+          :item="item"
+          class="text-base text-gray-700"
+          @click="(e) => handleFieldClick(e, column.key, item)"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon v-if="item == 'Open'" class="text-red-600" />
@@ -36,7 +47,15 @@
               <IndicatorIcon v-else class="text-gray-700" />
             </div>
           </template>
-          <div v-if="column.key === 'response_by'">
+          <div v-if="column.key === 'agreement_status'">
+            <Badge
+              v-if="item"
+              :label="item"
+              :theme="slaStatusColorMap[item]"
+              variant="outline"
+            />
+          </div>
+          <div v-else-if="column.key === 'response_by'">
             <Badge
               v-if="
                 row.first_responded_on &&
@@ -56,7 +75,7 @@
               {{ dayjs(item).fromNow() }}
             </Tooltip>
           </div>
-          <div v-if="column.key === 'resolution_by'">
+          <div v-else-if="column.key === 'resolution_by'">
             <Badge
               v-if="
                 row.resolution_date && dayjs(row.resolution_date).isBefore(item)
@@ -75,29 +94,18 @@
               {{ dayjs(item).fromNow() }}
             </Tooltip>
           </div>
-          <div v-if="column.key === 'agreement_status'">
-            <Badge
-              v-if="item"
-              :label="item"
-              :theme="slaStatusColorMap[item]"
-              variant="outline"
-            />
-          </div>
-          <div v-if="column.key === '_assign'">
-            <MultipleAvatar :avatars="[item]" />
-          </div>
-          <div v-if="column.key === 'creation'">
+          <div v-else-if="column.key === 'creation'">
             {{ dayjs(item).fromNow() }}
           </div>
-          <div v-if="column.key === 'modified'">
+          <div v-else-if="column.key === 'modified'">
             {{ dayjs(item).fromNow() }}
           </div>
         </ListRowItem>
       </ListRow>
     </ListRows>
   </ListView>
   <ListFooter
-    v-model="pageLengthCount"
+    v-model="pageLength"
     class="bottom-0 border-t bg-blue-50 px-5 py-2"
     :options="{ rowCount: options.rowCount, totalCount: options.totalCount }"
     @update:model-value="emit('update:pageLength', $event)"
@@ -118,6 +126,24 @@ import { MultipleAvatar } from "@/components";
 import { dayjs } from "@/dayjs";
 import { ref } from "vue";
 
+function handleFieldClick(e, name: string, value: string) {
+  if (
+    props.colFieldType[name] === "Link" ||
+    props.colFieldType[name] === "Select" ||
+    name === "_assign"
+  ) {
+    e.preventDefault();
+    if (name === "_assign") {
+      value = value.name;
+    }
+    emit("event:fieldClick", {
+      name,
+      type: props.colFieldType[name],
+      value,
+    });
+  }
+}
+
 const props = defineProps({
   columns: {
     type: Array, //TODO custom types
@@ -127,7 +153,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
-  pageLengthCount: {
+  colFieldType: {
+    type: Object,
+    required: true,
+  },
+  pageLength: {
     type: Number,
     required: true,
     default: 20,
@@ -141,8 +171,8 @@ const props = defineProps({
   },
 });
 
-let pageLengthCount = ref(props.pageLengthCount);
-let emit = defineEmits(["update:pageLength"]);
+let pageLength = ref(props.pageLength);
+let emit = defineEmits(["update:pageLength", "event:fieldClick"]);
 
 const slaStatusColorMap = {
   Fulfilled: "green",