Teren-app/resources/js/Components/PersonInfo/PersonInfoPersonTab.vue

<script setup>
import { UserEditIcon } from "@/Utilities/Icons";
import { Button } from "../ui/button";
import { fmtDateDMY } from "@/Utilities/functions";

const props = defineProps({
  person: Object,
  isClientCase: { type: Boolean, default: false },
  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">
        Primer ref.
      </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">Naziv</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">
        Davčna
      </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">Emšo</p>
      <p class="text-sm font-semibold text-gray-900">
        {{ person.social_security_number }}
      </p>
    </div>
  </div>
  <div
    v-if="isClientCase"
    class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3"
  >
    <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">
        Naslov
      </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">
        Telefon
      </p>
      <p class="text-sm font-medium text-gray-900">
        {{ getMainPhone(person.phones) }}
      </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">
        Dat. rojstva
      </p>
      <p class="text-sm font-medium text-gray-900">
        {{ fmtDateDMY(person.birthday) }}
      </p>
    </div>
  </div>

  <div v-else class="grid grid-rows-* grid-cols-1 md:grid-cols-2 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">
        Naslov
      </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">
        Telefon
      </p>
      <p class="text-sm font-medium text-gray-900">
        {{ getMainPhone(person.phones) }}
      </p>
    </div>
  </div>
  <div
    class="grid grid-rows-* grid-cols-1 md:grid-cols-2 gap-3 mt-3"
    :class="[isClientCase ? 'md:grid-cols-2' : '']"
  >
    <div
      v-if="isClientCase"
      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">
        Delodajalec
      </p>
      <p class="text-sm font-medium text-gray-900">
        {{ person.employer }}
      </p>
    </div>

    <div
      class="md:col-span-full rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
      :class="[isClientCase ? 'lg:col-span-1' : '']"
    >
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Opis</p>
      <p class="text-sm font-medium text-gray-900">
        {{ person.description }}
      </p>
    </div>
  </div>
</template>