258 lines
9.9 KiB
Vue
258 lines
9.9 KiB
Vue
<script setup>
|
|
import { Input } from "@/Components/ui/input";
|
|
import axios from "axios";
|
|
import { debounce } from "lodash";
|
|
import { SearchIcon } from "@/Utilities/Icons";
|
|
import { onMounted, onUnmounted, ref, watch } from "vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
|
|
const props = defineProps({
|
|
open: { type: Boolean, default: false },
|
|
});
|
|
const emit = defineEmits(["update:open"]);
|
|
|
|
const query = 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) => {
|
|
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);
|
|
|
|
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>
|
|
<teleport to="body">
|
|
<transition name="fade">
|
|
<div v-if="isOpen" class="fixed inset-0 z-50">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-br from-slate-900/60 to-slate-800/60 backdrop-blur-sm"
|
|
@click="isOpen = false"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 flex items-start justify-center p-4 pt-20 sm:pt-28"
|
|
@click.self="isOpen = false"
|
|
>
|
|
<div
|
|
class="w-full max-w-3xl rounded-2xl border border-white/10 bg-white/80 backdrop-blur-xl shadow-2xl ring-1 ring-black/5 overflow-hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div
|
|
class="p-4 border-b border-slate-200/60"
|
|
ref="inputWrap"
|
|
>
|
|
<div class="relative">
|
|
<div class="relative">
|
|
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
|
|
<SearchIcon />
|
|
</div>
|
|
<Input
|
|
v-model="query"
|
|
placeholder="Išči po naročnikih ali primerih (Ctrl+K za zapiranje)"
|
|
class="w-full pl-10 pr-16 rounded-xl"
|
|
/>
|
|
<button
|
|
v-if="query"
|
|
@click="query = ''"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-slate-500 hover:text-slate-700"
|
|
>
|
|
ESC
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="max-h-[65vh] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-300"
|
|
>
|
|
<div
|
|
v-if="!query"
|
|
class="p-8 text-sm text-slate-500 text-center space-y-2"
|
|
>
|
|
<p>Začni tipkati za iskanje.</p>
|
|
<p class="text-xs">
|
|
Namig: uporabi
|
|
<kbd
|
|
class="px-1.5 py-0.5 bg-slate-100 rounded font-mono text-[10px]"
|
|
>Ctrl</kbd
|
|
>
|
|
+
|
|
<kbd
|
|
class="px-1.5 py-0.5 bg-slate-100 rounded font-mono text-[10px]"
|
|
>K</kbd
|
|
>
|
|
</p>
|
|
</div>
|
|
<div v-else class="divide-y divide-slate-200/70">
|
|
<div v-if="result.clients.length" class="py-3">
|
|
<div
|
|
class="flex items-center justify-between px-5 pb-1 text-[11px] font-semibold tracking-wide uppercase text-slate-500"
|
|
>
|
|
<span>Naročniki</span>
|
|
<span
|
|
class="rounded bg-slate-100 text-slate-600 px-2 py-0.5 text-[10px]"
|
|
>{{ result.clients.length }}</span
|
|
>
|
|
</div>
|
|
<ul role="list" class="px-2 space-y-1">
|
|
<li v-for="client in result.clients" :key="client.client_uuid">
|
|
<Link
|
|
:href="route('client.show', { uuid: client.client_uuid })"
|
|
class="group flex items-center gap-3 w-full rounded-lg px-3 py-2 text-sm hover:bg-indigo-50/70 transition"
|
|
@click="isOpen = false"
|
|
>
|
|
<span
|
|
class="shrink-0 w-6 h-6 rounded bg-indigo-100 text-indigo-600 flex items-center justify-center text-[11px] font-semibold group-hover:bg-indigo-200"
|
|
>C</span
|
|
>
|
|
<span
|
|
class="text-slate-700 group-hover:text-slate-900"
|
|
>{{ client.full_name }}</span
|
|
>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-if="result.client_cases.length" class="py-3">
|
|
<div
|
|
class="flex items-center justify-between px-5 pb-1 text-[11px] font-semibold tracking-wide uppercase text-slate-500"
|
|
>
|
|
<span>Primeri</span>
|
|
<span
|
|
class="rounded bg-slate-100 text-slate-600 px-2 py-0.5 text-[10px]"
|
|
>{{ result.client_cases.length }}</span
|
|
>
|
|
</div>
|
|
<ul role="list" class="px-2 space-y-1">
|
|
<li
|
|
v-for="clientcase in result.client_cases"
|
|
:key="clientcase.case_uuid"
|
|
class="rounded-xl border border-slate-200/70 bg-white/70 px-4 py-3 shadow-sm hover:shadow-md transition flex flex-col gap-1"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Link
|
|
:href="
|
|
route('clientCase.show', {
|
|
client_case: clientcase.case_uuid,
|
|
})
|
|
"
|
|
class="text-left font-medium hover:underline leading-tight text-slate-800"
|
|
@click="isOpen = false"
|
|
>
|
|
{{ clientcase.full_name }}
|
|
</Link>
|
|
<template v-if="clientcase.contract_reference">
|
|
<span
|
|
class="font-mono text-[11px] tracking-tight text-indigo-600 bg-indigo-50 border border-indigo-200 rounded px-1.5 py-0.5 whitespace-nowrap shadow-sm"
|
|
>
|
|
{{ clientcase.contract_reference }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
clientcase.contract_segments &&
|
|
clientcase.contract_segments.length
|
|
"
|
|
class="flex flex-wrap gap-1 mt-1"
|
|
>
|
|
<Link
|
|
v-for="seg in clientcase.contract_segments"
|
|
:key="seg.id || seg.name || seg"
|
|
:href="
|
|
route('clientCase.show', {
|
|
client_case: clientcase.case_uuid,
|
|
}) +
|
|
'?segment=' +
|
|
(seg.id || seg)
|
|
"
|
|
class="group/seg text-[10px] uppercase tracking-wide bg-gradient-to-br from-purple-50 to-purple-100 text-purple-700 border border-purple-200 px-1.5 py-0.5 rounded hover:from-purple-100 hover:to-purple-200 hover:border-purple-300 transition"
|
|
@click="isOpen = false"
|
|
>
|
|
{{ seg.name || seg }}
|
|
</Link>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
clientcase.case_segments && clientcase.case_segments.length
|
|
"
|
|
class="flex flex-wrap gap-1 mt-1"
|
|
>
|
|
<Link
|
|
v-for="seg in clientcase.case_segments"
|
|
:key="seg.id || seg.name"
|
|
:href="
|
|
route('clientCase.show', {
|
|
client_case: clientcase.case_uuid,
|
|
}) +
|
|
'?segment=' +
|
|
(seg.id || seg)
|
|
"
|
|
class="text-[10px] uppercase tracking-wide bg-slate-100 text-slate-600 border border-slate-200 px-1.5 py-0.5 rounded hover:bg-slate-200 hover:text-slate-700 transition"
|
|
@click="isOpen = false"
|
|
>
|
|
{{ seg.name }}
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
v-if="!result.clients.length && !result.client_cases.length"
|
|
class="p-8 text-center text-sm text-slate-500"
|
|
>
|
|
Ni rezultatov.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</teleport>
|
|
</template>
|
|
|
|
<style>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.15s;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|