refactor: overhaul branch management

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 
@@ -14,11 +15,11 @@ import FormDialog from 'src/components/FormDialog.vue';
 import { BranchWithChildren, Branch } from 'src/stores/branch/types';
 
 const branchStore = useBranchStore();
-const test = ref<string>('');
+const { data: branchData } = storeToRefs(branchStore);
 
 const modal = ref<boolean>(false);
 
-const showCurrentBaranch = ref<Branch | boolean | null>();
+const showCurrentBranch = ref<Branch | boolean | null>();
 
 const shape = ref<boolean>(false);
 const openBranchDrawer = ref<boolean>(true);
@@ -66,7 +67,7 @@ const taxIDNumber = ref<string>('');
 const nameHeadOfficeEN = ref<string>('');
 const inputPhone = ref<string>('');
 const inputIdLine = ref<string>('');
-const inputPhonHeadOffice = ref<string>('');
+const inputPhoneHeadOffice = ref<string>('');
 const inputEmailHeadOffice = ref<string>('');
 
 const expanded = ref<string[]>([]);
@@ -142,8 +143,6 @@ const branchStat = ref<
 const treeData = ref<BranchWithChildren[]>([]);
 
 function openDialog() {
-  console.log('openDialog');
-
   modal.value = true;
 }
 
@@ -151,26 +150,23 @@ async function getTree() {
   const result = await branchStore.fetchList<BranchWithChildren>({
     tree: true,
   });
-
-  if (result) {
-    treeData.value = result.result;
-  }
+  if (result) treeData.value = result.result;
 }
 
 async function fetchBranch(id: string) {
   if (typeof branchStore.fetchById(id) === 'object') {
-    showCurrentBaranch.value = await branchStore.fetchById(id);
+    showCurrentBranch.value = await branchStore.fetchById(id);
   }
 }
 
 onMounted(async () => {
-  getTree();
+  await getTree();
 
   if (
     typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
     'object'
   ) {
-    showCurrentBaranch.value = await branchStore.fetchById(
+    showCurrentBranch.value = await branchStore.fetchById(
       'bfff119e-079d-4b56-9699-0466ade4b517',
     );
   }
@@ -182,44 +178,42 @@ onMounted(async () => {
       {{ $t('branchManagement') }}
     </div>
 
-    <app-box
+    <AppBox
       bordered
       class="q-mb-md"
       :class="{ 'bg-card-branch-title': $q.dark.isActive }"
     >
       <StatCardComponent :branch="branchStat" />
-    </app-box>
+    </AppBox>
 
-    <app-box bordered style="width: 100%; height: 500px">
+    <AppBox
+      bordered
+      style="width: 100%; height: 500px"
+      v-if="!branchData?.total"
+    >
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
-          <div class="row">
-            <TooltipComponent
-              title="branchNoMainOfficeYet"
-              caption="branchClickToCreateMainOffice"
-              imgSrc="img-table-"
-            />
-          </div>
+          <TooltipComponent
+            title="branchNoMainOfficeYet"
+            caption="branchClickToCreateMainOffice"
+            imgSrc="img-table-"
+          />
         </div>
-
-        <div
-          class="col test self-center"
-          style="display: flex; align-items: center"
-        >
+        <div class="col self-center" style="display: flex; align-items: center">
           <BtnAddComponent
             :label="'สร้างสำนักงานใหญ่'"
             @trigger="() => openDialog()"
           />
         </div>
       </div>
-    </app-box>
+    </AppBox>
 
-    <q-card
+    <AppBox
       class="bordered branch-main-variable-color"
       :class="{ dark: $q.dark.isActive }"
-      style="width: 100%; height: 500px"
+      style="width: 100%; height: 500px; padding: 0"
     >
-      <q-card-section class="bordered bg-card-branch-title">
+      <AppBox class="bg-card-branch-title" style="border-radius: 0">
         <div class="row items-center">
           <div
             class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
@@ -228,11 +222,10 @@ onMounted(async () => {
           </div>
           <div class="col-3">
             <q-input
-              style="border-radius: 6px"
-              class="bordered"
-              outlined
+              class="bordered rounded q-px-md"
+              borderless
               dense
-              v-model="test"
+              v-model="inputSearch"
               label="ค้นหา"
             >
               <template #prepend>
@@ -241,10 +234,13 @@ onMounted(async () => {
             </q-input>
           </div>
         </div>
-      </q-card-section>
+      </AppBox>
 
-      <q-card-section class="no-padding row" style="height: 423px">
-        <div class="bordered q-pa-md bg-branch-tree-box" style="width: 21%">
+      <AppBox
+        class="no-padding row bordered-t"
+        style="height: 423px; border-radius: 0"
+      >
+        <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
           <div
             @click="() => console.log('test')"
             class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
@@ -254,7 +250,7 @@ onMounted(async () => {
           </div>
 
           <q-scroll-area
-            class="bordered q-pa-sm bg-branch-tree-scroll"
+            class="q-pa-sm bg-branch-tree-scroll"
             style="height: 350px; width: 100%; border-radius: 6px"
           >
             <div class="col">
@@ -365,8 +361,8 @@ onMounted(async () => {
           </q-scroll-area>
         </div>
 
-        <div class="col bordered full-height" style="overflow-y: auto">
-          <q-card-section class="q-pb-none">
+        <div class="col full-height" style="overflow-y: auto">
+          <AppBox class="q-pb-none">
             <div class="row">
               <div class="col">
                 <q-select
@@ -380,8 +376,8 @@ onMounted(async () => {
               </div>
               <div class="col-2 q-pr-md">
                 <q-input dense outlined v-model="inputSearch">
-                  <template v-slot:append>
-                    <iconify-icon icon="ic:baseline-search" />
+                  <template #append>
+                    <Icon icon="ic:baseline-search" />
                   </template>
                 </q-input>
               </div>
@@ -395,11 +391,11 @@ onMounted(async () => {
                 />
               </div>
             </div>
-          </q-card-section>
+          </AppBox>
 
-          <q-card-section>
+          <AppBox>
             <TableCardComponent :subBranch="true" :rows="rows" />
-          </q-card-section>
+          </AppBox>
         </div>
 
         <div
@@ -408,18 +404,18 @@ onMounted(async () => {
           style="overflow-y: auto"
         >
           <CardDetailsComponent
-            :data="showCurrentBaranch as Branch"
+            :data="showCurrentBranch as Branch"
             class="q-pa-sm"
           />
         </div>
-      </q-card-section>
-    </q-card>
+      </AppBox>
+    </AppBox>
   </div>
 
   <DeatailsBranchDrawerComponent
     @open="openBranchDrawer = !openBranchDrawer"
     :open="openBranchDrawer"
-    :data="showCurrentBaranch as Branch"
+    :data="showCurrentBranch as Branch"
   />
 
   <FormDialog
@@ -525,12 +521,12 @@ onMounted(async () => {
       </AppBox>
     </template>
 
-    <template #midBottom>
+    <template #mid-bottom>
       <div>
         <div class="row full-width q-pb-md">
           <div class="col q-pr-md">
             <q-input
-              v-model="inputPhonHeadOffice"
+              v-model="inputPhoneHeadOffice"
               dense
               outlined
               label="เบอร์โทรศัพท์สำนักงานใหฐ่"
@@ -567,8 +563,6 @@ onMounted(async () => {
       </div>
     </template>
   </FormDialog>
-
-  <q-btn label="test" @click="openBranchDrawer = !openBranchDrawer" />
 </template>
 
 <style scoped>