sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to UI and other stuff

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-11-20 18:11:43 +01:00
parent b7fa2d261b
commit 3b284fa4bd
87 changed files with 7872 additions and 2330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/PersonInfo/PersonInfoAddressesTab.vue
+42 -44
View File
@@ -1,65 +1,64 @@
<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import Dropdown from "../Dropdown.vue";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { Button } from "../ui/button";
import { EllipsisVertical } from "lucide-vue-next";
const props = defineProps({
person: Object,
edit: { type: Boolean, default: true },
});
const emit = defineEmits(['add', 'edit', 'delete']);
const emit = defineEmits(["add", "edit", "delete"]);
const handleAdd = () => emit('add');
const handleEdit = (id) => emit('edit', id);
const handleDelete = (id, label) => emit('delete', id, label);
const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
</script>
<template>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div
class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
v-for="address in person.addresses"
:key="address.id"
>
<div class="flex items-start justify-between mb-2">
<Card class="p-2" v-for="address in person.addresses" :key="address.id">
<div class="flex items-center justify-between mb-2">
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
>
{{ address.country }}
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
>
{{ address.type.name }}
</span>
</div>
<div v-if="edit">
<Dropdown align="right" width="48">
<template #trigger>
<button
type="button"
class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
title="Možnosti"
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon" title="Možnosti">
<EllipsisVertical />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="handleEdit(address.id)">
<EditIcon size="sm" />
<span>Uredi</span>
</DropdownMenuItem>
<DropdownMenuItem
@click="handleDelete(address.id, address.address)"
class="text-red-600 focus:bg-red-50 focus:text-red-600"
>
<DottedMenu size="sm" css="text-gray-600" />
</button>
</template>
<template #content>
<div class="py-1">
<button
@click="handleEdit(address.id)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
>
<EditIcon size="sm" />
<span>Uredi</span>
</button>
<button
@click="handleDelete(address.id, address.address)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
>
<TrashBinIcon size="sm" />
<span>Izbriši</span>
</button>
</div>
</template>
</Dropdown>
<TrashBinIcon size="sm" class="text-red-600" />
<span>Izbriši</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<p class="text-sm font-medium text-gray-900 leading-relaxed">
@@ -69,15 +68,14 @@ const handleDelete = (id, label) => emit('delete', id, label);
: address.address
}}
</p>
</div>
</Card>
<button
v-if="edit"
@click="handleAdd"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
title="Dodaj naslov"
>
<PlusIcon class="h-8 w-8 text-gray-400" />
</button>
</div>
</template>
resources/js/Components/PersonInfo/PersonInfoEmailsTab.vue
+46 -44
View File
@@ -1,30 +1,34 @@
<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import Dropdown from "../Dropdown.vue";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { Button } from "../ui/button";
import { EllipsisVertical } from "lucide-vue-next";
const props = defineProps({
person: Object,
edit: { type: Boolean, default: true },
});
const emit = defineEmits(['add', 'edit', 'delete']);
const emit = defineEmits(["add", "edit", "delete"]);
const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);
const handleAdd = () => emit('add');
const handleEdit = (id) => emit('edit', id);
const handleDelete = (id, label) => emit('delete', id, label);
const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
</script>
<template>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<template v-if="getEmails(person).length">
<div
class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
v-for="(email, idx) in getEmails(person)"
:key="idx"
>
<div class="flex items-start justify-between mb-2" v-if="edit">
<Card class="p-2" v-for="(email, idx) in getEmails(person)" :key="idx">
<div class="flex items-center justify-between mb-2" v-if="edit">
<div class="flex flex-wrap gap-2">
<span
v-if="email?.label"
@@ -40,56 +44,54 @@ const handleDelete = (id, label) => emit('delete', id, label);
</span>
</div>
<div v-if="edit">
<Dropdown align="right" width="48">
<template #trigger>
<button
type="button"
class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
title="Možnosti"
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon" title="Možnosti">
<EllipsisVertical />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="handleEdit(email.id)">
<EditIcon size="sm" />
<span>Uredi</span>
</DropdownMenuItem>
<DropdownMenuItem
@click="
handleDelete(email.id, email?.value || email?.email || email?.address)
"
class="text-red-600 focus:bg-red-50 focus:text-red-600"
>
<DottedMenu size="sm" css="text-gray-600" />
</button>
</template>
<template #content>
<div class="py-1">
<button
@click="handleEdit(email.id)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
>
<EditIcon size="sm" />
<span>Uredi</span>
</button>
<button
@click="handleDelete(email.id, email?.value || email?.email || email?.address)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
>
<TrashBinIcon size="sm" />
<span>Izbriši</span>
</button>
</div>
</template>
</Dropdown>
<TrashBinIcon size="sm" class="text-red-600" />
<span>Izbriši</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<p class="text-sm font-medium text-gray-900 leading-relaxed">
{{ email?.value || email?.email || email?.address || "-" }}
</p>
<p v-if="email?.note" class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
<p
v-if="email?.note"
class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
>
{{ email.note }}
</p>
</div>
</Card>
</template>
<button
v-if="edit"
@click="handleAdd"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
title="Dodaj email"
>
<PlusIcon class="h-8 w-8 text-gray-400" />
</button>
<p v-else-if="!edit && !getEmails(person).length" class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
<p
v-else-if="!edit && !getEmails(person).length"
class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
>
Ni e-poštnih naslovov.
</p>
</div>
</template>
resources/js/Components/PersonInfo/PersonInfoGrid.vue
+28 -9
View File
@@ -4,6 +4,8 @@ import { router } from "@inertiajs/vue3";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
import { Button } from "@/Components/ui/button";
import { PlusIcon } from "@/Utilities/Icons";
import { faUser, faMapMarkerAlt, faPhone, faEnvelope, faUniversity } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import PersonUpdateForm from "./PersonUpdateForm.vue";
import AddressCreateForm from "./AddressCreateForm.vue";
import AddressUpdateForm from "./AddressUpdateForm.vue";
@@ -298,13 +300,21 @@ const switchToTab = (tab) => {
<template>
<Tabs v-model="activeTab" class="mt-2">
<TabsList class="flex w-full bg-white gap-2 p-1">
<TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">Oseba</TabsTrigger>
<TabsTrigger value="person" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2">
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faUser" class="h-4 w-4" />
<span>Oseba</span>
</div>
</TabsTrigger>
<TabsTrigger value="addresses" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
<div class="flex items-center justify-between gap-2 w-full">
<span>Naslovi</span>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faMapMarkerAlt" class="h-4 w-4" />
<span>Naslovi</span>
</div>
<span
v-if="addressesCount > 0"
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
>
{{ formatBadgeCount(addressesCount) }}
</span>
@@ -312,10 +322,13 @@ const switchToTab = (tab) => {
</TabsTrigger>
<TabsTrigger value="phones" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
<div class="flex items-center justify-between gap-2 w-full">
<span>Telefonske</span>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faPhone" class="h-4 w-4" />
<span>Telefonske</span>
</div>
<span
v-if="phonesCount > 0"
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
>
{{ formatBadgeCount(phonesCount) }}
</span>
@@ -323,10 +336,13 @@ const switchToTab = (tab) => {
</TabsTrigger>
<TabsTrigger value="emails" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
<div class="flex items-center justify-between gap-2 w-full">
<span>Email</span>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faEnvelope" class="h-4 w-4" />
<span>Email</span>
</div>
<span
v-if="emailsCount > 0"
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
>
{{ formatBadgeCount(emailsCount) }}
</span>
@@ -334,10 +350,13 @@ const switchToTab = (tab) => {
</TabsTrigger>
<TabsTrigger value="trr" class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2 px-3">
<div class="flex items-center justify-between gap-2 w-full">
<span>TRR</span>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faUniversity" class="h-4 w-4" />
<span>TRR</span>
</div>
<span
v-if="trrsCount > 0"
class="h-5 min-w-[20px] px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
class="h-5 min-w-5 px-1.5 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-semibold leading-tight shrink-0"
>
{{ formatBadgeCount(trrsCount) }}
</span>
resources/js/Components/PersonInfo/PersonInfoPersonTab.vue
+2 -1
View File
@@ -1,5 +1,6 @@
<script setup>
import { UserEditIcon } from "@/Utilities/Icons";
import { Button } from "../ui/button";
const props = defineProps({
person: Object,
@@ -35,7 +36,7 @@ const handleEdit = () => {
<template>
<div class="flex justify-end mb-3">
<button
<Button
v-if="edit && personEdit"
@click="handleEdit"
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all"
resources/js/Components/PersonInfo/PersonInfoPhonesTab.vue
+55 -50
View File
@@ -1,6 +1,15 @@
<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import Dropdown from "../Dropdown.vue";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { Button } from "../ui/button";
import { EllipsisVertical, MessageSquare, MessageSquareText } from "lucide-vue-next";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
const props = defineProps({
person: Object,
@@ -8,88 +17,84 @@ const props = defineProps({
enableSms: { type: Boolean, default: false },
});
const emit = defineEmits(['add', 'edit', 'delete', 'sms']);
const emit = defineEmits(["add", "edit", "delete", "sms"]);
const getPhones = (p) => (Array.isArray(p?.phones) ? p.phones : []);
const handleAdd = () => emit('add');
const handleEdit = (id) => emit('edit', id);
const handleDelete = (id, label) => emit('delete', id, label);
const handleSms = (phone) => emit('sms', phone);
const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
const handleSms = (phone) => emit("sms", phone);
</script>
<template>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<template v-if="getPhones(person).length">
<div
class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
v-for="phone in getPhones(person)"
:key="phone.id"
>
<div class="flex items-start justify-between mb-2">
<Card class="p-2" v-for="phone in getPhones(person)" :key="phone.id">
<div class="flex items-center justify-between mb-2">
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
>
+{{ phone.country_code }}
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
>
{{ phone && phone.type && phone.type.name ? phone.type.name : "—" }}
</span>
</div>
<div class="flex items-center gap-1">
<!-- Send SMS only in ClientCase person context -->
<button
<Button
v-if="enableSms"
@click="handleSms(phone)"
title="Pošlji SMS"
class="px-2.5 py-1 text-xs font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 hover:bg-indigo-100 rounded-lg transition-colors"
size="icon"
variant="ghost"
>
SMS
</button>
<Dropdown v-if="edit" align="right" width="48">
<template #trigger>
<button
type="button"
class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
title="Možnosti"
<MessageSquare />
</Button>
<DropdownMenu v-if="edit">
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon" title="Možnosti">
<EllipsisVertical />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="handleEdit(phone.id)">
<EditIcon size="sm" />
<span>Uredi</span>
</DropdownMenuItem>
<DropdownMenuItem
@click="handleDelete(phone.id, phone.nu)"
class="text-red-600 focus:bg-red-50 focus:text-red-600"
>
<DottedMenu size="sm" css="text-gray-600" />
</button>
</template>
<template #content>
<div class="py-1">
<button
@click="handleEdit(phone.id)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
>
<EditIcon size="sm" />
<span>Uredi</span>
</button>
<button
@click="handleDelete(phone.id, phone.nu)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
>
<TrashBinIcon size="sm" />
<span>Izbriši</span>
</button>
</div>
</template>
</Dropdown>
<TrashBinIcon size="sm" class="text-red-600" />
<span>Izbriši</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<p class="text-sm font-medium text-gray-900 leading-relaxed">{{ phone.nu }}</p>
</div>
</Card>
</template>
<button
v-if="edit"
@click="handleAdd"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
title="Dodaj telefon"
>
<PlusIcon class="h-8 w-8 text-gray-400" />
</button>
<p v-else-if="!edit && !getPhones(person).length" class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
<p
v-else-if="!edit && !getPhones(person).length"
class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
>
Ni telefonov.
</p>
</div>
</template>
resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
+15 -6
View File
@@ -245,7 +245,9 @@ watch(
);
// Auto-select sender when profile changes
watch(form.values.profile_id, (profileId) => {
watch(
() => form.values.profile_id,
(profileId) => {
if (!profileId) {
form.setFieldValue("sender_id", null);
return;
@@ -268,7 +270,8 @@ watch(form.values.profile_id, (profileId) => {
} else {
form.setFieldValue("sender_id", null);
}
});
}
);
// Reset sender if not available for selected profile
watch(sendersForSelectedProfile, (list) => {
@@ -355,15 +358,21 @@ const updateSmsFromSelection = async () => {
}
};
watch(form.values.template_id, () => {
watch(
() => form.values.template_id,
() => {
if (!form.values.template_id) return;
updateSmsFromSelection();
});
}
);
watch(form.values.contract_uuid, () => {
watch(
() => form.values.contract_uuid,
() => {
if (!form.values.template_id) return;
updateSmsFromSelection();
});
}
);
watch(pageSmsTemplates, (list) => {
if (!Array.isArray(list)) return;
resources/js/Components/PersonInfo/PersonInfoTrrTab.vue
+44 -44
View File
@@ -1,13 +1,21 @@
<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import Dropdown from "../Dropdown.vue";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { EllipsisVertical } from "lucide-vue-next";
import { Button } from "../ui/button";
const props = defineProps({
person: Object,
edit: { type: Boolean, default: true },
});
const emit = defineEmits(['add', 'edit', 'delete']);
const emit = defineEmits(["add", "edit", "delete"]);
const getTRRs = (p) => {
if (Array.isArray(p?.trrs)) return p.trrs;
@@ -17,20 +25,16 @@ const getTRRs = (p) => {
return [];
};
const handleAdd = () => emit('add');
const handleEdit = (id) => emit('edit', id);
const handleDelete = (id, label) => emit('delete', id, label);
const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
</script>
<template>
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<template v-if="getTRRs(person).length">
<div
class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
v-for="(acc, idx) in getTRRs(person)"
:key="idx"
>
<div class="flex items-start justify-between mb-2" v-if="edit">
<Card class="p-2" v-for="(acc, idx) in getTRRs(person)" :key="idx">
<div class="flex items-center justify-between mb-2" v-if="edit">
<div class="flex flex-wrap gap-2">
<span
v-if="acc?.bank_name"
@@ -52,35 +56,26 @@ const handleDelete = (id, label) => emit('delete', id, label);
</span>
</div>
<div v-if="edit">
<Dropdown align="right" width="48">
<template #trigger>
<button
type="button"
class="p-1 rounded hover:bg-gray-100 border border-transparent hover:border-gray-200 transition-colors"
title="Možnosti"
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon" title="Možnosti">
<EllipsisVertical />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="handleEdit(acc.id)">
<EditIcon size="sm" />
<span>Uredi</span>
</DropdownMenuItem>
<DropdownMenuItem
@click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
class="text-red-600 focus:bg-red-50 focus:text-red-600"
>
<DottedMenu size="sm" css="text-gray-600" />
</button>
</template>
<template #content>
<div class="py-1">
<button
@click="handleEdit(acc.id)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
>
<EditIcon size="sm" />
<span>Uredi</span>
</button>
<button
@click="handleDelete(acc.id, acc?.iban || acc?.account_number)"
class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
>
<TrashBinIcon size="sm" />
<span>Izbriši</span>
</button>
</div>
</template>
</Dropdown>
<TrashBinIcon size="sm" class="text-red-600" />
<span>Izbriši</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<p class="text-sm font-medium text-gray-900 leading-relaxed font-mono">
@@ -93,22 +88,27 @@ const handleDelete = (id, label) => emit('delete', id, label);
"-"
}}
</p>
<p v-if="acc?.notes" class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed">
<p
v-if="acc?.notes"
class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
>
{{ acc.notes }}
</p>
</div>
</Card>
</template>
<button
v-if="edit"
@click="handleAdd"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
title="Dodaj TRR"
>
<PlusIcon class="h-8 w-8 text-gray-400" />
</button>
<p v-else-if="!edit && !getTRRs(person).length" class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
<p
v-else-if="!edit && !getTRRs(person).length"
class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
>
Ni TRR računov.
</p>
</div>
</template>