Changes to UI

resources/js/Pages/Segments/Show.vue

@@ -1,35 +1,27 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { Link, router } from "@inertiajs/vue3";
-import { debounce } from "lodash";
-import { ref, watch, onUnmounted } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { ref } from "vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.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);
+// Initialize search from current URL so input reflects server filter
+const search = ref(new URLSearchParams(window.location.search).get("search") || "");
 
-watch(search, (v) => applySearch(v));
-onUnmounted(() => applySearch.cancel && applySearch.cancel());
+// Column definitions for the server-driven table
+const columns = [
+  { key: "reference", label: "Pogodba", sortable: true },
+  { key: "client_case", label: "Primer" },
+  { key: "client", label: "Stranka" },
+  { key: "type", label: "Vrsta" },
+  { key: "start_date", label: "Začetek", sortable: true },
+  { key: "end_date", label: "Konec", sortable: true },
+  { key: "account", label: "Stanje", align: "right" },
+];
 
 function formatDate(value) {
   if (!value) {
@@ -56,100 +48,66 @@ function formatCurrency(value) {
 
 <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>
+    <template #header> </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="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
+        <h2 class="text-lg">{{ segment.name }}</h2>
         <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"
+        <DataTableServer
+          :columns="columns"
+          :rows="contracts?.data || []"
+          :meta="contracts || {}"
+          v-model:search="search"
+          route-name="segments.show"
+          :route-params="{ segment: segment?.id ?? segment }"
+          :only-props="['contracts']"
+          :page-size-options="[10, 25, 50]"
+          empty-text="Ni pogodb v tem segmentu."
+          row-key="uuid"
         >
-          <div>
-            Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
-            {{ contracts.total }}
-          </div>
-          <div class="flex items-center gap-2">
+          <!-- Primer (client_case) cell with link when available -->
+          <template #cell-client_case="{ row }">
             <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
+              v-if="row.client_case?.uuid"
+              :href="
+                route('clientCase.show', {
+                  client_case: row.client_case.uuid,
+                  segment: segment?.id ?? segment,
+                })
+              "
+              class="text-indigo-600 hover:underline"
             >
-            <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>
+              {{ row.client_case?.person?.full_name || "Primer stranke" }}
+            </Link>
+            <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
+          </template>
+
+          <!-- Stranka (client) name -->
+          <template #cell-client="{ row }">
+            {{ row.client?.person?.full_name || "-" }}
+          </template>
+
+          <!-- Vrsta (type) -->
+          <template #cell-type="{ row }">
+            {{ row.type?.name || "-" }}
+          </template>
+
+          <!-- Dates formatted -->
+          <template #cell-start_date="{ row }">
+            {{ formatDate(row.start_date) }}
+          </template>
+          <template #cell-end_date="{ row }">
+            {{ formatDate(row.end_date) }}
+          </template>
+
+          <!-- Account balance formatted -->
+          <template #cell-account="{ row }">
+            <div class="text-right">
+              {{ formatCurrency(row.account?.balance_amount) }}
+            </div>
+          </template>
+        </DataTableServer>
       </div>
     </div>
   </AppLayout>