feat: order => add validation and status change handling in TableEmployee component

src/pages/09_task-order/TableEmployee.vue

@@ -15,6 +15,7 @@ import { TaskStatus } from 'src/stores/task-order/types';
 
 const props = withDefaults(
   defineProps<{
+    validate?: boolean;
     checkboxOn?: boolean;
     checkAll?: boolean;
     stepOn?: boolean;
@@ -210,7 +211,47 @@ function handleCheck(
               class=""
             >
               <q-menu :offset="[0, 4]">
-                <q-list dense>
+                <q-list v-if="validate">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    class="items-center"
+                    @click="
+                      $emit('changeAllStatus', {
+                        data: selectedEmployee,
+                        status: TaskStatus.Complete,
+                      })
+                    "
+                  >
+                    <q-icon
+                      style="color: hsl(var(--positive-bg))"
+                      name="mdi-file-check-outline"
+                      class="q-pr-sm"
+                      size="xs"
+                    ></q-icon>
+                    {{ $t(`taskOrder.status.Complete`) }}
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    class="items-center"
+                    @click="
+                      $emit('changeAllStatus', {
+                        data: selectedEmployee,
+                        status: TaskStatus.Redo,
+                      })
+                    "
+                  >
+                    <q-icon
+                      style="color: hsl(var(--negative-bg))"
+                      name="mdi-file-remove-outline"
+                      class="q-pr-sm"
+                      size="xs"
+                    ></q-icon>
+                    {{ $t(`taskOrder.status.Redo`) }}
+                  </q-item>
+                </q-list>
+                <q-list v-if="!validate" dense>
                   <q-item
                     clickable
                     v-close-popup

src/pages/09_task-order/order_view/MainPage.vue

@@ -38,6 +38,7 @@ import {
 } from 'src/stores/task-order/types';
 import { RequestWork } from 'src/stores/request-list';
 import { precisionRound } from 'src/utils/arithmetic';
+import { getUserId } from 'src/services/keycloak';
 
 const taskOrderFormStore = useTaskOrderForm();
 const taskOrderStore = useTaskOrderStore();
@@ -83,6 +84,27 @@ const responsibleInstitution = ref<string[]>([]);
 
 const summaryPrice = computed(() => getPrice(taskListGroup.value));
 
+const selectedEmployee = ref<
+  (RequestWork & {
+    _template?: {
+      id: string;
+      templateName: string;
+      templateStepName: string;
+      step: number;
+    } | null;
+  })[][][]
+>([]);
+const failedDialog = ref(false);
+const taskStatusRecords = ref<
+  {
+    requestWorkId: string;
+    step: number;
+    failedComment?: string;
+    failedType?: string;
+    code?: string;
+  }[]
+>([]);
+
 function getPrice(
   list: {
     product: RequestWork['productService']['product'];
@@ -199,6 +221,9 @@ const messengerListGroup = computed(() =>
             },
           ],
         });
+        if (selectedEmployee.value.length < acc.length) {
+          selectedEmployee.value.push([[]]);
+        }
       }
 
       if (indexUser !== -1) {
@@ -578,13 +603,50 @@ function taskStatusCount(index: number, id: string) {
   }
 }
 
+function viewDocument(id: string, routeName: 'order' | 'receive') {
+  window.open(`/task-order/${id}/doc-product-${routeName}`, '_blank');
+}
+
+function handleChangeStatus(
+  records: {
+    data: (RequestWork & {
+      _template?: {
+        id: string;
+        templateName: string;
+        templateStepName: string;
+        step: number;
+      } | null;
+    })[];
+    status: TaskStatus;
+  },
+  messengerIndex: number,
+  productIndex: number,
+) {
+  const { data, status } = records;
+
+  if (data.length === 0) return;
+
+  taskStatusRecords.value = data.map((v) => ({
+    code: `${v.productService.product.code}-${v.request.code}`,
+    requestWorkId: v.id || '',
+    step: v._template?.step || 0,
+  }));
+
+  if (status === TaskStatus.Failed) {
+    failedDialog.value = true;
+    return;
+  }
+
+  taskOrderFormStore.changeStatus(taskStatusRecords.value, status, () => {
+    if (!currentFormData.value.id) return;
+    selectedEmployee.value[messengerIndex][productIndex] = [];
+    taskOrderFormStore.assignFormData(currentFormData.value.id, 'info');
+  });
+}
+
 watch([currentFormData.value.taskStatus], () => {
   fetchStatus();
 });
-
-function viewDocument(id: string, routeName: 'order' | 'receive') {
-  window.open(`/task-order/${id}/doc-prouct-${routeName}`, '_blank');
-}
 </script>
 <template>
   <div class="column surface-0 fullscreen">
@@ -768,8 +830,8 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
             "
           >
             <InfoMessengerExpansion
-              v-for="(v, i) in messengerListGroup"
+              v-for="(v, messengerIndex) in messengerListGroup"
-              :key="i"
+              :key="messengerIndex"
               :gender="getMessengerName(v.responsibleUser, { gender: true })"
               :contact-name="
                 getMessengerName(v.responsibleUser, { locale: $i18n.locale })
@@ -788,7 +850,7 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
                   {{ $t('menu.product') }}
                 </FormGroupHead>
                 <div
-                  v-for="{ product, list } in v.list"
+                  v-for="({ product, list }, productIndex) in v.list"
                   :key="product.id"
                   class="bordered-b"
                 >
@@ -848,14 +910,31 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
 
                     <div>
                       <div class="full-width q-pa-sm">
-                        <TableEmployee step-on :rows="list">
+                        <TableEmployee
+                          validate
+                          step-on
+                          :checkbox-on="view === TaskOrderStatus.Validate"
+                          :check-all="view === TaskOrderStatus.Validate"
+                          :rows="list"
+                          @change-all-status="
+                            (v) =>
+                              handleChangeStatus(
+                                v,
+                                messengerIndex,
+                                productIndex,
+                              )
+                          "
+                          v-model:selected-employee="
+                            selectedEmployee[messengerIndex][productIndex]
+                          "
+                        >
                           <template #append="{ props: subProps }">
                             <TaskStatusComponent
                               :no-action="view !== TaskOrderStatus.Validate"
                               type="order"
                               :readonly="
-                                fullTaskOrder?.taskList[i].taskStatus ===
+                                fullTaskOrder?.taskList[messengerIndex]
-                                TaskStatus.Pending
+                                  .taskStatus === TaskStatus.Pending
                               "
                               :status="subProps.row.taskStatus"
                               @click-failed="
@@ -867,31 +946,16 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
                                 }
                               "
                               @change-status="
-                                (status) =>
+                                (status) => {
-                                  taskOrderFormStore.changeStatus(
+                                  handleChangeStatus(
-                                    [
+                                    {
-                                      {
+                                      data: [subProps.row],
-                                        requestWorkId: subProps.row.id || '',
+                                      status: status,
-                                        step: subProps.row._template?.step || 0,
-                                      },
-                                    ],
-                                    status,
-                                    () => {
-                                      subProps.row.taskStatus = status;
-
-                                      if (fullTaskOrder) {
-                                        const target =
-                                          fullTaskOrder.taskList.find(
-                                            (t) =>
-                                              t.requestWorkId ===
-                                              subProps.row.id,
-                                          );
-                                        if (target) {
-                                          target.taskStatus = status;
-                                        }
-                                      }
                                     },
-                                  )
+                                    messengerIndex,
+                                    productIndex,
+                                  );
+                                }
                               "
                             />
                           </template>