Phone view case updated
This commit is contained in:
Simon Pocrnjič
@@ -1,11 +1,11 @@
|
||||
<script setup>
|
||||
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
|
||||
import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
|
||||
import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
|
||||
import DocumentViewerDrawer from "@/Components/DocumentsTable/DocumentViewerDrawer.vue";
|
||||
import { classifyDocument } from "@/Services/documents";
|
||||
import { reactive, ref, computed, watch } from "vue";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
|
||||
import ActivityDrawerMobile from "@/Pages/Cases/Partials/ActivityDrawerMobile.vue";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -24,13 +24,14 @@ import {
|
||||
AccordionTrigger,
|
||||
} from "@/Components/ui/accordion";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerFooter,
|
||||
DrawerClose,
|
||||
} from "@/Components/ui/drawer";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -57,7 +58,14 @@ import {
|
||||
Eye,
|
||||
Building2,
|
||||
Activity,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
NotebookIcon,
|
||||
NotebookPenIcon,
|
||||
ListPlusIcon,
|
||||
HouseIcon,
|
||||
} from "lucide-vue-next";
|
||||
import { fmtCurrency, fmtDateDMY } from "@/Utilities/functions";
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
@@ -136,6 +144,14 @@ function formatDateShort(val) {
|
||||
}
|
||||
}
|
||||
|
||||
function textTrancate(text, maxLength = 100, showAll = false) {
|
||||
if (!text) return "";
|
||||
|
||||
if (showAll) return text;
|
||||
|
||||
return text.length > maxLength ? text.slice(0, maxLength) + "…" : text;
|
||||
}
|
||||
|
||||
function activityActionLine(a) {
|
||||
const base = a?.action?.name || "";
|
||||
const decision = a?.decision?.name ? ` → ${a.decision.name}` : "";
|
||||
@@ -264,6 +280,18 @@ function closeObjectsModal() {
|
||||
objectsModal.contract = null;
|
||||
}
|
||||
|
||||
// Expanded activity notes
|
||||
const expandedNotes = ref(new Set());
|
||||
const toggleNote = (id) => {
|
||||
const next = new Set(expandedNotes.value);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
expandedNotes.value = next;
|
||||
};
|
||||
|
||||
// Client details (Stranka) summary
|
||||
const clientSummary = computed(() => {
|
||||
const p = props.client?.person || {};
|
||||
@@ -313,16 +341,17 @@ const clientSummary = computed(() => {
|
||||
<div class="py-4 sm:py-2">
|
||||
<div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
|
||||
<!-- Client details (account holder) -->
|
||||
<Card class="p-0 py-3 gap-3">
|
||||
<CardHeader class="px-3 py-2">
|
||||
<CardTitle class="flex items-center gap-2 text-base">
|
||||
<Building2 class="w-5 h-5 text-gray-500" />
|
||||
<span class="truncate">{{ clientSummary.name }}</span>
|
||||
<Card class="p-0 py-2! gap-2">
|
||||
<CardHeader class="px-3 py-2! border-b">
|
||||
<CardTitle class="flex items-center gap-2 text-base justify-between">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<Building2 class="w-5 h-5" />
|
||||
<p class="wrap-break-word max-w-36">{{ clientSummary.name }}</p>
|
||||
</div>
|
||||
<Badge variant="secondary">Naročnik</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="px-3">
|
||||
<Separator class="mb-4" />
|
||||
<CardContent class="px-2">
|
||||
<PersonDetailPhone
|
||||
:types="types"
|
||||
:person="client.person"
|
||||
@@ -332,11 +361,13 @@ const clientSummary = computed(() => {
|
||||
</Card>
|
||||
|
||||
<!-- Person (case person) -->
|
||||
<Card class="p-0 py-3 gap-3">
|
||||
<CardHeader class="px-3 py-2">
|
||||
<CardTitle class="flex items-center gap-2 text-base">
|
||||
<User class="w-5 h-5 text-gray-500" />
|
||||
<span class="truncate">{{ client_case.person.full_name }}</span>
|
||||
<Card class="p-0 py-2! gap-2">
|
||||
<CardHeader class="px-3 py-2! border-b">
|
||||
<CardTitle class="flex items-center gap-2 text-base justify-between">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<User class="w-5 h-5" />
|
||||
<p class="wrap-break-word max-w-36">{{ client_case.person.full_name }}</p>
|
||||
</div>
|
||||
<Badge variant="secondary">Primer</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription
|
||||
@@ -353,8 +384,7 @@ const clientSummary = computed(() => {
|
||||
{{ client_case.person.employer }}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent class="px-3">
|
||||
<Separator class="mb-4" />
|
||||
<CardContent class="px-2">
|
||||
<PersonDetailPhone
|
||||
:types="types"
|
||||
:person="client_case.person"
|
||||
@@ -364,186 +394,120 @@ const clientSummary = computed(() => {
|
||||
</Card>
|
||||
|
||||
<!-- Contracts assigned to me -->
|
||||
<Card class="p-0 py-3 gap-1">
|
||||
<CardHeader class="px-3 py-2 pb-0">
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<FileText class="w-5 h-5" />
|
||||
Pogodbe
|
||||
<Card class="p-0 py-2! gap-2">
|
||||
<CardHeader class="px-3 py-2! border-b">
|
||||
<CardTitle class="flex items-center justify-between">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<FileText class="w-5 h-5" />
|
||||
<span>Pogodbe</span>
|
||||
</div>
|
||||
<Badge v-if="contracts?.length" variant="secondary" class="ml-1 text-sm">
|
||||
{{ contracts.length }}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="p-2 space-y-1">
|
||||
<Card
|
||||
v-for="c in contracts"
|
||||
:key="c.uuid || c.id"
|
||||
class="overflow-hidden p-0 gap-2"
|
||||
>
|
||||
<!-- Contract header: reference + type badge -->
|
||||
<CardHeader class="p-3 pb-2 gap-0">
|
||||
<div class="flex items-center flex-wrap">
|
||||
<CardTitle class="text-base font-semibold">
|
||||
{{ c.reference || "Šifra pogodbe ni določena" }}
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<!-- Balance row -->
|
||||
<div
|
||||
v-if="c.account"
|
||||
class="mx-3 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900 px-2 py-2 flex items-center justify-between"
|
||||
<CardContent class="px-0">
|
||||
<Accordion v-if="contracts?.length" type="multiple" class="w-full mb-2">
|
||||
<AccordionItem
|
||||
v-for="c in contracts"
|
||||
:key="c.uuid || c.id"
|
||||
:value="c.uuid || c.id"
|
||||
class="py-2 last:border-b-0"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-red-500">
|
||||
<Euro class="w-4 h-4 shrink-0" />
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-red-400"
|
||||
>Odprto</span
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
class="text-2xl font-bold text-red-600 dark:text-red-400 tabular-nums"
|
||||
<AccordionTrigger
|
||||
class="px-3 py-2 text-sm font-medium tracking-wide flex items-center gap-2"
|
||||
>
|
||||
{{ formatAmount(c.account.balance_amount) }} €
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Collapsibles: description, meta, last object -->
|
||||
<CardContent
|
||||
v-if="
|
||||
c.description ||
|
||||
c.latest_object ||
|
||||
(c.meta && Object.keys(c.meta).length)
|
||||
"
|
||||
class="pt-0 px-0 space-y-0"
|
||||
>
|
||||
<!-- Description + Meta + Latest Object Accordion -->
|
||||
<template
|
||||
v-if="
|
||||
c.description ||
|
||||
(c.meta && Object.keys(c.meta).length) ||
|
||||
c.latest_object
|
||||
"
|
||||
>
|
||||
<Separator />
|
||||
<Accordion type="multiple" class="w-full">
|
||||
<AccordionItem
|
||||
v-if="c.description"
|
||||
value="description"
|
||||
class="border-b-0"
|
||||
<div class="flex items-center gap-2">
|
||||
<p
|
||||
class="font-bold rounded-md bg-accent max-w-36 px-3 py-2 wrap-break-word"
|
||||
>
|
||||
<AccordionTrigger
|
||||
class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
|
||||
>
|
||||
Opis
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="px-3 pb-3">
|
||||
<p
|
||||
class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
|
||||
>
|
||||
{{ c.description }}
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
v-if="c.meta && Object.keys(c.meta).length"
|
||||
value="meta"
|
||||
class="border-b-0"
|
||||
:class="c.description ? 'border-t' : ''"
|
||||
{{ c.reference || "Šifra pogodbe ni določena" }}
|
||||
</p>
|
||||
<span
|
||||
class="font-bold rounded-md px-3 py-2 bg-red-50 text-red-600 border-red-100 tabular-nums"
|
||||
>{{ fmtCurrency(c.account.balance_amount) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 flex-1 justify-end-safe pr-3">
|
||||
<Button variant="outline" @click.stop="openDrawerAddActivity(c)">
|
||||
<Activity class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="outline" @click.stop="openDocDialog(c)">
|
||||
<Upload class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="px-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between border-b p-2">
|
||||
<span class="font-bold"> Opis </span>
|
||||
<NotebookPenIcon :size="18" />
|
||||
</div>
|
||||
<p class="wrap-break-word p-2 max-w-xs">
|
||||
{{ textTrancate(c.description, 50, false) }}
|
||||
</p>
|
||||
</div>
|
||||
<template v-if="c.meta && Object.keys(c.meta).length > 0">
|
||||
<Separator class="my-1" />
|
||||
<div
|
||||
v-if="c.meta && Object.keys(c.meta).length > 0"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<AccordionTrigger
|
||||
class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
|
||||
>
|
||||
<div>
|
||||
<span class="mr-1">Dodatni podatki</span>
|
||||
<Badge
|
||||
class="bg-blue-500 text-white dark:bg-blue-600 h-5 min-w-5 rounded-full px-2 font-mono tabular-nums"
|
||||
>{{ Object.keys(c.meta).length }}</Badge
|
||||
>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="pb-2">
|
||||
<div class="flex items-center justify-between border-b p-2">
|
||||
<span class="font-bold"> Dodatno </span>
|
||||
<ListPlusIcon :size="18" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<div
|
||||
class="divide-y divide-gray-100 dark:divide-gray-700 rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden"
|
||||
v-for="(val, key) in c.meta"
|
||||
:key="key"
|
||||
class="flex items-center justify-between gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 even:bg-gray-100 dark:even:bg-gray-700/50 rounded-lg"
|
||||
>
|
||||
<div
|
||||
v-for="(val, key) in c.meta"
|
||||
:key="key"
|
||||
class="flex items-center justify-between gap-3 px-3 py-2 bg-white dark:bg-gray-900 even:bg-gray-50/60 dark:even:bg-gray-800/40"
|
||||
<span
|
||||
class="text-xs text-gray-500 dark:text-gray-400 shrink-0 uppercase"
|
||||
>{{ val?.title?.replace(/_/g, " ") || key }}</span
|
||||
>
|
||||
<span
|
||||
class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
|
||||
>{{ val?.title || key }}</span
|
||||
>
|
||||
<span
|
||||
class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-right"
|
||||
>
|
||||
<template v-if="val?.type === 'date'">{{
|
||||
formatDateShort(val.value) || val.value || "—"
|
||||
}}</template>
|
||||
<template v-else-if="val?.type === 'number'">{{
|
||||
val.value ?? "—"
|
||||
}}</template>
|
||||
<template v-else>{{ val?.value ?? val ?? "—" }}</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem
|
||||
v-if="c.latest_object"
|
||||
value="latest_object"
|
||||
class="border-b-0"
|
||||
:class="
|
||||
c.description || (c.meta && Object.keys(c.meta).length)
|
||||
? 'border-t'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<AccordionTrigger
|
||||
class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
|
||||
>
|
||||
Zadnji predmet
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="px-3 pb-3">
|
||||
<div
|
||||
class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
|
||||
>
|
||||
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
|
||||
{{ c.latest_object.name || c.latest_object.reference }}
|
||||
<span
|
||||
v-if="c.latest_object.type"
|
||||
class="ml-1.5 text-xs font-normal text-gray-400"
|
||||
>({{ c.latest_object.type }})</span
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
v-if="c.latest_object.description"
|
||||
class="text-xs text-gray-500 dark:text-gray-400 mt-1"
|
||||
class="text-xs wrap-break-word font-semibold text-gray-800 dark:text-gray-200 text-right"
|
||||
>
|
||||
{{ c.latest_object.description }}
|
||||
<template v-if="val?.type === 'date'">{{
|
||||
formatDateShort(val.value) || val.value || ""
|
||||
}}</template>
|
||||
<template v-else-if="val?.type === 'number'">{{
|
||||
val.value.toString().replace(/\./, ",") ?? ""
|
||||
}}</template>
|
||||
<template v-else>{{ val?.value ?? val ?? "" }}</template>
|
||||
</p>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</template>
|
||||
</CardContent>
|
||||
|
||||
<!-- Action buttons: full-width row at bottom -->
|
||||
<div class="grid grid-cols-2 gap-0 border-t mt-0">
|
||||
<button
|
||||
class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors border-r"
|
||||
@click="openDrawerAddActivity(c)"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
Aktivnost
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors"
|
||||
@click="openDocDialog(c)"
|
||||
>
|
||||
<Upload class="w-4 h-4" />
|
||||
Dokument
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="c.latest_object">
|
||||
<Separator class="my-1" />
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center justify-between border-b p-2">
|
||||
<span class="font-bold"> Zadnji predmet </span>
|
||||
<HouseIcon :size="18" />
|
||||
</div>
|
||||
<div class="p-2 max-w-xs flex items-center gap-1">
|
||||
<p class="font-medium wrap-break-word">
|
||||
{{ c.latest_object.name || c.latest_object.reference }}
|
||||
</p>
|
||||
<Badge variant="outline" v-if="c.latest_object.type">{{
|
||||
c.latest_object.type
|
||||
}}</Badge>
|
||||
<p
|
||||
v-if="c.latest_object.description"
|
||||
class="text-xs text-gray-500 dark:text-gray-400 mt-1"
|
||||
>
|
||||
{{ c.latest_object.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
<p
|
||||
v-if="!contracts?.length"
|
||||
class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
|
||||
@@ -555,29 +519,56 @@ const clientSummary = computed(() => {
|
||||
|
||||
<!-- Activities -->
|
||||
<Card class="p-0 py-2 gap-2">
|
||||
<CardHeader class="px-3 py-2">
|
||||
<CardHeader class="px-3 py-1! border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Activity class="w-5 h-5" />
|
||||
<Activity class="w-4 h-4" />
|
||||
Aktivnosti
|
||||
</CardTitle>
|
||||
<Button size="lg" @click="openDrawerAddActivity()">
|
||||
<Plus class="w-6 h-6" />
|
||||
<span class=" text-lg">Dodaj aktivnost</span>
|
||||
<span class="text-sm">Nova Aktivnost</span>
|
||||
<Plus :size="14" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-1 px-2">
|
||||
<CardContent class="p-0">
|
||||
<Card
|
||||
v-for="a in activities"
|
||||
:key="a.id"
|
||||
class="bg-gray-50/70 dark:bg-gray-800/50 p-0 py-2 gap-2"
|
||||
class="p-0 py-2 gap-0 rounded-none border-x-0 border-t-0 border-b border-gray-200 dark:border-gray-700 last:border-b-0 shadow-none"
|
||||
>
|
||||
<CardHeader class="px-3 py-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<CardTitle class="text-sm font-medium truncate">
|
||||
{{ activityActionLine(a) || "Aktivnost" }}
|
||||
</CardTitle>
|
||||
<div class="flex flex-col gap-1">
|
||||
<CardTitle class="text-sm font-medium truncate">
|
||||
{{ activityActionLine(a) || "Aktivnost" }}
|
||||
</CardTitle>
|
||||
<CardDescription class="flex flex-wrap gap-1.5">
|
||||
<Badge v-if="a.contract" variant="secondary" class="text-xs">
|
||||
<FileText class="w-3 h-3" />
|
||||
Pogodba: {{ a.contract.reference }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="a.due_date"
|
||||
variant="secondary"
|
||||
class="bg-amber-100 text-amber-700 hover:bg-amber-100"
|
||||
>
|
||||
<Calendar class="w-3 h-3" />
|
||||
Zapadlost: {{ fmtDateDMY(a.due_date) || "" }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="a.amount != null"
|
||||
variant="secondary"
|
||||
class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
|
||||
>
|
||||
<Euro class="w-3 h-3" />
|
||||
Znesek: {{ fmtCurrency(a.amount) }}
|
||||
</Badge>
|
||||
<Badge v-if="a.status" variant="outline" class="text-[10px]">
|
||||
{{ a.status }}
|
||||
</Badge>
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div
|
||||
class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
@@ -595,38 +586,23 @@ const clientSummary = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="p-2 pt-0 space-y-2">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<Badge v-if="a.contract" variant="secondary" class="text-[10px]">
|
||||
<FileText class="w-3 h-3 mr-1" />
|
||||
Pogodba: {{ a.contract.reference }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="a.due_date"
|
||||
variant="secondary"
|
||||
class="bg-amber-100 text-amber-700 hover:bg-amber-100 text-[10px]"
|
||||
>
|
||||
<Calendar class="w-3 h-3 mr-1" />
|
||||
Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="a.amount != null"
|
||||
variant="secondary"
|
||||
class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
|
||||
>
|
||||
<Euro class="w-3 h-3 mr-1" />
|
||||
Znesek: {{ formatAmount(a.amount) }} €
|
||||
</Badge>
|
||||
<Badge v-if="a.status" variant="outline" class="text-[10px]">
|
||||
{{ a.status }}
|
||||
</Badge>
|
||||
</div>
|
||||
<p
|
||||
<CardContent class="px-2 py-0">
|
||||
<div
|
||||
v-if="a.note"
|
||||
class="text-sm text-gray-900 dark:text-gray-300 whitespace-pre-line rounded-lg bg-secondary dark:bg-gray-800/50 p-2"
|
||||
class="flex flex-col gap-1 cursor-pointer bg-accent rounded-lg p-2"
|
||||
@click="toggleNote(a.id)"
|
||||
>
|
||||
{{ a.note }}
|
||||
</p>
|
||||
<p class="leading-7 wrap-break-word text-sm whitespace-pre-line">
|
||||
{{ textTrancate(a.note, 50, expandedNotes.has(a.id)) }}
|
||||
</p>
|
||||
<div class="flex justify-end">
|
||||
<Badge variant="outline" v-if="a.note?.length > 50">
|
||||
<ChevronDown v-if="!expandedNotes.has(a.id)" :size="14" />
|
||||
<ChevronUp v-else :size="14" />
|
||||
{{ expandedNotes.has(a.id) ? "Skrij" : "Pokaži več" }}</Badge
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p
|
||||
@@ -640,28 +616,28 @@ const clientSummary = computed(() => {
|
||||
|
||||
<!-- Documents (case + assigned contracts) -->
|
||||
<Card class="p-0 py-2 gap-2">
|
||||
<CardHeader class="px-3 py-2">
|
||||
<CardHeader class="px-3 py-1! border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<FileText class="w-5 h-5" />
|
||||
<CardTitle class="flex items-center gap-1">
|
||||
<FileText class="w-4 h-4" />
|
||||
Dokumenti
|
||||
</CardTitle>
|
||||
<Button size="sm" variant="secondary" @click="openDocDialog()">
|
||||
<Upload class="w-4 h-4 mr-1" />
|
||||
<Button size="lg" variant="secondary" @click="openDocDialog()">
|
||||
Dodaj
|
||||
<Upload class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent class="p-0">
|
||||
<div class="divide-y">
|
||||
<div v-for="d in documents" :key="d.uuid || d.id" class="py-3 first:pt-0">
|
||||
<div v-for="d in documents" :key="d.uuid || d.id" class="p-3 first:pt-0">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex-1">
|
||||
<div
|
||||
class="font-medium text-gray-900 dark:text-gray-100 truncate flex items-center gap-2"
|
||||
class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2"
|
||||
>
|
||||
<FileText class="w-4 h-4 text-gray-400 shrink-0" />
|
||||
{{ d.name || d.original_name }}
|
||||
<p class="wrap-break-word">{{ d.name || d.original_name }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2 flex-wrap"
|
||||
@@ -691,7 +667,7 @@ const clientSummary = computed(() => {
|
||||
{{ d.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 flex gap-2">
|
||||
<div class="flex gap-1">
|
||||
<Button size="sm" variant="ghost" @click="openViewer(d)">
|
||||
<Eye class="w-4 h-4" />
|
||||
</Button>
|
||||
@@ -733,7 +709,7 @@ const clientSummary = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DocumentViewerDialog
|
||||
<DocumentViewerDrawer
|
||||
:show="viewer.open"
|
||||
:src="viewer.src"
|
||||
:title="viewer.title"
|
||||
@@ -741,7 +717,7 @@ const clientSummary = computed(() => {
|
||||
:filename="viewer.filename"
|
||||
@close="closeViewer"
|
||||
/>
|
||||
<ActivityDrawer
|
||||
<ActivityDrawerMobile
|
||||
:show="drawerAddActivity"
|
||||
@close="closeDrawer"
|
||||
@saved="onActivitySaved"
|
||||
@@ -776,51 +752,61 @@ const clientSummary = computed(() => {
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<!-- Upload Document Dialog -->
|
||||
<Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
|
||||
<DialogContent class="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Dodaj dokument</DialogTitle>
|
||||
<DialogDescription v-if="selectedContract">
|
||||
<!-- Upload Document Drawer -->
|
||||
<Drawer :open="docDialogOpen" @update:open="(val) => !val && closeDocDialog()">
|
||||
<DrawerContent class="flex flex-col max-h-[90vh]">
|
||||
<DrawerHeader class="border-b px-4 py-3 shrink-0">
|
||||
<DrawerTitle>Dodaj dokument</DrawerTitle>
|
||||
<p v-if="selectedContract" class="text-sm text-muted-foreground mt-1">
|
||||
Dokument bo dodan k pogodbi:
|
||||
<strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<Label for="docFile">Datoteka</Label>
|
||||
<Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
|
||||
<p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.file }}
|
||||
</p>
|
||||
</p>
|
||||
</DrawerHeader>
|
||||
<ScrollArea class="flex-1 min-h-0">
|
||||
<div class="px-4 py-4 space-y-4">
|
||||
<div>
|
||||
<Label for="docFile">Datoteka</Label>
|
||||
<Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
|
||||
<p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.file }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="docName">Ime</Label>
|
||||
<Input id="docName" v-model="docForm.name" class="mt-1" />
|
||||
<p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="docDesc">Opis</Label>
|
||||
<Input id="docDesc" v-model="docForm.description" class="mt-1" />
|
||||
<p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox id="docPublic" :model-value="docForm.is_public" />
|
||||
<Label for="docPublic">Javno</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="docName">Ime</Label>
|
||||
<Input id="docName" v-model="docForm.name" class="mt-1" />
|
||||
<p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label for="docDesc">Opis</Label>
|
||||
<Input id="docDesc" v-model="docForm.description" class="mt-1" />
|
||||
<p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox id="docPublic" :model-value="docForm.is_public" />
|
||||
<Label for="docPublic">Javno</Label>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
|
||||
<Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
|
||||
<Upload class="w-4 h-4 mr-2" />
|
||||
</ScrollArea>
|
||||
<DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
|
||||
<Button
|
||||
class="flex-1"
|
||||
:disabled="docForm.processing || !docForm.file"
|
||||
@click="submitDocument"
|
||||
>
|
||||
<Upload class="w-4 h-4" />
|
||||
Naloži
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DrawerClose as-child>
|
||||
<Button variant="outline" class="flex-1" @click="closeDocDialog"
|
||||
>Prekliči</Button
|
||||
>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</AppPhoneLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user