Merge pull request #1270 from Gadha2311/clearoption-linkfield

fix:add clear link to reset searchable field input

src/components/Controls/AutoComplete.vue

@@ -57,29 +57,46 @@
           />
         </svg>
 
-        <button
-          v-if="canLink"
-          class="p-0.5 rounded -me1 bg-transparent"
-          @mouseenter="showQuickView = true"
-          @mouseleave="showQuickView = false"
-          @click="routeToLinkedDoc"
-        >
-          <Popover
-            :show-popup="showQuickView"
-            :entry-delay="300"
-            placement="bottom"
+        <div v-if="canLink" class="flex items-center gap-1">
+          <button
+            v-if="value && showClearButton"
+            class="
+              p-0.5
+              rounded
+              bg-transparent
+              text-gray-600
+              hover:text-gray-800
+              dark:text-gray-300 dark:hover:text-gray-100
+              transition-colors
+            "
+            @click.stop.prevent="clearValue"
+            @mousedown.prevent
           >
-            <template #target>
-              <feather-icon
-                name="chevron-right"
-                class="w-4 h-4 text-gray-600 dark:text-gray-400"
-              />
-            </template>
-            <template #content>
-              <QuickView :schema-name="linkSchemaName" :name="value" />
-            </template>
-          </Popover>
-        </button>
+            <feather-icon name="x" class="w-3.5 h-3.5" />
+          </button>
+          <button
+            class="p-0.5 rounded -me1 bg-transparent"
+            @mouseenter="showQuickView = true"
+            @mouseleave="showQuickView = false"
+            @click="routeToLinkedDoc"
+          >
+            <Popover
+              :show-popup="showQuickView"
+              :entry-delay="300"
+              placement="bottom"
+            >
+              <template #target>
+                <feather-icon
+                  name="chevron-right"
+                  class="w-4 h-4 text-gray-600 dark:text-gray-400"
+                />
+              </template>
+              <template #content>
+                <QuickView :schema-name="linkSchemaName" :name="value" />
+              </template>
+            </Popover>
+          </button>
+        </div>
       </div>
     </template>
   </Dropdown>
@@ -179,6 +196,15 @@ export default {
     this.showQuickView = false;
   },
   methods: {
+    clearValue(e) {
+      if (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      this.triggerChange('');
+      this.setLinkValue('');
+    },
     async routeToLinkedDoc() {
       const name = this.value;
       if (!this.linkSchemaName || !name) {
@@ -269,6 +295,9 @@ export default {
       this.$emit('focus', e);
     },
     async onBlur(label) {
+      if (!label && !this.value) {
+        return;
+      }
       if (!label) {
         this.triggerChange('');
         return;

src/components/Controls/Link.vue

@@ -28,6 +28,7 @@ export default {
   },
   props: {
     focusInput: Boolean,
+    showClearButton: Boolean,
   },
   async created() {
     if (this.focusInput) {

src/components/Controls/MultiLabelLink.vue

@@ -28,6 +28,10 @@ export default {
       default: false,
     },
     secondaryLink: String,
+    showClearButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     if (this.value) {

src/pages/POS/ClassicPOS.vue

@@ -98,6 +98,7 @@
               }"
               :border="true"
               :value="itemSearchTerm"
+              :show-clear-button="true"
               @keyup.enter="(item) =>
                   emitEvent('handleItemSearch', item.target.value as string, true)
               "
@@ -113,6 +114,7 @@
                 target: 'ItemGroup',
               }"
               :border="true"
+              :show-clear-button="true"
               :value="selectedItemGroup"
               @change="(group: string) => emitEvent('setItemGroup',group)"
             />
@@ -167,6 +169,7 @@
               :border="true"
               :value="sinvDoc?.party"
               :df="sinvDoc?.fieldMap.party"
+              :show-clear-button="true"
               @change="(value:string) => $emit('setCustomer',value)"
             />