532 lines
18 KiB
Vue
532 lines
18 KiB
Vue
<script setup>
|
|
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { Skeleton } from "@/Components/ui/skeleton";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
|
|
import { InfiniteScroll, router } from "@inertiajs/vue3";
|
|
import {
|
|
computed,
|
|
defineComponent,
|
|
h,
|
|
onMounted,
|
|
onUnmounted,
|
|
ref,
|
|
watch,
|
|
} from "vue";
|
|
import { useDebounceFn } from "@vueuse/core";
|
|
import {
|
|
CalendarDays,
|
|
CheckCircle2,
|
|
ChevronRight,
|
|
ClipboardList,
|
|
MapPin,
|
|
Phone,
|
|
SlidersHorizontal,
|
|
Wallet,
|
|
} from "lucide-vue-next";
|
|
import { fmtDateDMY } from "@/Utilities/functions";
|
|
|
|
const props = defineProps({
|
|
pendingJobs: { type: Object, default: null },
|
|
processedJobs: { type: Object, default: null },
|
|
completedJobs: { type: Object, default: null },
|
|
clients: { type: Array, default: () => [] },
|
|
view_mode: { type: String, default: "assigned" },
|
|
filters: { type: Object, default: () => ({ search: "", client: "" }) },
|
|
});
|
|
|
|
const isCompleted = computed(() => props.view_mode === "completed-today");
|
|
|
|
// ── Filters ──────────────────────────────────────────────────────────────────
|
|
const search = ref(props.filters.search || "");
|
|
const clientFilter = ref(props.filters.client || "all");
|
|
const isFiltering = ref(false);
|
|
const showFilters = ref(
|
|
!!(props.filters.search || (props.filters.client && props.filters.client !== "all"))
|
|
);
|
|
|
|
const debouncedFilter = useDebounceFn(() => performFilter(), 500);
|
|
watch(search, () => debouncedFilter());
|
|
watch(clientFilter, () => performFilter());
|
|
|
|
function performFilter() {
|
|
isFiltering.value = true;
|
|
const targetRoute = isCompleted.value ? "phone.completed" : "phone.index";
|
|
const only = isCompleted.value
|
|
? ["completedJobs", "filters"]
|
|
: ["pendingJobs", "processedJobs", "filters"];
|
|
|
|
router.get(
|
|
route(targetRoute),
|
|
{
|
|
search: search.value || undefined,
|
|
client: clientFilter.value !== "all" ? clientFilter.value : undefined,
|
|
},
|
|
{
|
|
preserveState: true,
|
|
preserveScroll: false,
|
|
only,
|
|
reset: isCompleted.value
|
|
? ["completedJobs"]
|
|
: ["pendingJobs", "processedJobs"],
|
|
onSuccess: () => {
|
|
isFiltering.value = false;
|
|
},
|
|
onError: () => {
|
|
isFiltering.value = false;
|
|
},
|
|
}
|
|
);
|
|
}
|
|
|
|
function clearFilters() {
|
|
search.value = "";
|
|
clientFilter.value = "all";
|
|
}
|
|
|
|
// ── Scroll-hide title ────────────────────────────────────────────────────────
|
|
const scrolled = ref(false);
|
|
let stopNavigateListener = null;
|
|
function onScroll() {
|
|
if (!scrolled.value && window.scrollY > 50) {
|
|
scrolled.value = true;
|
|
} else if (scrolled.value && window.scrollY < 10) {
|
|
scrolled.value = false;
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
let trackedPath = window.location.pathname;
|
|
stopNavigateListener = router.on("navigate", (event) => {
|
|
const newPath = new URL(event.detail.page.url, window.location.origin).pathname;
|
|
if (newPath !== trackedPath) {
|
|
scrolled.value = false;
|
|
trackedPath = newPath;
|
|
}
|
|
});
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (stopNavigateListener) stopNavigateListener();
|
|
window.removeEventListener("scroll", onScroll);
|
|
});
|
|
|
|
// ── Counts ───────────────────────────────────────────────────────────────────
|
|
const pendingCount = computed(() => props.pendingJobs?.total ?? 0);
|
|
const processedCount = computed(() => props.processedJobs?.total ?? 0);
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
function formatAmount(val) {
|
|
if (val === null || val === undefined) return "0,00";
|
|
const num = typeof val === "number" ? val : parseFloat(val);
|
|
if (Number.isNaN(num)) return String(val);
|
|
return num.toLocaleString("sl-SI", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
});
|
|
}
|
|
|
|
function getCaseUuid(job) {
|
|
return (
|
|
job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null
|
|
);
|
|
}
|
|
|
|
function jobHref(job) {
|
|
const uuid = getCaseUuid(job);
|
|
if (!uuid) return null;
|
|
return route("phone.case", {
|
|
client_case: uuid,
|
|
completed: isCompleted.value ? 1 : undefined,
|
|
});
|
|
}
|
|
|
|
// ── JobCard component ────────────────────────────────────────────────────────
|
|
const JobCard = defineComponent({
|
|
name: "JobCard",
|
|
props: {
|
|
job: { type: Object, required: true },
|
|
href: { type: String, default: null },
|
|
accentClass: { type: String, default: "border-l-blue-500" },
|
|
showLastActivity: { type: Boolean, default: false },
|
|
},
|
|
setup(p) {
|
|
return () => {
|
|
const j = p.job;
|
|
const person = j.contract?.client_case?.person;
|
|
const clientName = j.contract?.client_case?.client?.person?.full_name;
|
|
const address = person?.address?.address;
|
|
const phone = person?.phones?.[0]?.nu;
|
|
const balance = j.contract?.account?.balance_amount;
|
|
|
|
const inner = h("div", { class: `border-l-4 ${p.accentClass}` }, [
|
|
h(
|
|
"div",
|
|
{
|
|
class: "px-4 pt-4 pb-2 flex items-start justify-between gap-3",
|
|
},
|
|
[
|
|
h("div", { class: "flex-1 min-w-0" }, [
|
|
h(
|
|
"p",
|
|
{
|
|
class:
|
|
"font-bold text-base text-gray-900 dark:text-gray-100 truncate leading-tight",
|
|
},
|
|
person?.full_name || "—"
|
|
),
|
|
h(
|
|
"p",
|
|
{
|
|
class: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate",
|
|
},
|
|
j.contract?.reference || j.contract?.uuid || "—"
|
|
),
|
|
clientName
|
|
? h(
|
|
"p",
|
|
{
|
|
class:
|
|
"text-xs text-indigo-600 dark:text-indigo-400 mt-0.5 truncate",
|
|
},
|
|
clientName
|
|
)
|
|
: null,
|
|
]),
|
|
j.priority
|
|
? h(
|
|
"span",
|
|
{
|
|
class:
|
|
"shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400 animate-pulse",
|
|
},
|
|
"Prioriteta"
|
|
)
|
|
: null,
|
|
]
|
|
),
|
|
address || phone
|
|
? h("div", { class: "px-4 pb-3 space-y-1.5" }, [
|
|
address
|
|
? h(
|
|
"div",
|
|
{
|
|
class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
|
|
},
|
|
[
|
|
h(MapPin, {
|
|
class: "w-3.5 h-3.5 shrink-0 text-gray-400",
|
|
}),
|
|
h("span", { class: "text-xs truncate" }, address),
|
|
]
|
|
)
|
|
: null,
|
|
phone
|
|
? h(
|
|
"div",
|
|
{
|
|
class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
|
|
},
|
|
[
|
|
h(Phone, {
|
|
class: "w-3.5 h-3.5 shrink-0 text-gray-400",
|
|
}),
|
|
h("span", { class: "text-xs font-medium" }, phone),
|
|
]
|
|
)
|
|
: null,
|
|
])
|
|
: null,
|
|
balance != null
|
|
? h(
|
|
"div",
|
|
{
|
|
class:
|
|
"mx-4 mb-3 px-3 py-2 bg-red-50 dark:bg-red-950/20 rounded-lg flex items-center gap-2 border border-red-100 dark:border-red-900",
|
|
},
|
|
[
|
|
h(Wallet, {
|
|
class: "w-4 h-4 text-red-500 shrink-0",
|
|
}),
|
|
h(
|
|
"span",
|
|
{
|
|
class: "font-bold text-red-600 dark:text-red-400 text-sm",
|
|
},
|
|
`${formatAmount(balance)} €`
|
|
),
|
|
h("span", { class: "text-xs text-red-400" }, "odprto"),
|
|
]
|
|
)
|
|
: null,
|
|
h(
|
|
"div",
|
|
{
|
|
class:
|
|
"px-4 py-3 border-t bg-gray-50/60 dark:bg-gray-900/40 flex items-center justify-between",
|
|
},
|
|
[
|
|
h(
|
|
"div",
|
|
{
|
|
class: "flex items-center gap-1.5 text-xs text-gray-400",
|
|
},
|
|
[
|
|
h(CalendarDays, { class: "w-3.5 h-3.5" }),
|
|
h(
|
|
"span",
|
|
{},
|
|
p.showLastActivity && j.last_activity
|
|
? fmtDateDMY(j.last_activity)
|
|
: fmtDateDMY(j.assigned_at)
|
|
),
|
|
]
|
|
),
|
|
p.href
|
|
? h(
|
|
"div",
|
|
{
|
|
class: "flex items-center gap-0.5 text-primary font-semibold text-sm",
|
|
},
|
|
["Odpri", h(ChevronRight, { class: "w-4 h-4" })]
|
|
)
|
|
: h("span", { class: "text-xs text-gray-400 italic" }, "Manjka primer"),
|
|
]
|
|
),
|
|
]);
|
|
|
|
return p.href
|
|
? h(
|
|
"a",
|
|
{
|
|
href: p.href,
|
|
class:
|
|
"block rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card active:scale-[0.99] transition-transform duration-100",
|
|
},
|
|
inner
|
|
)
|
|
: h(
|
|
"div",
|
|
{
|
|
class:
|
|
"rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card opacity-60",
|
|
},
|
|
inner
|
|
);
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<AppPhoneLayout title="Phone">
|
|
<template #header>
|
|
<h2
|
|
class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight overflow-hidden transition-all duration-200 ease-in-out"
|
|
:class="scrolled ? 'max-h-0 opacity-0 mb-0' : 'max-h-12 opacity-100 mb-0'"
|
|
>
|
|
{{ isCompleted ? "Zaključeno danes" : "Terenska opravila" }}
|
|
</h2>
|
|
|
|
<!-- Filter bar -->
|
|
<div class="pt-2 space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="relative flex-1">
|
|
<Input
|
|
v-model="search"
|
|
type="text"
|
|
placeholder="Išči po referenci ali imenu..."
|
|
class="pr-10"
|
|
/>
|
|
<span
|
|
v-if="isFiltering"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
class="shrink-0"
|
|
:class="
|
|
showFilters || clientFilter !== 'all' ? 'bg-primary/10 border-primary' : ''
|
|
"
|
|
title="Filter po naročniku"
|
|
@click="showFilters = !showFilters"
|
|
>
|
|
<SlidersHorizontal class="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
v-if="search || clientFilter !== 'all'"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="shrink-0 text-muted-foreground"
|
|
@click="clearFilters"
|
|
>
|
|
Počisti
|
|
</Button>
|
|
</div>
|
|
|
|
<div v-if="showFilters || clientFilter !== 'all'">
|
|
<Select v-model="clientFilter">
|
|
<SelectTrigger class="w-full">
|
|
<SelectValue placeholder="Vsi naročniki" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Vsi naročniki</SelectItem>
|
|
<SelectItem
|
|
v-for="client in props.clients"
|
|
:key="client.uuid"
|
|
:value="client.uuid"
|
|
>
|
|
{{ client.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="pb-8">
|
|
<!-- Assigned mode: two tabs (Novo / Obdelano) -->
|
|
<div v-if="!isCompleted" class="px-4 pt-4">
|
|
<Tabs default-value="pending" class="w-full">
|
|
<TabsList class="w-full grid grid-cols-2 mb-4">
|
|
<TabsTrigger value="pending">
|
|
<span class="inline-flex flex-row items-center gap-1">
|
|
<ClipboardList class="w-3.5 h-3.5 shrink-0" />
|
|
Novo
|
|
<Badge v-if="pendingCount" variant="secondary" class="h-4 px-1 text-xs">
|
|
{{ pendingCount }}
|
|
</Badge>
|
|
</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="processed">
|
|
<span class="inline-flex flex-row items-center gap-1">
|
|
<CheckCircle2 class="w-3.5 h-3.5 shrink-0" />
|
|
Obdelano
|
|
<Badge v-if="processedCount" variant="secondary" class="h-4 px-1 text-xs">
|
|
{{ processedCount }}
|
|
</Badge>
|
|
</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<!-- Pending tab -->
|
|
<TabsContent value="pending" class="space-y-3">
|
|
<InfiniteScroll data="pendingJobs" only-next>
|
|
<template #default="{ loading }">
|
|
<template v-if="props.pendingJobs?.data?.length">
|
|
<JobCard
|
|
v-for="job in props.pendingJobs.data"
|
|
:key="job.id"
|
|
:job="job"
|
|
:href="jobHref(job)"
|
|
accent-class="border-l-blue-500"
|
|
/>
|
|
</template>
|
|
<div
|
|
v-else-if="!loading"
|
|
class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
|
|
>
|
|
<ClipboardList class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
|
|
<p class="text-sm">
|
|
{{
|
|
search || clientFilter !== "all" ? "Ni zadetkov" : "Ni novih opravil"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #loading>
|
|
<div class="space-y-3">
|
|
<Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
|
|
</div>
|
|
</template>
|
|
</InfiniteScroll>
|
|
</TabsContent>
|
|
|
|
<!-- Processed tab -->
|
|
<TabsContent value="processed" class="space-y-3">
|
|
<InfiniteScroll data="processedJobs" only-next>
|
|
<template #default="{ loading }">
|
|
<template v-if="props.processedJobs?.data?.length">
|
|
<JobCard
|
|
v-for="job in props.processedJobs.data"
|
|
:key="job.id"
|
|
:job="job"
|
|
:href="jobHref(job)"
|
|
accent-class="border-l-green-500"
|
|
:show-last-activity="true"
|
|
/>
|
|
</template>
|
|
<div
|
|
v-else-if="!loading"
|
|
class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
|
|
>
|
|
<CheckCircle2 class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
|
|
<p class="text-sm">
|
|
{{
|
|
search || clientFilter !== "all"
|
|
? "Ni zadetkov"
|
|
: "Ni obdelanih opravil"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #loading>
|
|
<div class="space-y-3">
|
|
<Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
|
|
</div>
|
|
</template>
|
|
</InfiniteScroll>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<!-- Completed-today mode: single scroll list -->
|
|
<div v-else class="px-4 pt-4 space-y-3">
|
|
<InfiniteScroll data="completedJobs" only-next>
|
|
<template #default="{ loading }">
|
|
<template v-if="props.completedJobs?.data?.length">
|
|
<JobCard
|
|
v-for="job in props.completedJobs.data"
|
|
:key="job.id"
|
|
:job="job"
|
|
:href="jobHref(job)"
|
|
accent-class="border-l-purple-500"
|
|
:show-last-activity="true"
|
|
/>
|
|
</template>
|
|
<div
|
|
v-else-if="!loading"
|
|
class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
|
|
>
|
|
<CheckCircle2 class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
|
|
<p class="text-sm">
|
|
{{
|
|
search || clientFilter !== "all"
|
|
? "Ni zadetkov"
|
|
: "Danes ni zaključenih opravil"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #loading>
|
|
<div class="space-y-3">
|
|
<Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
|
|
</div>
|
|
</template>
|
|
</InfiniteScroll>
|
|
</div>
|
|
</div>
|
|
</AppPhoneLayout>
|
|
</template>
|