fix(ux): table row click

desk/src/components/HelpdeskTable.vue

@@ -63,17 +63,17 @@
         </div>
       </div>
       <div class="divide-y overflow-y-auto px-6 text-base">
-        <div
+        <component
+          :is="getRowClickComponent(row[rowKey])"
           v-for="row in data"
           :key="row[rowKey]"
           class="group flex h-11 w-full items-center gap-2 px-3 py-2 transition"
           :class="{
             'bg-gray-200': selection.has(row[rowKey]),
             'hover:bg-gray-300': selection.has(row[rowKey]),
             'hover:bg-gray-100': !selection.has(row[rowKey]),
-            'cursor-pointer': emitRowClick,
+            'cursor-pointer': rowClick.type !== 'none',
           }"
-          @click="onRowClick(row)"
         >
           <Input
             v-if="!hideCheckbox"
@@ -97,7 +97,7 @@
           <div v-if="slots['row-extra']" class="ml-auto">
             <slot name="row-extra" :data="row" />
           </div>
-        </div>
+        </component>
       </div>
     </div>
     <transition
@@ -152,7 +152,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, toRefs, useSlots } from "vue";
+import { computed, h, reactive, toRefs, useSlots } from "vue";
+import { RouteLocationOptions, RouterLink } from "vue-router";
 import { FeatherIcon, Popover, Switch } from "frappe-ui";
 import { isEmpty } from "lodash";
 import IconAdd from "~icons/espresso/add";
@@ -167,23 +168,28 @@ type Column = {
 type RowKey = string;
 type SelectionKey = string | number;
 
-type P = {
+interface RowClick {
+  fn: (id: RowKey) => RouteLocationOptions | void;
+  type: "action" | "link" | "none";
+}
+
+interface P {
   columns: Column[];
   rowKey: string;
   data?: Record<string, any>[];
-  emitRowClick?: boolean;
+  rowClick?: RowClick;
   emptyMessage?: string;
   hideCheckbox?: boolean;
   hideColumnSelector?: boolean;
   selection?: Set<SelectionKey>;
-};
+}
 
 const props = withDefaults(defineProps<P>(), {
   data: () => [],
-  emitRowClick: false,
   emptyMessage: "No records",
   hideCheckbox: false,
   hideColumnSelector: false,
+  rowClick: () => ({ fn: () => ({}), type: "none" }),
   selection: () => new Set(),
 });
 
@@ -192,7 +198,7 @@ const emit = defineEmits<{
   (event: "update:selection", selection: Set<SelectionKey>): void;
 }>();
 
-const { columns, data, emitRowClick, rowKey, selection } = toRefs(props);
+const { columns, data, rowClick, rowKey, selection } = toRefs(props);
 const slots = useSlots();
 const allSelected = computed(() => selection.value.size === data.value.length);
 const togglableColumns = reactive(
@@ -209,6 +215,21 @@ const selectionText = computed(() => {
   return `${size} ${verb} selected`;
 });
 
+function getRowClickComponent(key: RowKey) {
+  switch (rowClick.value.type) {
+    case "link":
+      return h(RouterLink, {
+        to: rowClick.value.fn(key),
+      });
+    case "action":
+      return h("div", {
+        onClick: () => rowClick.value.fn(key),
+      });
+    default:
+      return "div";
+  }
+}
+
 function isColVisible(column: Column) {
   return !column.isTogglable || togglableColumns[column.colKey];
 }
@@ -231,10 +252,6 @@ function toggleAllRows(cond: boolean) {
   data.value.forEach((d) => selection.value.add(d[rowKey.value]));
   emit("update:selection", selection.value);
 }
-
-function onRowClick(row) {
-  if (emitRowClick.value) emit("row-click", row[rowKey.value]);
-}
 </script>
 
 <style scoped>

desk/src/pages/desk/canned_response/CannedResponseList.vue

@@ -15,15 +15,15 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="responses.list?.data || []"
       :empty-message="emptyMessage"
-      row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoResponse"
+      :row-click="{
+        type: 'link',
+        fn: toResponse,
+      }"
     />
     <ListNavigation class="p-3" v-bind="responses" />
     <AddNewCannedResponsesDialog
@@ -34,7 +34,6 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRouter } from "vue-router";
 import { AGENT_PORTAL_CANNED_RESPONSE_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
 import PageTitle from "@/components/PageTitle.vue";
@@ -43,7 +42,6 @@ import ListNavigation from "@/components/ListNavigation.vue";
 import AddNewCannedResponsesDialog from "@/components/desk/global/AddNewCannedResponsesDialog.vue";
 import IconPlus from "~icons/lucide/plus";
 
-const router = useRouter();
 const showNewDialog = ref(false);
 const emptyMessage = "No Canned Responses Found";
 const columns = [
@@ -65,12 +63,12 @@ const responses = createListManager({
   auto: true,
 });
 
-function gotoResponse(id: string) {
-  router.push({
+function toResponse(id: string) {
+  return {
     name: AGENT_PORTAL_CANNED_RESPONSE_SINGLE,
     params: {
       id,
     },
-  });
+  };
 }
 </script>

desk/src/pages/desk/contact/ContactList.vue

@@ -15,15 +15,18 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="contacts.list?.data || []"
-      row-key="name"
       :emit-row-click="true"
       :empty-message="emptyMessage"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openContact"
+      :row-click="{
+        type: 'action',
+        fn: openContact,
+      }"
+      class="grow"
+      row-key="name"
     >
       <template #name="{ data }">
         <div class="flex items-center gap-2">

desk/src/pages/desk/customer/CustomerList.vue

@@ -20,10 +20,12 @@
       :data="customers.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openCustomer"
+      :row-click="{
+        type: 'action',
+        fn: openCustomer,
+      }"
     >
       <template #name="{ data }">
         <div class="flex items-center gap-2">

desk/src/pages/desk/email/EmailList.vue

@@ -17,10 +17,12 @@
       :data="accounts.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoAccount"
+      :row-click="{
+        type: 'link',
+        fn: toAccount,
+      }"
     >
       <template #email_id="{ data }">
         <div class="flex justify-between">
