From 6fbb94f4d79d24b3a09e3d6282eb80edf27c2ab9 Mon Sep 17 00:00:00 2001
From: suraj kashyap <suraj.kashyap370@webkul.in>
Date: Tue, 16 Jul 2024 11:49:25 +0530
Subject: [PATCH] Lookup component is done.

---
 .../custom-attributes/edit/lookup.blade.php   | 258 +++++++++---------
 .../layouts/sidebar/index.blade.php           |   5 +-
 2 files changed, 136 insertions(+), 127 deletions(-)

diff --git a/packages/Webkul/Admin/src/Resources/views/common/custom-attributes/edit/lookup.blade.php b/packages/Webkul/Admin/src/Resources/views/common/custom-attributes/edit/lookup.blade.php
index b712078a5..d56d98cb2 100644
--- a/packages/Webkul/Admin/src/Resources/views/common/custom-attributes/edit/lookup.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/common/custom-attributes/edit/lookup.blade.php
@@ -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
\ No newline at end of file
+                },
+            }
+        });
+    </script>
+@endPushOnce
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/components/layouts/sidebar/index.blade.php b/packages/Webkul/Admin/src/Resources/views/components/layouts/sidebar/index.blade.php
index 4a0b486c0..54e4fcd5e 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/layouts/sidebar/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/layouts/sidebar/index.blade.php
@@ -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"