From 152ea4d2dfca5ba8af39356f8ede99b5884db5e3 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 20 Dec 2024 15:52:50 +0700
Subject: [PATCH] feat: new person card

---
 src/components/shared/NewPersonCard.vue | 264 ++++++++++++++++++++++++
 1 file changed, 264 insertions(+)
 create mode 100644 src/components/shared/NewPersonCard.vue

diff --git a/src/components/shared/NewPersonCard.vue b/src/components/shared/NewPersonCard.vue
new file mode 100644
index 00000000..82fc8cc2
--- /dev/null
+++ b/src/components/shared/NewPersonCard.vue
@@ -0,0 +1,264 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+import AppBox from 'components/app/AppBox.vue';
+import AppCircle from 'components/app/AppCircle.vue';
+import KebabAction from './KebabAction.vue';
+
+defineProps<{
+  data: {
+    name: string;
+    male?: boolean;
+    female?: boolean;
+    img?: string;
+    fallbackImg?: string;
+    detail?: { icon: string; value: string }[];
+    index: number;
+  };
+  tag?: [{ color: string; value: string }];
+  disabled?: boolean;
+  noHover?: boolean;
+  noBg?: boolean;
+  history?: boolean;
+  prefixId?: string;
+  separateEnter?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'cancel', index: number): void;
+}>();
+</script>
+
+<template>
+  <AppBox
+    bordered
+    no-padding
+    class="column person-box"
+    :class="{
+      'person-box__disabled': disabled,
+      'person-box__no-hover': noHover,
+      'person-box__no-detail': !data.detail,
+      'person-box__no-bg': noBg,
+    }"
+  >
+    <div class="column">
+      <!-- kebab menu -->
+      <div class="flex">
+        <div class="col-2 flax">
+          <AppCircle
+            bordered
+            class="avatar relative-position"
+            style="border: 2px solid var(--border-color); overflow: visible"
+          >
+            <q-img
+              v-if="!$slots.img"
+              :src="data.img ?? '/no-profile.png'"
+              loading="lazy"
+              fit="cover"
+              style="width: 100%; height: 100%; border-radius: 50%"
+            >
+              <template #error>
+                <div
+                  style="background: none"
+                  class="no-padding full-width full-height flex items-center justify-center"
+                >
+                  <q-img
+                    :src="data.fallbackImg || '/no-profile.png'"
+                    fit="cover"
+                  />
+                </div>
+              </template>
+            </q-img>
+            <slot name="img"></slot>
+            <q-badge
+              class="absolute-bottom-right"
+              style="
+                border-radius: 50%;
+                width: 16px;
+                height: 16px;
+                z-index: 2;
+                background: var(--border-color);
+              "
+            >
+              <q-badge
+                class="absolute-center"
+                style="
+                  border-radius: 7px;
+                  width: 14px;
+                  height: 14px;
+                  background: hsl(var(--positive-bg));
+                "
+              ></q-badge>
+              <!-- :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`" -->
+            </q-badge>
+          </AppCircle>
+        </div>
+        <div class="col column q-pl-xs">
+          <div class="col row">
+            <span style="max-width: calc(100% - 35%)">
+              <span class="row items-center ellipsis">
+                <div class="ellipsis" style="max-width: calc(100% - 30%)">
+                  {{ data.name }}
+                  <q-tooltip>
+                    {{ data.name }}
+                  </q-tooltip>
+                </div>
+                <Icon
+                  v-if="data.male || data.female"
+                  class="q-pl-xs"
+                  :class="{
+                    'symbol-gender': data.male || data.female,
+                    'symbol-gender__male': !disabled && data.male,
+                    'symbol-gender__female': !disabled && data.female,
+                    'symbol-gender__disable': disabled,
+                  }"
+                  :icon="`material-symbols:${data.male ? 'male' : 'female'}`"
+                  width="24px"
+                />
+              </span>
+            </span>
+
+            <div class="row items-center q-gutter-x-xs q-ml-auto">
+              <q-btn
+                :id="`btn-history-${prefixId}`"
+                flat
+                round
+                class="app-text-muted-2"
+                padding="xs"
+                icon="mdi-close-circle"
+                size="sm"
+                @click.stop="$emit('cancel', data.index)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- profile -->
+
+      <!-- name symbol -->
+    </div>
+
+    <!-- detail -->
+  </AppBox>
+</template>
+
+<style scoped>
+.person-box {
+  background-color: var(--surface-1);
+  transition: 100ms ease-in-out;
+  padding: var(--size-2);
+
+  &.person-box__disabled {
+    opacity: 0.5;
+    filter: grayscale(0.9);
+
+    .status-circle {
+      background-color: var(--surface-1);
+    }
+  }
+
+  &.person-box__no-detail {
+    padding-block: 2rem;
+  }
+
+  &.person-box__no-bg {
+    background-color: transparent;
+  }
+
+  & .detail-icon {
+    color: hsl(var(--text-mute-2));
+    background-color: hsla(var(--stone-6-hsl) / 0.15);
+    border-radius: 50%;
+    scale: 0.8;
+  }
+
+  & .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);
+    }
+  }
+
+  & .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);
+    }
+  }
+
+  & .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):not(.person-box__no-hover):hover {
+    --_hover: hsl(var(--gender-male));
+    cursor: pointer;
+    box-shadow: var(--shadow-2);
+  }
+}
+
+.person-container {
+  display: grid;
+  gap: var(--size-6);
+}
+
+.avatar {
+  block-size: 2.5rem;
+  /* transform: rotate(45deg); */
+
+  & .avatar__status {
+    content: ' ';
+    display: block;
+    block-size: 1rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.5rem;
+    border: 1px solid var(--border-color);
+    top: calc(50% - 0.5rem);
+    bottom: calc(50% - 0.5rem);
+    background-color: hsla(var(--positive-bg) / 1);
+  }
+
+  /* & :deep(.q-img) {
+    transform: rotate(-45deg);
+  } */
+}
+
+.edit-profile {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 80%;
+  }
+}
+</style>