defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor table column rendering and add resetData function

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
View File

@ -91,7 +91,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
@ -101,7 +101,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -121,7 +121,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -256,13 +256,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 == '%'
@ -274,7 +310,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>
@ -815,6 +851,13 @@ const reportMeta = ref({
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const closeDialog = () => {
dialogDetail.value = false
@ -838,7 +881,13 @@ const onExportingDetail = (e: 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
@ -888,7 +937,8 @@ const getDetail = async () => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idEquipment: ref?.kode ? parseInt(ref.kode) : 0
idEquipment: ref?.kode ? parseInt(ref.kode) : 0,
isSelesai: progressSelected.value
}
loadingSubData.value = true
@ -918,9 +968,11 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {

65
src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
View File

@ -85,7 +85,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
@ -95,7 +95,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -115,7 +115,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -488,13 +488,49 @@
</DxSummary>
<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 == '%'
@ -506,7 +542,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>
@ -898,6 +934,13 @@ const reportMeta = ref({
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
@ -917,7 +960,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: ''
}
@ -947,9 +990,11 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -986,7 +1031,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

69
src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
View File

@ -63,7 +63,7 @@
caption="UID"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
v-if="isGroupBy"
/>
<DxColumn
:width="150"
@ -89,7 +89,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
@ -99,7 +99,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -119,7 +119,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -498,13 +498,13 @@
</template>
<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 == '%'
@ -515,7 +515,43 @@
</p>
</template>
<template #formatTime="{ data }">
<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 == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatTime="{ data }" @click="setAgreementDialog(false, 0)">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -908,6 +944,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 ')
@ -927,7 +971,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: ''
}
@ -957,9 +1001,11 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -1001,7 +1047,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
@ -1020,6 +1072,7 @@ const filterData = async (params: any) => {
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
.then((result) => {
isGroupBy.value = params.groupBy
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanPerRegu
} else {

69
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
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,9 +752,11 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -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 {

10
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -64,7 +64,7 @@
css-class="custom-table-column"
:group-index="0"
name="NamaUID"
v-if="filters.groupBy"
v-if="isGroupBy"
/>
<DxColumn
:width="120"
@ -830,13 +830,20 @@ const loadingData = ref(false)
const loadingSubData = ref(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 resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
@ -856,6 +863,7 @@ const filterData = async (params: any) => {
await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
.then((result) => {
if (result.data.data != undefined) {
isGroupBy.value = params.groupBy
if (filters.value.groupBy) {
data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
.sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))