From 440bb05052910e244795ffbb714dae22f5233614 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 17 May 2024 16:56:53 +0530
Subject: [PATCH] fix: render quick filters is view control component

---
 frontend/src/components/Filter.vue       |  2 +-
 frontend/src/components/ViewControls.vue | 53 +++++++++++++++++++++++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index 64dce9b2..36f8be13 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -178,7 +178,7 @@ function convertFilters(data, allFilters) {
     let field = data.find((f) => f.fieldname === key)
     if (typeof value !== 'object') {
       value = ['=', value]
-      if (field.fieldtype === 'Check') {
+      if (field?.fieldtype === 'Check') {
         value = ['equals', value[1] ? 'Yes' : 'No']
       }
     }
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index f83c1b39..9b2c78dd 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-between px-5 py-4">
+  <div class="flex items-center justify-between gap-2 px-5 py-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
@@ -22,6 +22,34 @@
         </template>
       </Dropdown>
     </div>
+    <div class="flex items-center flex-1 gap-2 border-l pl-2">
+      <div v-for="filter in quickFilters.data" :key="filter.name">
+        <FormControl
+          v-if="filter.type == 'Check'"
+          :label="filter.label"
+          type="checkbox"
+          v-model="filter.value"
+          @change.stop="applyQuickFilter(filter, $event.target.value)"
+        />
+        <FormControl
+          v-else-if="filter.type === 'Select'"
+          class="form-control cursor-pointer [&_select]:cursor-pointer"
+          type="select"
+          v-model="filter.value"
+          :options="filter.options"
+          :placeholder="filter.label"
+          @change.stop="applyQuickFilter(filter, $event.target.value)"
+        />
+        <FormControl
+          v-else
+          :value="filter.value"
+          type="text"
+          :placeholder="filter.label"
+          :debounce="500"
+          @change.stop="applyQuickFilter(filter, $event.target.value)"
+        />
+      </div>
+    </div>
     <div class="flex items-center gap-2">
       <div
         v-if="viewUpdated && route.query.view && (!view.public || isManager())"
@@ -384,6 +412,29 @@ const viewsDropdownOptions = computed(() => {
   return _views
 })
 
+const quickFilters = createResource({
+  url: 'crm.api.doc.get_quick_filters',
+  params: { doctype: props.doctype },
+  auto: true,
+})
+
+function applyQuickFilter(filter, value) {
+  let filters = { ...list.value.params.filters }
+  let field = filter.name
+  if (value) {
+    if (['Check', 'Select'].includes(filter.type)) {
+      filters[field] = value
+    } else {
+      filters[field] = ['LIKE', `%${value}%`]
+    }
+    filter['value'] = value
+  } else {
+    delete filters[field]
+    filter['value'] = ''
+  }
+  updateFilter(filters)
+}
+
 function updateFilter(filters) {
   viewUpdated.value = true
   if (!defaultParams.value) {