Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,93 @@
+<script setup>
+import { UserEditIcon } from "@/Utilities/Icons";
+
+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>
+