Merge pull request #2089 from amit-webkul/lookup

🪶  (Add new) feature in the lookup component.

Author: devansh-webkul

packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php

@@ -144,6 +144,7 @@ class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
                             <v-lookup-component
                                 :attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
                                 :value='@json($lookUpEntityData)'
+                                can-add-new="true"
                             >
                                 <x-admin::form.control-group.control
                                     type="text"

packages/Webkul/Admin/src/Resources/views/components/attributes/edit/index.blade.php

@@ -37,6 +37,7 @@
             :attribute="$attribute"
             :value="$value"
             :validations="$validations"
+            can-add-new="true"
         />
 
         @break

packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php

@@ -7,6 +7,7 @@
         :attribute="{{ json_encode($attribute) }}"
         :validations="'{{ $validations }}'"
         :value="{{ json_encode($lookUpEntityData)}}"
+        can-add-new="{{ $canAddNew ?? false }}"
     >
         <div class="relative inline-block w-full">
             <!-- Input Container -->
@@ -28,21 +29,28 @@
         type="text/x-template"
         id="v-lookup-component-template"
     >
-        <div class="relative">
+        <div
+            class="relative"
+            ref="lookup"
+        >
             <div
                 class="relative inline-block w-full"
                 @click="toggle"
             >
                 <!-- Input Container -->
                 <div class="relative flex items-center justify-between rounded border border-gray-200 p-2 hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:text-gray-300">
                     <!-- Selected Item or Placeholder Text -->
