refactor: customer

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

@@ -3,15 +3,16 @@ import { baseUrl } from 'stores/utils';
 
 defineProps<{
   inactive?: boolean;
+  i18nKey?: string;
   color?: 'none' | 'hq' | 'br' | 'br-virtual';
   data: {
-    branchLabelCode: string;
+    branchLabelCode?: string;
     branchLabelName: string;
-    taxNo: string;
-    branchLabelTel: string;
-    contactName: string;
-    branchLabelAddress: string;
-    branchImgUrl: string;
+    taxNo?: string;
+    branchLabelTel?: string;
+    contactName?: string;
+    branchLabelAddress?: string;
+    branchImgUrl?: string;
   };
   virtualBranch: boolean;
   metadata?: unknown;
@@ -38,7 +39,9 @@ defineProps<{
   >
     <div class="branch-card__header">
       <div class="branch-card__wrapper">
+        <slot name="image"></slot>
         <q-img
+          v-if="!$slots.image"
           :src="baseUrl + data.branchImgUrl"
           style="
             height: 3rem;
@@ -55,9 +58,11 @@ defineProps<{
           </template>
         </q-img>
       </div>
-      <div class="branch-card__name">
+      <div class="branch-card__name flex justify-center q-ml-sm">
         <b>{{ data.branchLabelName }}</b>
-        <small class="branch-card__code">{{ data.branchLabelCode }}</small>
+        <small class="branch-card__code" v-if="data.branchLabelCode">
+          {{ data.branchLabelCode }}
+        </small>
       </div>
 
       <div class="branch-card__action">
@@ -74,7 +79,7 @@ defineProps<{
           >
             {{
               $t(
-                `branch.card.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
+                `${i18nKey || 'branch.card'}.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
               )
             }}
           </b>
@@ -90,18 +95,21 @@ defineProps<{
         margin-bottom: var(--size-2);
       "
     />
-    <div
-      v-for="key in fieldSelected || [
-        'branchLabelAddress',
-        'branchLabelTel',
-        'branchLabelType',
-      ]"
-      :key="key"
-      class="branch-card__data"
-    >
-      <div>{{ $t(`branch.card.${key}`) }}</div>
-      <div>{{ data[key as keyof typeof data] }}</div>
-    </div>
+    <slot name="data"></slot>
+    <template v-if="!$slots.data">
+      <div
+        v-for="key in fieldSelected || [
+          'branchLabelAddress',
+          'branchLabelTel',
+          'branchLabelType',
+        ]"
+        :key="key"
+        class="branch-card__data"
+      >
+        <div>{{ $t(`${i18nKey || 'branch.card'}.${key}`) }}</div>
+        <div>{{ data[key as keyof typeof data] }}</div>
+      </div>
+    </template>
   </div>
 </template>
 

src/components/DrawerInfo.vue

@@ -17,6 +17,7 @@ withDefaults(
     statusBranch?: string;
     badgeLabel?: string;
     badgeClass?: string;
+    badgeStyle?: string;
     bgColor?: string;
     hideAction?: boolean;
     editData?: (...args: unknown[]) => void;
@@ -92,6 +93,7 @@ function reset() {
               v-if="badgeLabel"
               class="badge-label badge text-caption q-px-sm q-mr-sm"
               :class="badgeClass"
+              :style="badgeStyle"
             >
               {{ badgeLabel }}
             </text>