From fd5532b46ab8d7800e0186a47270fdc9281d8b0a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 19 Jul 2024 04:56:08 +0000
Subject: [PATCH] feat: 01 functional hold dialog

---
 src/pages/01_branch-management/MainPage.vue | 97 ++++++++++++++++++---
 1 file changed, 85 insertions(+), 12 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 59fb474d..a6f89c39 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -68,7 +68,7 @@ const expandedTree = ref<string[]>([]);
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
-const currentTreehHeadOfficeId = ref<string>('');
+const currentNode = ref<BranchWithChildren>();
 
 const inputFileImg = (() => {
   const element = document.createElement('input');
@@ -492,9 +492,12 @@ function changeTitle(
   return '';
 }
 
-function handleHold() {
+function handleHold(node: BranchWithChildren) {
   if ($q.screen.gt.xs) return;
-  holdDialog.value = true;
+  return function (props: unknown) {
+    holdDialog.value = true;
+    currentNode.value = node;
+  };
 }
 
 watch(locale, () => {
@@ -633,7 +636,7 @@ watch(
                       <template #default-header="{ node }">
                         <div
                           class="full-width q-py-sm"
-                          v-touch-hold.mouse="handleHold"
+                          v-touch-hold.mouse="handleHold(node)"
                           @click.stop="
                             () => {
                               if (
@@ -1704,8 +1707,15 @@ watch(
         ></div>
       </div>
 
-      <q-list>
-        <q-item clickable v-ripple>
+      <q-list v-if="currentNode">
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click.stop="
+            triggerCreate('subBranch', currentNode.id, currentNode.code)
+          "
+        >
           <q-item-section avatar>
             <q-icon name="mdi-file-plus" class="app-text-muted-2" />
           </q-item-section>
@@ -1714,7 +1724,23 @@ watch(
           </q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple>
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click.stop="
+            if (currentNode.isHeadOffice) {
+              triggerEdit(
+                'drawer',
+                currentNode.id,
+                'headOffice',
+                currentNode.code,
+              );
+            } else {
+              triggerEdit('drawer', currentNode.id, 'subBranch');
+            }
+          "
+        >
           <q-item-section avatar>
             <q-icon
               name="mdi-eye-outline"
@@ -1724,7 +1750,25 @@ watch(
           <q-item-section>{{ $t('viewDetail') }}</q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple>
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click="
+            () => {
+              if (currentNode && currentNode.isHeadOffice) {
+                triggerEdit(
+                  'form',
+                  currentNode.id,
+                  'headOffice',
+                  currentNode.code,
+                );
+              } else {
+                currentNode && triggerEdit('form', currentNode.id, 'subBranch');
+              }
+            }
+          "
+        >
           <q-item-section avatar>
             <q-icon
               name="mdi-pencil-outline"
@@ -1734,18 +1778,47 @@ watch(
           <q-item-section>{{ $t('edit') }}</q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple>
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click="triggerDelete(currentNode.id)"
+        >
           <q-item-section avatar>
             <q-icon name="mdi-trash-can-outline" class="app-text-negative" />
           </q-item-section>
           <q-item-section>{{ $t('delete') }}</q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple>
+        <q-item clickable v-ripple v-close-popup>
           <q-item-section avatar>
-            <q-toggle dense size="sm" :model-value="holdDialog" />
+            <q-toggle
+              dense
+              :id="`view-detail-btn-${currentNode.name}-status`"
+              size="sm"
+              @click="
+                async () => {
+                  if (!currentNode) return;
+                  const res = await branchStore.editById(currentNode.id, {
+                    status:
+                      currentNode.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
+                  });
+                  if (res) currentNode.status = res.status;
+                }
+              "
+              :model-value="
+                currentNode.status === 'CREATED' ||
+                currentNode.status === 'ACTIVE'
+              "
+            />
+          </q-item-section>
+          <q-item-section>
+            {{
+              currentNode.status !== 'INACTIVE'
+                ? $t('switchOnLabel')
+                : $t('switchOffLabel')
+            }}
           </q-item-section>
-          <q-item-section>{{ $t('switchOnLabel') }}</q-item-section>
         </q-item>
       </q-list>
     </div>