-                    @{{ selectedItem ? selectedItem : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
-                    
+                    <span 
+                        class="overflow-hidden text-ellipsis"
+                        :title="selectedItem?.name"
+                    >
+                        @{{ selectedItem?.name !== "" ? selectedItem?.name : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
+                    </span>
                     <!-- Icons Container -->
                     <div class="flex items-center gap-2">
                         <!-- Close Icon -->
                         <i 
-                            v-if="entityId && ! isSearching"
+                            v-if="(selectedItem?.name) && ! isSearching"
                             class="icon-cross-large cursor-pointer text-2xl text-gray-600"
                             @click="remove"
                         ></i>
@@ -60,9 +68,10 @@ class="text-2xl text-gray-600"
             <input
                 type="hidden"
                 :name="attribute['code']"
-                v-model="entityId"
+                v-model="selectedItem.id"
             />
-            
+
+            <!-- Popup Box -->
             <div 
                 v-if="showPopup" 
                 class="absolute top-full z-10 mt-1 flex w-full origin-top transform flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg transition-transform dark:border-gray-900 dark:bg-gray-800"
@@ -94,22 +103,31 @@ class="relative"
 
                 <!-- Results List -->
                 <ul class="max-h-40 divide-y divide-gray-100 overflow-y-auto">
-                    <template v-for="result in searchedResults"> 
+                    <li
+                        v-for="item in filteredResults"
+                        :key="item.id"
+                        class="flex cursor-pointer gap-2 p-2 transition-colors hover:bg-blue-100 dark:text-gray-300 dark:hover:bg-gray-900"
+                        @click="handleResult(result)"
+                    >
+                        <!-- Entity Name -->
+                        <span>@{{ item.name }}</span>
+                    </li>                       
+
+                    <template v-if="filteredResults.length === 0">
+                        <li class="px-4 py-2 text-center text-gray-500">
+                            @lang('admin::app.components.attributes.lookup.no-result-found')
+                        </li>
+
                         <li
-                            class="flex cursor-pointer gap-2 p-2 transition-colors hover:bg-blue-100 dark:text-gray-300 dark:hover:bg-gray-900"
-                            @click="handleResult(result)"
+                            v-if="searchTerm.length > 2 && canAddNew"
+                            @click="handleResult({ id: '', name: searchTerm })"
+                            class="cursor-pointer border-t border-gray-800 px-4 py-2 text-gray-500 hover:bg-brandColor hover:text-white dark:border-gray-300 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
                         >
-                            <!-- Entity Name -->
-                            <span>@{{ result.name }}</span>
-                        </li>                       
+                            <i class="icon-add text-md"></i>
+
+                            @lang('admin::app.components.lookup.add-as-new')
+                        </li>
                     </template>
-                
-                    <li 
-                        v-if="searchedResults.length === 0"
-                        class="px-4 py-2 text-center text-gray-500"
-                    >
-                        @lang('admin::app.components.attributes.lookup.no-result-found')
-                    </li>
                 </ul>
             </div>
         </div>
@@ -119,7 +137,7 @@ class="px-4 py-2 text-center text-gray-500"
         app.component('v-lookup-component', {
             template: '#v-lookup-component-template',
 
-            props: ['validations', 'attribute', 'value'],
+            props: ['validations', 'attribute', 'value', 'canAddNew'],
 
             data() {
                 return {
@@ -129,16 +147,25 @@ class="px-4 py-2 text-center text-gray-500"
 
                     searchedResults: [],
 
-                    selectedItem: null,
-
-                    entityId: null,
+                    selectedItem: {
+                        id: '',
+                        name: ''
+                    },
 
                     searchRoute: `{{ route('admin.settings.attributes.lookup') }}/${this.attribute.lookup_type}`,
 
                     isSearching: false,
                 };
             },
 
+            mounted() {
+                if (this.value) {
+                    this.getLookUpEntity();
+                }
+
+                window.addEventListener('click', this.handleFocusOut);
+            },
+
             watch: {
                 searchTerm(newVal, oldVal) {
                     this.search();
@@ -151,16 +178,17 @@ class="px-4 py-2 text-center text-gray-500"
                 },
             },
 
-            mounted() {
-                if (this.value) {
-                    this.getLookUpEntity();
+            computed: {
+                /**
+                 * Filter the searchedResults based on the search query.
+                 * 
+                 * @return {Array}
+                 */
+                filteredResults() {
+                    return this.searchedResults.filter(item => 
+                        item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
+                    );
                 }
-
-                window.addEventListener('click', this.handleFocusOut);
-            },
-
-            beforeDestroy() {
-                window.removeEventListener('click', this.handleFocusOut);
             },
 
             methods: {
@@ -176,6 +204,8 @@ class="px-4 py-2 text-center text-gray-500"
                     if (this.searchTerm.length <= 2) {
                         this.searchedResults = [];
 
+                        this.isSearching = false;
+
                         return;
                     }
 
@@ -198,41 +228,37 @@ class="px-4 py-2 text-center text-gray-500"
                         .then (response => {
                             const [result] = response.data;
 
-                            this.entityId = result.id;
-
-                            this.selectedItem = result.name;
+                            this.selectedItem = result;
                         })
                         .catch (error => {});
                 },
 
                 handleResult(result) {
-                    this.showPopup = ! this.showPopup;
+                    this.showPopup = false;
                     
-                    this.entityId = result.id;
-
-                    this.selectedItem = result.name;
-
-                    this.searchTerm = "";
+                    this.selectedItem = result;
 
-                    this.searchedResults = [];
+                    this.searchTerm = '';
 
                     this.$emit('lookup-added', result);
                 },
 
                 handleFocusOut(e) {
-                    if (! this.$el.contains(e.target)) {
+                    const lookup = this.$refs.lookup;
+
+                    if (
+                        lookup && 
+                        ! lookup.contains(event.target)
+                    ) {
                         this.showPopup = false;
                     }
                 },
 
                 remove() {
-                    this.entityId = null;
-
-                    this.selectedItem = null;
-
-                    this.searchTerm = '';
-
-                    this.searchedResults = [];
+                    this.selectedItem = {
+                        id: '',
+                        name: ''
+                    };
 
                     this.$emit('lookup-removed');
                 },

packages/Webkul/Admin/src/Resources/views/leads/common/contact.blade.php

@@ -87,6 +87,7 @@
             <v-lookup-component
                 :attribute='@json($organizationAttribute)'
                 :value="person.organization"
+                can-add-new="true"
             ></v-lookup-component>
         </x-admin::form.control-group>
     </script>

packages/Webkul/Admin/src/Resources/views/quotes/create.blade.php

@@ -183,6 +183,7 @@ class="flex flex-col gap-4"
                                     <v-lookup-component
                                         :attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
                                         :value='@json($lookUpEntityData)'
+                                        can-add-new="true"
                                     ></v-lookup-component>
                                 </x-admin::form.control-group>
                             </div>

packages/Webkul/Admin/src/Resources/views/quotes/edit.blade.php

@@ -175,6 +175,7 @@ class="flex flex-col gap-4"
                                     <v-lookup-component
                                         :attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
                                         :value='@json($lookUpEntityData)'
+                                        can-add-new="true"
                                     ></v-lookup-component>
                                 </x-admin::form.control-group>
                             </div>

packages/Webkul/Admin/src/Resources/views/settings/workflows/create.blade.php

@@ -492,6 +492,7 @@ class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1
                                         :attribute="{'code': 'conditions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
                                         validations="required|email"
                                         :data="condition.value"
+                                        can-add-new="true"
                                     ></v-lookup-component>
                                 </div>
                             </template>
@@ -728,6 +729,7 @@ class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-
                                                     :attribute="{'code': 'actions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
                                                     validations="required|email"
                                                     :data="action.value"
+                                                    can-add-new="true"
                                                 ></v-lookup-component>
                                             </div>
                                         </template>

packages/Webkul/Admin/src/Resources/views/settings/workflows/edit.blade.php

@@ -495,6 +495,7 @@ class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1
                                         :attribute="{'code': 'conditions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
                                         validations="required|email"
                                         :data="condition.value"
+                                        can-add-new="true"
                                     ></v-lookup-component>
                                 </div>
                             </template>
@@ -731,6 +732,7 @@ class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-
                                                     :attribute="{'code': 'actions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
                                                     validations="required|email"
                                                     :data="action.value"
+                                                    can-add-new="true"
                                                 ></v-lookup-component>
                                             </div>
                                         </template>