From 52a0baa1a4f3ee8b7499827e8aade134decc0fd9 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 24 Jan 2025 13:22:50 +0700
Subject: [PATCH] feat: 09 => select ready select all (order)

---
 .../09_task-order/SelectReadyRequestWork.vue  |   2 +
 src/pages/09_task-order/TableEmployee.vue     | 100 +++++++++++++++---
 2 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/pages/09_task-order/SelectReadyRequestWork.vue b/src/pages/09_task-order/SelectReadyRequestWork.vue
index 4ad33238..1810d4a7 100644
--- a/src/pages/09_task-order/SelectReadyRequestWork.vue
+++ b/src/pages/09_task-order/SelectReadyRequestWork.vue
@@ -318,6 +318,8 @@ function assignTempGroup() {
               <div class="q-pa-md full-width">
                 <TableEmployee
                   checkbox-on
+                  check-all
+                  select-ready
                   :step-on="!creditNote"
                   :statusOn="creditNote"
                   :rows="
diff --git a/src/pages/09_task-order/TableEmployee.vue b/src/pages/09_task-order/TableEmployee.vue
index 7fa6a307..dd55469b 100644
--- a/src/pages/09_task-order/TableEmployee.vue
+++ b/src/pages/09_task-order/TableEmployee.vue
@@ -12,12 +12,14 @@ import { RequestWork } from 'src/stores/request-list';
 import { QuotationFull } from 'src/stores/quotations/types';
 import { dateFormatJS, calculateAge } from 'src/utils/datetime';
 import { TaskStatus } from 'src/stores/task-order/types';
+import { computed } from 'vue';
 
 const props = withDefaults(
   defineProps<{
     validate?: boolean;
     checkboxOn?: boolean;
     checkAll?: boolean;
+    selectReady?: boolean;
     stepOn?: boolean;
     statusOn?: boolean;
     rows: QTableProps['rows'];
@@ -43,6 +45,12 @@ const selectedEmployee = defineModel<
   default: [],
 });
 
+const selectedEmployeeInTable = computed(() => {
+  return selectedEmployee.value.filter((s) =>
+    props.rows.some((r) => s.id === r.id),
+  );
+});
+
 defineEmits<{
   (
     e: 'changeAllStatus',
@@ -98,6 +106,8 @@ function goToRequestList(id: string) {
 }
 
 function handleCheckAll() {
+  if (disableCheckAll()) return;
+
   const arr = JSON.parse(JSON.stringify(props.rows));
   const shouldExclude = (status: TaskStatus, validate: boolean) =>
     validate
@@ -120,13 +130,53 @@ function handleCheckAll() {
         } | null;
         taskStatus: TaskStatus;
       },
-    ) => !shouldExclude(t.taskStatus, props.validate),
+    ) =>
+      props.selectReady
+        ? !selectedEmployee.value.some(
+            (v) => v._template?.id !== t._template?.id,
+          )
+        : !shouldExclude(t.taskStatus, props.validate),
   );
 
-  if (selectedEmployee.value.length !== selectableTasks.length) {
-    selectedEmployee.value = selectableTasks;
+  const selectedIds = new Set(selectedEmployee.value.map((v) => v.id));
+
+  if (selectedEmployeeInTable.value.length !== selectableTasks.length) {
+    selectableTasks.forEach(
+      (
+        task: RequestWork & {
+          _template?: {
+            id: string;
+            templateName: string;
+            templateStepName: string;
+            step: number;
+          } | null;
+          taskStatus: TaskStatus;
+        },
+      ) => {
+        if (!selectedIds.has(task.id)) {
+          selectedEmployee.value.push(task);
+        }
+      },
+    );
   } else {
-    selectedEmployee.value = [];
+    const selectableTaskIds = new Set(
+      selectableTasks.map(
+        (
+          task: RequestWork & {
+            _template?: {
+              id: string;
+              templateName: string;
+              templateStepName: string;
+              step: number;
+            } | null;
+            taskStatus: TaskStatus;
+          },
+        ) => task.id,
+      ),
+    );
+    selectedEmployee.value = selectedEmployee.value.filter(
+      (task) => !selectableTaskIds.has(task.id),
+    );
   }
 }
 
@@ -159,6 +209,14 @@ function handleCheck(
     selectedEmployee.value.push(row);
   }
 }
+
+function disableCheckAll() {
+  if (!props.selectReady) return false;
+  const firstTemplate = props.rows[0]?._template.id;
+  const hasDifferent = props.rows.some((r) => r._template.id !== firstTemplate);
+
+  return hasDifferent && selectedEmployee.value.length === 0;
+}
 </script>
 <template>
   <q-table
@@ -212,26 +270,36 @@ function handleCheck(
         <q-th v-if="checkboxOn" class="relative-position">
           <q-checkbox
             v-if="checkAll"
+            :disable="disableCheckAll()"
             :model-value="
-              selectedEmployee.length > 0 &&
-              selectedEmployee.length ===
-                (validate
+              selectedEmployeeInTable.length > 0 &&
+              selectedEmployeeInTable.length ===
+                (selectReady
                   ? rows.filter(
                       (t) =>
-                        t.taskStatus !== TaskStatus.Complete &&
-                        t.taskStatus !== TaskStatus.Success,
+                        t._template.id ===
+                        selectedEmployeeInTable[0]?._template?.id,
                     ).length
-                  : rows.filter(
-                      (t) =>
-                        t.taskStatus !== TaskStatus.Complete &&
-                        t.taskStatus !== TaskStatus.Success &&
-                        t.taskStatus !== TaskStatus.Failed,
-                    ).length)
+                  : validate
+                    ? rows.filter(
+                        (t) =>
+                          t.taskStatus !== TaskStatus.Complete &&
+                          t.taskStatus !== TaskStatus.Success,
+                      ).length
+                    : rows.filter(
+                        (t) =>
+                          t.taskStatus !== TaskStatus.Complete &&
+                          t.taskStatus !== TaskStatus.Success &&
+                          t.taskStatus !== TaskStatus.Failed,
+                      ).length)
             "
             @click="handleCheckAll"
             size="sm"
           />
-          <div v-if="checkAll" class="absolute-right row items-center">
+          <div
+            v-if="checkAll && !selectReady"
+            class="absolute-right row items-center"
+          >
             <q-btn
               flat
               dense