Refactor RGangguan_BerdasarMedia.vue and api.graphql.ts

This commit is contained in:
Dede Fuji Abdul
2024-03-28 13:15:33 +07:00
parent 0922277624
commit f478e63a19
3 changed files with 132 additions and 105 deletions

View File

@ -25,7 +25,7 @@
:allow-column-resizing="true"
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" />
<DxSelection mode="single" />
<!-- <DxPaging :page-size="40" :enabled="true" />
<DxPager
@ -495,13 +495,13 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -513,7 +513,7 @@
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer">
<p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -522,6 +522,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -537,6 +538,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -552,6 +554,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -1074,7 +1077,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
import { requestGraphQl, queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
@ -1096,6 +1099,8 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@ -1103,6 +1108,23 @@ const reportMeta = ref({
periode: ''
})
const setAgreementDialog = (column: string) => {
console.log('column', column)
if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
agreeToShowDialog.value = true
if (column == 'Total') {
progressSelected.value = 0
} else if (column == 'Selesai') {
progressSelected.value = 1
} else {
progressSelected.value = 2
}
} else {
agreeToShowDialog.value = false
}
}
const calculateCustomSummary = (options: any) => {
if (options.name == 'persenSelesai') {
console.log(options.component.persen_selesai)
@ -1150,7 +1172,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiAllGangguan
loadingData.value = false
}
reportMeta.value = filters.value
@ -1158,11 +1179,10 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
loadingData.value = false
})
watch(loading, (value) => {
// loadingData.value = value
loadingData.value = value
})
}
@ -1184,12 +1204,13 @@ const getDetail = async () => {
idRegu: selected?.id_regu ? selected?.id_regu : 0,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : ''
media: selected?.media ? selected?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
await getGangguanDetail(query)
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
.then((result) => {
// console.table(result.data.data.detailGangguan)
dataSub.value = result.data.data.detailGangguan
})
.catch((err) => {
@ -1199,28 +1220,25 @@ const getDetail = async () => {
loadingSubData.value = false
})
// const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
// fetchPolicy: 'network-only'
// })
// const { onResult, onError, refetch, loading } = useQuery(
// queries.gangguan.rekap.gangguanAllDetail,
// query,
// {
// fetchPolicy: 'network-only'
// }
// )
// result.onResult((queryResult) => {
// onResult((queryResult) => {
// if (queryResult.data != undefined) {
// dataSub.value = queryResult.data.detailGangguan
// console.table(queryResult.data.detailGangguan)
// }
// })
// watch(result, (value) => {
// if (dataSub.value != value.detailGangguan) {
// console.table(value.detailGangguan)
// }
// })
// result.onError((error) => {
// onError((error) => {
// console.log(error)
// })
// watch(result.loading, (value) => {
// watch(loading, (value) => {
// loadingSubData.value = value
// })
}
@ -1234,10 +1252,12 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {