feat: Personnel => card status, locale

src/components/home/PersonCard.vue

@@ -12,6 +12,7 @@ defineProps<{
     male?: boolean;
     female?: boolean;
     disabled?: boolean;
+    img?: string;
   }[];
 }>();
 
@@ -19,7 +20,12 @@ const status = ref(false);
 </script>
 
 <template>
-  <div class="person-container">
+  <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"
@@ -75,12 +81,26 @@ const status = ref(false);
           </q-btn>
         </div>
 
-        <AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>
+        <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(--border-color)' : 'white'}`"
+              />
+            </div>
+          </AppCircle>
+        </div>
 
-        <span class="items-start row">
+        <span class="items-center row q-my-sm">
           {{ v.name }}
           <iconify-icon
-            class="q-pl-sm"
+            class="q-px-sm"
             :class="{
               'symbol-gender': v.male || v.female,
               'symbol-gender__male': !v.disabled && v.male,
@@ -90,9 +110,10 @@ const status = ref(false);
             :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
             width="20px"
           />
+          <iconify-icon class="locale" icon="circle-flags:th" />
         </span>
         <span
-          class="badge"
+          class="badge q-px-sm"
           :class="{
             'bg-gender': v.male || v.female,
             'bg-gender__male': !v.disabled && v.male,
@@ -133,21 +154,98 @@ const status = ref(false);
 <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;
+
+    .status-circle {
+      background-color: var(--surface-2);
+    }
+
+    .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 {
-    box-shadow: inset 0em -5px transparent;
+    display: grid;
+    flex-grow: 1;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--size-2);
+
+    & > * {
+      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;
   }
 
   &: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));
     }
   }
@@ -155,7 +253,6 @@ const status = ref(false);
 
 .person-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
   gap: var(--size-6);
 }
 
@@ -167,63 +264,6 @@ const status = ref(false);
   display: inline-block;
   border-radius: var(--radius-6);
   background-color: var(--surface-2);
-  padding: 0 var(--size-6);
+  text-wrap: nowrap;
-}
-
-.person-detail {
-  display: grid;
-  flex-grow: 1;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--size-2);
-
-  & > * {
-    display: flex;
-    flex-direction: column;
-
-    & > :first-child {
-      font-size: var(--font-size-0);
-    }
-  }
-}
-
-.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(--blue-5-hsl);
-  }
-
-  &.bg-gender__female {
-    --_fg: 0 100 100%;
-    --_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

@@ -21,6 +21,7 @@ const person = [
       { label: 'ตำแหน่ง', value: '32 ปี' },
     ],
     male: true,
+    img: 'profile.png',
   },
   {
     name: 'นางสาวสุขใจ แสนดี',
@@ -44,6 +45,7 @@ const person = [
     ],
     male: true,
     disabled: true,
+    img: 'profile.png',
   },
   {
     name: 'นางสาวสุขใจ แสนดี',
@@ -145,7 +147,7 @@ const selectorList = [
 
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
-      <!-- <PersonCard :list="person" class="q-mb-md" /> -->
+      <PersonCard :list="person" class="q-mb-md" />
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">