95 lines
3.8 KiB
Vue
95 lines
3.8 KiB
Vue
<script setup>
|
|
import { UserEditIcon } from "@/Utilities/Icons";
|
|
import { Button } from "../ui/button";
|
|
|
|
const props = defineProps({
|
|
person: Object,
|
|
edit: { type: Boolean, default: true },
|
|
personEdit: { type: Boolean, default: true },
|
|
});
|
|
|
|
const emit = defineEmits(['edit']);
|
|
|
|
const getMainAddress = (adresses) => {
|
|
const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
|
|
if (addr !== "") {
|
|
const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
|
|
const country = addr.country !== "" ? ` - ${addr.country}` : "";
|
|
return addr.address !== "" ? addr.address + tail + country : "";
|
|
}
|
|
return "";
|
|
};
|
|
|
|
const getMainPhone = (phones) => {
|
|
const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
|
|
if (pho !== "") {
|
|
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
|
|
return pho.nu !== "" ? countryCode + pho.nu : "";
|
|
}
|
|
return "";
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
emit('edit');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-end mb-3">
|
|
<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"
|
|
title="Uredi osebo"
|
|
>
|
|
<UserEditIcon size="md" />
|
|
<span>Uredi</span>
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Nu.</p>
|
|
<p class="text-sm font-semibold text-gray-900">{{ person.nu }}</p>
|
|
</div>
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Name.</p>
|
|
<p class="text-sm font-semibold text-gray-900">
|
|
{{ person.full_name }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Tax NU.</p>
|
|
<p class="text-sm font-semibold text-gray-900">
|
|
{{ person.tax_number }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Social security NU.</p>
|
|
<p class="text-sm font-semibold text-gray-900">
|
|
{{ person.social_security_number }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Address</p>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{{ getMainAddress(person.addresses) }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Phone</p>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{{ getMainPhone(person.phones) }}
|
|
</p>
|
|
</div>
|
|
<div class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Description</p>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{{ person.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|