503 lines
13 KiB
Vue
503 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QTableColumn } from 'quasar';
|
|
import { EmployeeHistory, NewEmployeeHistory } from 'src/stores/employee/types';
|
|
import { dateFormat } from 'src/utils/datetime';
|
|
import NoData from '../NoData.vue';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import useOptionStore from 'src/stores/options';
|
|
|
|
const { t } = useI18n();
|
|
const optionStore = useOptionStore();
|
|
|
|
const historyList = defineModel<EmployeeHistory[]>('historyList', {
|
|
required: true,
|
|
});
|
|
|
|
const columns: QTableColumn[] = [
|
|
{
|
|
name: 'updatedAt',
|
|
label: t('time'),
|
|
field: 'updatedAt',
|
|
align: 'left',
|
|
headerStyle: 'font-weight: bold',
|
|
},
|
|
{
|
|
name: 'updatedBy',
|
|
align: 'center',
|
|
label: t('editBy'),
|
|
field: 'updatedBy',
|
|
headerStyle: 'font-weight: bold',
|
|
},
|
|
|
|
{
|
|
name: 'history',
|
|
align: 'center',
|
|
label: '',
|
|
field: 'history',
|
|
},
|
|
{
|
|
name: 'valueAfter',
|
|
align: 'center',
|
|
label: t('valueAfter'),
|
|
field: 'valueAfter',
|
|
headerStyle: 'font-weight: bold',
|
|
},
|
|
{
|
|
name: 'valueBefore',
|
|
align: 'center',
|
|
label: t('valueBefore'),
|
|
field: 'valueBefore',
|
|
headerStyle: 'font-weight: bold',
|
|
},
|
|
];
|
|
|
|
const currentDate = ref();
|
|
const currentData = ref();
|
|
const currentIndex = ref(0);
|
|
const isHistoryData = ref(false);
|
|
const formatList = ref<NewEmployeeHistory[]>([]);
|
|
|
|
const fieldName = [
|
|
{
|
|
name: 'customerBranchId',
|
|
title: 'formDialogTitleInformation',
|
|
i18n: 'formDialogEmployerID',
|
|
},
|
|
{
|
|
name: 'nrcNo',
|
|
title: 'formDialogTitleInformation',
|
|
i18n: 'formDialogEmployeeNRCNo',
|
|
},
|
|
|
|
{
|
|
name: 'firstName',
|
|
title: 'personalInfo',
|
|
i18n: 'formDialogInputFirstName',
|
|
},
|
|
{
|
|
name: 'firstNameEN',
|
|
title: 'personalInfo',
|
|
i18n: 'formDialogInputFirstNameEN',
|
|
},
|
|
{ name: 'lastName', title: 'personalInfo', i18n: 'formDialogInputLastName' },
|
|
{
|
|
name: 'lastNameEN',
|
|
title: 'personalInfo',
|
|
i18n: 'formDialogInputLastNameEN',
|
|
},
|
|
{
|
|
name: 'dateOfBirth',
|
|
title: 'personalInfo',
|
|
i18n: 'formDialogInputBirthDate',
|
|
},
|
|
{ name: 'gender', title: 'personalInfo', i18n: 'formDialogInputGender' },
|
|
{
|
|
name: 'nationality',
|
|
title: 'personalInfo',
|
|
i18n: 'formDialogInputNationality',
|
|
},
|
|
|
|
{
|
|
name: 'address',
|
|
title: 'formDialogTitlePersonnelAddress',
|
|
i18n: 'formDialogTitleAddressPure',
|
|
},
|
|
{
|
|
name: 'addressEN',
|
|
title: 'formDialogTitlePersonnelAddress',
|
|
i18n: 'formDialogTitleAddressPureEN',
|
|
},
|
|
{
|
|
name: 'provinceId',
|
|
title: 'formDialogTitlePersonnelAddress',
|
|
i18n: 'province',
|
|
},
|
|
{
|
|
name: 'districtId',
|
|
title: 'formDialogTitlePersonnelAddress',
|
|
i18n: 'district',
|
|
},
|
|
{
|
|
name: 'subDistrictId',
|
|
title: 'formDialogTitlePersonnelAddress',
|
|
i18n: 'subDistrict',
|
|
},
|
|
|
|
{
|
|
name: 'passportType',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportType',
|
|
},
|
|
{
|
|
name: 'passportNumber',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportNo',
|
|
},
|
|
{
|
|
name: 'previousPassportReference',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportRef',
|
|
},
|
|
{
|
|
name: 'passportIssuingPlace',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputWPassportPlace',
|
|
},
|
|
{
|
|
name: 'passportIssuingCountry',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportCountry',
|
|
},
|
|
{
|
|
name: 'passportIssueDate',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportIssuance',
|
|
},
|
|
{
|
|
name: 'passportExpiryDate',
|
|
title: 'formDialogTitlePassport',
|
|
i18n: 'formDialogInputPassportExpire',
|
|
},
|
|
|
|
{
|
|
name: 'visaType',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaType',
|
|
},
|
|
{
|
|
name: 'visaNumber',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaNo',
|
|
},
|
|
{
|
|
name: 'visaIssueDate',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaIssuance',
|
|
},
|
|
{
|
|
name: 'visaExpiryDate',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaExpire',
|
|
},
|
|
{
|
|
name: 'visaIssuingPlace',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaPlace',
|
|
},
|
|
{
|
|
name: 'visaStayUntilDate',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaStayUntil',
|
|
},
|
|
{
|
|
name: 'tm6Number',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaTM6',
|
|
},
|
|
{
|
|
name: 'entryDate',
|
|
title: 'formDialogTitleVisa',
|
|
i18n: 'formDialogInputVisaEnter',
|
|
},
|
|
];
|
|
|
|
function nextDate(pre: boolean = false) {
|
|
const date = new Date(currentDate.value);
|
|
pre ? date.setDate(date.getDate() - 1) : date.setDate(date.getDate() + 1);
|
|
const dateKey = formatDate(date.toString());
|
|
currentDate.value = dateKey;
|
|
}
|
|
|
|
function formatDate(date: string) {
|
|
const updatedAt = new Date(date);
|
|
const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;
|
|
return dateKey;
|
|
}
|
|
|
|
function isValidDate(dateString: string): boolean {
|
|
if (typeof dateString !== 'string' || dateString.length < 24) {
|
|
return false;
|
|
}
|
|
|
|
const date = new Date(dateString);
|
|
|
|
return !isNaN(date.getTime()) && dateString === date.toISOString();
|
|
}
|
|
|
|
function mapName(field: string): { title: string; i18n: string } {
|
|
const fieldData = fieldName.find((item) => item.name === field);
|
|
if (fieldData) {
|
|
return { title: fieldData.title, i18n: fieldData.i18n };
|
|
}
|
|
return { title: '-', i18n: '-' };
|
|
}
|
|
|
|
async function groupEmployeeHistory(
|
|
historyList: EmployeeHistory[],
|
|
): Promise<NewEmployeeHistory[]> {
|
|
const grouped = historyList.reduce((acc, curr) => {
|
|
const updatedAt = new Date(curr.updatedAt);
|
|
const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;
|
|
|
|
const existingEntry = acc.find((entry) => entry.date === dateKey);
|
|
|
|
if (existingEntry) {
|
|
const existingData = existingEntry.data.find(
|
|
(data) => data.updatedAt.getTime() === updatedAt.getTime(),
|
|
);
|
|
|
|
if (existingData) {
|
|
existingData.history.push({
|
|
valueAfter: curr.valueAfter,
|
|
valueBefore: curr.valueBefore,
|
|
field: curr.field,
|
|
});
|
|
} else {
|
|
existingEntry.data.push({
|
|
masterId: curr.masterId,
|
|
updatedBy: curr.updatedBy,
|
|
updatedByUserId: curr.updatedByUserId,
|
|
updatedAt: updatedAt,
|
|
id: curr.id,
|
|
history: [
|
|
{
|
|
valueAfter: curr.valueAfter,
|
|
valueBefore: curr.valueBefore,
|
|
field: curr.field,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
} else {
|
|
acc.push({
|
|
date: dateKey,
|
|
data: [
|
|
{
|
|
masterId: curr.masterId,
|
|
updatedBy: curr.updatedBy,
|
|
updatedByUserId: curr.updatedByUserId,
|
|
updatedAt: updatedAt,
|
|
id: curr.id,
|
|
history: [
|
|
{
|
|
valueAfter: curr.valueAfter,
|
|
valueBefore: curr.valueBefore,
|
|
field: curr.field,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
return acc;
|
|
}, [] as NewEmployeeHistory[]);
|
|
|
|
return grouped;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const newList = await groupEmployeeHistory(historyList.value);
|
|
formatList.value = newList;
|
|
|
|
currentDate.value = formatList.value[currentIndex.value].date;
|
|
currentData.value = formatList.value[currentIndex.value].data;
|
|
});
|
|
|
|
watch(
|
|
() => currentDate.value,
|
|
(i) => {
|
|
const dateKey = formatDate(i);
|
|
isHistoryData.value = formatList.value.some(
|
|
(item) => item.date === dateKey,
|
|
);
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12">
|
|
<div
|
|
class="row full-width justify-center q-py-sm header-border"
|
|
style="background: hsla(var(--info-bg) / 0.1)"
|
|
>
|
|
<div class="surface-1 q-py-sm q-px-sm row items-center no-wrap">
|
|
<q-btn
|
|
flat
|
|
color="info"
|
|
padding="0"
|
|
icon="mdi-chevron-left"
|
|
@click="nextDate(true)"
|
|
/>
|
|
<VueDatePicker
|
|
:dark="$q.dark.isActive"
|
|
id="input-birth-date"
|
|
for="input-birth-date"
|
|
class="date-picker"
|
|
utc
|
|
autoApply
|
|
:teleport="true"
|
|
v-model="currentDate"
|
|
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
|
:enableTimePicker="false"
|
|
>
|
|
<template #year="{ value }">
|
|
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
|
</template>
|
|
<template #trigger>
|
|
<span class="text-weight-medium q-px-xl">
|
|
{{ dateFormat(currentDate) }}
|
|
</span>
|
|
</template>
|
|
</VueDatePicker>
|
|
<q-btn
|
|
flat
|
|
color="info"
|
|
padding="0"
|
|
icon="mdi-chevron-right"
|
|
@click="nextDate()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isHistoryData && currentData?.length > 0">
|
|
<q-table
|
|
flat
|
|
class="table-border"
|
|
table-header-class="surface-2"
|
|
:rows="currentData"
|
|
:columns="columns"
|
|
row-key="name"
|
|
>
|
|
<template v-slot:body="props">
|
|
<q-tr
|
|
:props="props"
|
|
:style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`"
|
|
>
|
|
<q-td key="updatedAt" :props="props">
|
|
{{ dateFormat(props.row.updatedAt, false, true, true) }}
|
|
</q-td>
|
|
|
|
<q-td key="updatedBy" :props="props">
|
|
<div class="row items-center no-wrap">
|
|
<q-avatar class="surface-tab">
|
|
<img
|
|
v-if="false"
|
|
src="https://cdn.quasar.dev/img/avatar.png"
|
|
/>
|
|
<q-icon v-else name="mdi-account"></q-icon>
|
|
</q-avatar>
|
|
<div class="column q-pl-md items-start">
|
|
<span class="text-weight-bold">
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? `${props.row.updatedBy.firstNameEN} ${props.row.updatedBy.lastNameEN}`
|
|
: `${props.row.updatedBy.firstName} ${props.row.updatedBy.lastName}` ??
|
|
'-'
|
|
}}
|
|
</span>
|
|
<!-- <span class="text-caption">นักบริหาร</span> -->
|
|
</div>
|
|
</div>
|
|
</q-td>
|
|
|
|
<q-td key="history" :props="props">
|
|
<q-stepper vertical flat>
|
|
<q-step
|
|
v-for="(item, index) in props.row.history"
|
|
:key="index"
|
|
:name="1"
|
|
:title="$t(mapName(item.field).title)"
|
|
:caption="$t(mapName(item.field).i18n)"
|
|
:icon="`mdi-numeric-${props.row.history.length - index}`"
|
|
></q-step>
|
|
</q-stepper>
|
|
</q-td>
|
|
|
|
<q-td key="valueBefore" :props="props">
|
|
<div
|
|
v-for="(i, index) in props.row.history"
|
|
:key="index"
|
|
class="q-py-md"
|
|
>
|
|
{{
|
|
isValidDate(i.valueBefore) === true
|
|
? dateFormat(i.valueBefore)
|
|
: optionStore.mapOption(i.valueBefore)
|
|
}}
|
|
</div>
|
|
</q-td>
|
|
|
|
<q-td key="valueAfter" :props="props">
|
|
<div
|
|
v-for="(i, index) in props.row.history"
|
|
:key="index"
|
|
class="q-py-md"
|
|
>
|
|
{{
|
|
isValidDate(i.valueAfter) === true
|
|
? dateFormat(i.valueAfter)
|
|
: optionStore.mapOption(i.valueAfter)
|
|
}}
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
|
|
<div v-else class="table-border flex items-center justify-center q-py-lg">
|
|
<NoData />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.header-border {
|
|
border: 1px solid var(--border-color);
|
|
border-top-left-radius: var(--radius-2);
|
|
border-top-right-radius: var(--radius-2);
|
|
}
|
|
|
|
.table-border {
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-left: 1px solid var(--border-color);
|
|
border-right: 1px solid var(--border-color);
|
|
|
|
border-top-left-radius: 0 !important;
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-left-radius: var(--radius-2);
|
|
border-bottom-right-radius: var(--radius-2);
|
|
}
|
|
|
|
:deep(.q-stepper.q-stepper--vertical.q-stepper--flat) {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
:deep(.q-stepper__caption) {
|
|
color: hsl(var(--text-mute-2)) !important;
|
|
}
|
|
|
|
:deep(.q-stepper__title) {
|
|
color: hsl(var(--info-bg)) !important;
|
|
}
|
|
|
|
:deep(i.q-icon.mdi) {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
:deep(.q-stepper__dot.row.flex-center.q-stepper__line.relative-position) {
|
|
color: hsl(var(--info-bg)) !important;
|
|
}
|
|
|
|
.date-picker {
|
|
cursor: pointer;
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
</style>
|