jws-frontend/src/components/UsersDetailCardComponent.vue

<script setup lang="ts">
import AppBox from './app/AppBox.vue';

import { CustomerBranch } from 'stores/customer/types';

withDefaults(
  defineProps<{
    noDetail?: boolean;
    noHover?: boolean;
    noBg?: boolean;
    dark?: boolean;
    width?: string;
    color: 'purple' | 'green';
    gridColumns?: number;
    metadata?: { id: string; disabled: boolean };
    list: {
      imageUrl?: string;
      id: string;
      type: 'customerLegalEntity' | 'customerNaturalPerson';
      name: string;
      code: string;
      detail?: { label: string; value: string }[];
    };
    badge?: CustomerBranch[];
  }>(),
  {
    width: '300px',
    deletable: false,
    color: 'green',
  },
);

defineEmits<{
  (e: 'deleteCard', id: string): void;
  (e: 'updateCard', action: 'FORM' | 'INFO', id: string): void;
  (e: 'viewCard', action: 'FORM' | 'INFO', id: string): void;
  (e: 'enterCard'): void;
  (e: 'toggleStatus', id: string): void;
}>();
</script>

<template>
  <div v-if="metadata">
    <div
      :style="`${noBg ? 'height: 228px' : 'aspect-ratio: 9/16'}`"
      class="flip"
      :class="{
        'person-box__no-hover': noHover,
      }"
    >
      <AppBox
        no-padding
        class="surface-1 front"
        bordered
        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
        @click="$emit('enterCard')"
      >
        <div class="row justify-center relative-position">
          <q-card-section class="q-pt-xl img-decoration">
            <q-avatar size="100px">
              <img
                :src="list.imageUrl ?? 'https://cdn.quasar.dev/img/avatar1.jpg'"
              />
            </q-avatar>
          </q-card-section>
        </div>
        <div class="box-title">
          <div class="rounded title">{{ $t(list.type) }}</div>
        </div>
        <q-card-section class="no-padding">
          <div class="column items-center justify-center q-mb-md">
            <div class="row">{{ list.name }}</div>
            <div v-if="!noDetail">
              {{ list.code }}
            </div>
          </div>
        </q-card-section>

        <div v-if="!noDetail">
          <q-separator />
          <div class="front-scroll">
            <q-card-section
              v-for="(d, j) in list.detail"
              :key="j"
              class="overflow"
            >
              <div class="text-caption app-text-muted-2">
                {{ $t(d.label) }}
              </div>
              <div>{{ d.value }}</div>
            </q-card-section>
          </div>
        </div>
      </AppBox>

      <AppBox
        style="padding: 0"
        class="back"
        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
        bordered
        @click="$emit('enterCard')"
      >
        <div
          class="row q-pl-md q-pb-md items-center"
          :class="{
            'surface-1': !$q.dark.isActive,
            'surface-2': $q.dark.isActive,
          }"
          style="border-radius: 12px 12px 0px 0px"
        >
          <q-btn
            flat
            round
            padding="sm"
            class="absolute-top-right dots-btn"
            icon="mdi-dots-vertical"
            size="sm"
            @click.stop=""
          >
            <q-menu class="bordered">
              <q-list v-close-popup>
                <q-item
                  clickable
                  dense
                  class="row q-py-sm"
                  style="white-space: nowrap"
                  @click="$emit('viewCard', 'INFO', metadata.id)"
                >
                  <q-icon
                    name="mdi-eye-outline"
                    class="col-3"
                    size="xs"
                    style="color: hsl(var(--green-6-hsl))"
                  />
                  <span class="col-9 q-px-md flex items-center">
                    {{ $t('viewDetail') }}
                  </span>
                </q-item>
                <q-item
                  dense
                  clickable
                  class="row q-py-sm"
                  style="white-space: nowrap"
                  @click="$emit('updateCard', 'FORM', metadata.id)"
                  v-close-popup
                >
                  <q-icon
                    name="mdi-pencil-outline"
                    class="col-3"
                    size="xs"
                    style="color: hsl(var(--cyan-6-hsl))"
                  />
                  <span class="col-9 q-px-md flex items-center">
                    {{ $t('edit') }}
                  </span>
                </q-item>
                <q-item
                  dense
                  clickable
                  @click="$emit('deleteCard', metadata.id)"
                  v-close-popup
                >
                  <q-icon
                    name="mdi-trash-can-outline"
                    size="xs"
                    class="col-3 app-text-negative"
                  />
                  <span class="col-9 q-px-md flex items-center">
                    {{ $t('delete') }}
                  </span>
                </q-item>
                <q-item dense>
                  <q-item-section class="q-py-sm">
                    <div class="q-pa-sm surface-2 rounded">
                      <q-toggle
                        dense
                        size="sm"
                        @click="$emit('toggleStatus', metadata.id)"
                        :model-value="!metadata.disabled"
                        val="xs"
                        padding="none"
                      >
                        <div class="q-ml-xs">
                          {{
                            metadata.disabled
                              ? $t('switchOnLabel')
                              : $t('switchOffLabel')
                          }}
                        </div>
                      </q-toggle>
                    </div>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-card-section class="q-pt-xl img-decoration">
            <q-avatar size="50px">
              <img
                :src="list.imageUrl ?? 'https://cdn.quasar.dev/img/avatar1.jpg'"
              />
            </q-avatar>
          </q-card-section>

          <div class="col-7 q-pl-md">
            <div class="row">{{ list.name }}</div>
            <div class="row">{{ list.code }}</div>
          </div>
        </div>

        <q-separator />
        <q-scroll-area
          class="back-scroll"
          :class="{
            'surface-1': $q.dark.isActive,
            'surface-2': !$q.dark.isActive,
          }"
        >
          <q-card-section class="q-pa-md">
            <div
              v-for="(v, i) in badge"
              :key="v.id"
              class="bordered row q-pa-sm q-mb-sm rounded bg-color-text-1"
            >
              <div class="col-2 flex flex-center">{{ i + 1 }}</div>
              <div class="col-10 rounded q-pa-sm bg-color-text-2">
                {{ v.branchNo }}
              </div>
            </div>
          </q-card-section>
        </q-scroll-area>
      </AppBox>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 500px;
}

