Merge pull request #77 from shariquerik/apply-filter-from-row-item

feat: Apply filter on click if row items in list view

frappe-ui

@@ -1 +1 @@
-Subproject commit 388c8706d0f96d918651018ca58d85a56d2bf5cb
+Subproject commit 5b17c2242369729b4e9aa31c0c78d3d53676a77f

frontend/src/components/ListViews/CallLogsListView.vue

@@ -18,10 +18,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="['caller', 'receiver'].includes(column.key)">
               <Avatar
@@ -108,7 +111,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 

frontend/src/components/ListViews/ContactsListView.vue

@@ -19,10 +19,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'full_name'">
               <Avatar
@@ -138,6 +141,7 @@ const emit = defineEmits([
   'updatePageCount',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/ListViews/DealsListView.vue

@@ -16,13 +16,21 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div v-if="column.key === '_assign'" class="flex items-center">
+        <div
+          v-if="column.key === '_assign'"
+          class="flex items-center"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <MultipleAvatar :avatars="item" size="sm" />
         </div>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -164,7 +172,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')

frontend/src/components/ListViews/EmailTemplatesListView.vue

@@ -15,10 +15,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <!-- <template #prefix>
 
           </template> -->
@@ -130,6 +133,7 @@ const emit = defineEmits([
   'showEmailTemplate',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/ListViews/LeadsListView.vue

@@ -16,13 +16,21 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <div v-if="column.key === '_assign'" class="flex items-center">
+        <div
+          v-if="column.key === '_assign'"
+          class="flex items-center"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <MultipleAvatar :avatars="item" size="sm" />
         </div>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <IndicatorIcon :class="item.color" />
@@ -173,7 +181,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'updatePageCount', 'columnWidthUpdated'])
+const emit = defineEmits([
+  'loadMore',
+  'updatePageCount',
+  'columnWidthUpdated',
+  'applyFilter',
+])
 
 const pageLengthCount = defineModel()
 const list = defineModel('list')

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -18,10 +18,13 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
-        <ListRowItem :item="item">
+        <ListRowItem
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'organization_name'">
               <Avatar
@@ -123,6 +126,7 @@ const emit = defineEmits([
   'updatePageCount',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/ListViews/TasksListView.vue

@@ -15,7 +15,7 @@
         class="mx-5"
         v-for="row in rows"
         :key="row.name"
-        v-slot="{ column, item }"
+        v-slot="{ idx, column, item }"
         :row="row"
       >
         <Tooltip
@@ -30,7 +30,11 @@
             {{ dateFormat(item, 'D MMM, hh:mm a') }}
           </div>
         </Tooltip>
-        <ListRowItem v-else :item="item">
+        <ListRowItem
+          v-else
+          :item="item"
+          @click="(event) => emit('applyFilter', { event, idx, column, item })"
+        >
           <template #prefix>
             <div v-if="column.key === 'status'">
               <TaskStatusIcon :status="item" />
@@ -153,6 +157,7 @@ const emit = defineEmits([
   'showTask',
   'reload',
   'columnWidthUpdated',
+  'applyFilter',
 ])
 
 const pageLengthCount = defineModel()

frontend/src/components/MultipleAvatar.vue

@@ -24,11 +24,12 @@
       :key="avatar.name"
     >
       <Avatar
-        class="-mr-1.5 transform ring-2 ring-white transition hover:z-10 hover:scale-110"
+        class="user-avatar -mr-1.5 transform ring-2 ring-white transition hover:z-10 hover:scale-110"
         shape="circle"
         :image="avatar.image"
         :label="avatar.label"
         :size="size"
+        :data-name="avatar.name"
       />
     </Tooltip>
   </div>

frontend/src/components/ViewControls.vue

@@ -536,6 +536,39 @@ function saveView() {
   showViewModal.value = true
 }
 
+function applyFilter({ event, idx, column, item }) {
+  let restrictedFieldtypes = ['Duration', 'Datetime', 'Time']
+  if (restrictedFieldtypes.includes(column.type) || idx === 0) return
+
+  event.stopPropagation()
+  event.preventDefault()
+
+  let filters = { ...list.value.params.filters }
+
+  let value = item.name || item.label || item
+
+  if (value) {
+    filters[column.key] = value
+  } else {
+    delete filters[column.key]
+  }
+
+  if (column.key == '_assign') {
+    if (item.length > 1) {
+      let target = e.target.closest('.user-avatar')
+      if (target) {
+        let name = target.getAttribute('data-name')
+        filters['_assign'] = ['LIKE', `%${name}%`]
+      }
+    } else {
+      filters['_assign'] = ['LIKE', `%${item[0].name}%`]
+    }
+  }
+  updateFilter(filters)
+}
+
+defineExpose({ applyFilter })
+
 // Watchers
 watch(
   () => getView(route.query.view),

frontend/src/pages/CallLogs.vue

@@ -5,6 +5,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="callLogs"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -25,6 +26,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="callLogs.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="callLogs.data"
@@ -65,6 +67,7 @@ const callLogs = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!callLogs.value?.data?.data) return []

frontend/src/pages/Contacts.vue

@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="contacts"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -30,6 +31,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="contacts.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="contacts.data"
@@ -89,6 +91,7 @@ const contacts = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!contacts.value?.data?.data) return []

frontend/src/pages/Deals.vue

@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="deals"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -30,6 +31,7 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
@@ -94,6 +96,7 @@ const deals = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {

frontend/src/pages/EmailTemplates.vue

@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="emailTemplates"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
     @reload="emailTemplates.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="emailTemplates.data"
@@ -69,6 +71,7 @@ const emailTemplates = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!emailTemplates.value?.data?.data) return []

frontend/src/pages/Leads.vue

@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="leads"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @loadMore="() => loadMore++"
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
@@ -89,6 +91,7 @@ const leads = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 // Rows
 const rows = computed(() => {

frontend/src/pages/Organizations.vue

@@ -14,6 +14,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="organizations"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -34,6 +35,7 @@
     @columnWidthUpdated="() => triggerResize++"
     @updatePageCount="(count) => (updatedPageCount = count)"
     @reload="organizations.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div
     v-else-if="organizations.data"
@@ -95,6 +97,7 @@ const organizations = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!organizations.value?.data?.data) return []

frontend/src/pages/Tasks.vue

@@ -10,6 +10,7 @@
     </template>
   </LayoutHeader>
   <ViewControls
+    ref="viewControls"
     v-model="tasks"
     v-model:loadMore="loadMore"
     v-model:resizeColumn="triggerResize"
@@ -31,6 +32,7 @@
     @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
     @reload="tasks.reload()"
+    @applyFilter="(data) => viewControls.applyFilter(data)"
   />
   <div v-else-if="tasks.data" class="flex h-full items-center justify-center">
     <div
@@ -63,6 +65,7 @@ const tasks = ref({})
 const loadMore = ref(1)
 const triggerResize = ref(1)
 const updatedPageCount = ref(20)
+const viewControls = ref(null)
 
 const rows = computed(() => {
   if (!tasks.value?.data?.data) return []