feat: use api fn to fetch person

This commit is contained in:
Methapon2001 2024-04-05 17:26:40 +07:00
parent c019ec6a7e
commit 4b2760b500
5 changed files with 54 additions and 101 deletions

View file

@ -1,5 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import useUserStore from 'stores/user';
import { Status } from 'stores/types';
import { storeToRefs } from 'pinia';
import PersonCard from 'src/components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
@ -8,97 +11,12 @@ import SelectorList from 'src/components/SelectorList.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import TooltipComponet from 'src/components/TooltipComponet.vue';
const selectorLabel = ref('');
const userStore = useUserStore();
const { data: userData } = storeToRefs(userStore);
const person = [
{
name: 'นายสันติ เมติกาญจ์',
badge: 'CORP000001-01-240002',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
male: true,
img: 'profile.png',
},
{
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,
img: 'profile.png',
},
{
name: 'นางสาวสุขใจ แสนดี',
badge: 'CORP000001-01-240001',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
female: true,
disabled: true,
},
{
name: 'นางสาวสุขใจ แสนดี',
badge: 'CORP000001-01-240001',
detail: [
{ label: 'สัญชาติ', value: 'ไทย' },
{ label: 'ตำแหน่ง', value: 'นักบริหาร' },
{ label: 'โทรศัพท์', value: '0621249602' },
{ label: 'ตำแหน่ง', value: '32 ปี' },
],
female: true,
},
] satisfies InstanceType<typeof PersonCard>['$props']['list'];
const branchStat = ref<
{
amount: string;
label: string;
}[]
>([
{
amount: '0',
label: '-',
},
{
amount: '0',
label: '-',
},
{
amount: '0',
label: '-',
},
{
amount: '0',
label: '-',
},
{
amount: '0',
label: '-',
},
]);
onMounted(async () => {
await userStore.fetchList();
});
const selectorList = [
{
@ -147,8 +65,27 @@ const selectorList = [
<!-- main -->
<AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
<!-- <PersonCard :list="person" class="q-mb-md" /> -->
<div class="column" style="height: 100%">
<PersonCard
:list="
userData?.result.map((v) => ({
img: `${v.profileImageUrl}`,
name: `${v.firstName} ${v.lastName}`,
male: v.gender === 'male',
female: v.gender === 'female',
detail: [
{ label: 'Email', value: v.email },
{ label: 'Telephone No', value: v.telephoneNo },
],
badge: v.code.slice(0, 10),
disabled: v.status === 'INACTIVE',
})) || []
"
/>
<div
class="column"
style="height: 100%"
v-if="userData && userData.total === 0"
>
<div class="col-1 self-end">
<div class="row">
<tooltip-componet