From 2c7a4ccd2a25c6bde8026b66b2840cd381bf0c08 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 30 May 2024 19:06:18 +0530
Subject: [PATCH] fix: moved quick filter field in separate component and added
 debounce

---
 frontend/src/components/QuickFilterField.vue | 64 ++++++++++++++++++++
 frontend/src/components/ViewControls.vue     | 53 ++--------------
 2 files changed, 69 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/components/QuickFilterField.vue

diff --git a/frontend/src/components/QuickFilterField.vue b/frontend/src/components/QuickFilterField.vue
new file mode 100644
index 00000000..1a0a35e9
--- /dev/null
+++ b/frontend/src/components/QuickFilterField.vue
@@ -0,0 +1,64 @@
+<template>
+  <FormControl
+    v-if="filter.type == 'Check'"
+    :label="filter.label"
+    type="checkbox"
+    v-model="filter.value"
+    @change.stop="updateFilter(filter, $event.target.checked)"
+  />
+  <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="updateFilter(filter, $event.target.value)"
+  />
+  <Link
+    v-else-if="filter.type === 'Link'"
+    :value="filter.value"
+    :doctype="filter.options"
+    :placeholder="filter.label"
+    @change="(data) => updateFilter(filter, data)"
+  />
+  <component
+    v-else-if="['Date', 'Datetime'].includes(filter.type)"
+    class="border-none"
+    :is="filter.type === 'Date' ? DatePicker : DatetimePicker"
+    :value="filter.value"
+    @change="(v) => updateFilter(filter, v)"
+    :placeholder="filter.label"
+  />
+  <TextInput
+    v-else
+    v-model="filter.value"
+    type="text"
+    :placeholder="filter.label"
+    @input.stop="debouncedFn(filter, $event.target.value)"
+  />
+</template>
+<script setup>
+import DatePicker from '@/components/Controls/DatePicker.vue'
+import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
+import Link from '@/components/Controls/Link.vue'
+import { TextInput, FormControl } from 'frappe-ui'
+import { useDebounceFn } from '@vueuse/core'
+
+const props = defineProps({
+  filter: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['applyQuickFilter'])
+
+const debouncedFn = useDebounceFn((f, value) => {
+  emit('applyQuickFilter', f, value)
+}, 500)
+
+function updateFilter(f, value) {
+  emit('applyQuickFilter', f, value)
+}
+</script>
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 49fccf84..092af867 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -96,44 +96,9 @@
         :key="filter.name"
         class="m-1 min-w-36"
       >
-        <FormControl
-          v-if="filter.type == 'Check'"
-          :label="filter.label"
-          type="checkbox"
-          v-model="filter.value"
-          @change.stop="applyQuickFilter(filter, $event.target.checked)"
-        />
-        <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)"
-        />
-        <Link
-          v-else-if="filter.type === 'Link'"
-          :value="filter.value"
-          :doctype="filter.options"
-          :placeholder="filter.label"
-          @change="(data) => applyQuickFilter(filter, data)"
-        />
-        <component
-          v-else-if="['Date', 'Datetime'].includes(filter.type)"
-          class="border-none"
-          :is="filter.type === 'Date' ? DatePicker : DatetimePicker"
-          :value="filter.value"
-          @change="(v) => applyQuickFilter(filter, v)"
-          :placeholder="filter.label"
-        />
-        <TextInput
-          v-else
-          :value="filter.value"
-          type="text"
-          :placeholder="filter.label"
-          :debounce="500"
-          @input.stop="applyQuickFilter(filter, $event.target.value)"
+        <QuickFilterField
+          :filter="filter"
+          @applyQuickFilter="(f, v) => applyQuickFilter(f, v)"
         />
       </div>
     </FadedScrollableDiv>
@@ -247,9 +212,7 @@
   </Dialog>
 </template>
 <script setup>
-import DatePicker from '@/components/Controls/DatePicker.vue'
-import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
-import Link from '@/components/Controls/Link.vue'
+import QuickFilterField from '@/components/QuickFilterField.vue'
 import RefreshIcon from '@/components/Icons/RefreshIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DuplicateIcon from '@/components/Icons/DuplicateIcon.vue'
@@ -264,13 +227,7 @@ import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
 import { isEmoji } from '@/utils'
-import {
-  createResource,
-  Dropdown,
-  call,
-  FeatherIcon,
-  TextInput,
-} from 'frappe-ui'
+import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
 import { computed, ref, onMounted, watch, h } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDebounceFn } from '@vueuse/core'