changes, global search (clients, cleintCases)

resources/js/Layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { Head, Link, router, usePage } from '@inertiajs/vue3';
 import ApplicationMark from '@/Components/ApplicationMark.vue';
 import Banner from '@/Components/Banner.vue';
@@ -8,16 +8,66 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import Breadcrumbs from '@/Components/Breadcrumbs.vue';
+import axios from 'axios';
+import { debounce } from 'lodash';
+import { FwbButton, FwbInput, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import { AdjustmentIcon, SearchIcon } from '@/Utilities/Icons';
 
 const props = defineProps({
     title: String,
 });
 
 const showingNavigationDropdown = ref(false);
+const querySearchDiv = ref(null);
+
+const querySearch = ref('');
+
+const querySearchList = ref(true);
+const querySearchResult = ref([]);
 
 const logout = () => {
     router.post(route('logout'));
 };
+
+const setRoute = (index) => {
+    return route('client.show', index);
+}
+
+const onSearchFocus = () => {
+    if(querySearch.value.length > 0) {
+        querySearchList.value = false;
+    }
+}
+
+const onSearchBlue = () => {
+    setTimeout(() => querySearchList.value = true, 100)
+}
+
+watch(querySearch, debounce((value) => {
+    axios.get(
+        route('search'),
+        { 
+            params: {
+                query: value,
+                limit: 5,
+                tag: ''
+            }
+        }
+    )
+    .then(function(res) {
+        querySearchResult.value = res.data
+        querySearchList.value = false;
+        console.log(res);
+    })
+    .catch(function(error){
+        console.log(error)
+    })
+    .finally(function(){
+
+    });
+}, 300));
+
+
 </script>
 
 <template>
@@ -65,6 +115,42 @@ const logout = () => {
 
                         <div class="hidden sm:flex sm:items-center sm:ms-6">
                             <!-- Settings Dropdown -->
+                            <div>
+                                <fwb-input
+                                    v-model="querySearch"
+                                    placeholder="Iskalnik..."
+                                    size="md"
+                                    @focus="onSearchFocus"
+                                    @blur="onSearchBlue"
+                                >
+                                    <template #prefix>
+                                        <SearchIcon />
+                                    </template>
+
+                                </fwb-input>
+                                <fwb-list-group ref="querySearchDiv" class="absolute" :hidden="querySearchList">
+                                    <fwb-list-group-item>
+                                        <div>
+                                            <p>Naročniki:</p>
+                                            <fwb-list-group>
+                                                <fwb-list-group-item hover v-for="client in querySearchResult.clients">
+                                                    <a :href="route('client.show', {uuid: client.uuid})">{{ client.person.full_name }}</a>
+                                                </fwb-list-group-item>
+                                            </fwb-list-group>
+                                        </div>
+                                    </fwb-list-group-item>
+                                    <fwb-list-group-item>
+                                        <div>
+                                            <p>Primeri:</p>
+                                            <fwb-list-group>
+                                                <fwb-list-group-item hover v-for="clientCase in querySearchResult.client_cases">
+                                                    <a :href="route('clientCase.show', {uuid: clientCase.uuid})">{{ clientCase.person.full_name }}</a>
+                                                </fwb-list-group-item>
+                                            </fwb-list-group>
+                                        </div>
+                                    </fwb-list-group-item>
+                                </fwb-list-group>
+                            </div>
                             <div class="ms-3 relative">
                                 <Dropdown align="right" width="48">
                                     <template #trigger>
@@ -154,7 +240,6 @@ const logout = () => {
                             Nastavitve
                         </ResponsiveNavLink>
                     </div>
-
                     <!-- Responsive Settings Options -->
                     <div class="pt-4 pb-1 border-t border-gray-200">
                         <div class="flex items-center px-4">
@@ -233,11 +318,12 @@ const logout = () => {
             </nav>
 
             <!-- Page Heading -->
-            <header v-if="$slots.header" class="bg-white shadow">
+            <header v-if="$slots.header" class="bg-white shadow ">
                 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                     <Breadcrumbs :breadcrumbs="$page.props.breadcrumbs"></Breadcrumbs>
                     
                 </div>
+                
             </header>
 
             <!-- Page Content -->