feat: Personnel => Person card, hover
This commit is contained in:
puriphatt
parent
7d20ff8238
commit
021b1842e0
3 changed files with 206 additions and 36 deletions
|
|
@ -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"
|
||||
class="column"
|
||||
bordered
|
||||
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__female': v.female,
|
||||
'bg-gender__male': !v.disabled && v.male,
|
||||
'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__male': v.male,
|
||||
'bg-gender__female': v.female,
|
||||
'bg-gender__light':
|
||||
(!v.disabled && v.male) || (!v.disabled && 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>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,78 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>Personnel Management</template>
|
||||
<script setup lang="ts">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue