Refactor code to update version numbers and fix bugs in Gangguan and Monalisa components

This commit is contained in:
Dede Fuji Abdul
2024-04-19 19:34:54 +07:00
parent 3a891bf159
commit ee034bacf9
28 changed files with 570 additions and 205 deletions

View File

@ -12,6 +12,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
@cell-click="onCellClicked"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -27,7 +28,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxGrouping expand-mode="" :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -1013,6 +1014,7 @@ import {
exportToDOCX,
exportDetailToDOCX
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient()
provideApolloClient(client)
@ -1035,9 +1037,13 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const isDialogEnabled = ref(false)
const dataType = ref('')
const dataYear = ref(new Date().getFullYear())
const dataMonth = ref(new Date().getMonth())
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -1068,6 +1074,38 @@ const grouping = ref<any[]>([
}
])
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
setDialogStatus(e.column.caption)
groupData.value = getDataRowGroup(e.data)
showDetail()
} else {
groupDialog.value = false
}
}
const setDialogStatus = (column: string) => {
if (column == `${getMonthName(lastMonth.value)} ${lastYearMoM.value}`) {
isDialogEnabled.value = true
setRequirements('mom', lastMonth.value, lastYearMoM.value)
} else if (column == `${getMonthName(currentMonth.value)} ${currentYear.value}`) {
isDialogEnabled.value = true
setRequirements('mom', currentMonth.value, currentYear.value)
} else if (column == `s.d ${getMonthName(currentMonth.value)} ${lastYear.value}`) {
isDialogEnabled.value = true
setRequirements('yoy', currentMonth.value, lastYear.value)
} else if (column == `s.d ${getMonthName(currentMonth.value)} ${currentYear.value}`) {
isDialogEnabled.value = true
setRequirements('yoy', currentMonth.value, currentYear.value)
} else {
isDialogEnabled.value = false
setRequirements('', 0, 0)
}
}
let mom_bulan_kemarin = 0
let count_mom_bulan_kemarin = 0
let cal_mom_bulan_kemarin = 0
@ -1217,6 +1255,12 @@ const setRequirements = (type: string, month: number, year: number) => {
dataType.value = type
dataYear.value = year
dataMonth.value = month
if (dataType.value == 'yoy' || dataType.value == 'mom') {
isDialogEnabled.value = true
} else {
isDialogEnabled.value = false
}
}
const onExporting = (e: any) => {
@ -1336,12 +1380,44 @@ const filterData = async (params: any) => {
const getDetail = async () => {
const selected = dataSelected.value
const query = {
var query = {
bulan: dataMonth.value,
tahun: dataYear.value,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
idUlp: 0,
idUid: 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 = {
bulan: dataMonth.value,
tahun: dataYear.value,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
}
}
loadingSubData.value = true
@ -1380,7 +1456,9 @@ const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (dataType.value == 'yoy' || dataType.value == 'mom') {
getDetail()
if (isDialogEnabled.value) {
getDetail()
}
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -11,6 +11,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
@cell-click="onCellClicked"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -26,7 +27,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" expand-mode="" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -65,7 +66,7 @@
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberGangguan"
/>
<DxColumn
:width="150"
@ -74,7 +75,7 @@
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberInformasi"
/>
<DxColumn
:width="150"
@ -87,7 +88,55 @@
/>
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p
class="text-right"
@click="
setParameterRequest({
type: '',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberGangguan="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'Gangguan',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberInformasi="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'Informasi',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
@ -99,7 +148,15 @@
</template>
<template #formatText="{ data }">
<p class="!text-left cursor-pointer">
<p
class="!text-left"
@click="
setParameterRequest({
type: '',
value: data.text
})
"
>
{{ data.text }}
</p>
</template>
@ -521,6 +578,7 @@ import {
exportToDOCX,
exportDetailToDOCX
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient()
provideApolloClient(client)
@ -539,6 +597,10 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const isDialogEnabled = ref(false)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -548,6 +610,10 @@ const reportMeta = ref({
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
periode: ''
})
const parameterRequest = ref<any>({
type: '',
value: 0
})
const grouping = ref<any[]>([
{
@ -564,6 +630,46 @@ const grouping = ref<any[]>([
}
])
const setParameterRequest = (data: any) => {
parameterRequest.value = data
const parameter = parameterRequest.value
if (parameter.type == 'Gangguan' || parameter.type == 'Informasi') {
if (parameter.value != 0) {
isDialogEnabled.value = true
} else {
isDialogEnabled.value = false
}
} else {
isDialogEnabled.value = false
}
}
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
if (e.column.caption == 'Gangguan' || e.column.caption == 'Informasi') {
console.log(e.data)
console.log('columnIndex', e)
console.log('columnValue', e.data.aggregates[e.column.columnIndex])
if (e.data.aggregates[e.column.columnIndex] != 0) {
setParameterRequest({
type:
e.column.caption == 'Gangguan' || e.column.caption == 'Informasi'
? e.column.caption
: '',
value: e.data.aggregates[e.column.columnIndex]
})
groupData.value = getDataRowGroup(e.data)
showDetail()
}
}
} else {
groupDialog.value = false
}
}
const closeDialog = () => {
dialogDetail.value = false
}
@ -681,13 +787,44 @@ const getDetail = async () => {
const { bulan, tahun } = filters.value
const query = {
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
var query = {
bulan: bulan.id,
tahun: tahun.id,
namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
idUlp: 0,
idUid: 0,
idUp3: 0,
namaRegional: '',
type: parameterRequest.value.type
}
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,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
}
}
loadingSubData.value = true
@ -716,7 +853,9 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
getDetail()
if (isDialogEnabled.value) {
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -12,6 +12,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
@cell-click="onCellClicked"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -66,7 +67,7 @@
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberKeluhan"
/>
<DxColumn
:width="150"
@ -75,7 +76,7 @@
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberInformasi"
/>
<DxColumn
:width="150"
@ -150,7 +151,55 @@
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p
class="text-right"
@click="
setParameterRequest({
type: '',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberKeluhan="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'Keluhan',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberInformasi="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'Informasi',
value: data.text
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
@ -162,16 +211,18 @@
</template>
<template #formatText="{ data }">
<p class="!text-left cursor-pointer">
<p
class="!text-left"
@click="
setParameterRequest({
type: '',
value: data.text
})
"
>
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
</DxDataGrid>
</div>
@ -529,6 +580,7 @@ import {
exportToDOCX,
exportDetailToDOCX
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
import { getDataRowGroup } from '@/utils/helper'
const client = apolloClient()
provideApolloClient(client)
@ -548,6 +600,10 @@ const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1)
const filters = ref()
const isDialogEnabled = ref(false)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -557,6 +613,10 @@ const reportMeta = ref({
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
periode: ''
})
const parameterRequest = ref<any>({
type: '',
value: 0
})
const grouping = ref<any[]>([
{
@ -573,6 +633,46 @@ const grouping = ref<any[]>([
}
])
const setParameterRequest = (data: any) => {
parameterRequest.value = data
const parameter = parameterRequest.value
if (parameter.type == 'Keluhan' || parameter.type == 'Informasi') {
if (parameter.value != 0) {
isDialogEnabled.value = true
} else {
isDialogEnabled.value = false
}
} else {
isDialogEnabled.value = false
}
}
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
if (e.column.caption == 'Keluhan' || e.column.caption == 'Informasi') {
console.log(e.data)
console.log('columnIndex', e)
console.log('columnValue', e.data.aggregates[e.column.columnIndex])
if (e.data.aggregates[e.column.columnIndex] != 0) {
setParameterRequest({
type:
e.column.caption == 'Keluhan' || e.column.caption == 'Informasi'
? e.column.caption
: '',
value: e.data.aggregates[e.column.columnIndex]
})
groupData.value = getDataRowGroup(e.data)
showDetail()
}
}
} else {
groupDialog.value = false
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
@ -596,13 +696,44 @@ const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
var query = {
bulan: currentMonth.value,
tahun: currentYear.value
tahun: currentYear.value,
idUlp: 0,
idUid: 0,
idUp3: 0,
namaRegional: '',
type: parameterRequest.value.type
}
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,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
}
}
loadingSubData.value = true
@ -631,7 +762,9 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
getDetail()
if (isDialogEnabled.value) {
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -736,7 +736,7 @@ const loadingSubData = ref(false)
const groupIndex = ref(0)
const groupData = ref<any>(null)
const groupDialog = ref(false)
const agreeToShowDialog = ref(false)
const isDialogEnabled = ref(false)
const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -805,9 +805,9 @@ const setParameterRequest = (data: any) => {
parameterRequest.value = data
const parameter = parameterRequest.value
if (parameter.type != null) {
agreeToShowDialog.value = true
isDialogEnabled.value = true
} else {
agreeToShowDialog.value = false
isDialogEnabled.value = false
}
}
@ -908,7 +908,7 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (agreeToShowDialog.value) {
if (isDialogEnabled.value) {
getDetail()
}
}

View File

@ -1194,7 +1194,7 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const isDialogEnabled = ref(false)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
@ -1277,9 +1277,9 @@ const setParameterRequest = (data: any) => {
parameterRequest.value = data
const parameter = parameterRequest.value
if (parameter.type != null) {
agreeToShowDialog.value = true
isDialogEnabled.value = true
} else {
agreeToShowDialog.value = false
isDialogEnabled.value = false
}
}
@ -1380,7 +1380,7 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (agreeToShowDialog.value) {
if (isDialogEnabled.value) {
getDetail()
}
}