@@ -107,12 +109,12 @@ const accounts = createListManager({
   auto: true,
 });
 
-function gotoAccount(id: string) {
-  router.push({
+function toAccount(id: string) {
+  return {
     name: AGENT_PORTAL_EMAIL_SINGLE,
     params: {
       emailAccountId: id,
     },
-  });
+  };
 }
 </script>

desk/src/pages/desk/escalation/EscalationRuleList.vue

@@ -20,10 +20,12 @@
       :data="rules.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="openDialog"
+      :row-click="{
+        type: 'action',
+        fn: openDialog,
+      }"
     >
       <template #is_enabled="{ data }">
         <Badge :theme="data.is_enabled ? 'green' : 'red'" variant="subtle">

desk/src/pages/desk/sla/SlaList.vue

@@ -17,10 +17,12 @@
       :data="policies.list?.data || []"
       :empty-message="emptyMessage"
       row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoPolicy"
+      :row-click="{
+        type: 'link',
+        fn: toPolicy,
+      }"
     >
       <template #enabled="{ data }">
         <Badge :theme="data.enabled ? 'green' : 'gray'" variant="subtle">
@@ -37,7 +39,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { Badge } from "frappe-ui";
 import { AGENT_PORTAL_SLA_NEW, AGENT_PORTAL_SLA_SINGLE } from "@/router";
 import { createListManager } from "@/composables/listManager";
@@ -46,7 +47,6 @@ import HelpdeskTable from "@/components/HelpdeskTable.vue";
 import ListNavigation from "@/components/ListNavigation.vue";
 import IconPlus from "~icons/lucide/plus";
 
-const router = useRouter();
 const emptyMessage = "No Support Policies Found";
 const columns = [
   {
@@ -72,12 +72,12 @@ const policies = createListManager({
   auto: true,
 });
 
-function gotoPolicy(id: string) {
-  router.push({
+function toPolicy(id: string) {
+  return {
     name: AGENT_PORTAL_SLA_SINGLE,
     params: {
       id,
     },
-  });
+  };
 }
 </script>

desk/src/pages/desk/team/TeamList.vue

@@ -15,15 +15,17 @@
       </template>
     </PageTitle>
     <HelpdeskTable
-      class="grow"
       :columns="columns"
       :data="teams.list?.data || []"
       :empty-message="emptyMessage"
-      row-key="name"
-      :emit-row-click="true"
       :hide-checkbox="true"
       :hide-column-selector="true"
-      @row-click="gotoTeam"
+      :row-click="{
+        type: 'link',
+        fn: toTeam,
+      }"
+      class="grow"
+      row-key="name"
     />
     <ListNavigation class="p-3" v-bind="teams" />
     <Dialog
@@ -121,12 +123,12 @@ const newTeam = createResource({
   },
 });
 
-function gotoTeam(id: string) {
-  router.push({
+function toTeam(id: string) {
+  return {
     name: AGENT_PORTAL_TEAM_SINGLE,
     params: {
       teamId: id,
     },
-  });
+  };
 }
 </script>

desk/src/pages/desk/ticket-list/MainTable.vue

@@ -3,10 +3,12 @@
     v-model:selection="selection"
     :columns="columns"
     :data="tickets"
-    :emit-row-click="true"
     :empty-message="emptyMessage"
+    :row-click="{
+      fn: toTicket,
+      type: 'link',
+    }"
     row-key="name"
-    @row-click="toTicket"
   >
     <template #subject="{ data }">
       <TicketSummary
@@ -195,12 +197,12 @@ function assignOpts(selected: Set<number>) {
 }
 
 function toTicket(ticketId: string) {
-  router.push({
+  return {
     name: AGENT_PORTAL_TICKET,
     params: {
       ticketId,
     },
-  });
+  };
 }
 </script>