Merge branch 'dev/phatt' into develop

src/components/home/PersonCard.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from '../app/AppCircle.vue';
 
@@ -12,27 +14,90 @@ defineProps<{
     disabled?: boolean;
   }[];
 }>();
+
+const status = ref(false);
 </script>
 
 <template>
   <div class="person-container">
     <AppBox
-      :bordered="$q.dark.isActive"
+      bordered
-      class="column"
+      class="column person-box"
+      :class="{ 'person-box__disble': v.disabled }"
       style="padding: 0"
       v-for="(v, i) in list"
       :key="i"
     >
       <div class="q-pa-md column items-center">
+        <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">
+                    แก้ไขข้อมูล
+                  </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">ลบข้อมูล</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>
+
         <AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>
 
-        <span>{{ v.name }}</span>
+        <span class="items-start row">
+          {{ 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"
+          />
+        </span>
         <span
           class="badge"
           :class="{
             'bg-gender': v.male || v.female,
-            'bg-gender__male': v.male,
+            'bg-gender__male': !v.disabled && v.male,
-            'bg-gender__female': v.female,
+            'bg-gender__female': !v.disabled && v.female,
+            'bg-gender__disable': v.disabled,
           }"
         >
           {{ v.badge }}
@@ -40,16 +105,24 @@ defineProps<{
       </div>
       <q-separator />
       <div
-        class="q-py-sm q-px-xl person-detail rounded-b"
+        class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
         :class="{
           'bg-gender': v.male || v.female,
-          'bg-gender__light': v.male || v.female,
+          'bg-gender__light':
-          'bg-gender__male': v.male,
+            (!v.disabled && v.male) || (!v.disabled && v.female),
-          'bg-gender__female': v.female,
+          'bg-gender__male': !v.disabled && v.male,
+          'bg-gender__female': !v.disabled && v.female,
+          'bg-gender__disable': v.disabled,
         }"
       >
         <div v-for="(d, j) in v.detail" :key="j">
-          <span>{{ d.label }}</span>
+          <span
+            :style="{
+              color: $q.dark.isActive ? 'var(--foreground)' : 'var(--stone-7)',
+            }"
+          >
+            {{ d.label }}
+          </span>
           <span>{{ d.value }}</span>
         </div>
       </div>
@@ -58,9 +131,31 @@ defineProps<{
 </template>
 
 <style scoped>
+.person-box {
+  background-color: var(--surface-2);
+  box-shadow: var(--shadow-0);
+  border-radius: var(--radius-2) !important;
+
+  &.person-box__disble {
+    opacity: 0.4;
+  }
+
+  & .person-detail {
+    box-shadow: inset 0em -5px transparent;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    & .person-detail {
+      box-shadow: inset 0em -5px hsl(var(--_bg));
+    }
+  }
+}
+
 .person-container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: var(--size-6);
 }
 
@@ -90,10 +185,16 @@ defineProps<{
     }
   }
 }
+
 .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);
@@ -109,4 +210,20 @@ defineProps<{
     --_bg: var(--pink-7-hsl);
   }
 }
+
+.symbol-gender {
+  color: hsla(var(--_fg));
+
+  &.symbol-gender__disable {
+    --_fg: var(--stone-6-hsl);
+  }
+
+  &.symbol-gender__male {
+    --_fg: var(--blue-5-hsl);
+  }
+
+  &.symbol-gender__female {
+    --_fg: var(--pink-7-hsl);
+  }
+}
 </style>

src/pages/02_personnel-management/MainPage.vue

@@ -1,2 +1,78 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
-<template>Personnel Management</template>
+import PersonCard from 'src/components/home/PersonCard.vue';
+import AppBox from 'components/app/AppBox.vue';
+
+const person = [
+  {
+    name: 'นายสันติ เมติกาญจ์',
+    badge: 'CORP000001-01-240002',
+    detail: [
+      { label: 'สัญชาติ', value: 'ไทย' },
+      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
+      { label: 'โทรศัพท์', value: '0621249602' },
+      { label: 'ตำแหน่ง', value: '32 ปี' },
+    ],
+    male: true,
+  },
+  {
+    name: 'นางสาวสุขใจ แสนดี',
+    badge: 'CORP000001-01-240001',
+    detail: [
+      { label: 'สัญชาติ', value: 'ไทย' },
+      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
+      { label: 'โทรศัพท์', value: '0621249602' },
+      { label: 'ตำแหน่ง', value: '32 ปี' },
+    ],
+    female: true,
+  },
+  {
+    name: 'นายสันติ เมติกาญจ์',
+    badge: 'CORP000001-01-240002',
+    detail: [
+      { label: 'สัญชาติ', value: 'ไทย' },
+      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
+      { label: 'โทรศัพท์', value: '0621249602' },
+      { label: 'ตำแหน่ง', value: '32 ปี' },
+    ],
+    male: true,
+    disabled: true,
+  },
+  {
+    name: 'นางสาวสุขใจ แสนดี',
+    badge: 'CORP000001-01-240001',
+    detail: [
+      { label: 'สัญชาติ', value: 'ไทย' },
+      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
+      { label: 'โทรศัพท์', value: '0621249602' },
+      { label: 'ตำแหน่ง', value: '32 ปี' },
+    ],
+    female: true,
+  },
+  {
+    name: 'นางสาวสุขใจ แสนดี',
+    badge: 'CORP000001-01-240001',
+    detail: [
+      { label: 'สัญชาติ', value: 'ไทย' },
+      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
+      { label: 'โทรศัพท์', value: '0621249602' },
+      { label: 'ตำแหน่ง', value: '32 ปี' },
+    ],
+    female: true,
+    disabled: true,
+  },
+] satisfies InstanceType<typeof PersonCard>['$props']['list'];
+</script>
+
+<template>
+  <div class="column">
+    <div class="row text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
+
+    <AppBox bordered style="width: 100%; height: 580px">
+      <q-scroll-area style="height: 100%">
+        <div class="column" style="height: 100%">
+          <PersonCard :list="person" class="q-mb-md" />
+        </div>
+      </q-scroll-area>
+    </AppBox>
+  </div>
+</template>

src/pages/MainPage.vue

@@ -89,32 +89,9 @@ const menu = [
     caption: 'แสดงรายงาน',
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
-
-// const person = [
-//   {
-//     name: 'Person 1',
-//     badge: 'Badge 1',
-//     detail: [
-//       { label: 'Label 1', value: 'Detail 1' },
-//       { label: 'Label 2', value: 'Detail 2' },
-//     ],
-//     male: true,
-//   },
-//   {
-//     name: 'Person 1',
-//     badge: 'Badge 1',
-//     detail: [
-//       { label: 'Label 1', value: 'Detail 1' },
-//       { label: 'Label 2', value: 'Detail 2' },
-//       { label: 'Label 3', value: 'Detail 3' },
-//     ],
-//     female: true,
-//   },
-// ] satisfies InstanceType<typeof PersonCard>['$props']['list'];
 </script>
 
 <template>
-  <!-- <PersonCard :list="person" class="q-mb-md" /> -->
   <MenuItem :list="menu" />
   <!-- <div class="row">
     <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />