refactor: branch card (customize with props instead)

src/components/01_branch-management/BranchCard.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
 defineProps<{
-  data: {
-    id: string;
-    hq: boolean;
-    status: string;
-    branchLabelCode: string;
-    branchLabelName: string;
-    branchLabelTel: string;
-    branchLabelAddress: string;
-    branchLabelType: string;
-    branchLabelStatus: string;
-  };
-  fieldSelected?: string[];
   inactive?: boolean;
+  color?: 'none' | 'hq' | 'br';
+  data: Record<string, unknown>;
+  metadata?: unknown;
+  badgeField?: string[];
+  fieldSelected?: string[];
+  footer?: boolean;
 }>();
 </script>
 
@@ -20,20 +14,24 @@ defineProps<{
   <div
     class="branch-card rounded bordered"
     :class="{
+      'branch-card__dark': $q.dark.isActive,
       'branch-card__inactive': inactive,
-      'branch-card__hq': data.hq,
+      'branch-card__none':
-      'branch-card__br': !data.hq,
+        color !== 'hq' && color !== 'br' && (!color || color === 'none'),
+      'branch-card__hq': color === 'hq',
+      'branch-card__br': color === 'br',
     }"
   >
     <div
       class="branch-card__row"
-      :class="{ 'branch-card__header': i === 0 }"
+      :class="{
-      v-for="([k, v], i) in Object.entries(data)
+        'branch-card__header': i === 0,
-        .slice(3)
+        'branch-card__footer': footer && i === Object.keys(data).length - 1,
-        .filter(
+      }"
-          ([key], idx) =>
+      v-for="([k, v], i) in Object.entries(data).filter(
-            idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
+        ([key], idx) =>
-        )"
+          idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
+      )"
       :key="k"
     >
       <div class="branch-card__label">
@@ -41,18 +39,18 @@ defineProps<{
       </div>
       <div
         class="branch-card__value"
-        :class="{ 'branch-card__badge': k === 'branchLabelStatus' }"
+        :class="{ 'branch-card__badge': badgeField?.includes(k) }"
         style="justify-content: space-between"
       >
         <span>{{ v }}</span>
         <q-btn
-          @click.stop="$emit('view-detail', data)"
+          @click.stop="$emit('view-detail', metadata ?? data)"
           :label="$t('viewDetail')"
           rounded
           outline
           dense
           no-caps
-          class="q-px-md text-caption"
+          class="branch-card__view-detail q-px-md text-caption"
           v-if="i === 0"
         />
       </div>
@@ -66,22 +64,6 @@ defineProps<{
   --_branch-card-row-bg: var(--blue-5-hsl);
   --_branch-badge-fg: var(--green-8-hsl);
   --_branch-badge-bg: var(--green-6-hsl);
-
-  &.branch-card__hq {
-    --_branch-card-row-bg: var(--pink-6-hsl);
-  }
-
-  &.branch-card__br {
-    --_branch-card-row-bg: var(--violet-11-hsl);
-  }
-
-  &.branch-card__inactive {
-    --_branch-badge-fg: var(--red-4-hsl);
-    --_branch-badge-bg: var(--red-4-hsl);
-    filter: grayscale(40%);
-    opacity: 0.5;
-  }
-
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -97,14 +79,18 @@ defineProps<{
       flex-grow: 1;
     }
 
-    &:not(:first-child):nth-child(2n + 1) {
+    &:nth-child(2n + 1) {
       background-color: hsla(var(--_branch-card-row-bg) / 0.1);
     }
 
-    &.branch-card__header {
+    &.branch-card__header,
+    &.branch-card__footer {
       color: hsl(var(--_branch-card-row-fg));
       background-color: hsl(var(--_branch-card-row-bg));
-      font-weight: 600;
+
+      &:deep(*) {
+        font-weight: 600;
+      }
     }
 
     &.branch-card__header > * {
@@ -133,5 +119,36 @@ defineProps<{
       }
     }
   }
+
+  &.branch-card__none {
+    --_branch-card-row-bg: var(--gray-3-hsl);
+
+    &.branch-card__dark {
+      --_branch-card-row-bg: var(--gray-9-hsl);
+    }
+
+    &:not(.branch-card__dark) .branch-card__header {
+      color: currentColor;
+
+      & .branch-card__view-detail {
+        color: hsla(var(--gray-10-hsl) / 0.3);
+      }
+    }
+  }
+
+  &.branch-card__hq {
+    --_branch-card-row-bg: var(--pink-6-hsl);
+  }
+
+  &.branch-card__br {
+    --_branch-card-row-bg: var(--violet-11-hsl);
+  }
+
+  &.branch-card__inactive {
+    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-badge-bg: var(--red-4-hsl);
+    filter: grayscale(40%);
+    opacity: 0.5;
+  }
 }
 </style>

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) => {
+                  (v) =>
-                    if (b.hq) {
+                    triggerEdit(
-                      triggerEdit('drawer', b.id, 'headOffice');
+                      'drawer',
-                    } else {
+                      v.id,
-                      triggerEdit('drawer', b.id, 'subBranch');
+                      v.hq ? 'headOffice' : 'subBranch',
-                    }
+                    )
-                  }
                 "
               />
             </div>