Mass archiving added to segment view show

resources/js/Pages/Segments/Show.vue

@@ -1,10 +1,11 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { Link, router } from "@inertiajs/vue3";
+import { Link, router, useForm, usePage } from "@inertiajs/vue3";
 import { ref, computed, watch } from "vue";
 import axios from "axios";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 import DialogModal from "@/Components/DialogModal.vue";
+import ConfirmDialog from "@/Components/ConfirmDialog.vue";
 
 const props = defineProps({
   segment: Object,
@@ -20,6 +21,7 @@ const selectedClient = ref(initialClient);
 
 // Column definitions for the server-driven table
 const columns = [
+  { key: "select", label: "", sortable: false, width: "50px" },
   { key: "reference", label: "Pogodba", sortable: true },
   { key: "client_case", label: "Primer" },
   { key: "address", label: "Naslov" },
@@ -36,6 +38,13 @@ const exportColumns = ref(columns.map((col) => col.key));
 const exportError = ref("");
 const isExporting = ref(false);
 
+const selectedRows = ref([]);
+const showConfirmDialog = ref(false);
+const archiveForm = useForm({
+  contracts: [],
+  reactivate: false,
+});
+
 const contractsCurrentPage = computed(() => props.contracts?.current_page ?? 1);
 const contractsPerPage = computed(() => props.contracts?.per_page ?? 15);
 const totalContracts = computed(
@@ -48,6 +57,11 @@ const exportDisabled = computed(
   () => exportColumns.value.length === 0 || isExporting.value
 );
 
+const canManageSettings = computed(() => {
+  const permissions = usePage().props?.auth?.user?.permissions || [];
+  return permissions.includes('manage-settings');
+});
+
 function toggleAllColumns(checked) {
   exportColumns.value = checked ? columns.map((col) => col.key) : [];
 }
@@ -205,6 +219,67 @@ function extractFilenameFromHeaders(headers) {
   const asciiMatch = disposition.match(/filename="?([^";]+)"?/i);
   return asciiMatch?.[1] || null;
 }
+
+function toggleSelectAll() {
+  if (selectedRows.value.length === props.contracts.data.length) {
+    selectedRows.value = [];
+  } else {
+    selectedRows.value = props.contracts.data.map((row) => row.uuid);
+  }
+}
+
+function toggleRowSelection(uuid) {
+  const index = selectedRows.value.indexOf(uuid);
+  if (index > -1) {
+    selectedRows.value.splice(index, 1);
+  } else {
+    selectedRows.value.push(uuid);
+  }
+}
+
+function isRowSelected(uuid) {
+  return selectedRows.value.includes(uuid);
+}
+
+function isAllSelected() {
+  return (
+    props.contracts.data.length > 0 &&
+    selectedRows.value.length === props.contracts.data.length
+  );
+}
+
+function isIndeterminate() {
+  return (
+    selectedRows.value.length > 0 &&
+    selectedRows.value.length < props.contracts.data.length
+  );
+}
+
+function openArchiveModal() {
+  if (!selectedRows.value.length) return;
+  showConfirmDialog.value = true;
+}
+
+function closeConfirmDialog() {
+  showConfirmDialog.value = false;
+}
+
+function submitArchive() {
+  if (!selectedRows.value.length) return;
+
+  showConfirmDialog.value = false;
+
+  archiveForm.contracts = [...selectedRows.value];
+  archiveForm.reactivate = false;
+
+  archiveForm.post(route("contracts.archive-batch"), {
+    preserveScroll: true,
+    onSuccess: () => {
+      selectedRows.value = [];
+      router.reload({ only: ["contracts"] });
+    },
+  });
+}
 </script>
 
 <template>
@@ -259,13 +334,48 @@ function extractFilenameFromHeaders(headers) {
           row-key="uuid"
         >
           <template #toolbar-extra>
-            <button
-              type="button"
-              class="inline-flex items-center rounded-md border border-indigo-200 bg-white px-3 py-2 text-sm font-medium text-indigo-700 shadow-sm hover:bg-indigo-50"
-              @click="openExportDialog"
-            >
-              Izvozi v Excel
-            </button>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="inline-flex items-center rounded-md border border-indigo-200 bg-white px-3 py-2 text-sm font-medium text-indigo-700 shadow-sm hover:bg-indigo-50"
+                @click="openExportDialog"
+              >
+                Izvozi v Excel
+              </button>
+              <div v-if="canManageSettings && selectedRows.length" class="flex items-center gap-2">
+                <span class="text-sm text-gray-600"
+                  >{{ selectedRows.length }} izbran{{
+                    selectedRows.length === 1 ? "a" : "ih"
+                  }}</span
+                >
+                <button
+                  type="button"
+                  class="inline-flex items-center rounded-md border border-red-200 bg-white px-3 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50"
+                  @click="openArchiveModal"
+                >
+                  Arhiviraj izbrane
+                </button>
+              </div>
+            </div>
+          </template>
+          <template #header-select>
+            <input
+              v-if="canManageSettings"
+              type="checkbox"
+              :checked="isAllSelected()"
+              :indeterminate="isIndeterminate()"
+              @change="toggleSelectAll"
+              class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+          </template>
+          <template #cell-select="{ row }">
+            <input
+              v-if="canManageSettings"
+              type="checkbox"
+              :checked="isRowSelected(row.uuid)"
+              @change="toggleRowSelection(row.uuid)"
+              class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
           </template>
           <!-- Primer (client_case) cell with link when available -->
           <template #cell-client_case="{ row }">
@@ -316,6 +426,19 @@ function extractFilenameFromHeaders(headers) {
       </div>
     </div>
 
+    <ConfirmDialog
+      :show="showConfirmDialog"
+      title="Arhiviraj pogodbe"
+      :message="`Ali ste prepričani, da želite arhivirati ${selectedRows.length} pogodb${
+        selectedRows.length === 1 ? 'o' : ''
+      }? Arhivirane pogodbe bodo odstranjene iz aktivnih segmentov.`"
+      confirm-text="Arhiviraj"
+      cancel-text="Prekliči"
+      :danger="true"
+      @close="closeConfirmDialog"
+      @confirm="submitArchive"
+    />
+
     <DialogModal :show="exportDialogOpen" max-width="3xl" @close="closeExportDialog">
       <template #title>
         <div>