.flip {
  width: 100%;
  position: relative;
  transition: transform 0.4s;
  transform-style: preserve-3d;

  &:not(.person-box__no-hover):hover {
    cursor: pointer;
    transition-delay: 0.3s;
    transform: rotateY(180deg);
  }
}

.front,
.back {
  width: 100%;
  height: min-content;
  position: absolute;
  backface-visibility: hidden;
}

.front,
.back {
  --_color: var(--teal-6);
  --_color-dark: var(--_color);
  --_bg-front-scroll: hsla(var(--_color) / 0.05);
  --_bg-back-detail-1: white;
  --_bg-back-detail-2: hsla(var(--_color) / 0.05) !important;

  .img-decoration {
    background: hsl(var(--_color)) !important;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
  }

  .title {
    width: 50%;
    height: 25px;
    background: hsl(var(--_color)) !important;
    position: relative;
    bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  .front-scroll {
    background: var(--_bg-front-scroll) !important;
    height: 150px;
  }

  .back-scroll {
    height: 268px;

    .bg-color-text-1 {
      background: var(--_bg-back-detail-1);
    }
    .bg-color-text-2 {
      background: var(--_bg-back-detail-2) !important;
    }
  }

  &.dark {
    color: hsl(--_color-dark) !important;
    background-color: var(--surface-2) !important;

    --_bg-back-avatar: var(--gray-11) !important;
    --_bg-back-detail-1: var(--gray-9) !important;
    --_bg-front-scroll: hsla(var(--_color) / 0.1) !important;
    --_bg-back-detail-2: hsla(var(--_color) / 0.1) !important;

    &.front__no-bg {
      background-color: transparent !important;
    }
  }
  &.color__purple {
    --_color: var(--purple-11-hsl);
  }

  &.color__green {
    --_color: var(--teal-9-hsl);
  }
}

.back {
  background: #f5f5f5;
  transform: rotateY(180deg);
}

.rounded {
  border-radius: var(--radius-1);
}

.box-title {
  display: flex;
  justify-content: center;
}
</style>