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/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>