jws-frontend/src/components/home/PersonCard.vue

<script lang="ts" setup>
import { ref } from 'vue';

import AppBox from 'components/app/AppBox.vue';
import AppCircle from '../app/AppCircle.vue';

defineProps<{
  list: {
    name: string;
    badge: string;
    detail: { label: string; value: string }[];
    male?: boolean;
    female?: boolean;
    disabled?: boolean;
    img?: string;
  }[];
  detailColumnCount?: number;
}>();

const status = ref(false);
</script>

<template>
  <div
    class="person-container"
    :style="`grid-template-columns: repeat( ${
      $q.screen.gt.sm ? '4, 1fr' : $q.screen.gt.xs ? '2, 1fr' : '1, 1fr'
    })`"
  >
    <AppBox
      bordered
      class="column person-box"
      :class="{ 'person-box__disabled': v.disabled }"
      style="padding: 0"
      v-for="(v, i) in list"
      :key="i"
    >
      <div class="q-pa-md column items-center">
        <!-- kebab menu -->
        <div class="full-width text-right">
          <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
            <q-menu :offset="[0, 10]" style="width: 130px">
              <q-list>
                <q-item clickable v-close-popup>
                  <q-item-section class="col-4">
                    <q-icon
                      class="full-width"
                      name="mdi-pencil-outline"
                      color="positive"
                      size="xs"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">
                    {{ $t('edit') }}
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section class="col-4">
                    <q-icon
                      class="full-width"
                      name="mdi-trash-can-outline"
                      color="negative"
                      size="xs"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">
                    {{ $t('delete') }}
                  </q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section class="col-4">
                    <q-toggle
                      dense
                      color="primary"
                      size="xs"
                      v-model="status"
                      val="xs"
                      padding="none"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">ปิดสถานะ</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>

        <!-- profile -->
        <div style="position: relative">
          <AppCircle
            bordered
            class="avatar"
            style="border: 2px solid var(--border-color)"
          >
            <q-img :src="`/${v.img}`" width="100%" />
            <div class="status-circle">
              <q-icon
                :name="`mdi-${v.disabled ? 'close' : 'check'}`"
                :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
              />
            </div>
          </AppCircle>
        </div>

        <!-- name symbol -->
        <span class="items-center row q-my-sm">
          {{ v.name }}
          <iconify-icon
            class="q-pl-sm"
            :class="{
              'symbol-gender': v.male || v.female,
              'symbol-gender__male': !v.disabled && v.male,
              'symbol-gender__female': !v.disabled && v.female,
              'symbol-gender__disable': v.disabled,
            }"
            :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
            width="20px"
          />
          <!-- <iconify-icon class="locale q-pl-sm" icon="circle-flags:th" /> -->
        </span>
        <span
          class="badge q-px-sm"
          :class="{
            'bg-gender': v.male || v.female,
            'bg-gender__male': !v.disabled && v.male,
            'bg-gender__female': !v.disabled && v.female,
            'bg-gender__disable': v.disabled,
          }"
        >
          {{ v.badge }}
        </span>
      </div>

      <!-- detail -->
      <q-separator />
      <div
        class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
        :class="{
          'bg-gender': v.male || v.female,
          'bg-gender__light':
            (!v.disabled && v.male) || (!v.disabled && v.female),
          'bg-gender__male': !v.disabled && v.male,
          'bg-gender__female': !v.disabled && v.female,
          'bg-gender__disable': v.disabled,
        }"
        :style="
          (detailColumnCount &&
            `grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
          ''
        "
      >
        <div v-for="(d, j) in v.detail" :key="j">
          <span
            :style="{
              color: $q.dark.isActive ? 'var(--foreground)' : 'var(--stone-7)',
            }"
          >
            {{ d.label }}
          </span>
          <span>{{ d.value }}</span>
        </div>
      </div>
    </AppBox>
  </div>
</template>

<style scoped>
.person-box {
  background-color: var(--surface-2);
  border-radius: var(--radius-2) !important;
  transition: 100ms ease-in-out;

  &.person-box__disabled {
    opacity: 0.4;

    .status-circle {
      background-color: var(--surface-1);
    }

    .locale {
      filter: grayscale();
    }
  }

  & .bg-gender {
    color: hsla(var(--_fg));
    background-color: hsl(var(--_bg));

    &.bg-gender__disable {
      --_bg: var(--stone-6-hsl);
      background-color: hsla(var(--_bg) / 0.3);
    }

    &.bg-gender__light {
      color: unset;
      background-color: hsla(var(--_bg) / 0.1);
    }

    &.bg-gender__male {
      --_fg: 0 100 100%;
      --_bg: var(--gender-male);
    }

    &.bg-gender__female {
      --_fg: 0 100 100%;
      --_bg: var(--gender-female);
    }
  }

  & .symbol-gender {
    color: hsla(var(--_fg));

    &.symbol-gender__disable {
      --_fg: var(--stone-6-hsl);
    }

    &.symbol-gender__male {
      --_fg: var(--gender-male);
    }

    &.symbol-gender__female {
      --_fg: var(--gender-female);
    }
  }

  & .person-detail {
    display: grid;
    flex-grow: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-2);
    overflow-x: scroll;

    & > * {
      display: flex;
      flex-direction: column;

      & > :first-child {
        font-size: var(--font-size-0);
      }
    }
  }

  & .status-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--teal-6);
    border: 2px solid var(--border-color);
    bottom: 0.6rem;
    right: 0.6rem;
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  &:not(.person-box__disabled):hover {
    --_hover: hsl(var(--gender-male));
    cursor: pointer;
    box-shadow: var(--shadow-2);

    & .person-detail {
      --_hover: hsl(var(--_bg));
      box-shadow: inset 0em -5px hsl(var(--_bg));
    }
  }
}

.person-container {
  display: grid;
  gap: var(--size-6);
}

.avatar {
  block-size: 7rem;
}

.badge {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--surface-2);
  text-wrap: nowrap;
}
</style>