Big changes added events for decisions

resources/js/Pages/Segments/Show.vue

@@ -1,16 +1,20 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { Link } from "@inertiajs/vue3";
-import { ref } from "vue";
+import { Link, router } from "@inertiajs/vue3";
+import { ref, computed, watch } from "vue";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 
 const props = defineProps({
   segment: Object,
   contracts: Object, // LengthAwarePaginator payload from Laravel
+  clients: Array, // Full list of clients with contracts in this segment
 });
 
-// Initialize search from current URL so input reflects server filter
-const search = ref(new URLSearchParams(window.location.search).get("search") || "");
+// Initialize search and client filter from current URL so inputs reflect server filters
+const urlParams = new URLSearchParams(window.location.search);
+const search = ref(urlParams.get("search") || "");
+const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
+const selectedClient = ref(initialClient);
 
 // Column definitions for the server-driven table
 const columns = [
@@ -23,6 +27,29 @@ const columns = [
   { key: "account", label: "Stanje", align: "right" },
 ];
 
+// Build client options from the full list provided by the server, so the dropdown isn't limited by current filters
+const clientOptions = computed(() => {
+  const list = Array.isArray(props.clients) ? props.clients : [];
+  const opts = list.map((c) => ({
+    value: c.uuid || "",
+    label: c.name || "(neznana stranka)",
+  }));
+  return opts.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
+});
+
+// React to client selection changes by visiting the same route with updated query
+watch(selectedClient, (val) => {
+  const query = { search: search.value };
+  if (val) {
+    query.client = val;
+  }
+  router.get(
+    route("segments.show", { segment: props.segment?.id ?? props.segment }),
+    query,
+    { preserveState: true, preserveScroll: true, only: ["contracts"], replace: true }
+  );
+});
+
 function formatDate(value) {
   if (!value) {
     return "-";
@@ -54,6 +81,36 @@ function formatCurrency(value) {
         <h2 class="text-lg">{{ segment.name }}</h2>
         <div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
 
+        <!-- Filters -->
+        <div class="mb-4 flex flex-col sm:flex-row sm:items-end gap-3">
+          <div class="flex-1">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Stranka</label>
+            <div class="flex items-center gap-2">
+              <select
+                v-model="selectedClient"
+                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+              >
+                <option value="">Vse stranke</option>
+                <option
+                  v-for="opt in clientOptions"
+                  :key="opt.value || opt.label"
+                  :value="opt.value"
+                >
+                  {{ opt.label }}
+                </option>
+              </select>
+              <button
+                type="button"
+                class="text-sm text-gray-600 hover:text-gray-900"
+                @click="selectedClient = ''"
+                v-if="selectedClient"
+              >
+                Počisti
+              </button>
+            </div>
+          </div>
+        </div>
+
         <DataTableServer
           :columns="columns"
           :rows="contracts?.data || []"
@@ -61,6 +118,7 @@ function formatCurrency(value) {
           v-model:search="search"
           route-name="segments.show"
           :route-params="{ segment: segment?.id ?? segment }"
+          :query="{ client: selectedClient || undefined }"
           :only-props="['contracts']"
           :page-size-options="[10, 25, 50]"
           empty-text="Ni pogodb v tem segmentu."