feat: ต่อ api ของ tree และ card

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

@@ -11,6 +11,7 @@ import StatCardComponent from 'components/StatCardComponent.vue';
 import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
 import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
+import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
 
 import { BranchWithChildren, Branch } from 'src/stores/branch/types';
 
@@ -19,10 +20,12 @@ const { data: branchData } = storeToRefs(branchStore);
 
 const modal = ref<boolean>(false);
 
-const showCurrentBranch = ref<Branch | boolean | null>();
+const showCurrentBranch = ref<Branch>();
 
 const shape = ref<boolean>(false);
 const openBranchDrawer = ref<boolean>(true);
+const openCardDetails = ref<boolean>(false);
+const openTableCard = ref<boolean>(true);
 
 const inputSelectBranch = ref<string>('ทั้งหมด');
 const inputFilter = ref<string>('คอลัมน์');
@@ -43,14 +46,14 @@ const formData = ref({
   tel: '',
   gender: '',
   email: '',
-  addressL: {
+  addressTitle: {
     address: '',
     province: '',
     district: '',
     subDistrict: '',
     zip: '',
   },
-  addressEng: {
+  addressENTitle: {
     address: '',
     province: '',
     district: '',
@@ -72,45 +75,6 @@ const inputEmailHeadOffice = ref<string>('');
 
 const expanded = ref<string[]>([]);
 
-const rows: {
-  name: string;
-  branchName: string;
-  address: string;
-  phonNumber: string;
-  Headquarters: string;
-  type: string;
-  status: string;
-}[] = [
-  {
-    name: 'HQ0001',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-  {
-    name: 'HQ0002',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-
-  {
-    name: 'HQ0002',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-];
-
 const branchStat = ref<
   {
     amount: number;
@@ -142,6 +106,19 @@ const branchStat = ref<
 
 const treeData = ref<BranchWithChildren[]>([]);
 
+const subBranch = ref<boolean>(false);
+const rowsBranch = ref<
+  {
+    name: string;
+    branchName: string;
+    address: string;
+    telephoneNo: string;
+    code: string;
+    type: boolean;
+    status: string;
+  }[]
+>([]);
+
 function openDialog() {
   modal.value = true;
 }
@@ -150,26 +127,56 @@ async function getTree() {
   const result = await branchStore.fetchList<BranchWithChildren>({
     tree: true,
   });
-  if (result) treeData.value = result.result;
+  if (result) {
+    treeData.value = result.result;
+    rowsBranch.value = treeData.value
+      .filter((v) => v.isHeadOffice)
+      .map((v) => ({
+        name: v.id,
+        branchName: v.name,
+        address: v.address,
+        telephoneNo: v.telephoneNo,
+        code: v.code,
+        type: v.isHeadOffice,
+        status: v.status.toString(),
+      }));
+
+    subBranch.value = false;
+  }
 }
 
-async function fetchBranch(id: string) {
-  if (typeof branchStore.fetchById(id) === 'object') {
-    showCurrentBranch.value = await branchStore.fetchById(id);
+async function fetchCard(id: string) {
+  const result = await branchStore.fetchById<Branch>(id);
+
+  if (result) {
+    showCurrentBranch.value = result;
+    openCardDetails.value = true;
+    openTableCard.value = false;
+  }
+}
+async function fetchSubBranch(id: string) {
+  const result = await branchStore.fetchById<BranchWithChildren>(id, {
+    includeSubBranch: true,
+  });
+
+  if (result) {
+    rowsBranch.value = result.branch.map((v) => ({
+      name: v.id,
+      branchName: v.name,
+      address: v.address,
+      telephoneNo: v.telephoneNo,
+      code: v.code,
+      type: v.isHeadOffice,
+      status: v.status,
+    }));
+    subBranch.value = true;
+    openCardDetails.value = false;
+    openTableCard.value = true;
   }
 }
 
 onMounted(async () => {
-  await getTree();
-
-  if (
-    typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
-    'object'
-  ) {
-    showCurrentBranch.value = await branchStore.fetchById(
-      'bfff119e-079d-4b56-9699-0466ade4b517',
-    );
-  }
+  getTree();
 });
 </script>
 <template>
@@ -234,7 +241,7 @@ onMounted(async () => {
       <AppBox class="no-padding row bordered-t" style="border-radius: 0">
         <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
           <div
-            @click="() => console.log('test')"
+            @click="openDialog()"
             class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
           >
             <div class="text-h4 q-mr-md">+</div>
@@ -256,7 +263,7 @@ onMounted(async () => {
               >
                 <template #default-header="prop">
                   <div
-                    @click="fetchBranch(prop.node.id)"
+                    @click="fetchSubBranch(prop.node.id)"
                     class="q-px-sm color-brach-tree-text"
                     :class="{
                       'color-tree-active': expanded.includes(prop.node.name),
@@ -346,7 +353,7 @@ onMounted(async () => {
           </q-scroll-area>
         </div>
 
-        <div class="col" style="overflow-y: auto">
+        <div v-if="openTableCard" class="col" style="overflow-y: auto">
           <AppBox class="q-pb-none">
             <div class="row">
               <div class="col">
@@ -379,11 +386,20 @@ onMounted(async () => {
           </AppBox>
 
           <AppBox>
-            <TableCardComponent :sub-branch="true" :rows="rows" />
+            <TableCardComponent
+              @navigate="(v) => fetchSubBranch(v.name)"
+              @showCard="(v) => fetchCard(v.name)"
+              :sub-branch="subBranch"
+              :rows="rowsBranch"
+            />
           </AppBox>
         </div>
 
-        <div v-if="false" class="col bordered" style="overflow-y: auto">
+        <div
+          v-if="openCardDetails"
+          class="col bordered"
+          style="overflow-y: auto"
+        >
           <CardDetailsComponent
             :data="showCurrentBranch as Branch"
             class="q-pa-sm"
@@ -394,15 +410,14 @@ onMounted(async () => {
   </div>
 
   <DeatailsBranchDrawerComponent
-    @open="openBranchDrawer = !openBranchDrawer"
-    :open="openBranchDrawer"
+    v-model:open="openBranchDrawer"
     :data="showCurrentBranch as Branch"
   />
 
   <FormDialog
     v-model:modal="modal"
-    v-model:addressL="formData.addressL"
-    v-model:addressEng="formData.addressEng"
+    address-title="test"
+    addressENTitle=""
     title="เพิ่มสำนักงานใหญ่"
     addressLocaleTitle="ที่อยู่พนักงาน"
     addressEngTitle="ที่อยู่พนักงาน ENG"
@@ -502,7 +517,7 @@ onMounted(async () => {
       </AppBox>
     </template>
 
-    <template #mid-bottom>
+    <template #midBottom>
       <div>
         <div class="row full-width q-pb-md">
           <div class="col q-pr-md">