refactor: branch card (customize with props instead)

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

@@ -127,7 +127,9 @@ const fieldSelectedBranch = ref<{
   value: 'branchHQLabel',
 });
 
-const stats = ref<{ count: number; label: string }[]>([]);
+const stats = ref<
+  { count: number; label: string; color?: 'pink' | 'purple' }[]
+>([]);
 
 const defaultFormData = {
   headOfficeId: null,
@@ -337,11 +339,13 @@ async function onSubmit() {
     stats.value[0] = {
       count: _stats.hq,
       label: 'branchHQLabel',
+      color: 'pink',
     };
 
     stats.value[1] = {
       count: _stats.br,
       label: 'branchLabel',
+      color: 'purple',
     };
   }
 }
@@ -726,7 +730,8 @@ watch(locale, () => {
             </div>
             <div class="branch-container">
               <BranchCard
-                v-for="item in branchData.result
+                v-for="item in treeData
+                  .flatMap((v) => [v, ...v.branch])
                   .filter((v) => {
                     if (
                       statusFilter === 'statusACTIVE' &&
@@ -755,40 +760,13 @@ watch(locale, () => {
                       return !v.isHeadOffice;
 
                     return false;
-                  })
-                  .map((v) => ({
-                    id: v.id,
-                    hq: v.isHeadOffice,
-                    status: v.status,
-                    branchLabelCode: v.code,
-                    branchLabelName:
-                      $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                    branchLabelTel: v.contact
-                      .map((c) => c.telephoneNo)
-                      .join(','),
-                    branchLabelAddress:
-                      $i18n.locale === 'en-US'
-                        ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
-                        : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
-                    branchLabelType: $t(
-                      v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
-                    ),
-                    branchLabelStatus: $t(`status${v.status}`),
-                  }))
-                  .sort((a, b) => {
-                    console.log(a);
-
-                    if (a.hq) return 1;
-                    // if (!a.hq) return -1;
-
-                    return 0;
                   })"
                 @click="
                   () => {
-                    if (item.hq) {
+                    if (item.isHeadOffice) {
                       fieldSelectedBranch.value = '';
                       inputSearch = '';
-                      currentHq = { id: item.id, code: item.branchLabelCode };
+                      currentHq = { id: item.id, code: item.code };
                       beforeBranch = {
                         id: '',
                         code: '',
@@ -796,18 +774,35 @@ watch(locale, () => {
                     }
                   }
                 "
+                :metadata="item"
+                :color="item.isHeadOffice ? 'hq' : 'br'"
                 :key="item.id"
-                :data="item"
+                :data="{
+                  branchLabelCode: item.code,
+                  branchLabelName:
+                    $i18n.locale === 'en-US' ? item.nameEN : item.name,
+                  branchLabelTel: item.contact
+                    .map((c) => c.telephoneNo)
+                    .join(','),
+                  branchLabelAddress:
+                    $i18n.locale === 'en-US'
+                      ? `${item.addressEN || ''} ${item.subDistrict?.nameEN || ''} ${item.district?.nameEN || ''} ${item.province?.nameEN || ''}`
+                      : `${item.address || ''} ${item.subDistrict?.name || ''} ${item.district?.name || ''} ${item.province?.name || ''}`,
+                  branchLabelType: $t(
+                    item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
+                  ),
+                  branchLabelStatus: $t(`status${item.status}`),
+                }"
                 :field-selected="fieldSelected"
+                :badge-field="['branchLabelStatus']"
                 :inactive="item.status === 'INACTIVE'"
                 @view-detail="
-                  (b) => {
-                    if (b.hq) {
-                      triggerEdit('drawer', b.id, 'headOffice');
-                    } else {
-                      triggerEdit('drawer', b.id, 'subBranch');
-                    }
-                  }
+                  (v) =>
+                    triggerEdit(
+                      'drawer',
+                      v.id,
+                      v.hq ? 'headOffice' : 'subBranch',
+                    )
                 "
               />
             </div>