fix: new 03 ui & layout
This commit is contained in:
puriphatt
parent
bebee654a5
commit
e1e7eb4719
1 changed files with 540 additions and 393 deletions
|
|
@ -81,6 +81,7 @@ const {
|
|||
const flowStore = useFlowStore();
|
||||
const employeeStore = useEmployeeStore();
|
||||
const optionStore = useOptionStore();
|
||||
const currentTab = ref('employer');
|
||||
const formData = ref<CustomerCreate>({
|
||||
status: 'CREATED',
|
||||
personName: '',
|
||||
|
|
@ -129,6 +130,10 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
|
|||
value: 'all',
|
||||
});
|
||||
|
||||
const fieldSelected = ref();
|
||||
const fieldDisplay = ref();
|
||||
const splitterModel = ref(15);
|
||||
const modeView = ref(true);
|
||||
const currentEmployee = ref<Employee | undefined>();
|
||||
const currentEmployeeCode = ref('');
|
||||
const isEmployeeEdit = ref(false);
|
||||
|
|
@ -1216,6 +1221,7 @@ watch(locale, () => {
|
|||
|
||||
watch(fieldSelectedCustomer, async () => {
|
||||
let resultList;
|
||||
console.log('asd');
|
||||
|
||||
if (fieldSelectedCustomer.value.value === 'all') {
|
||||
resultList = await fetchList({ includeBranch: true });
|
||||
|
|
@ -1278,6 +1284,12 @@ watch(genderSelector, async () => {
|
|||
|
||||
watch(selectorLabel, async () => {
|
||||
if (inputSearch.value) inputSearch.value = undefined;
|
||||
if (selectorLabel.value === 'EMPLOYEE') {
|
||||
await fetchListEmployee();
|
||||
await fetchListStatsEmployeeGender();
|
||||
} else {
|
||||
await fetchListCustomer();
|
||||
}
|
||||
});
|
||||
|
||||
watch([inputSearch, currentStatus], async () => {
|
||||
|
|
@ -1331,10 +1343,25 @@ watch([inputSearch, currentStatus], async () => {
|
|||
|
||||
<div class="column full-height no-wrap">
|
||||
<div v-if="isMainPage" class="column full-height">
|
||||
<div class="text-body-2 q-mb-xs flex items-center">
|
||||
<div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
|
||||
{{ $t('dataSum') }}
|
||||
<q-badge
|
||||
v-if="listCustomer"
|
||||
rounded
|
||||
class="q-ml-sm"
|
||||
style="
|
||||
background-color: hsla(var(--info-bg) / 0.15);
|
||||
color: hsl(var(--info-bg));
|
||||
"
|
||||
>
|
||||
{{
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? listCustomer?.length
|
||||
: listEmployee.length
|
||||
}}
|
||||
</q-badge>
|
||||
<q-btn
|
||||
class="q-ml-xs"
|
||||
class="q-ml-lg"
|
||||
icon="mdi-pin"
|
||||
color="primary"
|
||||
size="sm"
|
||||
|
|
@ -1390,420 +1417,535 @@ watch([inputSearch, currentStatus], async () => {
|
|||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<div class="surface-1 bordered rounded q-pa-md scroll col">
|
||||
<div class="row q-pb-md">
|
||||
<div class="col">
|
||||
<q-select
|
||||
id="select-userType"
|
||||
for="select-userType"
|
||||
v-if="selectorLabel === 'EMPLOYER'"
|
||||
v-model="fieldSelectedCustomer"
|
||||
style="width: 150px"
|
||||
outlined
|
||||
:options="fieldCustomer.map((v) => ({ label: $t(v), value: v }))"
|
||||
:label="$t('customerCardUserType')"
|
||||
dense
|
||||
/>
|
||||
<q-btn-toggle
|
||||
v-else
|
||||
v-model="genderSelector"
|
||||
id="btn-mode"
|
||||
class="no-shadow"
|
||||
padding="0px"
|
||||
toggle-color="grey-3"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: 'female', slot: 'female' },
|
||||
{ value: 'male', slot: 'male' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:female>
|
||||
<div
|
||||
class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
|
||||
@click="
|
||||
async () => {
|
||||
if (genderSelector === 'female') {
|
||||
await fetchListEmployee();
|
||||
genderSelector = '';
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-gender-female"
|
||||
class="q-mr-sm"
|
||||
size="18px"
|
||||
/>
|
||||
<div v-if="statsEmployeeGender">
|
||||
{{ statsEmployeeGender.female ?? 0 }} {{ $t('person') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:male>
|
||||
<div
|
||||
class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
|
||||
@click="
|
||||
async () => {
|
||||
if (genderSelector === 'male') {
|
||||
await fetchListEmployee();
|
||||
genderSelector = '';
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
|
||||
<div v-if="statsEmployeeGender">
|
||||
{{ statsEmployeeGender.male ?? 0 }} {{ $t('person') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
style="width: 250px"
|
||||
:label="$t('search')"
|
||||
class="q-mr-lg"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
id="btn-status"
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
class="bordered rounded"
|
||||
unelevated
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
<q-list v-close-popup dense>
|
||||
<q-item
|
||||
id="btn-status-all"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="currentStatus = 'All'"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-status-active"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="currentStatus = 'ACTIVE'"
|
||||
>
|
||||
{{ $t('statusACTIVE') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-status-inactive"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="currentStatus = 'INACTIVE'"
|
||||
>
|
||||
{{ $t('statusINACTIVE') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<template
|
||||
v-if="
|
||||
listCustomer &&
|
||||
statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
|
||||
selectorLabel === 'EMPLOYER'
|
||||
"
|
||||
>
|
||||
<div class="surface-1 bordered rounded col column">
|
||||
<!-- tabs -->
|
||||
<div class="column">
|
||||
<div
|
||||
v-if="listCustomer.length === 0"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
class="row surface-3 bordered-b justify-between full-width items-center surface-1"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
<div
|
||||
v-if="listCustomer.length !== 0"
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<UsersDetailCardComponent
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
class="hover-card"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
:metadata="{
|
||||
id: i.id,
|
||||
disabled: i.status === 'ACTIVE' || i.status === 'CREATED',
|
||||
}"
|
||||
:badge="i.branch"
|
||||
:list="{
|
||||
id: i.id,
|
||||
imageUrl: i.imageUrl,
|
||||
type: i.customerType,
|
||||
name: i.customerName === '' ? '-' : i.customerName,
|
||||
code: i.code,
|
||||
status: i.status,
|
||||
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
style="width: 250px"
|
||||
:label="$t('search')"
|
||||
class="q-mr-md"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
detail: [
|
||||
{
|
||||
label: 'customerNameTh',
|
||||
value: i.customerName,
|
||||
},
|
||||
{
|
||||
label: 'customerNameEn',
|
||||
value: i.customerNameEN,
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="
|
||||
() => {
|
||||
currentCustomerName = i.customerName;
|
||||
customerType = i.customerType;
|
||||
currentCustomerUrlImage = i.imageUrl;
|
||||
currentCustomerId = i.id;
|
||||
<div class="row">
|
||||
<q-select
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="q-pr-md"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('all'), value: 'All' },
|
||||
{ label: $t('statusACTIVE'), value: 'ACTIVE' },
|
||||
{ label: $t('statusINACTIVE'), value: 'INACTIVE' },
|
||||
]"
|
||||
></q-select>
|
||||
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
isMainPage = false;
|
||||
}
|
||||
"
|
||||
@update-card="
|
||||
() => {
|
||||
if (!listCustomer) return;
|
||||
<q-select
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
:options="[
|
||||
{ label: 'กันว่าง 1', value: 'กันว่าง 1' },
|
||||
{ label: 'กันว่าง 2', value: 'กันว่าง 2' },
|
||||
]"
|
||||
:display-value="$t('displayField')"
|
||||
v-model="fieldSelected"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
map-options
|
||||
emit-value
|
||||
outlined
|
||||
multiple
|
||||
dense
|
||||
/>
|
||||
|
||||
customerType = i.customerType;
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
|
||||
assignFormData(i.id);
|
||||
|
||||
infoDrawerEdit = true;
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@view-card="
|
||||
() => {
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
customerType = i.customerType;
|
||||
assignFormData(i.id);
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@delete-card="deleteCustomerById(i.id)"
|
||||
@toggle-status="
|
||||
() => {
|
||||
toggleStatusCustomer(
|
||||
i.id,
|
||||
i.status === 'ACTIVE' ? true : false,
|
||||
);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="listCustomer.length !== 0"
|
||||
class="row justify-between q-pt-md"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown dense unelevated :label="pageSize">
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
:key="v"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchListCustomer();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
<q-btn-toggle
|
||||
id="btn-mode"
|
||||
v-model="modeView"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1 q-ml-md"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: true, slot: 'folder' },
|
||||
{ value: false, slot: 'list' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:folder>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="16px"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView
|
||||
? '#C9D3DB '
|
||||
: '#787B7C'
|
||||
: modeView
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:list>
|
||||
<q-icon
|
||||
name="mdi-format-list-bulleted"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
size="16px"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView === false
|
||||
? '#C9D3DB'
|
||||
: '#787B7C'
|
||||
: modeView === false
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: listCustomer.length,
|
||||
total: statsCustomerType.PERS + statsCustomerType.CORP,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPageCustomer"
|
||||
v-model:max-page="maxPageCustomer"
|
||||
:fetch-data="
|
||||
<div class="surface-2 bordered-b q-px-md">
|
||||
<q-tabs
|
||||
dense
|
||||
v-model="currentTab"
|
||||
align="left"
|
||||
class="full-height"
|
||||
active-color="info"
|
||||
>
|
||||
<q-tab
|
||||
name="employer"
|
||||
@click="
|
||||
async () => {
|
||||
await fetchListCustomer();
|
||||
selectorLabel = 'EMPLOYER';
|
||||
currentPageCustomer = 1;
|
||||
inputSearch = '';
|
||||
currentStatus = 'All';
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
currentTab === 'employer' ? 'text-bold' : 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('EMPLOYER') }}
|
||||
</div>
|
||||
</q-tab>
|
||||
<q-tab
|
||||
name="employee"
|
||||
@click="
|
||||
async () => {
|
||||
selectorLabel = 'EMPLOYEE';
|
||||
currentPageEmployee = 1;
|
||||
inputSearch = '';
|
||||
currentStatus = 'All';
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
:class="
|
||||
currentTab === 'employee' ? 'text-bold' : 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t('EMPLOYEE') }}
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
listEmployee && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
|
||||
"
|
||||
<!-- body -->
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:limits="[15, 80]"
|
||||
style="width: 100%"
|
||||
class="col"
|
||||
>
|
||||
<div
|
||||
v-if="listEmployee.length === 0"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
<template v-slot:before>
|
||||
<div class="column q-pa-md q-gutter-y-sm">
|
||||
<div v-if="selectorLabel === 'EMPLOYER'">
|
||||
<q-item
|
||||
v-for="v in fieldCustomer"
|
||||
:key="v"
|
||||
clickable
|
||||
dense
|
||||
class="no-padding flex items-center rounded"
|
||||
active-class="employer-active"
|
||||
:active="fieldSelectedCustomer.value === v"
|
||||
@click="fieldSelectedCustomer = { label: v, value: v }"
|
||||
>
|
||||
<span class="q-px-md">
|
||||
{{ $t(v) }}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-item
|
||||
active
|
||||
dense
|
||||
clickable
|
||||
active-class="employer-active"
|
||||
class="no-padding flex items-center rounded"
|
||||
>
|
||||
<span class="q-px-md">
|
||||
{{ $t('totalEmployee') }}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="listEmployee.length !== 0">
|
||||
<PersonCard
|
||||
history
|
||||
:list="
|
||||
listEmployee.map((v: Employee) => ({
|
||||
disabled: v.status === 'INACTIVE',
|
||||
img: v.profileImageUrl,
|
||||
id: v.id,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
badge: v.code,
|
||||
detail: [
|
||||
{
|
||||
label: $t('personnelCardNationality'),
|
||||
value: v.nationality,
|
||||
},
|
||||
{
|
||||
label: $t('personnelCardAge'),
|
||||
value: calculateAge(v.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}))
|
||||
"
|
||||
@history="openHistory"
|
||||
@update-card="openDialogInputForm"
|
||||
@enter-card="openDialogInputForm"
|
||||
@delete-card="onDelete"
|
||||
@toggle-status="(id, status) => toggleStatusEmployee(id, status)"
|
||||
/>
|
||||
<template v-slot:after>
|
||||
<div class="column full-height surface-2">
|
||||
<!-- employer -->
|
||||
<template
|
||||
v-if="
|
||||
listCustomer &&
|
||||
statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
|
||||
selectorLabel === 'EMPLOYER'
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="listCustomer.length === 0"
|
||||
class="row col full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
<div
|
||||
v-if="listCustomer.length !== 0"
|
||||
class="col q-pa-md scroll"
|
||||
>
|
||||
<div
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<UsersDetailCardComponent
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
class="hover-card"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
:metadata="{
|
||||
id: i.id,
|
||||
disabled:
|
||||
i.status === 'ACTIVE' || i.status === 'CREATED',
|
||||
}"
|
||||
:badge="i.branch"
|
||||
:list="{
|
||||
id: i.id,
|
||||
imageUrl: i.imageUrl,
|
||||
type: i.customerType,
|
||||
name: i.customerName === '' ? '-' : i.customerName,
|
||||
code: i.code,
|
||||
status: i.status,
|
||||
|
||||
<div class="col-4 row justify-center">
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown dense unelevated :label="pageSize">
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
:key="v"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchListEmployee();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
detail: [
|
||||
{
|
||||
label: 'customerNameTh',
|
||||
value: i.customerName,
|
||||
},
|
||||
{
|
||||
label: 'customerNameEn',
|
||||
value: i.customerNameEN,
|
||||
},
|
||||
],
|
||||
}"
|
||||
@enter-card="
|
||||
() => {
|
||||
currentCustomerName = i.customerName;
|
||||
customerType = i.customerType;
|
||||
currentCustomerUrlImage = i.imageUrl;
|
||||
currentCustomerId = i.id;
|
||||
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
isMainPage = false;
|
||||
}
|
||||
"
|
||||
@update-card="
|
||||
() => {
|
||||
if (!listCustomer) return;
|
||||
|
||||
customerType = i.customerType;
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
|
||||
assignFormData(i.id);
|
||||
|
||||
infoDrawerEdit = true;
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@view-card="
|
||||
() => {
|
||||
const { branch, ...payload } = i;
|
||||
currentCustomer = payload;
|
||||
|
||||
currentCustomerId = i.id;
|
||||
customerType = i.customerType;
|
||||
assignFormData(i.id);
|
||||
openDialogInputForm('INFO', i.id);
|
||||
}
|
||||
"
|
||||
@delete-card="deleteCustomerById(i.id)"
|
||||
@toggle-status="
|
||||
() => {
|
||||
toggleStatusCustomer(
|
||||
i.id,
|
||||
i.status === 'ACTIVE' ? true : false,
|
||||
);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: listEmployee.length,
|
||||
total: statsEmployee,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPageEmployee"
|
||||
v-model:max-page="maxPageEmployee"
|
||||
:fetch-data="
|
||||
async () => {
|
||||
await fetchListEmployee();
|
||||
flowStore.rotate();
|
||||
}
|
||||
<div
|
||||
v-if="listCustomer.length !== 0"
|
||||
class="row justify-between items-center q-px-md"
|
||||
>
|
||||
<div class="row col-4 items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown
|
||||
dense
|
||||
unelevated
|
||||
class="bordered q-pl-md rounded"
|
||||
:label="pageSize"
|
||||
style="background-color: var(--surface-1)"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
:key="v"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchListCustomer();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 flex justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: listCustomer.length,
|
||||
total: statsCustomerType.PERS + statsCustomerType.CORP,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="col-4 flex justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPageCustomer"
|
||||
v-model:max-page="maxPageCustomer"
|
||||
:fetch-data="
|
||||
async () => {
|
||||
await fetchListCustomer();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- employee -->
|
||||
<template
|
||||
v-if="
|
||||
listEmployee &&
|
||||
statsEmployee > 0 &&
|
||||
selectorLabel === 'EMPLOYEE'
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="listEmployee.length === 0"
|
||||
class="row full-width items-center justify-center col"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col column justify-between q-px-md q-pt-md scroll"
|
||||
v-if="listEmployee.length !== 0"
|
||||
>
|
||||
<PersonCard
|
||||
history
|
||||
:list="
|
||||
listEmployee.map((v: Employee) => ({
|
||||
disabled: v.status === 'INACTIVE',
|
||||
img: v.profileImageUrl,
|
||||
id: v.id,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
badge: v.code,
|
||||
detail: [
|
||||
{
|
||||
label: $t('personnelCardNationality'),
|
||||
value: v.nationality,
|
||||
},
|
||||
{
|
||||
label: $t('personnelCardAge'),
|
||||
value: calculateAge(v.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}))
|
||||
"
|
||||
@history="openHistory"
|
||||
@update-card="openDialogInputForm"
|
||||
@enter-card="openDialogInputForm"
|
||||
@delete-card="onDelete"
|
||||
@toggle-status="
|
||||
(id, status) => toggleStatusEmployee(id, status)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="listEmployee.length !== 0"
|
||||
class="row justify-between items-center q-px-md"
|
||||
>
|
||||
<div class="row col-4 items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown
|
||||
dense
|
||||
unelevated
|
||||
:label="pageSize"
|
||||
class="bordered q-pl-md"
|
||||
style="background-color: var(--surface-1)"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
:key="v"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchListEmployee();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 flex justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: listEmployee.length,
|
||||
total: statsEmployee,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="col-4 flex justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPageEmployee"
|
||||
v-model:max-page="maxPageEmployee"
|
||||
:fetch-data="
|
||||
async () => {
|
||||
await fetchListEmployee();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
(statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
|
||||
selectorLabel === 'EMPLOYER') ||
|
||||
(statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
|
||||
"
|
||||
>
|
||||
<TooltipComponent
|
||||
class="self-end"
|
||||
:title="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipTitle'
|
||||
: 'customerEmployeeTooltipTitle'
|
||||
"
|
||||
:caption="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipCaption'
|
||||
: 'customerEmployeeTooltipCaption'
|
||||
"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row items-center justify-center"
|
||||
style="flex-grow: 1"
|
||||
>
|
||||
<AddButton
|
||||
:label="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerAdd'
|
||||
: 'customerEmployeeAdd'
|
||||
"
|
||||
@trigger="() => openDialogCustomerType()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-if="
|
||||
(statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
|
||||
selectorLabel === 'EMPLOYER') ||
|
||||
(statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
|
||||
"
|
||||
>
|
||||
<TooltipComponent
|
||||
class="self-end"
|
||||
:title="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipTitle'
|
||||
: 'customerEmployeeTooltipTitle'
|
||||
"
|
||||
:caption="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerTooltipCaption'
|
||||
: 'customerEmployeeTooltipCaption'
|
||||
"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
|
||||
<div class="row items-center justify-center" style="flex-grow: 1">
|
||||
<AddButton
|
||||
:label="
|
||||
selectorLabel === 'EMPLOYER'
|
||||
? 'customerEmployerAdd'
|
||||
: 'customerEmployeeAdd'
|
||||
"
|
||||
@trigger="() => openDialogCustomerType()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
|
@ -3093,4 +3235,9 @@ watch([inputSearch, currentStatus], async () => {
|
|||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.employer-active {
|
||||
background-color: hsla(var(--info-bg) / 0.1);
|
||||
color: hsl(var(--info-bg));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue