Skip to content

Commit

Permalink
Lookup component is done.
Browse files Browse the repository at this point in the history
  • Loading branch information
@suraj-webkul
suraj-webkul committed Jul 16, 2024
1 parent 1652e54 commit 6fbb94f
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 127 deletions.
258 changes: 135 additions & 123 deletions packages/Webkul/Admin/src/Resources/views/common/custom-attributes/edit/lookup.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,167 @@
@if (isset($attribute))
@php
$lookUpEntityData = app('Webkul\Attribute\Repositories\AttributeRepository')
->getLookUpEntity($attribute->lookup_type, old($attribute->code) ?: $value);
@endphp

<lookup-component :attribute='@json($attribute)' :validations="'{{$validations}}'" :data='@json($lookUpEntityData)'></lookup-component>
@endif

@once
@push('scripts')
<script type="text/x-template" id="lookup-component-template">
<div class="lookup-control">
<div class="form-group" style="margin-bottom: 0">
<input
type="text"
:name="attribute['code']"
class="control"
:id="attribute['code']"
:for="attribute['code']"
placeholder="{{ __('admin::app.common.start-typing') }}"
autocomplete="off"
v-model="search_term"
v-validate="validations"
:data-vv-as="attribute['name']"
v-on:keyup="search"
{{-- TODO: need to look into this --}}
@php
$lookUpEntityData = app('Webkul\Attribute\Repositories\AttributeRepository')->getLookUpEntity($attribute->lookup_type, old($attribute->code) ?: $value);
@endphp

<v-lookup-component
:attribute="{{ json_encode($attribute) }}"
:validations="'{{ $validations }}'"
:value="{{ json_encode($lookUpEntityData)}}"
>
<x-admin::form.control-group.control
type="text"
placeholder="@lang('admin::app.common.start-typing')"
/>
</v-lookup-component>

@pushOnce('scripts')
<script
type="text/x-template"
id="v-lookup-component-template"
>
<div class="relative">
<x-admin::form.control-group.control
type="text"
::id="attribute['code']"
::for="attribute['code']"
::name="attribute['code']"
::label="attribute['name']"
placeholder="@lang('admin::app.common.start-typing')"
v-model="searchTerm"
@click="searchTerm.length >= 2 ? isDropdownOpen = true : {}"
@keyup="search"
/>
<input
type="hidden"
:name="attribute['code']"
v-model="entityId"
/>
<div
class="absolute top-10 z-10 w-full rounded-lg border bg-white shadow-[0px_0px_0px_0px_rgba(0,0,0,0.10),0px_1px_3px_0px_rgba(0,0,0,0.10),0px_5px_5px_0px_rgba(0,0,0,0.09),0px_12px_7px_0px_rgba(0,0,0,0.05),0px_22px_9px_0px_rgba(0,0,0,0.01),0px_34px_9px_0px_rgba(0,0,0,0.00)] dark:border-gray-800 dark:bg-gray-900"
v-if="isDropdownOpen"
>
<div class="grid max-h-[400px] overflow-y-auto">
<template v-for="result in searchedResults">
<span
class="cursor-pointer border-b p-4 text-sm font-semibold text-gray-600 last:border-b-0 hover:bg-gray-100 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-950"
@click="handleResult(result)"
>
@{{ result.name }}
</span>
</template>
<div
class="p-4 text-sm font-semibold text-gray-600 dark:text-gray-300"
v-if="searchedResults.length === 0"
>

<input
type="hidden"
:name="attribute['code']"
v-model="entity_id"
v-validate="validations"
:data-vv-as="attribute['name']"
/>

<div class="lookup-results" v-if="state == ''">
<ul>
<li v-for='(result, index) in results' @click="addLookUp(result)">
<span>@{{ result.name }}</span>
</li>

<li v-if='! results.length && search_term.length && ! is_searching'>
<span>{{ __('admin::app.common.no-result-found') }}</span>
</li>
</ul>
@lang('No result found')
</div>

<i class="icon loader-active-icon" v-if="is_searching"></i>
</div>
</div>
</script>

