From b8cdb5e86823c41e20da8ac4a5350e1901d6872c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 30 Apr 2024 12:49:55 +0530
Subject: [PATCH] fix: onlick of text only apply filter

---
 .../components/ListViews/CallLogsListView.vue |  70 ++++++-----
 .../components/ListViews/ContactsListView.vue |  51 ++++----
 .../components/ListViews/DealsListView.vue    | 109 +++++++++--------
 .../ListViews/EmailTemplatesListView.vue      |  70 ++++++-----
 .../components/ListViews/LeadsListView.vue    | 113 ++++++++++--------
 .../ListViews/OrganizationsListView.vue       |  51 ++++----
 .../components/ListViews/TasksListView.vue    |  52 ++++----
 7 files changed, 304 insertions(+), 212 deletions(-)

diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index a9fd0bd9..7ccd86a6 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -22,10 +22,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem :item="item">
           <template #prefix>
             <div v-if="['caller', 'receiver'].includes(column.key)">
               <Avatar
@@ -40,30 +37,47 @@
               <FeatherIcon :name="item.icon" class="h-3 w-3" />
             </div>
           </template>
-          <div
-            v-if="['modified', 'creation'].includes(column.key)"
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div v-else-if="column.key === 'status'" class="truncate text-base">
-            <Badge
-              :variant="'subtle'"
-              :theme="item.color"
-              size="md"
-              :label="__(item.label)"
-            />
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="['modified', 'creation'].includes(column.key)"
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div v-else-if="column.key === 'status'" class="truncate text-base">
+              <Badge
+                :variant="'subtle'"
+                :theme="item.color"
+                size="md"
+                :label="__(item.label)"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
+              />
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 82cd2a47..4e5d33f5 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -23,10 +23,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem :item="item">
           <template #prefix>
             <div v-if="column.key === 'full_name'">
               <Avatar
@@ -50,22 +47,36 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
-            v-if="['modified', 'creation'].includes(column.key)"
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="['modified', 'creation'].includes(column.key)"
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 7660a29e..73d421ec 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -20,18 +20,16 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div
-          v-if="column.key === '_assign'"
-          class="flex items-center"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
-          <MultipleAvatar :avatars="item" size="sm" />
+        <div v-if="column.key === '_assign'" class="flex items-center">
+          <MultipleAvatar
+            :avatars="item"
+            size="sm"
+            @click="
+              (event) => emit('applyFilter', { event, idx, column, item })
+            "
+          />
         </div>
-        <ListRowItem
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem v-else :item="item">
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -58,42 +56,59 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
-            v-if="
-              [
-                'modified',
-                'creation',
-                'first_response_time',
-                'first_responded_on',
-                'response_by',
-              ].includes(column.key)
-            "
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div
-            v-else-if="column.key === 'sla_status'"
-            class="truncate text-base"
-          >
-            <Badge
-              v-if="item.value"
-              :variant="'subtle'"
-              :theme="item.color"
-              size="md"
-              :label="item.value"
-            />
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="
+                [
+                  'modified',
+                  'creation',
+                  'first_response_time',
+                  'first_responded_on',
+                  'response_by',
+                ].includes(column.key)
+              "
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div
+              v-else-if="column.key === 'sla_status'"
+              class="truncate text-base"
+            >
+              <Badge
+                v-if="item.value"
+                :variant="'subtle'"
+                :theme="item.color"
+                size="md"
+                :label="item.value"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
+              />
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index 4a5c4f10..c965d37b 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -19,37 +19,51 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem :item="item">
           <!-- <template #prefix>
 
           </template> -->
