feat: Personnel info

src/components/home/PersonCard.vue

@@ -8,7 +8,7 @@ defineProps<{
   list: {
     id: string;
     name: string;
-    detail: { label: string; value: string }[];
+    detail?: { label: string; value: string }[];
     male?: boolean;
     female?: boolean;
     disabled?: boolean;
@@ -18,6 +18,8 @@ defineProps<{
   gridColumns?: number;
   noHover?: boolean;
   noAction?: boolean;
+  noDetail?: boolean;
+  noBg?: boolean;
   detailColumnCount?: number;
 }>();
 
@@ -48,9 +50,10 @@ defineEmits<{
       :class="{
         'person-box__disabled': v.disabled,
         'person-box__no-hover': noHover,
+        'person-box__no-detail': noDetail,
+        'person-box__no-bg': noBg,
       }"
-      @click="$emit('enterCard', v.id)"
-      style="padding: 0"
+      @click="$emit('enterCard', 'INFO', v.id)"
       v-for="(v, i) in list"
       :key="i"
     >
@@ -69,7 +72,7 @@ defineEmits<{
               <q-list>
                 <q-item
                   clickable
-                  @click="$emit('updateCard', v.id)"
+                  @click="$emit('updateCard', 'FORM', v.id)"
                   v-close-popup
                 >
                   <q-item-section class="col-4">
@@ -173,8 +176,9 @@ defineEmits<{
       </div>
 
       <!-- detail -->
-      <q-separator />
+      <q-separator v-if="!noDetail" />
       <div
+        v-if="!noDetail"
         class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
         :class="{
           'bg-gender': v.male || v.female,
@@ -210,6 +214,7 @@ defineEmits<{
   background-color: var(--surface-2);
   border-radius: var(--radius-2) !important;
   transition: 100ms ease-in-out;
+  padding: 0;
 
   &.person-box__disabled {
     opacity: 0.4;
@@ -223,6 +228,14 @@ defineEmits<{
     }
   }
 
+  &.person-box__no-detail {
+    padding-block: 2rem;
+  }
+
+  &.person-box__no-bg {
+    background-color: transparent;
+  }
+
   & .bg-gender {
     color: hsla(var(--_fg));
     background-color: hsl(var(--_bg));