From f23916b2eac514ebd338020e5934ebf8418a5582 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 19 Jul 2024 10:35:18 +0000
Subject: [PATCH] fix: 01, 04 active tree & functional hold dialog

---
 src/pages/01_branch-management/MainPage.vue |  31 +--
 src/pages/04_product-service/MainPage.vue   | 213 ++++++++++++++++++--
 src/stores/product-service/types.ts         |   1 +
 3 files changed, 202 insertions(+), 43 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a6f89c39..5c307d67 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -636,6 +636,7 @@ watch(
                       <template #default-header="{ node }">
                         <div
                           class="full-width q-py-sm"
+                          :class="{ 'clickable-node': node.isHeadOffice }"
                           v-touch-hold.mouse="handleHold(node)"
                           @click.stop="
                             () => {
@@ -1695,7 +1696,7 @@ watch(
   </DrawerInfo>
 
   <q-dialog v-model="holdDialog" position="bottom">
-    <div class="surface-1 full-width rounded column" style="height: 280px">
+    <div class="surface-1 full-width rounded column q-pb-md">
       <div class="flex q-py-sm justify-center full-width">
         <div
           class="rounded"
@@ -1790,7 +1791,7 @@ watch(
           <q-item-section>{{ $t('delete') }}</q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple v-close-popup>
+        <q-item clickable v-ripple>
           <q-item-section avatar>
             <q-toggle
               dense
@@ -1914,30 +1915,4 @@ watch(
   transform: translateY(-20px);
   opacity: 0;
 }
-
-:deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
-  color: hsl(var(--text-mute));
-}
-
-:deep(.q-tree__node-header:before) {
-  color: hsl(var(--text-mute));
-}
-
-:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
-  padding-block: 0px;
-}
-
-:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center):has(
-    i.q-icon.mdi.mdi-play.q-tree__arrow
-  ):hover {
-  background-color: hsla(var(--info-bg) / 0.1);
-}
-
-:deep(
-    .q-tree__node-header.relative-position.row.no-wrap.items-center.q-tree__node--link.q-hoverable.q-focusable:has(
-        i.q-icon.mdi.mdi-play.q-tree__arrow.q-tree__arrow--rotate
-      )
-  ) {
-  background-color: hsla(var(--info-bg) / 0.1);
-}
 </style>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 45c365fa..d876bcda 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -140,6 +140,8 @@ const stat = ref<
 const { t } = useI18n();
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
+const holdDialog = ref(false);
+const currentNode = ref<ProductGroup>();
 const expandedTree = ref<string[]>([]);
 const editByTree = ref<'group' | 'type' | undefined>();
 const treeProductTypeAndGroup = computed(() => {
@@ -521,6 +523,14 @@ async function fetchListGroups() {
     totalGroup.value = res.total;
     maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
     productGroup.value = res.result;
+
+    // if(currentNode.value){
+    //   currentNode.value.status = currentStatus.value === 'All'
+    //   ? undefined
+    //   : currentStatus.value === 'ACTIVE'
+    //   ? 'ACTIVE'
+    //   : 'INACTIVE',
+    // }
   }
 }
 
@@ -1198,6 +1208,14 @@ function cloneData() {
   });
 }
 
