Skip to content

Commit 173d61c

Browse files
devansh-webkuldevansh-webkul
authored
Merge pull request #2089 from amit-webkul/lookup
🪶 (Add new) feature in the lookup component.
2 parents f86a465 + 5661723 commit 173d61c

File tree

8 files changed

+85
-50
lines changed

8 files changed

+85
-50
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
144144
<v-lookup-component
145145
:attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
146146
:value='@json($lookUpEntityData)'
147+
can-add-new="true"
147148
>
148149
<x-admin::form.control-group.control
149150
type="text"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
:attribute="$attribute"
3838
:value="$value"
3939
:validations="$validations"
40+
can-add-new="true"
4041
/>
4142

4243
@break

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

Lines changed: 76 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:attribute="{{ json_encode($attribute) }}"
88
:validations="'{{ $validations }}'"
99
:value="{{ json_encode($lookUpEntityData)}}"
10+
can-add-new="{{ $canAddNew ?? false }}"
1011
>
1112
<div class="relative inline-block w-full">
1213
<!-- Input Container -->
@@ -28,21 +29,28 @@
2829
type="text/x-template"
2930
id="v-lookup-component-template"
3031
>
31-
<div class="relative">
32+
<div
33+
class="relative"
34+
ref="lookup"
35+
>
3236
<div
3337
class="relative inline-block w-full"
3438
@click="toggle"
3539
>
3640
<!-- Input Container -->
3741
<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">
3842
<!-- Selected Item or Placeholder Text -->
39-
@{{ selectedItem ? selectedItem : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
40-
43+
<span
44+
class="overflow-hidden text-ellipsis"
45+
:title="selectedItem?.name"
46+
>
47+
@{{ selectedItem?.name !== "" ? selectedItem?.name : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
48+
</span>
4149
<!-- Icons Container -->
4250
<div class="flex items-center gap-2">
4351
<!-- Close Icon -->
4452
<i
45-
v-if="entityId && ! isSearching"
53+
v-if="(selectedItem?.name) && ! isSearching"
4654
class="icon-cross-large cursor-pointer text-2xl text-gray-600"
4755
@click="remove"
4856
></i>
@@ -60,9 +68,10 @@ class="text-2xl text-gray-600"
6068
<input
6169
type="hidden"
6270
:name="attribute['code']"
63-
v-model="entityId"
71+
v-model="selectedItem.id"
6472
/>
65-
73+
74+
<!-- Popup Box -->
6675
<div
6776
v-if="showPopup"
6877
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"
94103
95104
<!-- Results List -->
96105
<ul class="max-h-40 divide-y divide-gray-100 overflow-y-auto">
97-
<template v-for="result in searchedResults">
106+
<li
107+
v-for="item in filteredResults"
108+
:key="item.id"
109+
class="flex cursor-pointer gap-2 p-2 transition-colors hover:bg-blue-100 dark:text-gray-300 dark:hover:bg-gray-900"
110+
@click="handleResult(result)"
111+
>
112+
<!-- Entity Name -->
113+
<span>@{{ item.name }}</span>
114+
</li>
115+
116+
<template v-if="filteredResults.length === 0">
117+
<li class="px-4 py-2 text-center text-gray-500">
118+
@lang('admin::app.components.attributes.lookup.no-result-found')
119+
</li>
120+
98121
<li
99-
class="flex cursor-pointer gap-2 p-2 transition-colors hover:bg-blue-100 dark:text-gray-300 dark:hover:bg-gray-900"
100-
@click="handleResult(result)"
122+
v-if="searchTerm.length > 2 && canAddNew"
123+
@click="handleResult({ id: '', name: searchTerm })"
124+
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"
101125
>
102-
<!-- Entity Name -->
103-
<span>@{{ result.name }}</span>
104-
</li>
126+
<i class="icon-add text-md"></i>
127+
128+
@lang('admin::app.components.lookup.add-as-new')
129+
</li>
105130
</template>
106-
107-
<li
108-
v-if="searchedResults.length === 0"
109-
class="px-4 py-2 text-center text-gray-500"
110-
>
111-
@lang('admin::app.components.attributes.lookup.no-result-found')
112-
</li>
113131
</ul>
114132
</div>
115133
</div>
@@ -119,7 +137,7 @@ class="px-4 py-2 text-center text-gray-500"
119137
app.component('v-lookup-component', {
120138
template: '#v-lookup-component-template',
121139
122-
props: ['validations', 'attribute', 'value'],
140+
props: ['validations', 'attribute', 'value', 'canAddNew'],
123141
124142
data() {
125143
return {
@@ -129,16 +147,25 @@ class="px-4 py-2 text-center text-gray-500"
129147
130148
searchedResults: [],
131149
132-
selectedItem: null,
133-
134-
entityId: null,
150+
selectedItem: {
151+
id: '',
152+
name: ''
153+
},
135154
136155
searchRoute: `{{ route('admin.settings.attributes.lookup') }}/${this.attribute.lookup_type}`,
137156
138157
isSearching: false,
139158
};
140159
},
141160
161+
mounted() {
162+
if (this.value) {
163+
this.getLookUpEntity();
164+
}
165+
166+
window.addEventListener('click', this.handleFocusOut);
167+
},
168+
142169
watch: {
143170
searchTerm(newVal, oldVal) {
144171
this.search();
@@ -151,16 +178,17 @@ class="px-4 py-2 text-center text-gray-500"
151178
},
152179
},
153180
154-
mounted() {
155-
if (this.value) {
156-
this.getLookUpEntity();
181+
computed: {
182+
/**
183+
* Filter the searchedResults based on the search query.
184+
*
185+
* @return {Array}
186+
*/
187+
filteredResults() {
188+
return this.searchedResults.filter(item =>
189+
item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
190+
);
157191
}
158-
159-
window.addEventListener('click', this.handleFocusOut);
160-
},
161-
162-
beforeDestroy() {
163-
window.removeEventListener('click', this.handleFocusOut);
164192
},
165193
166194
methods: {
@@ -176,6 +204,8 @@ class="px-4 py-2 text-center text-gray-500"
176204
if (this.searchTerm.length <= 2) {
177205
this.searchedResults = [];
178206
207+
this.isSearching = false;
208+
179209
return;
180210
}
181211
@@ -198,41 +228,37 @@ class="px-4 py-2 text-center text-gray-500"
198228
.then (response => {
199229
const [result] = response.data;
200230
201-
this.entityId = result.id;
202-
203-
this.selectedItem = result.name;
231+
this.selectedItem = result;
204232
})
205233
.catch (error => {});
206234
},
207235
208236
handleResult(result) {
209-
this.showPopup = ! this.showPopup;
237+
this.showPopup = false;
210238
211-
this.entityId = result.id;
212-
213-
this.selectedItem = result.name;
214-
215-
this.searchTerm = "";
239+
this.selectedItem = result;
216240
217-
this.searchedResults = [];
241+
this.searchTerm = '';
218242
219243
this.$emit('lookup-added', result);
220244
},
221245
222246
handleFocusOut(e) {
223-
if (! this.$el.contains(e.target)) {
247+
const lookup = this.$refs.lookup;
248+
249+
if (
250+
lookup &&
251+
! lookup.contains(event.target)
252+
) {
224253
this.showPopup = false;
225254
}
226255
},
227256
228257
remove() {
229-
this.entityId = null;
230-
231-
this.selectedItem = null;
232-
233-
this.searchTerm = '';
234-
235-
this.searchedResults = [];
258+
this.selectedItem = {
259+
id: '',
260+
name: ''
261+
};
236262
237263
this.$emit('lookup-removed');
238264
},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
<v-lookup-component
8888
:attribute='@json($organizationAttribute)'
8989
:value="person.organization"
90+
can-add-new="true"
9091
></v-lookup-component>
9192
</x-admin::form.control-group>
9293
</script>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ class="flex flex-col gap-4"
183183
<v-lookup-component
184184
:attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
185185
:value='@json($lookUpEntityData)'
186+
can-add-new="true"
186187
></v-lookup-component>
187188
</x-admin::form.control-group>
188189
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ class="flex flex-col gap-4"
175175
<v-lookup-component
176176
:attribute="{'code': 'lead_id', 'name': 'Lead', 'lookup_type': 'leads'}"
177177
:value='@json($lookUpEntityData)'
178+
can-add-new="true"
178179
></v-lookup-component>
179180
</x-admin::form.control-group>
180181
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,7 @@ class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1
492492
:attribute="{'code': 'conditions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
493493
validations="required|email"
494494
:data="condition.value"
495+
can-add-new="true"
495496
></v-lookup-component>
496497
</div>
497498
</template>
@@ -728,6 +729,7 @@ class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-
728729
:attribute="{'code': 'actions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
729730
validations="required|email"
730731
:data="action.value"
732+
can-add-new="true"
731733
></v-lookup-component>
732734
</div>
733735
</template>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,7 @@ class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1
495495
:attribute="{'code': 'conditions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
496496
validations="required|email"
497497
:data="condition.value"
498+
can-add-new="true"
498499
></v-lookup-component>
499500
</div>
500501
</template>
@@ -731,6 +732,7 @@ class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-
731732
:attribute="{'code': 'actions[' + index + '][value]', 'name': 'Email', 'lookup_type': matchedAttribute.lookup_type}"
732733
validations="required|email"
733734
:data="action.value"
735+
can-add-new="true"
734736
></v-lookup-component>
735737
</div>
736738
</template>

0 commit comments

Comments
 (0)