From 7878a405d3aef8da2da421b837babe82e4b0033b Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Wed, 12 Jan 2022 15:04:16 +0530
Subject: [PATCH] fix(ux): allow custom empty  messages in autocomp - set
 custom message for State

---
 models/doctype/Address/Address.js        |  6 ++++++
 src/components/Controls/AutoComplete.vue |  2 +-
 src/components/Dropdown.vue              | 22 ++++++++++++++++++++--
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/models/doctype/Address/Address.js b/models/doctype/Address/Address.js
index 585cf2a0..bc993dff 100644
--- a/models/doctype/Address/Address.js
+++ b/models/doctype/Address/Address.js
@@ -50,6 +50,12 @@ export default {
       label: 'State',
       placeholder: 'State',
       fieldtype: 'AutoComplete',
+      emptyMessage: (doc) => {
+        if (doc.country) {
+          return 'Enter State';
+        }
+        return 'Enter Country to load States';
+      },
       getList: getStates,
     },
     {
diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 671cc81e..1e2955ad 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :items="suggestions" :is-loading="isLoading">
+  <Dropdown :items="suggestions" :is-loading="isLoading" :df="df" :doc="doc">
     <template
       v-slot="{
         toggleDropdown,
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 57244539..89b3e7af 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -21,8 +21,11 @@
         <div v-if="isLoading" class="p-2 text-gray-600 italic">
           {{ _('Loading...') }}
         </div>
-        <div v-if="!isLoading && dropdownItems.length === 0" class="p-2 text-gray-600 italic">
-          {{ _('Empty') }}
+        <div
+          v-if="!isLoading && dropdownItems.length === 0"
+          class="p-2 text-gray-600 italic"
+        >
+          {{ getEmptyMessage() }}
         </div>
         <template v-else>
           <div v-for="d in dropdownItems" :key="d.label">
@@ -92,6 +95,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    df: {
+      default: null,
+    },
+    doc: {
+      default: null,
+    },
   },
   components: {
     Popover,
@@ -156,6 +165,15 @@ export default {
     },
   },
   methods: {
+    getEmptyMessage() {
+      const { emptyMessage } = this.df ?? {};
+      if (typeof emptyMessage === 'function') {
+        return _(emptyMessage(this.doc));
+      } else if (emptyMessage) {
+        return _(emptyMessage);
+      }
+      return _('Empty');
+    },
     selectItem(d) {
       if (d.action) {
         d.action();