+function handleHold(node: ProductGroup) {
+  if ($q.screen.gt.xs) return;
+  return function (props: unknown) {
+    holdDialog.value = true;
+    currentNode.value = node;
+  };
+}
+
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
   utilsStore.currentTitle.path = [
@@ -1396,26 +1414,27 @@ watch(
         <template v-slot:before>
           <div class="surface-1 column full-height">
             <div
-              class="row bordered-b surface-3 q-px-md q-py-sm text-weight-bold items-center"
+              class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
               :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
             >
-              <div class="col">จัดการสาขาทั้งหมด</div>
+              <div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
             </div>
 
-            <div class="col" style="position: relative">
-              <div
-                class="q-pa-md scroll surface-1"
-                style="position: absolute; inset: 0"
-              >
+            <div class="col full-width">
+              <div class="q-pa-md">
                 <q-tree
                   :nodes="treeProductTypeAndGroup"
+                  color="transparent"
                   node-key="id"
                   label-key="name"
                   children-key="children"
                   v-model:expanded="expandedTree"
+                  style="color: var(--foreground)"
                 >
                   <template #default-header="{ node }">
                     <div
+                      class="full-width q-py-sm clickable-node"
+                      v-touch-hold.mouse="handleHold(node)"
                       @click.stop="
                         async () => {
                           if (node.type === 'group' && node._count.type > 0) {
@@ -1428,7 +1447,6 @@ watch(
                           }
                         }
                       "
-                      class="column full-width items-center no-wrap"
                       :class="{
                         'cursor-pointer':
                           node.type === 'group' && node._count.type > 0,
@@ -1436,9 +1454,29 @@ watch(
                           node.type === 'group' && node._count.type > 0,
                       }"
                     >
-                      <div class="col row full-width">
-                        <div class="col-9">{{ node.name }}</div>
-                        <div class="col no-wrap">
+                      <div
+                        class="row col items-center justify-between full-width no-wrap"
+                      >
+                        <div class="col row">
+                          <span
+                            class="ellipsis col-12"
+                            style="white-space: nowrap"
+                            :class="{
+                              'text-weight-bold': expandedTree[0] === node.id,
+                              'app-text-info': expandedTree[0] === node.id,
+                            }"
+                          >
+                            {{ node.name }}
+                          </span>
+                          <span class="app-text-muted text-caption ellipsis">
+                            {{ node.code }}
+                          </span>
+                        </div>
+
+                        <div
+                          class="row q-gutter-xs items-center no-wrap"
+                          v-if="$q.screen.gt.xs"
+                        >
                           <q-btn
                             icon="mdi-eye-outline"
                             :id="`btn-tree-eye-${node.name}`"
@@ -1642,10 +1680,6 @@ watch(
                           </q-btn>
                         </div>
                       </div>
-
-                      <div class="col row full-width">
-                        <div class="col- app-text-muted">{{ node.code }}</div>
-                      </div>
                     </div>
                   </template>
                 </q-tree>
@@ -1822,6 +1856,7 @@ watch(
 
                     <template v-slot:body="props">
                       <q-tr
+                        class="cursor-pointer"
                         :class="{
                           'app-text-muted': props.row.status === 'INACTIVE',
                           'status-active': props.row.status !== 'INACTIVE',
@@ -3719,6 +3754,154 @@ watch(
       />
     </template>
   </FormDialog>
+
+  <q-dialog v-model="holdDialog" position="bottom">
+    <div class="surface-1 full-width rounded column q-pb-md">
+      <div class="flex q-py-sm justify-center full-width">
+        <div
+          class="rounded"
+          style="
+            width: 8%;
+            height: 4px;
+            background-color: hsla(0, 0%, 50%, 0.75);
+          "
+        ></div>
+      </div>
+
+      <q-list v-if="currentNode">
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click.stop="
+            () => {
+              if (!currentNode) return;
+              if (currentNode.type === 'type') {
+                editByTree = 'type';
+                currentStatusProduct = currentNode.status === 'INACTIVE';
+                clearFormGroup();
+                currentIdType = currentNode.id;
+                assignFormDataGroup(currentNode);
+                isEdit = false;
+                drawerInfo = true;
+              }
+              if (currentNode.type === 'group') {
+                editByTree = 'group';
+                currentStatusProduct = currentNode.status === 'INACTIVE';
+                clearFormGroup();
+                assignFormDataGroup(currentNode);
+                isEdit = false;
+                currentId = currentNode.id;
+                drawerInfo = true;
+              }
+            }
+          "
+        >
+          <q-item-section avatar>
+            <q-icon
+              name="mdi-eye-outline"
+              style="color: hsl(var(--green-6-hsl))"
+            />
+          </q-item-section>
+          <q-item-section>{{ $t('viewDetail') }}</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click.stop="
+            () => {
+              if (!currentNode) return;
+              editByTree = currentNode.type as 'type' | 'group';
+              if (currentNode.type === 'type') {
+                clearFormGroup();
+                currentIdType = currentNode.id;
+                assignFormDataGroup(currentNode);
+                isEdit = true;
+                drawerInfo = true;
+              }
+              if (currentNode.type === 'group') {
+                clearFormGroup();
+                assignFormDataGroup(currentNode);
+                isEdit = true;
+                currentId = currentNode.id;
+
+                drawerInfo = true;
+              }
+            }
+          "
+        >
+          <q-item-section avatar>
+            <q-icon
+              name="mdi-pencil-outline"
+              style="color: hsl(var(--cyan-6-hsl))"
+            />
+          </q-item-section>
+          <q-item-section>{{ $t('edit') }}</q-item-section>
+        </q-item>
+
+        <q-item
+          clickable
+          v-ripple
+          v-close-popup
+          @click.stop="
+            () => {
+              if (!currentNode) return;
+              editByTree = currentNode.type as 'type' | 'group';
+
+              if (currentNode.type === 'type') {
+                deleteProductById(currentNode.id);
+              }
+              if (currentNode.type === 'group') {
+                deleteProductById(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-section avatar>
+            <q-toggle
+              dense
+              :id="`view-detail-btn-${currentNode.name}-status`"
+              size="sm"
+              @click.stop="
+                async () => {
+                  if (!currentNode) return;
+                  if (currentNode.type === 'type') {
+                    toggleStatusType(currentNode.id, currentNode.status);
+                    currentNode.status === 'ACTIVE'
+                      ? (currentNode.status = 'INACTIVE')
+                      : (currentNode.status = 'ACTIVE');
+                  }
+                  if (currentNode.type === 'group') {
+                    toggleStatusGroup(currentNode.id, currentNode.status);
+                    currentNode.status === 'ACTIVE'
+                      ? (currentNode.status = 'INACTIVE')
+                      : (currentNode.status = 'ACTIVE');
+                  }
+                }
+              "
+              :model-value="currentNode.status !== 'INACTIVE'"
+            />
+          </q-item-section>
+          <q-item-section>
+            {{
+              currentNode.status !== 'INACTIVE'
+                ? $t('switchOnLabel')
+                : $t('switchOffLabel')
+            }}
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
+  </q-dialog>
 </template>
 
 <style scoped>
diff --git a/src/stores/product-service/types.ts b/src/stores/product-service/types.ts
index b5b3d1a6..41b0ef9e 100644
--- a/src/stores/product-service/types.ts
+++ b/src/stores/product-service/types.ts
@@ -167,6 +167,7 @@ export type ProductGroup = {
   detail: string;
   remark: string;
   status: Status;
+  type: string;
   createdBy: CreatedBy;
   createdAt: string;
   updatedBy: UpdatedBy;