Refactor table column rendering and add resetData function

This commit is contained in:
Dede Fuji Abdul
2024-03-30 22:40:33 +07:00
parent 9c3e18b9a2
commit 7477c11bb6
5 changed files with 256 additions and 39 deletions

View File

@ -64,7 +64,7 @@
caption="Nama UID"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
v-if="isGroupBy"
/>
<DxColumn
:width="170"
@ -81,7 +81,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -91,7 +91,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -111,7 +111,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -246,13 +246,49 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -264,7 +300,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -659,6 +695,14 @@ const reportMeta = ref({
periode: '',
groupBy: false
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const isGroupBy = ref(false)
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value?.periode.split(' s/d ')
@ -678,7 +722,7 @@ const getDetail = async () => {
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : '',
isSelesai: 0,
isSelesai: progressSelected.value,
tanggal: ''
}
@ -708,8 +752,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -752,7 +798,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
@ -771,6 +823,7 @@ const filterData = async (params: any) => {
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
.then((result) => {
isGroupBy.value = params.groupBy
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanPerTanggal
} else {