From 8ba1949d3fe565ac418cd1007d6f4613afa878de Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 18 Jan 2025 13:02:20 +0530
Subject: [PATCH] fix: use fieldname & fieldtype instead of name & type in
 quick filters

---
 crm/api/doc.py                                |  4 ++--
 .../doctype/crm_call_log/crm_call_log.json    |  4 +++-
 frontend/src/components/QuickFilterField.vue  | 10 +++++-----
 frontend/src/components/ViewControls.vue      | 16 ++++++++-------
 .../src/components/frappe-ui/Autocomplete.vue | 20 ++++++++++++-------
 5 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/crm/api/doc.py b/crm/api/doc.py
index 4001fa7e..844bdd98 100644
--- a/crm/api/doc.py
+++ b/crm/api/doc.py
@@ -189,8 +189,8 @@ def get_quick_filters(doctype: str):
 		quick_filters.append(
 			{
 				"label": _(field.label),
-				"name": field.fieldname,
-				"type": field.fieldtype,
+				"fieldname": field.fieldname,
+				"fieldtype": field.fieldtype,
 				"options": options,
 			}
 		)
diff --git a/crm/fcrm/doctype/crm_call_log/crm_call_log.json b/crm/fcrm/doctype/crm_call_log/crm_call_log.json
index c13c6cc7..96416bf9 100644
--- a/crm/fcrm/doctype/crm_call_log/crm_call_log.json
+++ b/crm/fcrm/doctype/crm_call_log/crm_call_log.json
@@ -142,6 +142,8 @@
   {
    "fieldname": "telephony_medium",
    "fieldtype": "Select",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Telephony Medium",
    "options": "\nManual\nTwilio\nExotel"
   },
@@ -152,7 +154,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-01-11 16:27:56.992950",
+ "modified": "2025-01-17 21:46:01.558377",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Call Log",
diff --git a/frontend/src/components/QuickFilterField.vue b/frontend/src/components/QuickFilterField.vue
index a02f67db..84631b4b 100644
--- a/frontend/src/components/QuickFilterField.vue
+++ b/frontend/src/components/QuickFilterField.vue
@@ -1,13 +1,13 @@
 <template>
   <FormControl
-    v-if="filter.type == 'Check'"
+    v-if="filter.fieldtype == 'Check'"
     :label="filter.label"
     type="checkbox"
     v-model="filter.value"
     @change.stop="updateFilter(filter, $event.target.checked)"
   />
   <FormControl
-    v-else-if="filter.type === 'Select'"
+    v-else-if="filter.fieldtype === 'Select'"
     class="form-control cursor-pointer [&_select]:cursor-pointer"
     type="select"
     v-model="filter.value"
@@ -16,16 +16,16 @@
     @change.stop="updateFilter(filter, $event.target.value)"
   />
   <Link
-    v-else-if="filter.type === 'Link'"
+    v-else-if="filter.fieldtype === 'Link'"
     :value="filter.value"
     :doctype="filter.options"
     :placeholder="filter.label"
     @change="(data) => updateFilter(filter, data)"
   />
   <component
-    v-else-if="['Date', 'Datetime'].includes(filter.type)"
+    v-else-if="['Date', 'Datetime'].includes(filter.fieldtype)"
     class="border-none"
-    :is="filter.type === 'Date' ? DatePicker : DateTimePicker"
+    :is="filter.fieldtype === 'Date' ? DatePicker : DateTimePicker"
     :value="filter.value"
     @change="(v) => updateFilter(filter, v)"
     :placeholder="filter.label"
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 0ae8c09a..30d4f849 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -65,7 +65,7 @@
     >
       <div
         v-for="filter in quickFilterList"
-        :key="filter.name"
+        :key="filter.fieldname"
         class="m-1 min-w-36"
       >
         <QuickFilterField
@@ -595,13 +595,13 @@ const quickFilterList = computed(() => {
   }
 
   filters.forEach((filter) => {
-    filter['value'] = filter.type == 'Check' ? false : ''
-    if (list.value.params?.filters[filter.name]) {
-      let value = list.value.params.filters[filter.name]
+    filter['value'] = filter.fieldtype == 'Check' ? false : ''
+    if (list.value.params?.filters[filter.fieldname]) {
+      let value = list.value.params.filters[filter.fieldname]
       if (Array.isArray(value)) {
         if (
           (['Check', 'Select', 'Link', 'Date', 'Datetime'].includes(
-            filter.type,
+            filter.fieldtype,
           ) &&
             value[0]?.toLowerCase() == 'like') ||
           value[0]?.toLowerCase() != 'like'
@@ -626,9 +626,11 @@ const quickFilters = createResource({
 
 function applyQuickFilter(filter, value) {
   let filters = { ...list.value.params.filters }
-  let field = filter.name
+  let field = filter.fieldname
   if (value) {
-    if (['Check', 'Select', 'Link', 'Date', 'Datetime'].includes(filter.type)) {
+    if (
+      ['Check', 'Select', 'Link', 'Date', 'Datetime'].includes(filter.fieldtype)
+    ) {
       filters[field] = value
     } else {
       filters[field] = ['LIKE', `%${value}%`]
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index e5842171..3c7371f8 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -14,22 +14,28 @@
         >
           <div class="w-full">
             <button
-              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
+              class="relative flex h-7 w-full items-center justify-between gap-2 rounded bg-surface-gray-2 px-2 py-1 transition-colors hover:bg-surface-gray-3 border border-transparent focus:border-outline-gray-4 focus:outline-none focus:ring-2 focus:ring-outline-gray-3"
               :class="inputClasses"
               @click="() => togglePopover()"
             >
-              <div class="flex text-base leading-5 items-center truncate">
+              <div
+                v-if="selectedValue"
+                class="flex text-base leading-5 items-center truncate"
+              >
                 <slot name="prefix" />
-                <span v-if="selectedValue" class="truncate">
+                <span class="truncate">
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span v-else class="text-ink-gray-4 truncate">
-                  {{ placeholder || '' }}
-                </span>
+              </div>
+              <div
+                v-else
+                class="absolute text-ink-gray-4 text-left truncate w-full pr-7"
+              >
+                {{ placeholder || '' }}
               </div>
               <FeatherIcon
                 name="chevron-down"
-                class="h-4 w-4 text-ink-gray-5"
+                class="absolute h-4 w-4 text-ink-gray-5 right-2"
                 aria-hidden="true"
               />
             </button>