feat: 01 dialog confirm change status

src/i18n/en-US/alert-dialog.ts

@@ -9,6 +9,10 @@ export default {
   confirmLogoutTitle: 'Confirm Logout',
   confirmLogoutMessage: 'Do you want to log out?',
 
+  confirmChangeStatusTitle: 'Confirm Status Change',
+  confirmChangeStatusOnMessage: 'Do you want to open?',
+  confirmChangeStatusOffMessage: 'Do you want to close?',
+
   // Backend
   productGroupNotFound: 'Product group cannot be found.',
   productGroupInUsed: 'Product group is in used.',

src/i18n/th-th/alert-dialog.ts

@@ -8,6 +8,10 @@ export default {
   confirmLogoutTitle: 'ยืนยันการออกจากระบบ',
   confirmLogoutMessage: 'คุณต้องการออกจากระบบ ใช่หรือไม่',
 
+  confirmChangeStatusTitle: 'ยืนยันการเปลี่ยนสถานะ',
+  confirmChangeStatusOnMessage: 'คุณต้องการเปิดใช่หรือไม่',
+  confirmChangeStatusOffMessage: 'คุณต้องการปิดใช่หรือไม่',
+
   // Backend
   productGroupNotFound: 'ไม่พบกลุ่มสินค้า',
   productGroupInUsed: 'กลุ่มสินค้าที่ใช้งานอยู่',

src/pages/01_branch-management/MainPage.vue

@@ -9,7 +9,7 @@ import type { QTableProps } from 'quasar';
 
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'src/stores/flow';
-import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
+import { BranchWithChildren, BranchCreate, Branch } from 'stores/branch/types';
 import { Status } from 'src/stores/types';
 
 import useUtilsStore, { dialog } from 'src/stores/utils';
@@ -411,6 +411,32 @@ function triggerDelete(id: string) {
   }
 }
 
+async function triggerChangeStatus(
+  id: string,
+  status: string,
+): Promise<Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }> {
+  return await new Promise((resolve) => {
+    dialog({
+      color: 'warning',
+      icon: 'mdi-alert',
+      title: t('confirmChangeStatusTitle'),
+      actionText:
+        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+      message:
+        status !== 'INACTIVE'
+          ? t('confirmChangeStatusOffMessage')
+          : t('confirmChangeStatusOnMessage'),
+      action: async () => {
+        const res = await branchStore.editById(id, {
+          status: status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
+        });
+        if (res) resolve(res);
+      },
+      cancel: () => {},
+    });
+  });
+}
+
 async function onSubmit() {
   if (formType.value === 'edit') {
     delete formData.value['codeHeadOffice'];
@@ -622,7 +648,7 @@ watch(
                   </q-btn>
                 </div>
 
-                <div class="col full-width">
+                <div class="col full-width scroll">
                   <div class="q-pa-md">
                     <q-tree
                       :nodes="treeData"
@@ -862,15 +888,9 @@ watch(
                                             @click="
                                               async () => {
                                                 const res =
-                                                  await branchStore.editById(
+                                                  await triggerChangeStatus(
                                                     node.id,
-                                                    {
+                                                    node.status,
-                                                      status:
-                                                        node.status !==
-                                                        'INACTIVE'
-                                                          ? 'INACTIVE'
-                                                          : 'ACTIVE',
-                                                    },
                                                   );
                                                 if (res)
                                                   node.status = res.status;
@@ -1151,6 +1171,7 @@ watch(
                         <q-td>
                           <q-btn
                             icon="mdi-dots-vertical"
+                            :id="`btn-dots-${props.row.code}`"
                             size="sm"
                             dense
                             round
@@ -1270,16 +1291,11 @@ watch(
                                         @click="
                                           async () => {
                                             const res =
-                                              await branchStore.editById(
+                                              await triggerChangeStatus(
                                                 props.row.id,
-                                                {
+                                                props.row.status,
-                                                  status:
-                                                    props.row.status !==
-                                                    'INACTIVE'
-                                                      ? 'INACTIVE'
-                                                      : 'ACTIVE',
-                                                },
                                               );
+
                                             if (res)
                                               props.row.status = res.status;
                                           }
@@ -1481,16 +1497,11 @@ watch(
                                         @click="
                                           async () => {
                                             const res =
-                                              await branchStore.editById(
+                                              await triggerChangeStatus(
                                                 props.row.id,
-                                                {
+                                                props.row.status,
-                                                  status:
-                                                    props.row.status !==
-                                                    'INACTIVE'
-                                                      ? 'INACTIVE'
-                                                      : 'ACTIVE',
-                                                },
                                               );
+
                                             if (res)
                                               props.row.status = res.status;
                                           }
@@ -1815,10 +1826,10 @@ watch(
               @click="
                 async () => {
                   if (!currentNode) return;
-                  const res = await branchStore.editById(currentNode.id, {
+                  const res = await triggerChangeStatus(
-                    status:
+                    currentNode.id,
-                      currentNode.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
+                    currentNode.status,
-                  });
+                  );
                   if (res) currentNode.status = res.status;
                 }
               "