Teren-app/resources/js/Pages/Client/Show.vue

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { ref, watch } from "vue";
import { Link, router } from "@inertiajs/vue3";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import Pagination from "@/Components/Pagination.vue";
import FormCreateCase from "./Partials/FormCreateCase.vue";
import { debounce } from "lodash";

const props = defineProps({
  client: Object,
  client_cases: Object,
  urlPrev: String,
  filters: Object,
  types: Object,
});

// Table-friendly search for client cases
const search = ref(props.filters?.search || "");
const applySearch = debounce((term) => {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );
  if (term) {
    params.search = term;
  } else {
    delete params.search;
  }
  delete params.page;
  router.get(route("client.show", { uuid: props.client.uuid }), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
  });
}, 300);
watch(search, (v) => applySearch(v));

const drawerCreateCase = ref(false);

const openDrawerCreateCase = () => {
  drawerCreateCase.value = true;
};
</script>

<template>
  <AppLayout title="Client">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div
          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
        >
          <div class="mx-auto max-w-4x1 p-3 flex justify-between">
            <SectionTitle>
              <template #title>
                {{ client.person.full_name }}
              </template>
            </SectionTitle>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-1">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div
          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
        >
          <div class="mx-auto max-w-4x1 px-2">
            <PersonInfoGrid :types="types" :person="client.person"></PersonInfoGrid>
          </div>
        </div>
      </div>
    </div>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3">
            <div class="flex items-center justify-between gap-3">
              <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
                >Dodaj</PrimaryButton
              >
              <input
                v-model="search"
                type="text"
                placeholder="Iskanje po imenu"
                class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
              />
            </div>
            <div class="overflow-x-auto mt-3">
              <table class="min-w-full text-left text-sm">
                <thead>
                  <tr class="border-b">
                    <th class="py-2 pr-4">Št.</th>
                    <th class="py-2 pr-4">Primer</th>
                    <th class="py-2 pr-4">Davčna</th>
                    <th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
                    <th class="py-2 pr-4 text-right">Skupaj stanje</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="c in client_cases.data"
                    :key="c.uuid"
                    class="border-b last:border-0"
                  >
                    <td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
                    <td class="py-2 pr-4">
                      <Link
                        :href="route('clientCase.show', { client_case: c.uuid })"
                        class="text-indigo-600 hover:underline"
                      >
                        {{ c.person?.full_name || "-" }}
                      </Link>
                    </td>

                    <td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
                    <td class="py-2 pr-4 text-right">
                      {{ c.active_contracts_count ?? 0 }}
                    </td>
                    <td class="py-2 pr-4 text-right">
                      {{
                        new Intl.NumberFormat("sl-SI", {
                          style: "currency",
                          currency: "EUR",
                        }).format(Number(c.active_contracts_balance_sum ?? 0))
                      }}
                    </td>
                  </tr>
                  <tr v-if="!client_cases.data || client_cases.data.length === 0">
                    <td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <Pagination
            :links="client_cases.links"
            :from="client_cases.from"
            :to="client_cases.to"
            :total="client_cases.total"
          />
        </div>
      </div>
    </div>
  </AppLayout>
  <FormCreateCase
    :show="drawerCreateCase"
    @close="drawerCreateCase = false"
    :client-uuid="client?.uuid"
  />
</template>