fix: history updatedBy i18n

This commit is contained in:
puriphatt 2024-07-02 06:08:10 +00:00
parent 45aadfd7e6
commit 51f230bf93
2 changed files with 83 additions and 76 deletions

View file

@ -23,10 +23,10 @@ const columns: QTableColumn[] = [
headerStyle: 'font-weight: bold', headerStyle: 'font-weight: bold',
}, },
{ {
name: 'editBy', name: 'updatedBy',
align: 'center', align: 'center',
label: t('editBy'), label: t('editBy'),
field: 'editBy', field: 'updatedBy',
headerStyle: 'font-weight: bold', headerStyle: 'font-weight: bold',
}, },
@ -258,7 +258,6 @@ async function groupEmployeeHistory(
masterId: curr.masterId, masterId: curr.masterId,
updatedBy: curr.updatedBy, updatedBy: curr.updatedBy,
updatedByUserId: curr.updatedByUserId, updatedByUserId: curr.updatedByUserId,
timestamp: curr.timestamp,
updatedAt: updatedAt, updatedAt: updatedAt,
id: curr.id, id: curr.id,
history: [ history: [
@ -278,7 +277,6 @@ async function groupEmployeeHistory(
masterId: curr.masterId, masterId: curr.masterId,
updatedBy: curr.updatedBy, updatedBy: curr.updatedBy,
updatedByUserId: curr.updatedByUserId, updatedByUserId: curr.updatedByUserId,
timestamp: curr.timestamp,
updatedAt: updatedAt, updatedAt: updatedAt,
id: curr.id, id: curr.id,
history: [ history: [
@ -319,7 +317,7 @@ watch(
</script> </script>
<template> <template>
<div class="full-width"> <div class="col-12">
<div <div
class="row full-width justify-center q-py-sm header-border" class="row full-width justify-center q-py-sm header-border"
style="background: hsla(var(--info-bg) / 0.1)" style="background: hsla(var(--info-bg) / 0.1)"
@ -366,84 +364,92 @@ watch(
</div> </div>
</div> </div>
<q-table <div v-if="isHistoryData && currentData?.length > 0">
v-if="isHistoryData && currentData?.length > 0" <q-table
flat flat
class="table-border" class="table-border"
table-header-class="surface-2" table-header-class="surface-2"
:rows="currentData" :rows="currentData"
:columns="columns" :columns="columns"
row-key="name" row-key="name"
> >
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr <q-tr
:props="props" :props="props"
:style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`" :style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`"
> >
<q-td key="updatedAt" :props="props"> <q-td key="updatedAt" :props="props">
{{ dateFormat(props.row.updatedAt, false, true, true) }} {{ dateFormat(props.row.updatedAt, false, true, true) }}
</q-td> </q-td>
<q-td key="editBy" :props="props"> <q-td key="updatedBy" :props="props">
<div class="row items-center no-wrap"> <div class="row items-center no-wrap">
<q-avatar class="surface-tab"> <q-avatar class="surface-tab">
<img v-if="false" src="https://cdn.quasar.dev/img/avatar.png" /> <img
<q-icon v-else name="mdi-account"></q-icon> v-if="false"
</q-avatar> src="https://cdn.quasar.dev/img/avatar.png"
<div class="column q-pl-md items-start"> />
<span class="text-weight-bold"> <q-icon v-else name="mdi-account"></q-icon>
{{ props.row.editBy ?? '-' }} </q-avatar>
</span> <div class="column q-pl-md items-start">
<!-- <span class="text-caption">กบรหาร</span> --> <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> </div>
</div> </q-td>
</q-td>
<q-td key="history" :props="props"> <q-td key="history" :props="props">
<q-stepper vertical flat> <q-stepper vertical flat>
<q-step <q-step
v-for="(item, index) in props.row.history" 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" :key="index"
:name="1" class="q-py-md"
:title="$t(mapName(item.field).title)"
:caption="$t(mapName(item.field).i18n)"
:icon="`mdi-numeric-${props.row.history.length - index}`"
> >
asd {{
</q-step> isValidDate(i.valueBefore) === true
</q-stepper> ? dateFormat(i.valueBefore)
</q-td> : optionStore.mapOption(i.valueBefore)
}}
</div>
</q-td>
<q-td key="valueBefore" :props="props"> <q-td key="valueAfter" :props="props">
<div <div
v-for="(i, index) in props.row.history" v-for="(i, index) in props.row.history"
:key="index" :key="index"
class="q-py-md" class="q-py-md"
> >
{{ {{
isValidDate(i.valueBefore) === true isValidDate(i.valueAfter) === true
? dateFormat(i.valueBefore) ? dateFormat(i.valueAfter)
: optionStore.mapOption(i.valueBefore) : optionStore.mapOption(i.valueAfter)
}} }}
</div> </div>
</q-td> </q-td>
</q-tr>
</template>
</q-table>
</div>
<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 v-else class="table-border flex items-center justify-center q-py-lg"> <div v-else class="table-border flex items-center justify-center q-py-lg">
<NoData /> <NoData />
</div> </div>

View file

@ -179,5 +179,6 @@ export default {
formDialogEmployerRanchCode: 'Branch Code', formDialogEmployerRanchCode: 'Branch Code',
formTitleCustomer: 'Company {msg}', formTitleCustomer: 'Company {msg}',
formTitleCustomerNaturalPerson: 'Name {msg}',
formTitleBranch: 'Branch {msg}', formTitleBranch: 'Branch {msg}',
}; };