From f9eeb7f52920b3eebe53f861f255a3c072bf3ffd Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 25 Jul 2024 10:49:43 +0000
Subject: [PATCH] fix: change status dialog

---
 src/pages/01_branch-management/MainPage.vue   |   4 +-
 .../02_personnel-management/MainPage.vue      |  29 ++++-
 src/pages/03_customer-management/MainPage.vue |  98 +++++++++-------
 src/pages/04_product-service/MainPage.vue     | 105 +++++++++++-------
 4 files changed, 152 insertions(+), 84 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 1ed8ca5a..d2190172 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -419,8 +419,8 @@ async function triggerChangeStatus(
 ): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> {
   return await new Promise((resolve) => {
     dialog({
-      color: 'warning',
-      icon: 'mdi-alert',
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
       title: t('confirmChangeStatusTitle'),
       actionText:
         status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 8d4dacf8..e1b17c33 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -493,6 +493,26 @@ async function toggleStatus(id: string) {
   if (res) record.status = res.status;
 }
 
+async function triggerChangeStatus(id: string, status: string) {
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
+      title: t('confirmChangeStatusTitle'),
+      actionText:
+        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+      message:
+        status !== 'INACTIVE'
+          ? t('confirmChangeStatusOffMessage')
+          : t('confirmChangeStatusOnMessage'),
+      action: async () => {
+        await toggleStatus(id).then(resolve).catch(reject);
+      },
+      cancel: () => {},
+    });
+  });
+}
+
 async function assignFormData(idEdit: string) {
   if (!userData.value) return;
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
@@ -1248,7 +1268,10 @@ watch(
                                 "
                                 @click="
                                   async () => {
-                                    toggleStatus(props.row.id);
+                                    triggerChangeStatus(
+                                      props.row.id,
+                                      props.row.status,
+                                    );
                                   }
                                 "
                                 :model-value="props.row.status !== 'INACTIVE'"
@@ -1305,7 +1328,9 @@ watch(
                   @update-card="(a, b) => openDialog(a, props.row.id, b)"
                   @delete-card="onDelete(props.row.id)"
                   @enter-card="(a) => openDialog(a, props.row.id)"
-                  @toggle-status="toggleStatus(props.row.id)"
+                  @toggle-status="
+                    triggerChangeStatus(props.row.id, props.row.status)
+                  "
                 />
               </div>
             </template>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d1df57a7..4080af2c 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -755,6 +755,7 @@ function clearFormEmployee() {
   infoDrawerEmployeeEdit.value = false;
   formDataEmployeeSameAddr.value = true;
   currentEmployeeCode.value = '';
+  formDataEmployeeTab.value = 'personalInfo';
 
   currentEmployee.value = undefined;
   formDataEmployeeOwner.value = undefined;
@@ -990,6 +991,35 @@ async function fetchListEmployee() {
   }
 }
 
+async function triggerChangeStatus(id: string, status: string) {
+  console.log('asd');
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
+      title: t('confirmChangeStatusTitle'),
+      actionText:
+        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+      message:
+        status !== 'INACTIVE'
+          ? t('confirmChangeStatusOffMessage')
+          : t('confirmChangeStatusOnMessage'),
+      action: async () => {
+        if (currentTab.value === 'employee') {
+          await toggleStatusEmployee(id, status === 'ACTIVE' ? true : false)
+            .then(resolve)
+            .catch(reject);
+        } else {
+          await toggleStatusCustomer(id, status === 'ACTIVE' ? true : false)
+            .then(resolve)
+            .catch(reject);
+        }
+      },
+      cancel: () => {},
+    });
+  });
+}
+
 async function toggleStatusEmployee(id: string, status: boolean) {
   await employeeStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
 
@@ -2219,11 +2249,9 @@ watch(isMainPage, () => {
                                         "
                                         @click="
                                           async () => {
-                                            toggleStatusCustomer(
+                                            triggerChangeStatus(
                                               props.row.id,
-                                              props.row.status === 'ACTIVE'
-                                                ? true
-                                                : false,
+                                              props.row.status,
                                             );
                                           }
                                         "
@@ -2313,10 +2341,7 @@ watch(isMainPage, () => {
                           "
                           @delete-card="deleteCustomerById(props.row.id)"
                           @toggle-status="
-                            toggleStatusCustomer(
-                              props.row.id,
-                              props.row.status === 'ACTIVE' ? true : false,
-                            )
+                            triggerChangeStatus(props.row.id, props.row.status)
                           "
                         />
                       </div>
@@ -2685,11 +2710,9 @@ watch(isMainPage, () => {
                                         "
                                         @click="
                                           async () => {
-                                            toggleStatusEmployee(
+                                            triggerChangeStatus(
                                               props.row.id,
-                                              props.row.status === 'ACTIVE'
-                                                ? true
-                                                : false,
+                                              props.row.status,
                                             );
                                           }
                                         "
@@ -2754,10 +2777,7 @@ watch(isMainPage, () => {
                           "
                           @delete-card="onDelete(props.row.id)"
                           @toggle-status="
-                            toggleStatusEmployee(
-                              props.row.id,
-                              props.row.status === 'ACTIVE' ? true : false,
-                            )
+                            triggerChangeStatus(props.row.id, props.row.status)
                           "
                         />
                       </div>
@@ -4019,30 +4039,28 @@ watch(isMainPage, () => {
       employee
     >
       <template #person-card>
-        <div class="q-ma-md">
-          <AppBox class="surface-1" style="padding: 0">
-            <PersonCard
-              :can-edit-profile="infoDrawerEmployeeEdit"
-              no-hover
-              no-action
-              no-detail
-              :data="{
-                name:
-                  formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-                code: formDataEmployee.code,
-                male: formDataEmployee.gender === 'male',
-                female: formDataEmployee.gender === 'female',
-                img: profileUrl || undefined,
-              }"
-              :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
-              :gridColumns="1"
-              @edit-profile="
-                () => {
-                  inputFile.click();
-                }
-              "
-            />
-          </AppBox>
+        <div class="q-pa-md full-height" style="overflow: hidden">
+          <PersonCard
+            :can-edit-profile="infoDrawerEmployeeEdit"
+            no-hover
+            no-action
+            no-detail
+            :data="{
+              name:
+                formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+              code: formDataEmployee.code,
+              male: formDataEmployee.gender === 'male',
+              female: formDataEmployee.gender === 'female',
+              img: profileUrl || undefined,
+            }"
+            :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
+            :gridColumns="1"
+            @edit-profile="
+              () => {
+                inputFile.click();
+              }
+            "
+          />
         </div>
       </template>
       <template #information>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 26ff6a50..d01f8566 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -695,6 +695,46 @@ async function toggleStatusGroup(id: string, status: Status) {
   flowStore.rotate();
 }
 
+async function triggerChangeStatus(
+  id: string,
+  status: string,
+  type?: 'type' | 'group' | 'service' | 'product',
+) {
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
+      title: t('confirmChangeStatusTitle'),
+      actionText:
+        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+      message:
+        status !== 'INACTIVE'
+          ? t('confirmChangeStatusOffMessage')
+          : t('confirmChangeStatusOnMessage'),
+      action: async () => {
+        if (type === 'group' || productMode.value === 'group') {
+          await toggleStatusGroup(id, status as Status)
+            .then(resolve)
+            .catch(reject);
+        } else if (type === 'type' || productMode.value === 'type') {
+          await toggleStatusType(id, status as Status)
+            .then(resolve)
+            .catch(reject);
+        } else if (type === 'service' || productMode.value === 'service') {
+          await toggleStatusService(id, status as Status)
+            .then(resolve)
+            .catch(reject);
+        } else if (type === 'product' || productMode.value === 'product') {
+          await toggleStatusProduct(id, status as Status)
+            .then(resolve)
+            .catch(reject);
+        }
+      },
+      cancel: () => {},
+    });
+  });
+}
+
 async function deleteServiceById(serviceId?: string) {
   dialog({
     color: 'negative',
@@ -1712,15 +1752,17 @@ watch(
                                         @click.stop="
                                           async () => {
                                             if (node.type === 'type') {
-                                              toggleStatusType(
+                                              triggerChangeStatus(
                                                 node.id,
                                                 node.status,
+                                                node.type,
                                               );
                                             }
                                             if (node.type === 'group') {
-                                              toggleStatusGroup(
+                                              triggerChangeStatus(
                                                 node.id,
                                                 node.status,
+                                                node.type,
                                               );
                                             }
                                           }
@@ -2175,18 +2217,10 @@ watch(
                                         "
                                         @click="
                                           async () => {
-                                            if (productMode === 'type') {
-                                              toggleStatusType(
-                                                props.row.id,
-                                                props.row.status,
-                                              );
-                                            }
-                                            if (productMode === 'group') {
-                                              toggleStatusGroup(
-                                                props.row.id,
-                                                props.row.status,
-                                              );
-                                            }
+                                            triggerChangeStatus(
+                                              props.row.id,
+                                              props.row.status,
+                                            );
                                           }
                                         "
                                         :model-value="
@@ -2225,12 +2259,7 @@ watch(
                             }[productMode] || 'var(--pink-6-hsl)'
                           "
                           @toggleStatus="
-                            if (productMode === 'type') {
-                              toggleStatusType(props.row.id, props.row.status);
-                            }
-                            if (productMode === 'group') {
-                              toggleStatusGroup(props.row.id, props.row.status);
-                            }
+                            triggerChangeStatus(props.row.id, props.row.status)
                           "
                           @viewCard="
                             () => {
@@ -3000,18 +3029,11 @@ watch(
                                         "
                                         @click="
                                           () => {
-                                            if (props.row.type === 'product') {
-                                              toggleStatusProduct(
-                                                props.row.id,
-                                                props.row.status,
-                                              );
-                                            }
-                                            if (props.row.type === 'service') {
-                                              toggleStatusService(
-                                                props.row.id,
-                                                props.row.status,
-                                              );
-                                            }
+                                            triggerChangeStatus(
+                                              props.row.id,
+                                              props.row.status,
+                                              props.row.type,
+                                            );
                                           }
                                         "
                                         :model-value="
@@ -3038,12 +3060,7 @@ watch(
                           :isDisabled="row.status === 'INACTIVE' ? true : false"
                           @toggleStatus="
                             () => {
-                              if (row.type === 'product') {
-                                toggleStatusProduct(row.id, row.status);
-                              }
-                              if (row.type === 'service') {
-                                toggleStatusService(row.id, row.status);
-                              }
+                              triggerChangeStatus(row.id, row.status, row.type);
                             }
                           "
                           @menuViewDetail="
@@ -3890,13 +3907,21 @@ watch(
                 async () => {
                   if (!currentNode) return;
                   if (currentNode.type === 'type') {
-                    toggleStatusType(currentNode.id, currentNode.status);
+                    triggerChangeStatus(
+                      currentNode.id,
+                      currentNode.status,
+                      currentNode.type,
+                    );
                     currentNode.status === 'ACTIVE'
                       ? (currentNode.status = 'INACTIVE')
                       : (currentNode.status = 'ACTIVE');
                   }
                   if (currentNode.type === 'group') {
-                    toggleStatusGroup(currentNode.id, currentNode.status);
+                    triggerChangeStatus(
+                      currentNode.id,
+                      currentNode.status,
+                      currentNode.type,
+                    );
                     currentNode.status === 'ACTIVE'
                       ? (currentNode.status = 'INACTIVE')
                       : (currentNode.status = 'ACTIVE');