-          <div
-            v-if="['modified', 'creation'].includes(column.key)"
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div v-else-if="column.key === 'status'" class="truncate text-base">
-            <Badge
-              :variant="'subtle'"
-              :theme="item.color"
-              size="md"
-              :label="item.label"
-            />
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="['modified', 'creation'].includes(column.key)"
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div v-else-if="column.key === 'status'" class="truncate text-base">
+              <Badge
+                :variant="'subtle'"
+                :theme="item.color"
+                size="md"
+                :label="item.label"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
+              />
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index bf7c83ad..229e50ae 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -20,18 +20,16 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div
-          v-if="column.key === '_assign'"
-          class="flex items-center"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
-          <MultipleAvatar :avatars="item" size="sm" />
+        <div v-if="column.key === '_assign'" class="flex items-center">
+          <MultipleAvatar
+            :avatars="item"
+            size="sm"
+            @click="
+              (event) => emit('applyFilter', { event, idx, column, item })
+            "
+          />
         </div>
-        <ListRowItem
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem v-else :item="item">
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -67,42 +65,59 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div
-            v-if="
-              [
-                'modified',
-                'creation',
-                'first_response_time',
-                'first_responded_on',
-                'response_by',
-              ].includes(column.key)
-            "
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div
-            v-else-if="column.key === 'sla_status'"
-            class="truncate text-base"
-          >
-            <Badge
-              v-if="item.value"
-              :variant="'subtle'"
-              :theme="item.color"
-              size="md"
-              :label="item.value"
-            />
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="
+                [
+                  'modified',
+                  'creation',
+                  'first_response_time',
+                  'first_responded_on',
+                  'response_by',
+                ].includes(column.key)
+              "
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div
+              v-else-if="column.key === 'sla_status'"
+              class="truncate text-base"
+            >
+              <Badge
+                v-if="item.value"
+                :variant="'subtle'"
+                :theme="item.color"
+                size="md"
+                :label="item.value"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
+              />
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
@@ -213,7 +228,9 @@ function editValues(selections, unselectAll) {
 function deleteValues(selections, unselectAll) {
   $dialog({
     title: __('Delete'),
-    message: __('Are you sure you want to delete {0} item(s)?', [selections.size]),
+    message: __('Are you sure you want to delete {0} item(s)?', [
+      selections.size,
+    ]),
     variant: 'danger',
     actions: [
       {
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index cfc3c704..2e23e05e 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -22,10 +22,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem :item="item">
           <template #prefix>
             <div v-if="column.key === 'organization_name'">
               <Avatar
@@ -37,22 +34,36 @@
               />
             </div>
           </template>
-          <div
-            v-if="['modified', 'creation'].includes(column.key)"
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="['modified', 'creation'].includes(column.key)"
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index b6e1d80c..33e2332e 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -29,11 +29,7 @@
             </div>
           </Tooltip>
         </div>
-        <ListRowItem
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
+        <ListRowItem v-else :item="item">
           <template #prefix>
             <div v-if="column.key === 'status'">
               <TaskStatusIcon :status="item" />
@@ -51,22 +47,36 @@
               />
             </div>
           </template>
-          <div
-            v-if="['modified', 'creation'].includes(column.key)"
-            class="truncate text-base"
-          >
-            <Tooltip :text="item.label">
-              <div>{{ item.timeAgo }}</div>
-            </Tooltip>
-          </div>
-          <div v-else-if="column.type === 'Check'">
-            <FormControl
-              type="checkbox"
-              :modelValue="item"
-              :disabled="true"
-              class="text-gray-900"
-            />
-          </div>
+          <template #default="{ label }">
+            <div
+              v-if="['modified', 'creation'].includes(column.key)"
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              <Tooltip :text="item.label">
+                <div>{{ item.timeAgo }}</div>
+              </Tooltip>
+            </div>
+            <div v-else-if="column.type === 'Check'">
+              <FormControl
+                type="checkbox"
+                :modelValue="item"
+                :disabled="true"
+                class="text-gray-900"
+              />
+            </div>
+            <div
+              v-else
+              class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
+            >
+              {{ label }}
+            </div>
+          </template>
         </ListRowItem>
       </ListRow>
     </ListRows>