Merge pull request #156 from shariquerik/list-onclick-filter-fix

fix: onlick of text only apply filter

frontend/src/components/ListViews/CallLogsListView.vue

@@ -22,10 +22,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
+        <ListRowItem :item="item">
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="['caller', 'receiver'].includes(column.key)">
               <Avatar
@@ -40,9 +37,13 @@
               <FeatherIcon :name="item.icon" class="h-3 w-3" />
             </div>
           </template>
+          <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>
@@ -54,6 +55,9 @@
                 :theme="item.color"
                 size="md"
                 :label="__(item.label)"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
               />
             </div>
             <div v-else-if="column.type === 'Check'">
@@ -64,6 +68,16 @@
                 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>

frontend/src/components/ListViews/ContactsListView.vue

@@ -23,10 +23,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
+        <ListRowItem :item="item">
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="column.key === 'full_name'">
               <Avatar
@@ -50,9 +47,13 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
+          <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>
@@ -66,6 +67,16 @@
                 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>

frontend/src/components/ListViews/DealsListView.vue

@@ -20,18 +20,16 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div
+        <div v-if="column.key === '_assign'" class="flex items-center">
-          v-if="column.key === '_assign'"
+          <MultipleAvatar
-          class="flex items-center"
+            :avatars="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+            size="sm"
-        >
+            @click="
-          <MultipleAvatar :avatars="item" size="sm" />
+              (event) => emit('applyFilter', { event, idx, column, item })
+            "
+          />
         </div>
-        <ListRowItem
+        <ListRowItem v-else :item="item">
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -58,6 +56,7 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
+          <template #default="{ label }">
             <div
               v-if="
                 [
@@ -69,6 +68,9 @@
                 ].includes(column.key)
               "
               class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
             >
               <Tooltip :text="item.label">
                 <div>{{ item.timeAgo }}</div>
@@ -84,6 +86,9 @@
                 :theme="item.color"
                 size="md"
                 :label="item.value"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
               />
             </div>
             <div v-else-if="column.type === 'Check'">
@@ -94,6 +99,16 @@
                 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>

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -19,16 +19,17 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
+        <ListRowItem :item="item">
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <!-- <template #prefix>
 
           </template> -->
+          <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>
@@ -40,6 +41,9 @@
                 :theme="item.color"
                 size="md"
                 :label="item.label"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
               />
             </div>
             <div v-else-if="column.type === 'Check'">
@@ -50,6 +54,16 @@
                 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>

frontend/src/components/ListViews/LeadsListView.vue

@@ -20,18 +20,16 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div
+        <div v-if="column.key === '_assign'" class="flex items-center">
-          v-if="column.key === '_assign'"
+          <MultipleAvatar
-          class="flex items-center"
+            :avatars="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+            size="sm"
-        >
+            @click="
-          <MultipleAvatar :avatars="item" size="sm" />
+              (event) => emit('applyFilter', { event, idx, column, item })
+            "
+          />
         </div>
-        <ListRowItem
+        <ListRowItem v-else :item="item">
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -67,6 +65,7 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
+          <template #default="{ label }">
             <div
               v-if="
                 [
@@ -78,6 +77,9 @@
                 ].includes(column.key)
               "
               class="truncate text-base"
+              @click="
+                (event) => emit('applyFilter', { event, idx, column, item })
+              "
             >
               <Tooltip :text="item.label">
                 <div>{{ item.timeAgo }}</div>
@@ -93,6 +95,9 @@
                 :theme="item.color"
                 size="md"
                 :label="item.value"
+                @click="
+                  (event) => emit('applyFilter', { event, idx, column, item })
+                "
               />
             </div>
             <div v-else-if="column.type === 'Check'">
@@ -103,6 +108,16 @@
                 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: [
       {

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -22,10 +22,7 @@
         v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem
+        <ListRowItem :item="item">
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="column.key === 'organization_name'">
               <Avatar
@@ -37,9 +34,13 @@
               />
             </div>
           </template>
+          <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>
@@ -53,6 +54,16 @@
                 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>

frontend/src/components/ListViews/TasksListView.vue

@@ -29,11 +29,7 @@
             </div>
           </Tooltip>
         </div>
-        <ListRowItem
+        <ListRowItem v-else :item="item">
-          v-else
-          :item="item"
-          @click="(event) => emit('applyFilter', { event, idx, column, item })"
-        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <TaskStatusIcon :status="item" />
@@ -51,9 +47,13 @@
               />
             </div>
           </template>
+          <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>
@@ -67,6 +67,16 @@
                 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>