<script type="module">
app.component('lookup-component', {
template: '#lookup-component-template',
props: ['validations', 'attribute', 'searchRoute', 'data'],
</div>
</script>

inject: ['$validator'],
<script type="module">
app.component('v-lookup-component', {
template: '#v-lookup-component-template',
data: function () {
return {
search_term: this.data ? this.data['name'] : '',
props: ['validations', 'attribute', 'src', 'value'],
entity_id: this.data ? this.data['id'] : '',
data() {
return {
isDropdownOpen: false,
is_searching: false,
searchTerm: '',
state: this.data ? 'old' : '',
searchedResults: [],
results: [],
entityId: null,
search_route: this.searchRoute ?? `{{ route('admin.settings.attributes.lookup') }}/${this.attribute.lookup_type}`,
}
},
watch: {
data: function(newVal, oldVal) {
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
this.search_term = newVal ? newVal['name'] : '';
searchRoute: this.src ?? `{{ route('admin.settings.attributes.lookup') }}/${this.attribute.lookup_type}`,
};
},
this.entity_id = newVal ? newVal['id'] : '';
this.state = newVal ? 'old' : '';
}
}
},
watch: {
value(newValue, oldValue) {
if (
JSON.stringify(newValue)
!== JSON.stringify(oldValue)
) {
this.searchTerm = newValue ? newValue['name'] : '';
mounted: function () {
if (this.data && typeof this.data == 'string') {
this.getLookUpEntity();
this.entityId = newValue ? newValue['id'] : '';
}
},
}
},
methods: {
// search: debounce(function () {
// this.state = '';
mounted() {
if (this.value) {
this.getLookUpEntity();
}
// this.entity_id = null;
window.addEventListener('click', this.handleFocusOut);
},
// this.is_searching = true;
beforeDestroy() {
window.removeEventListener('click', this.handleFocusOut);
},
// if (this.search_term.length < 2) {
// this.results = [];
methods: {
search(event) {
const searchTerm = event.target.value;
// this.is_searching = false;
if (searchTerm <= 1) {
this.searchedResults = [];
// return;
// }
this.isDropdownOpen = false;
// this.$http.get(this.search_route, {params: {query: this.search_term}})
// .then (response => {
// this.results = response.data;
return;
}
// this.is_searching = false;
// })
// .catch (error => {
// this.is_searching = false;
// })
// }, 500),
this.isDropdownOpen = true;
addLookUp: function(result) {
this.state = 'old';
this.$axios.get(this.searchRoute, {
params: { query: searchTerm }
})
.then (response => {
this.searchedResults = response.data;
})
.catch (error => this.isDropdownOpen = false);
},
this.entity_id = result['id'];
getLookUpEntity() {
this.$axios.get(this.searchRoute, {
params: { query: this.value.name }
})
.then (response => {
const [result] = response.data;
this.search_term = result['name'];
this.entityId = result.id;
eventBus.$emit('lookup-added', result);
},
this.searchTerm = result.name;
})
.catch (error => {});
},
createNew: function() {
this.state = 'new';
handleResult(result) {
this.isDropdownOpen = false;
this.entityId = result.id;
this.entity_id = null;
},
this.searchTerm = result.name;
getLookUpEntity: function() {
this.$http.get("{{ route('admin.settings.attributes.lookup_entity') }}/" + this.attribute.lookup_type, {params: {query: this.data}})
.then (response => {
this.entity_id = response.data['id']
this.$emit('lookup-added', result);
},
this.search_term = response.data['name']
})
.catch (error => {
})
handleFocusOut(e) {
if (! this.$el.contains(e.target)) {
this.isDropdownOpen = false;
}
}
});
</script>
@endpush
@endonce
},
}
});
</script>
@endPushOnce
5 changes: 1 addition & 4 deletions packages/Webkul/Admin/src/Resources/views/components/layouts/sidebar/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ class="fixed top-14 z-[1000] h-full w-[270px] bg-white pt-4 shadow-[0px_8px_10px
<nav class="grid w-full gap-2">
<!-- Navigation Menu -->
@foreach (menu()->getItems('admin') as $menuItem)
<div
class="px-4 group/item {{ $menuItem->isActive() ? 'active' : 'inactive' }}"
onmouseenter="adjustSubMenuPosition(event)"
>
<div class="px-4 group/item {{ $menuItem->isActive() ? 'active' : 'inactive' }}">
<a
href="{{ $menuItem->getUrl() }}"
class="flex gap-2.5 p-1.5 items-center cursor-pointer hover:rounded-lg {{ $menuItem->isActive() == 'active' ? 'bg-blue-600 rounded-lg' : ' hover:bg-gray-100 hover:dark:bg-gray-950' }} peer"
Expand Down

0 comments on commit 6fbb94f

Please sign in to comment.