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__br': !data.hq,
+      'branch-card__none':
+        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 }"
-      v-for="([k, v], i) in Object.entries(data)
-        .slice(3)
-        .filter(
-          ([key], idx) =>
-            idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
-        )"
+      :class="{
+        'branch-card__header': i === 0,
+        'branch-card__footer': footer && i === Object.keys(data).length - 1,
+      }"
+      v-for="([k, v], i) in Object.entries(data).filter(
+        ([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>