refactor: branch card

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

@@ -2,10 +2,20 @@
 defineProps<{
   inactive?: boolean;
   color?: 'none' | 'hq' | 'br';
-  data: Record<string, unknown>;
+  data: {
+    branchLabelCode: string;
+    branchLabelName: string;
+    branchLabelTel: string;
+    branchLabelAddress: string;
+    branchLabelType: string;
+  };
   metadata?: unknown;
   badgeField?: string[];
-  fieldSelected?: string[];
+  fieldSelected?: (
+    | 'branchLabelAddress'
+    | 'branchLabelTel'
+    | 'branchLabelType'
+  )[];
   footer?: boolean;
 }>();
 </script>
@@ -21,41 +31,46 @@ defineProps<{
       'branch-card__hq': color === 'hq',
       'branch-card__br': color === 'br',
     }"
+    @click="$emit('open')"
   >
-    <div
+    <div class="branch-card__header">
-      class="branch-card__row"
+      <div class="branch-card__icon">
-      :class="{
+        <q-icon
-        'branch-card__header': i === 0,
+          size="md"
-        'branch-card__footer': footer && i === Object.keys(data).length - 1,
+          style="scale: 0.8"
-      }"
+          name="mdi-office-building-outline"
-      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">
-        <span>{{ $t(k) }}</span>
-      </div>
-      <div
-        class="branch-card__value"
-        :class="{ 'branch-card__badge': badgeField?.includes(k) }"
-        style="justify-content: space-between"
-      >
-        <span>{{ v }}</span>
-        <q-btn
-          :id="`${v}-view-detail`"
-          @click.stop="$emit('view-detail', metadata ?? data)"
-          :label="$t('viewDetail')"
-          rounded
-          outline
-          dense
-          style="text-wrap: nowrap; max-width: 80%"
-          no-caps
-          class="branch-card__view-detail q-px-md text-caption"
-          v-if="i === 0"
         />
       </div>
+      <div class="branch-card__name">
+        <b>{{ data.branchLabelName }}</b>
+        <small class="branch-card__code">{{ data.branchLabelCode }}</small>
+      </div>
+
+      <div class="branch-card__action">
+        <q-btn icon="mdi-dots-vertical" size="sm" dense round flat @click.stop>
+          <slot name="action" />
+        </q-btn>
+      </div>
+    </div>
+    <div
+      style="
+        display: block;
+        width: 100%;
+        height: 1px;
+        background: hsla(0 0% 0% / 0.1);
+        margin-bottom: var(--size-2);
+      "
+    />
+    <div
+      v-for="key in fieldSelected || [
+        'branchLabelAddress',
+        'branchLabelTel',
+        'branchLabelType',
+      ]"
+      class="branch-card__data"
+    >
+      <div>{{ $t(key) }}</div>
+      <div>{{ data[key as keyof typeof data] }}</div>
     </div>
   </div>
 </template>
@@ -69,41 +84,45 @@ defineProps<{
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding: var(--size-3);
 
-  & > .branch-card__row {
+  & .branch-card__header {
+    display: flex;
+    margin-bottom: var(--size-2);
+
+    & .branch-card__icon {
+      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+      border-radius: 50%;
+      padding: var(--size-1);
+
+      & :deep(.q-icon) {
+        color: hsla(var(--_branch-card-row-bg) / 1);
+      }
+    }
+
+    & .branch-card__name {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding-inline: var(--size-2);
+
+      & .branch-card__code {
+        color: hsla(var(--text-mute) / 1);
+      }
+    }
+
+    & .branch-card__action {
+      margin-left: auto;
+    }
+  }
+  & .branch-card__data {
     display: flex;
-    flex-wrap: nowrap;
-    padding-inline: var(--size-4);
     padding-block: var(--size-2);
 
-    &:last-child {
+    & > :first-child {
-      flex-grow: 1;
+      color: hsla(var(--text-mute) / 1);
-    }
+      width: 0%;
-
+      min-width: 40%;
-    &.branch-card__header > * {
-      display: flex;
-      align-items: center;
-    }
-
-    & > .branch-card__label {
-      min-width: 120px;
-      width: 30%;
-    }
-
-    &:not(.branch-card__header) .branch-card__label {
-      color: hsl(var(--stone-6-hsl));
-    }
-
-    & > .branch-card__value {
-      width: 70%;
-
-      &.branch-card__badge > span {
-        display: inline-block;
-        border-radius: 999rem;
-        padding-inline: var(--size-2);
-        color: hsl(var(--_branch-badge-fg));
-        background-color: hsla(var(--_branch-badge-bg) / 0.1);
-      }
     }
   }
 

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

@@ -135,11 +135,9 @@ const beforeBranch = ref<{ id: string; code: string }>({
 const inputSearch = ref<string>('');
 const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
 const fieldDisplay = ref([
-  'branchLabelName',
   'branchLabelTel',
   'branchLabelAddress',
   'branchLabelType',
-  'branchLabelStatus',
 ]);
 const fieldSelected = ref<string[]>(fieldDisplay.value);
 const fieldSelectedBranch = ref<{
@@ -888,7 +886,6 @@ watch(locale, () => {
                   branchLabelType: $t(
                     item.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                   ),
-                  branchLabelStatus: $t(`status${item.status}`),
                 }"
                 :field-selected="fieldSelected"
                 :badge-field="['branchLabelStatus']"