feat: Personnel info

src/components/02_personnel-management/infoForm.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AppBox from '../app/AppBox.vue';
+import FormAddress from './FormAddress.vue';
+
+defineProps<{
+  addressTitle?: string;
+  addressTitleEN?: string;
+}>();
+
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const zipCode = defineModel<string>('zipCode', { default: '' });
+</script>
+<template>
+  <div class="row items-stretch" style="position: absolute; inset: 0">
+    <div class="col-3">
+      <slot name="person-card"></slot>
+    </div>
+    <div class="col-9" style="position: relative">
+      <AppBox
+        bordered
+        class="q-my-md q-mr-md"
+        style="position: absolute; overflow-y: auto; inset: 0"
+      >
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address">
+            <FormAddress
+              dense
+              outlined
+              separator
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
+      </AppBox>
+    </div>
+  </div>
+</template>

src/components/DrawerInfo.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  editData?: (...args: unknown[]) => void;
+  deleteData?: (...args: unknown[]) => void;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
+}>();
+
+const drawerOpen = defineModel<boolean>('drawerOpen', {
+  default: false,
+});
+</script>
+<template>
+  <q-drawer
+    @hide="close"
+    :width="1100"
+    :breakpoint="500"
+    v-model="drawerOpen"
+    behavior="mobile"
+    side="right"
+    show-if-above
+  >
+    <AppBox
+      class="column justify-between full-height"
+      style="padding: 0; border-radius: var(--radius-2)"
+    >
+      <div class="form-header col q-px-lg row items-center">
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-pencil-outline"
+          padding="xs"
+          class="q-mr-md"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: var(--brand-1)"
+          @click="editData"
+        />
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-trash-can-outline"
+          padding="xs"
+          :class="{ dark: $q.dark.isActive }"
+          style="color: hsl(var(--negative-bg))"
+          @click="deleteData"
+        />
+
+        <div class="col text-subtitle1 text-weight-bold text-center">
+          {{ title }}
+        </div>
+
+        <div style="width: 31.98px"></div>
+        <q-btn
+          round
+          flat
+          id="closeDialog"
+          icon="mdi-close"
+          padding="xs"
+          class="close-btn"
+          :class="{ dark: $q.dark.isActive }"
+          @click="close"
+        />
+      </div>
+
+      <div
+        class="col-10 form-body"
+        style="position: relative"
+        :class="{ dark: $q.dark.isActive }"
+        :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+      >
+        <slot name="info"></slot>
+      </div>
+
+      <div
+        class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+      >
+        <q-btn
+          dense
+          outline
+          unelevated
+          id="cancelBtn"
+          class="q-px-md app-text-negative"
+          :label="$t('cancel')"
+          @click="close"
+        />
+        <q-btn
+          dense
+          unelevated
+          id="submitBtn"
+          type="submit"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+        />
+      </div>
+    </AppBox>
+  </q-drawer>
+</template>
+
+<style scoped lang="scss">
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+
+.form-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.form-body {
+  --_body-bg: var(--sand-0);
+  background-color: var(--_body-bg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  &.dark {
+    --_body-bg: var(--gray-10);
+  }
+}
+
+.form-footer {
+  border-top: 1px solid var(--border-color);
+}
+</style>

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));