Changes

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 } from "vue";
 import axios from "axios";
 import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import DialogModal from "@/Components/DialogModal.vue";
+import ConfirmDialog from "@/Components/ConfirmDialog.vue";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
@@ -30,6 +31,7 @@ import {
 import { cn } from "@/lib/utils";
 import AppCard from "@/Components/app/ui/card/AppCard.vue";
 import { CardTitle } from "@/Components/ui/card";
+import { toNumber } from "lodash";
 
 const props = defineProps({
   segment: Object,
@@ -63,6 +65,14 @@ const exportColumns = ref(columns.map((col) => col.key));
 const exportError = ref("");
 const isExporting = ref(false);
 
+const contractTable = ref(null);
+const selectedRows = ref([]);
+const showConfirmDialog = ref(false);
+const archiveForm = useForm({
+  contracts: [],
+  reactivate: false,
+});
+
 const hasActiveFilters = computed(() => {
   return Boolean(search.value?.trim()) || Boolean(selectedClient.value);
 });
@@ -78,6 +88,13 @@ const appliedFilterCount = computed(() => {
   return count;
 });
 
+function handleSelectionChange(selectedKeys) {
+  selectedRows.value = selectedKeys.map((val, i) => {
+    const nu = toNumber(val);
+    return props.contracts.data[nu].uuid;
+  });
+}
+
 const contractsCurrentPage = computed(() => props.contracts?.current_page ?? 1);
 const contractsPerPage = computed(() => props.contracts?.per_page ?? 15);
 const totalContracts = computed(
@@ -317,43 +334,9 @@ function extractFilenameFromHeaders(headers) {
   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;
+  console.log(selectedRows.value);
+  if (!selectedRows.value?.length) return;
   showConfirmDialog.value = true;
 }
 
@@ -362,7 +345,7 @@ function closeConfirmDialog() {
 }
 
 function submitArchive() {
-  if (!selectedRows.value.length) return;
+  if (!selectedRows.value?.length) return;
 
   showConfirmDialog.value = false;
 
@@ -373,6 +356,9 @@ function submitArchive() {
     preserveScroll: true,
     onSuccess: () => {
       selectedRows.value = [];
+      if (contractTable.value) {
+        contractTable.value.clearSelection();
+      }
       router.reload({ only: ["contracts"] });
     },
   });
@@ -430,10 +416,13 @@ function submitArchive() {
             </div>
           </template>
           <DataTable
+            ref="contractTable"
             :columns="columns"
             :data="contracts?.data || []"
             :meta="contracts || {}"
             route-name="segments.show"
+            :enable-row-selection="canManageSettings"
+            @selection:change="handleSelectionChange"
             :route-params="{ segment: segment?.id ?? segment }"
             :only-props="['contracts']"
             :page-size="contracts?.per_page ?? 15"
@@ -566,6 +555,17 @@ function submitArchive() {
                 </Button>
               </div>
             </template>
+            <template #toolbar-actions="{ table }">
+              <Button
+                v-if="canManageSettings && table?.getSelectedRowModel()?.rows?.length > 0"
+                variant="destructive"
+                size="sm"
+                class="gap-2"
+                @click="openArchiveModal"
+              >
+                Arhiviraj ({{ table.getSelectedRowModel().rows.length }})
+              </Button>
+            </template>
 
             <template #cell-client_case="{ row }">
               <Link
@@ -610,8 +610,10 @@ function submitArchive() {
     <ConfirmDialog
       :show="showConfirmDialog"
       title="Arhiviraj pogodbe"
-      :message="`Ali ste prepričani, da želite arhivirati ${selectedRows.length} pogodb${
-        selectedRows.length === 1 ? 'o' : ''
+      :message="`Ali ste prepričani, da želite arhivirati ${
+        selectedRows?.length || 0
+      } pogodb${
+        selectedRows?.length === 1 ? 'o' : ''
       }? Arhivirane pogodbe bodo odstranjene iz aktivnih segmentov.`"
       confirm-text="Arhiviraj"
       cancel-text="Prekliči"