From 9429fac0e3751eca02323085c77f2c8e08afb0ba Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 23 Jul 2024 07:25:11 +0000
Subject: [PATCH] fix: tree 01 & 04 active

---
 src/css/quasar.variables.scss               | 12 +++----
 src/pages/01_branch-management/MainPage.vue | 12 +++++--
 src/pages/04_product-service/MainPage.vue   | 35 ++++++++++++++-------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 07a34767..f797804e 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -109,10 +109,6 @@ div.fullscreen.q-drawer__backdrop {
   padding-block: 0px;
 }
 
-i.q-icon.mdi.mdi-play.q-tree__arrow {
-  color: hsl(var(--text-mute));
-}
-
 .q-tree__node-header:before {
   color: hsl(var(--text-mute));
 }
@@ -123,12 +119,12 @@ i.q-icon.mdi.mdi-play.q-tree__arrow {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
-.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
+.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
+    .clickable-node.active-node
   ) {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
-.q-tree > .q-tree__node--child > .q-tree__node-header {
-  padding-left: 32px;
+.q-tree__node-header {
+  padding-left: 0px !important;
 }
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 87df1126..ca309e98 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -636,7 +636,10 @@ watch(
                       <template #default-header="{ node }">
                         <div
                           class="full-width q-py-xs"
-                          :class="{ 'clickable-node': node.isHeadOffice }"
+                          :class="{
+                            'clickable-node': node.isHeadOffice,
+                            'active-node': expandedTree[0] === node.id,
+                          }"
                           v-touch-hold.mouse="handleHold(node)"
                           @click.stop="
                             () => {
@@ -687,10 +690,13 @@ watch(
                               "
                               name="mdi-triangle-down"
                               size="12px"
-                              class="app-text-muted q-mr-md"
+                              class="app-text-muted q-mr-md q-ml-sm"
                               :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
                             />
-                            <div class="col row">
+                            <div
+                              class="col row"
+                              :style="`padding-left:${node.isHeadOffice && node._count.branch === 0 ? '36px' : ''}`"
+                            >
                               <span
                                 class="ellipsis col-12"
                                 style="white-space: nowrap"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 1c48f1e1..09d9ffba 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1200,7 +1200,15 @@ async function enterGroup(id: string, name: string) {
 }
 
 async function enterType(id: string, name: string) {
-  expandedTree.value.push(id);
+  if (
+    expandedTree.value.length > 1 &&
+    expandedTree.value[expandedTree.value.length - 1] !== id
+  ) {
+    expandedTree.value.pop();
+    expandedTree.value.push(id);
+  } else {
+    expandedTree.value.push(id);
+  }
   pathTypeName.value = name;
   currentIdType.value = id;
   productMode.value = 'service';
@@ -1442,6 +1450,12 @@ watch(
                   <template #default-header="{ node }">
                     <div
                       class="full-width q-py-xs clickable-node"
+                      :class="{
+                        'cursor-pointer':
+                          node.type === 'group' || node.type === 'type',
+                        'active-node':
+                          expandedTree[expandedTree.length - 1] === node.id,
+                      }"
                       v-touch-hold.mouse="handleHold(node)"
                       @click.stop="
                         async () => {
@@ -1469,17 +1483,12 @@ watch(
                             if (currentIdType === node.id) {
                               currentIdType = '';
                               productMode = 'type';
+                              expandedTree.pop();
                               return;
                             }
                           }
                         }
                       "
-                      :class="{
-                        'cursor-pointer':
-                          node.type === 'group' || node.type === 'type',
-                        'selector-tree':
-                          node.type === 'group' && node._count.type > 0,
-                      }"
                     >
                       <div
                         class="row col items-center justify-between full-width no-wrap"
@@ -1488,10 +1497,14 @@ watch(
                           v-if="node.type === 'group' && node._count.type > 0"
                           name="mdi-triangle-down"
                           size="12px"
-                          class="app-text-muted q-mr-md"
+                          class="app-text-muted q-mr-md q-ml-sm"
                           :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
                         />
-                        <div class="col row">
+                        <div
+                          class="col row"
+                          :class="{ 'q-pl-sm': node.type === 'type' }"
+                          :style="`padding-left:${node.type === 'group' && node._count.type === 0 ? '36px' : ''}`"
+                        >
                           <span
                             class="ellipsis col-12"
                             style="white-space: nowrap"
@@ -3207,9 +3220,7 @@ watch(
             ? 'productType'
             : productMode === 'group'
               ? 'productGroup'
-              : productMode === 'type'
-                ? 'productType'
-                : 'defaultKey',
+              : 'productType',
         {
           name: formDataGroup.code,
         },