changes

resources/js/Pages/Client/Contracts.vue

@@ -10,12 +10,14 @@ const props = defineProps({
   client: Object,
   contracts: Object,
   filters: Object,
+  segments: Object,
   types: Object,
 });
 
 const fromDate = ref(props.filters?.from || "");
 const toDate = ref(props.filters?.to || "");
 const search = ref(props.filters?.search || "");
+const selectedSegment = ref(props.filters?.segment || "");
 function applyDateFilter() {
   const params = Object.fromEntries(
     new URLSearchParams(window.location.search).entries()
@@ -35,6 +37,11 @@ function applyDateFilter() {
   } else {
     delete params.search;
   }
+  if (selectedSegment.value) {
+    params.segment = selectedSegment.value;
+  } else {
+    delete params.segment;
+  }
   delete params.page;
   router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
     preserveState: true,
@@ -46,6 +53,7 @@ function applyDateFilter() {
 function clearDateFilter() {
   fromDate.value = "";
   toDate.value = "";
+  selectedSegment.value = "";
   applyDateFilter();
 }
 
@@ -150,7 +158,7 @@ function formatDate(value) {
               class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
             >
               <div class="flex items-center gap-3 flex-wrap">
-                <label class="font-medium mr-2">Filter po datumu:</label>
+                <label class="font-medium mr-2">Filtri:</label>
                 <div class="flex items-center gap-2">
                   <span class="text-sm text-gray-600">Od</span>
                   <input
@@ -169,12 +177,25 @@ function formatDate(value) {
                     class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
                   />
                 </div>
+                <div class="flex items-center gap-2">
+                  <span class="text-sm text-gray-600">Segment</span>
+                  <select
+                    v-model="selectedSegment"
+                    @change="applyDateFilter"
+                    class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
+                  >
+                    <option value="">Vsi segmenti</option>
+                    <option v-for="segment in segments" :key="segment.id" :value="segment.id">
+                      {{ segment.name }}
+                    </option>
+                  </select>
+                </div>
                 <button
                   type="button"
                   class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-                  :disabled="!fromDate && !toDate"
+                  :disabled="!fromDate && !toDate && !selectedSegment"
                   @click="clearDateFilter"
-                  title="Počisti datum"
+                  title="Počisti filtre"
                 >
                   Počisti
                 </button>
@@ -194,7 +215,7 @@ function formatDate(value) {
               :meta="{ current_page: contracts.current_page, per_page: contracts.per_page, total: contracts.total, last_page: contracts.last_page }"
               route-name="client.contracts"
               :route-params="{ uuid: client.uuid }"
-              :query="{ from: fromDate || undefined, to: toDate || undefined }"
+              :query="{ from: fromDate || undefined, to: toDate || undefined, segment: selectedSegment || undefined }"
               :search="search"
               row-key="uuid"
               :only-props="['contracts']"