refactor: show all product and add column status and edit format remark

src/pages/09_task-order/constants.ts

@@ -227,6 +227,12 @@ export const productColumn = [
     label: 'taskOrder.productList',
     field: 'productList',
   },
+  {
+    name: 'status',
+    align: 'center',
+    label: 'general.status',
+    field: 'status',
+  },
   {
     name: 'amountOfEmployee',
     align: 'center',

src/pages/09_task-order/expansion/ProductExpansion.vue

@@ -11,6 +11,8 @@ import { baseUrl, formatNumberDecimal, commaInput } from 'src/stores/utils';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useConfigStore } from 'stores/config';
 import { storeToRefs } from 'pinia';
+import BadgeComponent from 'src/components/BadgeComponent.vue';
+import { TaskStatus } from 'src/stores/task-order/types';
 
 const currentBtnOpen = ref<boolean[]>([]);
 const configStore = useConfigStore();
@@ -30,7 +32,10 @@ const props = defineProps<{
   readonly?: boolean;
   agentPrice?: boolean;
   taskList: {
-    product: RequestWork['productService']['product'];
+    product: RequestWork['productService']['product'] & {
+      taskStatus?: TaskStatus;
+      totalNotStatusComplete?: number;
+    };
     list: RequestWork[];
   }[];
   creditNote?: boolean;
@@ -111,6 +116,26 @@ function calcPrice(
 
   return precisionRound(priceNoVat * amount + rawVatTotal);
 }
+
+function taskOrderStatus(value: TaskStatus) {
+  if ([TaskStatus.Pending].includes(value)) {
+    return '--blue-6-hsl';
+  }
+  if ([TaskStatus.InProgress, TaskStatus.Validate].includes(value)) {
+    return '--orange-5-hsl';
+  }
+  if (
+    [
+      TaskStatus.Canceled,
+      TaskStatus.Restart,
+      TaskStatus.Redo,
+      TaskStatus.Failed,
+    ].includes(value)
+  ) {
+    return '--red-5-hsl';
+  }
+  return '--green-8-hsl';
+}
 </script>
 <template>
   <q-expansion-item
@@ -144,7 +169,8 @@ function calcPrice(
                 (v) =>
                   v.name !== 'discount' &&
                   v.name !== 'priceBeforeVat' &&
-                  v.name !== 'vat',
+                  v.name !== 'vat' &&
+                  v.name !== 'status',
               )
             : productColumn
         "
@@ -173,7 +199,10 @@ function calcPrice(
         <template
           v-slot:body="props: {
             row: {
-              product: RequestWork['productService']['product'];
+              product: RequestWork['productService']['product'] & {
+                taskStatus?: TaskStatus;
+                totalNotStatusComplete?: number;
+              };
               list: RequestWork[];
             };
           } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
@@ -203,6 +232,14 @@ function calcPrice(
               </q-avatar>
               {{ props.row.product.name }}
             </q-td>
+            <q-td class="text-left" v-if="!creditNote">
+              <BadgeComponent
+                hide-icon
+                :hsla-color="taskOrderStatus(props.row.product.taskStatus)"
+                :title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`"
+              />
+            </q-td>
+
             <q-td>
               {{ props.row.list.length }}
             </q-td>

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

@@ -280,7 +280,10 @@ let taskListGroup = computed(() => {
 
   const cacheData = currentFormData.value.taskList.reduce<
     {
-      product: RequestWork['productService']['product'];
+      product: RequestWork['productService']['product'] & {
+        taskStatus?: TaskStatus;
+        totalNotStatusComplete?: number;
+      };
       list: (RequestWork & {
         _template?: {
           id: string;
@@ -289,15 +292,15 @@ let taskListGroup = computed(() => {
           step: number;
           responsibleInstitution: (string | { group: string })[];
         } | null;
+        taskStatus?: TaskStatus;
+        failedComment?: string;
+        failedType?: string;
       })[];
     }[]
   >((acc, curr) => {
-    if (
+    const isNotComplete =
       fullTaskOrder.value?.taskOrderStatus === TaskOrderStatus.Complete &&
-      curr.taskStatus !== TaskStatus.Complete
-    ) {
-      return acc;
-    }
+      curr.taskStatus !== TaskStatus.Complete;
 
     const task = curr.requestWorkStep;
     const step = curr.step;
@@ -308,9 +311,18 @@ let taskListGroup = computed(() => {
       let exist = acc.find(
         (item) => task.requestWork.productService.productId == item.product.id,
       );
-      const record = Object.assign(task.requestWork, {
-        _template: getTemplateData(task.requestWork, step),
-      });
+
+      const record = Object.assign(
+        {
+          ...task.requestWork,
+          taskStatus: curr.taskStatus,
+          failedComment: curr.failedComment || '',
+          failedType: curr.failedType || '',
+        },
+        {
+          _template: getTemplateData(task.requestWork, step),
+        },
+      );
 
       const template = getTemplateData(task.requestWork, step);
 
@@ -323,10 +335,18 @@ let taskListGroup = computed(() => {
       }
 
       if (exist) {
-        exist.list.push(task.requestWork);
+        exist.list.push(record);
+        if (isNotComplete) {
+          exist.product.totalNotStatusComplete =
+            (exist.product.totalNotStatusComplete || undefined) + 1;
+        }
       } else {
         acc.push({
-          product: task.requestWork.productService.product,
+          product: {
+            ...task.requestWork.productService.product,
+            taskStatus: curr.taskStatus || TaskStatus.Pending,
+            totalNotStatusComplete: isNotComplete ? 1 : undefined,
+          },
           list: [record],
         });
       }
@@ -985,6 +1005,7 @@ watch(
             "
           />
           <!-- TODO: blind remark, urgent -->
+          {{ console.log(taskListGroup) }}
           <RemarkExpansion
             v-if="
               view === TaskOrderStatus.Pending ||