From 9655597679aabf6e9f12a4b3f9b2308de97e0124 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <162551568+Methapon-Frappet@users.noreply.github.com>
Date: Fri, 1 Nov 2024 17:20:11 +0700
Subject: [PATCH] fix: change order wrong value in workflow management page
 (#50)

* fix: responsible person not display correctly after move

* fix: typo
---
 .../04_flow-management/FormFlow.vue           | 55 +++++++++++--------
 src/pages/04_flow-managment/MainPage.vue      |  4 +-
 src/stores/workflow-template/types.ts         |  2 +-
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index aa703396..2570a2b9 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -74,7 +74,7 @@ async function getUserList(opts?: { query: string }) {
 //   if (resUser) userInTable.value.push(resUser);
 // }
 
-function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
+function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) {
   const currStep = flowData.value.step[stepIndex];
   const existPersonIndex = currStep.responsiblePersonId?.findIndex(
     (p) => p === responsiblePerson.id,
@@ -86,11 +86,11 @@ function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
     if (!userInTable.value[stepIndex]) {
       userInTable.value[stepIndex] = {
         name: flowData.value.step[stepIndex].name,
-        resposiblePerson: [],
+        responsiblePerson: [],
       };
     }
 
-    userInTable.value[stepIndex]?.resposiblePerson.push({
+    userInTable.value[stepIndex]?.responsiblePerson.push({
       id: responsiblePerson.id,
       selectedImage: responsiblePerson.selectedImage,
       gender: responsiblePerson.gender,
@@ -103,7 +103,7 @@ function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
     });
   } else {
     currStep.responsiblePersonId?.splice(Number(existPersonIndex), 1);
-    userInTable.value[stepIndex]?.resposiblePerson.splice(
+    userInTable.value[stepIndex]?.responsiblePerson.splice(
       Number(existPersonIndex),
       1,
     );
@@ -234,7 +234,10 @@ onMounted(async () => {
                   round
                   :disable="props.rowIndex === 0"
                   style="color: hsl(var(--text-mute-2))"
-                  @click.stop="moveItemUp(flowData.step, props.rowIndex)"
+                  @click.stop="
+                    moveItemUp(flowData.step, props.rowIndex);
+                    moveItemUp(userInTable, props.rowIndex);
+                  "
                 />
                 <q-btn
                   :id="`btn-down-${props.rowIndex}`"
@@ -247,7 +250,10 @@ onMounted(async () => {
                   class="q-mx-sm"
                   :disable="props.rowIndex === flowData.step.length - 1"
                   style="color: hsl(var(--text-mute-2))"
-                  @click.stop="moveItemDown(flowData.step, props.rowIndex)"
+                  @click.stop="
+                    moveItemDown(flowData.step, props.rowIndex);
+                    moveItemDown(userInTable, props.rowIndex);
+                  "
                 />
 
                 <q-avatar
@@ -288,21 +294,21 @@ onMounted(async () => {
                       <q-img
                         class="text-center"
                         :ratio="1"
-                        :src="`${baseUrl}/user/${userInTable[props.rowIndex]?.resposiblePerson[0]?.id}/profile-image/${userInTable[props.rowIndex]?.resposiblePerson[0]?.selectedImage}`"
+                        :src="`${baseUrl}/user/${userInTable[props.rowIndex]?.responsiblePerson[0]?.id}/profile-image/${userInTable[props.rowIndex]?.responsiblePerson[0]?.selectedImage}`"
                       >
                         <template #error>
                           <div
                             class="no-padding full-width full-height flex items-center justify-center"
-                            :style="`${userInTable[props.rowIndex]?.resposiblePerson[0].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                            :style="`${userInTable[props.rowIndex]?.responsiblePerson[0].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
                           >
                             <q-img
                               v-if="
-                                userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.gender
+                                userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.gender
                               "
                               :src="
-                                userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.gender === 'male'
+                                userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.gender === 'male'
                                   ? '/no-img-man.png'
                                   : '/no-img-female.png'
                               "
@@ -323,24 +329,25 @@ onMounted(async () => {
                     >
                       <span>
                         {{
-                          `${optionStore.mapOption(userInTable[props.rowIndex]?.resposiblePerson[0]?.namePrefix || '')} ${
+                          `${optionStore.mapOption(userInTable[props.rowIndex]?.responsiblePerson[0]?.namePrefix || '')} ${
                             $i18n.locale === 'eng'
-                              ? userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.firstNameEN
-                              : userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.firstName
+                              ? userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.firstNameEN
+                              : userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.firstName
                           } ${
                             $i18n.locale === 'eng'
-                              ? userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.lastNameEN
-                              : userInTable[props.rowIndex]?.resposiblePerson[0]
-                                  ?.lastName
+                              ? userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.lastNameEN
+                              : userInTable[props.rowIndex]
+                                  ?.responsiblePerson[0]?.lastName
                           }`
                         }}
                       </span>
                       <span class="text-caption app-text-muted">
                         {{
-                          userInTable[props.rowIndex]?.resposiblePerson[0]?.code
+                          userInTable[props.rowIndex]?.responsiblePerson[0]
+                            ?.code
                         }}
                       </span>
                     </div>
@@ -380,7 +387,7 @@ onMounted(async () => {
                       clickable
                       class="column"
                       @click.stop="
-                        selectResponiblePerson(props.rowIndex, person)
+                        selectResponsiblePerson(props.rowIndex, person)
                       "
                     >
                       <div class="row items-center no-wrap">
@@ -390,7 +397,7 @@ onMounted(async () => {
                             props.row.responsiblePersonId.includes(person.id)
                           "
                           @click.stop="
-                            selectResponiblePerson(props.rowIndex, person)
+                            selectResponsiblePerson(props.rowIndex, person)
                           "
                         />
                         <q-avatar class="q-ml-sm" size="md">
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 359ac651..8b942bf6 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -194,9 +194,9 @@ function assignFormData(workflowData: WorkflowTemplate) {
     status: workflowData.status,
     name: workflowData.name,
     step: workflowData.step.map((s, i) => {
-      userInTable.value[i] = { name: s.name, resposiblePerson: [] };
+      userInTable.value[i] = { name: s.name, responsiblePerson: [] };
       s.responsiblePerson.forEach((p) => {
-        userInTable.value[i].resposiblePerson.push({
+        userInTable.value[i].responsiblePerson.push({
           id: p.user.id,
           selectedImage: p.user.selectedImage,
           gender: p.user.gender,
diff --git a/src/stores/workflow-template/types.ts b/src/stores/workflow-template/types.ts
index f8319bb2..f643a6fe 100644
--- a/src/stores/workflow-template/types.ts
+++ b/src/stores/workflow-template/types.ts
@@ -43,7 +43,7 @@ export type WorkflowTemplatePayload = {
 
 export type WorkflowUserInTable = {
   name: string;
-  resposiblePerson: {
+  responsiblePerson: {
     id: string;
     selectedImage?: string;
     gender: string;