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

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router } from "@inertiajs/vue3";
import { debounce } from "lodash";
import { ref, watch, onUnmounted } from "vue";

const props = defineProps({
  segment: Object,
  contracts: Object, // LengthAwarePaginator payload from Laravel
});

const search = ref("");
const applySearch = debounce((v) => {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );
  if (v) {
    params.search = v;
  } else {
    delete params.search;
  }
  // reset pagination when typing
  delete params.page;
  router.get(
    route("segments.show", { segment: props.segment?.id ?? props.segment }),
    params,
    { preserveState: true, replace: true, preserveScroll: true }
  );
}, 300);

watch(search, (v) => applySearch(v));
onUnmounted(() => applySearch.cancel && applySearch.cancel());

function formatDate(value) {
  if (!value) {
    return "-";
  }
  const d = new Date(value);
  if (isNaN(d)) return value;
  return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(
    2,
    "0"
  )}.${d.getFullYear()}`;
}

function formatCurrency(value) {
  if (value === null || value === undefined) return "-";
  const n = Number(value);
  if (isNaN(n)) return String(value);
  return (
    n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
    " €"
  );
}
</script>

<template>
  <AppLayout :title="`Segment: ${segment?.name || ''}`">
    <template #header>
      <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold">Segment: {{ segment?.name }}</h1>
        <Link
          :href="route('segments.index')"
          class="text-sm text-indigo-600 hover:underline"
          >Nazaj na segmente</Link
        >
      </div>
    </template>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
        <div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
        <div class="flex items-center justify-between mb-4 gap-3">
          <input
            v-model="search"
            type="text"
            placeholder="Iskanje po referenci ali 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">
          <table class="min-w-full text-left text-sm">
            <thead>
              <tr class="border-b">
                <th class="py-2 pr-4">Pogodba</th>
                <th class="py-2 pr-4">Primer</th>
                <th class="py-2 pr-4">Stranka</th>
                <th class="py-2 pr-4">Vrsta</th>
                <th class="py-2 pr-4">Začetek</th>
                <th class="py-2 pr-4">Konec</th>
                <th class="py-2 pr-4">Stanje</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="c in contracts.data"
                :key="c.uuid"
                class="border-b last:border-0"
              >
                <td class="py-2 pr-4">{{ c.reference }}</td>
                <td class="py-2 pr-4">
                  <Link
                    v-if="c.client_case?.uuid"
                    :href="
                      route('clientCase.show', {
                        client_case: c.client_case.uuid,
                        segment: segment.id,
                      })
                    "
                    class="text-indigo-600 hover:underline"
                  >
                    {{ c.client_case?.person?.full_name || "Primer stranke" }}
                  </Link>
                  <span v-else>{{ c.client_case?.person?.full_name || "-" }}</span>
                </td>
                <td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
                <td class="py-2 pr-4">{{ c.type?.name }}</td>
                <td class="py-2 pr-4">{{ formatDate(c.start_date) }}</td>
                <td class="py-2 pr-4">{{ formatDate(c.end_date) }}</td>
                <td class="py-2 pr-4">{{ formatCurrency(c.account?.balance_amount) }}</td>
              </tr>
              <tr v-if="!contracts.data || contracts.data.length === 0">
                <td colspan="7" class="py-4 text-gray-500">Ni pogodb v tem segmentu.</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        <div
          class="flex items-center justify-between mt-4 text-sm text-gray-700"
          v-if="contracts.total > 0"
        >
          <div>
            Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
            {{ contracts.total }}
          </div>
          <div class="flex items-center gap-2">
            <Link
              v-if="contracts.prev_page_url"
              :href="contracts.prev_page_url"
              class="px-2 py-1 border rounded hover:bg-gray-50"
              >Prejšnja</Link
            >
            <span>Stran {{ contracts.current_page }} / {{ contracts.last_page }}</span>
            <Link
              v-if="contracts.next_page_url"
              :href="contracts.next_page_url"
              class="px-2 py-1 border rounded hover:bg-gray-50"
              >Naslednja</Link
            >
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>