refactor: เพิ่ม id

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

@@ -65,6 +65,7 @@ const columns = [
 const modal = ref<boolean>(false);
 const hideStat = ref(false);
 const currentStatus = ref<Status | 'All'>('All');
+const expandedTree = ref<string[]>([]);
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
@@ -594,17 +595,59 @@ watch(locale, () => {
                 </div>
 
                 <div class="col">
-                  <div class="scroll">
+                  <div class="scroll q-pa-md">
                     <q-tree
                       :nodes="treeData"
                       node-key="id"
                       label-key="name"
                       children-key="branch"
+                      v-model:expanded="expandedTree"
+                      color="info"
                       style="color: var(--foreground)"
                     >
                       <template #default-header="{ node }">
+                        <div class="column full-width">
                           <div
-                          class="row items-center justify-between full-width no-wrap"
+                            class="row col items-center justify-between full-width no-wrap"
+                            @click.stop="
+                              () => {
+                                if (
+                                  node.isHeadOffice &&
+                                  node._count.branch !== 0 &&
+                                  currentHq.id === node.id
+                                ) {
+                                  expandedTree = expandedTree.filter(
+                                    (i) => node.id !== i,
+                                  );
+                                  fieldSelectedBranch.value = 'branchHQLabel';
+
+                                  currentHq = {
+                                    id: '',
+                                    code: '',
+                                  };
+                                  return;
+                                }
+
+                                if (
+                                  node.isHeadOffice &&
+                                  node._count.branch !== 0 &&
+                                  currentHq.id !== node.id
+                                ) {
+                                  expandedTree = [];
+                                  expandedTree.push(node.id);
+                                  fieldSelectedBranch.value = '';
+                                  inputSearch = '';
+                                  currentHq = {
+                                    id: node.id,
+                                    code: node.code,
+                                  };
+                                  beforeBranch = {
+                                    id: '',
+                                    code: '',
+                                  };
+                                }
+                              }
+                            "
                           >
                             <span>{{ node.name }}</span>
                             <div
@@ -755,12 +798,14 @@ watch(locale, () => {
                                                     node.id,
                                                     {
                                                       status:
-                                                      node.status !== 'INACTIVE'
+                                                        node.status !==
+                                                        'INACTIVE'
                                                           ? 'INACTIVE'
                                                           : 'ACTIVE',
                                                     },
                                                   );
-                                              if (res) node.status = res.status;
+                                                if (res)
+                                                  node.status = res.status;
                                               }
                                             "
                                             :model-value="
@@ -776,6 +821,11 @@ watch(locale, () => {
                               </q-btn>
                             </div>
                           </div>
+
+                          <div class="row col items-center app-text-muted">
+                            {{ node.code }}
+                          </div>
+                        </div>
                       </template>
                     </q-tree>
                   </div>
@@ -1683,6 +1733,14 @@ watch(locale, () => {
   opacity: 0;
 }
 
+:deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
+  color: var(--foreground);
+}
+
+:deep(.q-tree__node-header:before) {
+  color: var(--foreground);
+}
+
 :deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
   padding-block: 8px;
 }

src/pages/03_customer-management/MainPage.vue

@@ -1678,6 +1678,8 @@ watch([inputSearch, currentStatus], async () => {
               style="white-space: nowrap"
             >
               <q-select
+                id="select-status"
+                for="select-status"
                 v-model="currentStatus"
                 outlined
                 dense
@@ -1694,8 +1696,8 @@ watch([inputSearch, currentStatus], async () => {
                 ]"
               ></q-select>
               <q-select
-                v-if="modeView === false"
                 id="select-field"
+                v-if="modeView === false"
                 for="select-field"
                 class="q-mx-sm col"
                 :options="
@@ -1729,6 +1731,7 @@ watch([inputSearch, currentStatus], async () => {
               >
                 <template v-slot:folder>
                   <q-icon
+                    id="icon-mode-grid"
                     name="mdi-view-grid-outline"
                     size="16px"
                     class="q-px-sm q-py-xs rounded"
@@ -1745,6 +1748,7 @@ watch([inputSearch, currentStatus], async () => {
                 </template>
                 <template v-slot:list>
                   <q-icon
+                    id="icon-mode-list"
                     name="mdi-format-list-bulleted"
                     class="q-px-sm q-py-xs rounded"
                     size="16px"