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

<script lang="ts" setup>
import { baseUrl } from 'stores/utils';

defineProps<{
  inactive?: boolean;
  i18nKey?: string;
  color?: 'none' | 'hq' | 'br' | 'br-virtual';
  data: {
    branchLabelCode?: string;
    branchLabelName: string;
    taxNo?: string;
    branchLabelTel?: string;
    contactName?: string;
    branchLabelAddress?: string;
    branchImgUrl?: string;
  };
  virtualBranch: boolean;
  metadata?: unknown;
  badgeField?: string[];
  fieldSelected?: string[];

  footer?: boolean;
}>();
</script>

<template>
  <div
    class="branch-card rounded bordered"
    :class="{
      'branch-card__dark': $q.dark.isActive,
      'branch-card__inactive': inactive,
      'branch-card__none':
        color !== 'hq' && color !== 'br' && (!color || color === 'none'),
      'branch-card__hq': color === 'hq',
      'branch-card__br': color === 'br',
      'branch-card__br-virtual': color === 'br-virtual',
    }"
    @click="$emit('open')"
  >
    <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;
            width: 3rem;
            border-radius: 50%;
            aspect-ratio: 1;
            overflow: visible;
          "
        >
          <template #error>
            <div class="branch-card__icon">
              <q-icon size="sm" name="mdi-office-building-outline" />
            </div>
          </template>
        </q-img>
      </div>
      <div class="branch-card__name flex justify-center q-ml-sm">
        <b class="ellipsis-2-lines">
          {{ data.branchLabelName }}
          <q-tooltip>{{ data.branchLabelName }}</q-tooltip>
        </b>
        <small class="branch-card__code" v-if="data.branchLabelCode">
          {{ data.branchLabelCode }}
        </small>
      </div>

      <div class="branch-card__action">
        <div class="text-right">
          <slot name="action" />
        </div>
        <div
          v-if="color === 'br'"
          class="q-pa-xs rounded"
          :style="`background: hsl(var(${virtualBranch ? '--blue-6-hsl' : '--purple-6-hsl'}) / 0.1)`"
        >
          <b
            :style="`color: hsl(var(${virtualBranch ? '--blue-8-hsl' : '--purple-8-hsl'}) )`"
          >
            {{
              $t(
                `${i18nKey || 'branch.card'}.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
              )
            }}
          </b>
        </div>
      </div>
    </div>
    <div
      style="
        display: block;
        width: 100%;
        height: 1px;
        background: hsla(0 0% 0% / 0.1);
        margin-bottom: var(--size-2);
      "
    />
    <slot name="data"></slot>
    <template v-if="!$slots.data">
      <div
        v-for="key in (
          fieldSelected || [
            'branchLabelAddress',
            'branchLabelTel',
            'branchLabelType',
          ]
        ).sort((lhs, rhs) => {
          let order = Object.keys(data);
          return (
            order.findIndex((i) => i === lhs) -
            order.findIndex((i) => i === rhs)
          );
        })"
        :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>

<style scoped>
.branch-card {
  --_branch-card-fg: 0 0% 100%;
  --_branch-card-bg: var(--blue-5-hsl);
  --_branch-status-color: var(--green-6-hsl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--size-3);

  & .branch-card__header {
    display: flex;
    margin-bottom: var(--size-2);

    & .branch-card__icon {
      background-color: hsla(var(--_branch-card-bg) / 0.15);
      border-radius: 50%;
      padding: var(--size-2);
      position: relative;
      width: 3rem;
      transform: rotate(45deg);
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        content: ' ';
        display: block;
        block-size: 0.5rem;
        aspect-ratio: 1;
        position: absolute;
        border-radius: 50%;
        right: -0.25rem;
        top: calc(50% - 0.25rem);
        bottom: calc(50% - 0.25rem);
        background-color: hsla(var(--_branch-status-color) / 1);
      }

      & :deep(.q-icon) {
        transform: rotate(-45deg);
        color: hsla(var(--_branch-card-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;
    padding-block: var(--size-2);

    & > :first-child {
      color: hsla(var(--text-mute) / 1);
      width: 0%;
      min-width: 40%;
    }
  }

  &.branch-card__none {
    --_branch-card-bg: var(--gray-3-hsl);

    &.branch-card__dark {
      --_branch-card-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-bg: var(--pink-6-hsl);
  }

  &.branch-card__br {
    --_branch-card-bg: var(--violet-11-hsl);

    &.branch-card__dark {
      --_branch-card-bg: var(--violet-10-hsl);
    }
  }

  &.branch-card__br-virtual {
    --_branch-card-bg: var(--blue-6-hsl);
  }

  &.branch-card__inactive {
    --_branch-status-color: var(--red-4-hsl);
    --_branch-badge-bg: var(--red-4-hsl);
    filter: grayscale(1);
    background-color: hsl(var(--gray-6-hsl) / 0.1);
    opacity: 0.5;
  }
}
</style>