Changes

resources/js/Pages/FieldJob/Index.vue

@@ -30,14 +30,15 @@ import AppPopover from "@/Components/app/ui/AppPopover.vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
 import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import { toNumber } from "lodash";
 
 const props = defineProps({
   setting: Object,
   unassignedContracts: Object,
   assignedContracts: Object,
   users: Array,
-  unassignedClients: Array,
-  assignedClients: Array,
+  unassignedClients: [Array, Object],
+  assignedClients: [Array, Object],
   filters: Object,
 });
 
@@ -54,6 +55,8 @@ const filterAssignedSelectedClient = ref(
     : []
 );
 
+const unassignedContractTable = ref(null);
+
 const form = useForm({
   contract_uuid: null,
   assigned_user_id: null,
@@ -107,6 +110,14 @@ function toggleContractSelection(uuid, checked) {
   console.log(selectedContractUuids.value);
 }
 
+function handleContractSelection(selected) {
+  selectedContractUuids.value = selected.map((val, i) => {
+    const num = toNumber(val);
+
+    return props.unassignedContracts.data[num].uuid;
+  });
+}
+
 // Format helpers (Slovenian formatting)
 
 // Initialize search and filter from URL params
@@ -296,6 +307,7 @@ function assignSelected() {
   bulkForm.contract_uuids = selectedContractUuids.value;
   bulkForm.post(route("fieldjobs.assign-bulk"), {
     onSuccess: () => {
+      unassignedContractTable.value.clearSelection();
       selectedContractUuids.value = [];
       bulkForm.contract_uuids = [];
     },
@@ -304,7 +316,11 @@ function assignSelected() {
 
 function cancelAssignment(contract) {
   const payload = { contract_uuid: contract.uuid };
-  form.transform(() => payload).post(route("fieldjobs.cancel"));
+  form
+    .transform(() => payload)
+    .post(route("fieldjobs.cancel"), {
+      preserveScroll: true,
+    });
 }
 
 // Column definitions for DataTableNew2
@@ -437,6 +453,7 @@ const assignedRows = computed(() =>
               </div>
             </div>
             <DataTable
+              ref="unassignedContractTable"
               :columns="unassignedColumns"
               :data="unassignedRows"
               :meta="{
@@ -449,6 +466,8 @@ const assignedRows = computed(() =>
                 links: unassignedContracts.links,
               }"
               row-key="uuid"
+              :enable-row-selection="true"
+              @selection:change="handleContractSelection"
               :page-size="props.unassignedContracts?.per_page || 10"
               :page-size-options="[10, 15, 25, 50, 100]"
               :show-toolbar="true"
@@ -482,7 +501,10 @@ const assignedRows = computed(() =>
                         <AppMultiSelect
                           v-model="filterUnassignedSelectedClient"
                           :items="
-                            (props.unassignedClients || []).map((client) => ({
+                            (Array.isArray(props.unassignedClients)
+                              ? props.unassignedClients
+                              : props.unassignedClients?.data || []
+                            ).map((client) => ({
                               value: client.uuid,
                               label: client.person.full_name,
                             }))
@@ -497,14 +519,6 @@ const assignedRows = computed(() =>
                   </AppPopover>
                 </div>
               </template>
-
-              <template #cell-_select="{ row }">
-                <Checkbox
-                  @update:model-value="
-                    (checked) => toggleContractSelection(row.uuid, checked)
-                  "
-                />
-              </template>
               <template #cell-case_person="{ row }">
                 <Link
                   v-if="row.client_case?.uuid"
@@ -605,7 +619,10 @@ const assignedRows = computed(() =>
                       <AppMultiSelect
                         v-model="filterAssignedSelectedClient"
                         :items="
-                          (props.assignedClients || []).map((client) => ({
+                          (Array.isArray(props.assignedClients)
+                            ? props.assignedClients
+                            : props.assignedClients?.data || []
+                          ).map((client) => ({
                             value: client.uuid,
                             label: client.person.full_name,
                           }))