changes
This commit is contained in:
Simon Pocrnjič
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Head, Link, router, usePage } from '@inertiajs/vue3';
|
||||
import ApplicationMark from '@/Components/ApplicationMark.vue';
|
||||
import Banner from '@/Components/Banner.vue';
|
||||
@@ -8,66 +8,19 @@ 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';
|
||||
import GlobalSearch from './Partials/GlobalSearch.vue';
|
||||
|
||||
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 onSearchFocus = () => {
|
||||
//if(querySearch.value.length > 0) {
|
||||
querySearchList.value = false;
|
||||
//}
|
||||
}
|
||||
|
||||
const onSearchBlue = () => {
|
||||
setTimeout(() => querySearchList.value = true, 300)
|
||||
}
|
||||
|
||||
const searchDebounce = 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);
|
||||
|
||||
watch(querySearch, (value) => {
|
||||
searchDebounce(value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -111,47 +64,14 @@ watch(querySearch, (value) => {
|
||||
Nastavitve
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="hidden space-x-8 sm:-my-px sm:items-center sm:ms-10 sm:flex">
|
||||
<GlobalSearch />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
@input.stop="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchIcon />
|
||||
</template>
|
||||
|
||||
</fwb-input>
|
||||
<fwb-list-group ref="querySearchDiv" class="absolute" :class="(querySearchList) ? 'hidden' : ''">
|
||||
<fwb-list-group-item class="px-0 flex flex-col">
|
||||
|
||||
<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.client_uuid})">{{ client.full_name }}</a>
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
|
||||
</fwb-list-group-item>
|
||||
<fwb-list-group-item class="px-0 flex flex-col">
|
||||
|
||||
<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.case_uuid})">{{ clientCase.full_name }}</a>
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
</div>
|
||||
|
||||
<div class="ms-3 relative">
|
||||
<Dropdown align="right" width="48">
|
||||
<template #trigger>
|
||||
@@ -314,50 +234,13 @@ watch(querySearch, (value) => {
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<!--div class="px-2 w-full relative">
|
||||
<fwb-input
|
||||
v-model="querySearch"
|
||||
placeholder="Iskalnik..."
|
||||
size="md"
|
||||
@focus="onSearchFocus"
|
||||
@blur="onSearchBlue"
|
||||
@input.stop="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchIcon />
|
||||
</template>
|
||||
|
||||
</fwb-input>
|
||||
<fwb-list-group ref="querySearchDiv" class="absolute px-2 w-full mx-auto" :hidden="querySearchList">
|
||||
<fwb-list-group-item class="px-0 flex flex-col">
|
||||
|
||||
<p>Naročniki:</p>
|
||||
<fwb-list-group class="w-full">
|
||||
<fwb-list-group-item hover v-for="client in querySearchResult.clients">
|
||||
<a :href="route('client.show', {uuid: client.client_uuid})">{{ client.full_name }}</a>
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
|
||||
</fwb-list-group-item>
|
||||
<fwb-list-group-item class="px-0 flex flex-col">
|
||||
|
||||
<p>Primeri:</p>
|
||||
<fwb-list-group class="w-full">
|
||||
<fwb-list-group-item hover v-for="clientCase in querySearchResult.client_cases">
|
||||
<a :href="route('clientCase.show', {uuid: clientCase.case_uuid})">{{ clientCase.full_name }}</a>
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
|
||||
</fwb-list-group-item>
|
||||
</fwb-list-group>
|
||||
</div-->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Heading -->
|
||||
<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">
|
||||
<header v-if="$slots.header" class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
||||
<Breadcrumbs :breadcrumbs="$page.props.breadcrumbs"></Breadcrumbs>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import { FwbInput, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
|
||||
import axios from 'axios';
|
||||
import { debounce } from 'lodash';
|
||||
import { SearchIcon } from '@/Utilities/Icons';
|
||||
import { ref, watch } from 'vue';
|
||||
import Dropdown from '@/Components/Dropdown.vue';
|
||||
import DropdownLink from '@/Components/DropdownLink.vue';
|
||||
|
||||
const props = defineProps({
|
||||
css: String
|
||||
});
|
||||
|
||||
const query = ref('');
|
||||
const result = ref([]);
|
||||
|
||||
const searching = debounce((value) => {
|
||||
axios.get(
|
||||
route('search'),
|
||||
{
|
||||
params: {
|
||||
query: value,
|
||||
limit: 5,
|
||||
tag: ''
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(function(res) {
|
||||
result.value = res.data
|
||||
list.value = false;
|
||||
console.log(res);
|
||||
})
|
||||
.catch(function(error){
|
||||
console.log(error)
|
||||
})
|
||||
.finally(function(){
|
||||
|
||||
});
|
||||
}, 300);
|
||||
|
||||
watch(
|
||||
() => query.value,
|
||||
(val) => searching(val)
|
||||
);
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Dropdown align="left" :contentClasses="['py-1 bg-white lg:w-60']">
|
||||
<template #trigger>
|
||||
<fwb-input
|
||||
v-model="query"
|
||||
placeholder="Iskalnik..."
|
||||
size="sm"
|
||||
class="lg:w-60"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchIcon />
|
||||
</template>
|
||||
|
||||
</fwb-input>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">Naročnik</div>
|
||||
|
||||
<DropdownLink v-for="client in result.clients" :href="route('client.show', {uuid: client.client_uuid})">{{ client.full_name }}</DropdownLink>
|
||||
<div class="border-t border-gray-200" />
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">Cases</div>
|
||||
<DropdownLink v-for="clientcase in result.client_cases" :href="route('clientCase.show', {uuid: clientcase.case_uuid})">{{ clientcase.full_name }}</DropdownLink>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
Reference in New Issue
Block a user