Mager updated
This commit is contained in:
Simon Pocrnjič
@@ -1,72 +1,91 @@
|
||||
<script setup>
|
||||
import { FwbInput, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
|
||||
import { FwbInput } 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';
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
css: String
|
||||
open: { type: Boolean, default: false },
|
||||
});
|
||||
const emit = defineEmits(['update:open']);
|
||||
|
||||
const query = ref('');
|
||||
const result = ref([]);
|
||||
const result = ref({ clients: [], client_cases: [] });
|
||||
const isOpen = ref(props.open);
|
||||
|
||||
watch(() => props.open, (v) => { isOpen.value = v; if (v) focusInput(); });
|
||||
watch(isOpen, (v) => emit('update:open', v));
|
||||
|
||||
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(){
|
||||
if (!value || !value.trim()) { result.value = { clients: [], client_cases: [] }; return; }
|
||||
axios.get(route('search'), { params: { query: value, limit: 8, tag: '' } })
|
||||
.then(res => { result.value = res.data; })
|
||||
.catch(() => {})
|
||||
}, 250);
|
||||
|
||||
});
|
||||
}, 300);
|
||||
|
||||
watch(
|
||||
() => query.value,
|
||||
(val) => searching(val)
|
||||
);
|
||||
watch(() => query.value, (val) => searching(val));
|
||||
|
||||
const inputWrap = ref(null);
|
||||
const focusInput = () => setTimeout(() => inputWrap.value?.querySelector('input')?.focus(), 0);
|
||||
|
||||
function onKeydown(e) {
|
||||
if (e.key === 'Escape') { isOpen.value = false; }
|
||||
}
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown));
|
||||
onUnmounted(() => window.removeEventListener('keydown', onKeydown));
|
||||
</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>
|
||||
<teleport to="body">
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-black/30" @click="isOpen = false"></div>
|
||||
|
||||
</fwb-input>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">Naročnik</div>
|
||||
<!-- Dialog (click outside closes) -->
|
||||
<div class="absolute inset-0 flex items-start sm:items-start justify-center p-4 pt-8 sm:pt-16" @click.self="isOpen = false">
|
||||
<div class="w-full max-w-2xl bg-white rounded-lg shadow-xl overflow-hidden">
|
||||
<div class="p-3 border-b" ref="inputWrap">
|
||||
<FwbInput v-model="query" placeholder="Išči po naročnikih in primerih..." size="md" class="w-full">
|
||||
<template #prefix>
|
||||
<SearchIcon />
|
||||
</template>
|
||||
</FwbInput>
|
||||
</div>
|
||||
<div class="max-h-[60vh] overflow-auto">
|
||||
<div v-if="!query" class="p-6 text-sm text-gray-500">Začni tipkati za iskanje. Namig: pritisni Ctrl+K kjerkoli.</div>
|
||||
<div v-else>
|
||||
<div class="px-4 py-2 text-xs text-gray-500">Naročniki</div>
|
||||
<ul>
|
||||
<li v-for="client in result.clients" :key="client.client_uuid">
|
||||
<Link :href="route('client.show', {uuid: client.client_uuid})" class="block px-4 py-2 hover:bg-gray-50" @click="isOpen=false">
|
||||
{{ client.full_name }}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<div class="px-4 py-2 mt-2 text-xs text-gray-500">Primeri</div>
|
||||
<ul>
|
||||
<li v-for="clientcase in result.client_cases" :key="clientcase.case_uuid">
|
||||
<Link :href="route('clientCase.show', {uuid: clientcase.case_uuid})" class="block px-4 py-2 hover:bg-gray-50" @click="isOpen=false">
|
||||
{{ clientcase.full_name }}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
|
||||
<!-- no inline trigger here; AppLayout provides the button and opens this modal -->
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity .15s; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user