Refactor RKeluhan_ALL.vue and RGangguan_CTTM.vue to improve code readability and remove unused variables

This commit is contained in:
Dede Fuji Abdul 2024-04-17 00:18:12 +07:00
parent 018032afda
commit 604d735f18
5 changed files with 205 additions and 135 deletions

View File

@ -11,7 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
@cell-click="" @cell-click="onCellClicked"
ref="dataGridRef" ref="dataGridRef"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
@ -74,8 +74,7 @@
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
> />
</DxColumn>
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
@ -1227,38 +1226,8 @@ const onCellClicked = (e: any) => {
groupIndex.value = e.row.groupIndex groupIndex.value = e.row.groupIndex
setAgreementDialog(e.column.caption) setAgreementDialog(e.column.caption)
const data = getDataRowGroup(e.data) groupData.value = getDataRowGroup(e.data)
console.table(data)
groupData.value = data
showDetail() showDetail()
// if (e.row.groupIndex == 0) {
// //
// } else if (e.row.groupIndex == 1) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0].items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 2) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 3) {
// if (e.row.isExpanded) {
// const data = e.data.items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0]
// groupData.value = data
// }
// }
// showDetail()
} else { } else {
groupDialog.value = false groupDialog.value = false
} }
@ -1360,7 +1329,11 @@ const calculateCustomSummary = (options: any) => {
count_durasi_dispatch = 0 count_durasi_dispatch = 0
total_durasi_dispatch = 0 total_durasi_dispatch = 0
} else if (options.summaryProcess === 'finalize') { } else if (options.summaryProcess === 'finalize') {
options.totalValue = total_durasi_dispatch / count_durasi_dispatch options.totalValue = !isFinite(total_durasi_dispatch / count_durasi_dispatch)
? 0
: total_durasi_dispatch == 0
? 0
: total_durasi_dispatch / count_durasi_dispatch
} }
} }
@ -1539,39 +1512,19 @@ const getDetail = async () => {
tanggal: '' tanggal: ''
} }
if (groupDialog.value) { if (groupDialog.value) {
// if (groupColumnCaption.value != 'Semua Unit') { console.log('groupData', grouping.value[groupIndex.value].data)
// if (groupColumnCaption.value == 'Regional') { if (grouping.value[groupIndex.value].data == 'nama_regional') {
// query = {
// ...query,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// } else if (groupColumnCaption.value == 'UID') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// } else if (groupColumnCaption.value == 'UP3') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// }
// }
if (groupIndex.value == 1) {
query = { query = {
...query, ...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
} }
} else if (groupIndex.value == 2) { } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
query = { query = {
...query, ...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
} }
} else if (groupIndex.value == 3) { } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
query = { query = {
...query, ...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,

View File

@ -11,6 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
@cell-click="onCellClicked"
ref="dataGridRef" ref="dataGridRef"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
@ -26,7 +27,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping :auto-expand-all="false" expand-mode="rowClick" /> <DxGrouping :auto-expand-all="false" expand-mode="" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -461,6 +462,7 @@ import {
exportDetailToDOCX exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_CTTM' } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue' import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -478,6 +480,9 @@ const loadingData = ref(false)
const loadingSubData = ref(false) const loadingSubData = ref(false)
const monthSelected = ref<any>(null) const monthSelected = ref<any>(null)
const agreeToShowDialog = ref(false) const agreeToShowDialog = ref(false)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({ const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@ -503,9 +508,22 @@ const grouping = ref<any[]>([
} }
]) ])
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
setMonth(e.column.caption)
groupData.value = getDataRowGroup(e.data)
showDetail()
} else {
groupDialog.value = false
}
}
const setMonth = (month: any) => { const setMonth = (month: any) => {
if (month != '') { if (month != '') {
monthSelected.value = getMonthNumber(month) monthSelected.value = getMonthNumber(month) == 0 ? null : getMonthNumber(month)
} else { } else {
monthSelected.value = null monthSelected.value = null
} }
@ -606,12 +624,42 @@ const getDetail = async () => {
const selected = dataSelected.value const selected = dataSelected.value
const compDate = dateValue[0].split('-').reverse().join('-').split('-') const compDate = dateValue[0].split('-').reverse().join('-').split('-')
const query = { var query = {
bulan: monthSelected.value, bulan: monthSelected.value,
tahun: parseInt(compDate[0]), tahun: parseInt(compDate[0]),
posko: selected?.id_ulp ? selected?.id_ulp : 0, posko: 0,
idUid: selected?.id_uid ? selected?.id_uid : 0, idUid: 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0 idUp3: 0,
namaRegional: ''
}
if (groupDialog.value) {
if (grouping.value[groupIndex.value].data == 'nama_regional') {
query = {
...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_uid') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_up3') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
}
} else {
query = {
...query,
posko: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
}
} }
loadingSubData.value = true loadingSubData.value = true

View File

@ -11,7 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
@cell-click="" @cell-click="onCellClicked"
ref="dataGridRef" ref="dataGridRef"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
@ -26,7 +26,7 @@
:allow-column-resizing="true" :allow-column-resizing="true"
column-resizing-mode="widget" column-resizing-mode="widget"
> >
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" /> <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -1106,6 +1106,7 @@ import {
} from '@/report/Gangguan/Rekap/RGangguan_KTI' } from '@/report/Gangguan/Rekap/RGangguan_KTI'
import { getMonthNumber } from '@/utils/texts' import { getMonthNumber } from '@/utils/texts'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue' import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1147,28 +1148,24 @@ const grouping = ref<any[]>([
]) ])
const groupDialog = ref(false) const groupDialog = ref(false)
const groupData = ref<any>(null) const groupData = ref<any>(null)
const groupIndex = ref(0)
const onCellClicked = (e: any) => { const onCellClicked = (e: any) => {
// if (e.rowType == 'group') { if (e.rowType == 'group') {
// groupDialog.value = true groupDialog.value = true
// if (e.row.groupIndex != 0) { groupIndex.value = e.row.groupIndex
// const data = getDataRowGroup(e.data)
// console.table(data) setMonth(e.column.caption)
// groupData.value = data groupData.value = getDataRowGroup(e.data)
// } showDetail()
// showDetail() } else {
// } else { groupDialog.value = false
// groupDialog.value = false }
// }
} }
const setMonth = (month: any) => { const setMonth = (month: any) => {
if (month != '') { if (month != '') {
if (getMonthNumber(month) == 0) { monthSelected.value = getMonthNumber(month) == 0 ? null : getMonthNumber(month)
monthSelected.value = null
} else {
monthSelected.value = getMonthNumber(month)
}
} else { } else {
monthSelected.value = null monthSelected.value = null
} }
@ -1181,16 +1178,17 @@ const getDetail = async () => {
const ref = dataSelected.value const ref = dataSelected.value
const compDate = dateValue[0].split('-').reverse().join('-').split('-') const compDate = dateValue[0].split('-').reverse().join('-').split('-')
const query = { var query = {
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
posko: ref?.id_ulp ? ref?.id_ulp : 0, posko: 0,
idUid: ref?.id_uid ? ref?.id_uid : 0, idUid: 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0, idUp3: 0,
namaRegional: '',
bulan: monthSelected.value, bulan: monthSelected.value,
tahun: parseInt(compDate[0]), tahun: parseInt(compDate[0]),
is_transaksi_individual: is_transaksi_individual:
@ -1219,6 +1217,35 @@ const getDetail = async () => {
: 2 : 2
} }
if (groupDialog.value) {
if (grouping.value[groupIndex.value].data == 'nama_regional') {
query = {
...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_uid') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_up3') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
}
} else {
query = {
...query,
posko: ref?.id_ulp ? ref?.id_ulp : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0
}
}
loadingSubData.value = true loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail, query) await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail, query)
.then((result) => { .then((result) => {

View File

@ -1004,44 +1004,13 @@ const calculateCustomSummary = (options: any) => {
} }
const onCellClicked = (e: any) => { const onCellClicked = (e: any) => {
console.log('cell clicked', e)
if (e.rowType == 'group') { if (e.rowType == 'group') {
groupDialog.value = true groupDialog.value = true
groupIndex.value = e.row.groupIndex groupIndex.value = e.row.groupIndex
setAgreementDialog(e.column.caption) setAgreementDialog(e.column.caption)
const data = getDataRowGroup(e.data) groupData.value = getDataRowGroup(e.data)
console.table(data)
groupData.value = data
showDetail() showDetail()
// if (e.row.groupIndex == 0) {
// //
// } else if (e.row.groupIndex == 1) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0].items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 2) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 3) {
// if (e.row.isExpanded) {
// const data = e.data.items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0]
// groupData.value = data
// }
// }
// showDetail()
} else { } else {
groupDialog.value = false groupDialog.value = false
} }
@ -1178,23 +1147,18 @@ const getDetail = async () => {
} }
if (groupDialog.value) { if (groupDialog.value) {
if (groupIndex.value == 0) { if (grouping.value[groupIndex.value].data == 'nama_regional') {
query = {
...query,
isSelesai: progressSelected.value
}
} else if (groupIndex.value == 1) {
query = { query = {
...query, ...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
} }
} else if (groupIndex.value == 2) { } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
query = { query = {
...query, ...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
} }
} else if (groupIndex.value == 3) { } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
query = { query = {
...query, ...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0, idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,

View File

@ -11,6 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
@cell-click="onCellClicked"
ref="dataGridRef" ref="dataGridRef"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
@ -27,7 +28,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" /> <DxGrouping expand-mode="" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -674,7 +675,7 @@
@click=" @click="
setParameterRequest({ setParameterRequest({
type: 'keluhan', type: 'keluhan',
tahun: lastYear, tahun: currentYear,
bulan: currentMonth bulan: currentMonth
}) })
" "
@ -695,7 +696,7 @@
@click=" @click="
setParameterRequest({ setParameterRequest({
type: 'gangguan', type: 'gangguan',
tahun: lastYear, tahun: currentYear,
bulan: currentMonth bulan: currentMonth
}) })
" "
@ -1172,6 +1173,7 @@ import {
exportToDOCX exportToDOCX
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain' } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1192,6 +1194,9 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false) const loadingData = ref(false)
const loadingSubData = ref(false) const loadingSubData = ref(false)
const agreeToShowDialog = ref(false) const agreeToShowDialog = ref(false)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({ const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' }, regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -1224,6 +1229,49 @@ const parameterRequest = ref<any>({
bulan: new Date().getMonth() bulan: new Date().getMonth()
}) })
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
console.table(e.column.dataField)
if (e.column.dataField == 'total_gangguan_tahun_ini') {
setParameterRequest({
type: 'gangguan',
tahun: currentYear,
bulan: currentMonth
})
} else if (e.column.dataField == 'total_keluhan_tahun_ini') {
setParameterRequest({
type: 'keluhan',
tahun: currentYear,
bulan: currentMonth
})
} else if (e.column.dataField == 'total_gangguan_tahun_sebelumnya') {
setParameterRequest({
type: 'gangguan',
tahun: lastYear,
bulan: currentMonth
})
} else if (e.column.dataField == 'total_keluhan_tahun_sebelumnya') {
setParameterRequest({
type: 'keluhan',
tahun: lastYear,
bulan: currentMonth
})
} else {
setParameterRequest({
type: null,
tahun: lastYear,
bulan: currentMonth
})
}
groupData.value = getDataRowGroup(e.data)
showDetail()
} else {
groupDialog.value = false
}
}
const setParameterRequest = (data: any) => { const setParameterRequest = (data: any) => {
parameterRequest.value = data parameterRequest.value = data
const parameter = parameterRequest.value const parameter = parameterRequest.value
@ -1257,13 +1305,43 @@ const onExportingDetail = (e: any) => {
const getDetail = async () => { const getDetail = async () => {
const selected = dataSelected.value const selected = dataSelected.value
const query = { var query = {
bulan: parameterRequest.value.bulan, bulan: parameterRequest.value.bulan,
tahun: parameterRequest.value.tahun, tahun: parameterRequest.value.tahun,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '', namaRegional: '',
idUlp: selected?.id_ulp ? selected?.id_ulp : 0, idUlp: 0,
idUid: selected?.id_uid ? selected?.id_uid : 0, idUid: 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0 idUp3: 0
}
if (groupDialog.value) {
if (grouping.value[groupIndex.value].data == 'nama_regional') {
query = {
...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_uid') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (grouping.value[groupIndex.value].data == 'nama_up3') {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
}
} else {
query = {
...query,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
}
} }
loadingSubData.value = true loadingSubData.value = true