From b9a98fb1d8fde7caa166ec7b98617f2b36a1b6ea Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 25 Dec 2024 14:34:38 +0700
Subject: [PATCH] refactor: reduce data step show user

---
 src/pages/08_request-list/RequestListView.vue | 48 +++++++++++++++----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 66abbade..260ff993 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -13,6 +13,7 @@ import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
 import { StateButton } from 'components/button';
 
 // NOTE: Store
+import { baseUrl } from 'src/stores/utils';
 import { dateFormatJS } from 'src/utils/datetime';
 import { useRequestList } from 'src/stores/request-list';
 import {
@@ -37,6 +38,8 @@ import {
 import { PropVariant } from 'src/stores/product-service/types';
 import { Invoice } from 'src/stores/payment/types';
 
+import { CreatedBy } from 'src/stores/types';
+
 const { locale } = useI18n();
 
 // NOTE: Variable
@@ -254,14 +257,25 @@ async function triggerViewFile(opt: {
 }
 
 const responsiblePersonList = computed(() => {
-  const temp = workList.value?.reduce<Record<number, User[]>>((acc, curr) => {
-    console.log(curr.productService.service?.work);
-    curr.stepStatus.forEach((v) => {
-      // acc[v.step].push();
-    });
+  const temp = workList.value?.reduce<Record<string, CreatedBy[]>>(
+    (acc, curr: RequestWork) => {
+      curr.productService.service?.workflow?.step.forEach((v) => {
+        const key = v.order.toString();
 
-    return acc;
-  }, []);
+        if (!acc[key]) {
+          acc[key] = [];
+        } else {
+          v.responsiblePerson.forEach((lhs) => {
+            if (acc[v.order].find((rhs) => rhs.id === lhs.userId)) return;
+            acc[v.order].push(lhs.user);
+          });
+        }
+      });
+
+      return acc;
+    },
+    {},
+  );
 
   return temp;
 });
@@ -359,7 +373,25 @@ function isInstallmentPaySuccess(installmentNo: number) {
         <div class="column">
           <span class="app-text-muted">{{ $t('flow.responsiblePerson') }}</span>
           <span>
-            <AvatarGroup />
+            <template
+              v-if="
+                responsiblePersonList &&
+                responsiblePersonList[pageState.currentStep].length >= 1
+              "
+            >
+              <AvatarGroup
+                :data="
+                  responsiblePersonList[pageState.currentStep].map((v) => ({
+                    name:
+                      $i18n.locale === 'eng'
+                        ? `${v.firstNameEN} ${v.lastNameEN}`
+                        : `${v.firstName} ${v.lastName}`,
+                    imgUrl: `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
+                  }))
+                "
+              />
+            </template>
+            <template v-else>-</template>
           </span>
         </div>
       </div>