From ea9376c71323fb305f02cbde2fd100afaee2394a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Pocrnji=C4=8D?= Date: Sat, 20 Jun 2026 23:42:43 +0200 Subject: [PATCH] Phone view update --- resources/js/Components/PersonDetailPhone.vue | 8 +- resources/js/Layouts/AppPhoneLayout.vue | 9 +- resources/js/Pages/Phone/Index.vue | 263 +++--------------- resources/js/Pages/Phone/Partials/JobCard.vue | 98 +++++++ 4 files changed, 144 insertions(+), 234 deletions(-) create mode 100644 resources/js/Pages/Phone/Partials/JobCard.vue diff --git a/resources/js/Components/PersonDetailPhone.vue b/resources/js/Components/PersonDetailPhone.vue index 3975256..4019d1d 100644 --- a/resources/js/Components/PersonDetailPhone.vue +++ b/resources/js/Components/PersonDetailPhone.vue @@ -91,7 +91,7 @@ function maskIban(iban) {
- {{ primaryAddress.address }} + {{ primaryAddress.address }} @@ -109,11 +109,11 @@ function maskIban(iban) { - {{ primaryEmail }} + {{ primaryEmail }} - {{ maskIban(bankIban) }} + {{ bankIban }}
@@ -129,7 +129,7 @@ function maskIban(iban) {
TRR (zadnji)
-
{{ maskIban(bankIban) }}
+
{{ bankIban }}
E‑pošta
diff --git a/resources/js/Layouts/AppPhoneLayout.vue b/resources/js/Layouts/AppPhoneLayout.vue index a725c0c..1188a12 100644 --- a/resources/js/Layouts/AppPhoneLayout.vue +++ b/resources/js/Layouts/AppPhoneLayout.vue @@ -224,7 +224,7 @@ const closeSearch = () => (searchOpen.value = false);
@@ -308,7 +308,10 @@ const closeSearch = () => (searchOpen.value = false);
-
+
(searchOpen.value = false);
-
+
diff --git a/resources/js/Pages/Phone/Index.vue b/resources/js/Pages/Phone/Index.vue index 0b725f3..c8dd133 100644 --- a/resources/js/Pages/Phone/Index.vue +++ b/resources/js/Pages/Phone/Index.vue @@ -13,27 +13,10 @@ import { 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 { computed, 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"; +import { CheckCircle2, ClipboardList, SlidersHorizontal } from "lucide-vue-next"; +import JobCard from "@/Pages/Phone/Partials/JobCard.vue"; const props = defineProps({ pendingJobs: { type: Object, default: null }, @@ -75,9 +58,7 @@ function performFilter() { preserveState: true, preserveScroll: false, only, - reset: isCompleted.value - ? ["completedJobs"] - : ["pendingJobs", "processedJobs"], + reset: isCompleted.value ? ["completedJobs"] : ["pendingJobs", "processedJobs"], onSuccess: () => { isFiltering.value = false; }, @@ -125,16 +106,6 @@ 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 @@ -149,182 +120,6 @@ function jobHref(job) { 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 - ); - }; - }, -});