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

Merge branch 'dev-defuj' of https://github.com/defuj/eis into dev-eko

Browse Source
This commit is contained in:
Eko Haryadi
2024-04-02 11:58:44 +07:00
parent 8225b05a53 96f0593a74
commit 2ad3bc4770
81 changed files with 1043 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/css/style.css
View File

@ -2252,10 +2252,6 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-scroll { .overflow-y-scroll {
overflow-y: scroll; overflow-y: scroll;
} }
@ -5549,6 +5545,10 @@ body {
grid-column-start: 2; grid-column-start: 2;
} }
.sm\:m-8 {
margin: 2rem;
}
.sm\:mx-0 { .sm\:mx-0 {
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
@ -5926,6 +5926,15 @@ body {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:m-8 {
margin: 2rem;
}
.md\:my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.md\:ml-6 { .md\:ml-6 {
margin-left: 1.5rem; margin-left: 1.5rem;
} }

22
src/components/DatePicker.vue
View File

@ -3,7 +3,9 @@ import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker' import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('') const dateValue = ref(
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
)
const formatter = ref({ const formatter = ref({
date: 'DD-MM-YYYY', date: 'DD-MM-YYYY',
month: 'MMMM' month: 'MMMM'
@ -36,12 +38,22 @@ watch(dateValue, (newValue) => {
<template> <template>
<div class="flex"> <div class="flex">
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts" <vue-tailwind-datepicker
:auto-apply="true" as-single use-range v-slot="{ value, placeholder }"> v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="customShortcuts"
:auto-apply="true"
as-single
use-range
v-slot="{ value, placeholder }"
>
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<button type="button" <button
class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"> type="button"
class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
>
<span class="text-gray-900"> <span class="text-gray-900">
{{ value || placeholder }} {{ value || placeholder }}
</span> </span>

159
src/components/Dialogs/DetailDialog.vue
View File

@ -1,81 +1,102 @@
<script setup lang="ts"> <script setup lang="ts">
import { import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
Dialog,
DialogPanel,
DialogTitle,
TransitionChild,
TransitionRoot
} from '@headlessui/vue';
defineProps({ defineProps({
open: { open: {
type: Boolean, type: Boolean,
required: true, required: true
}, },
title: { title: {
type: String, type: String,
required: true, required: true
}, },
fullWidth: { fullWidth: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
}) })
const emit = defineEmits(['onClose']) const emit = defineEmits(['onClose'])
const handleOnClose = () => { const handleOnClose = () => {
emit('onClose') emit('onClose')
} }
</script> </script>
<template> <template>
<TransitionRoot as="template" :show="open"> <TransitionRoot as="template" :show="open">
<Dialog as="div" class="relative z-20" @close="handleOnClose"> <Dialog as="div" class="relative z-20" @close="handleOnClose">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" <TransitionChild
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0"> as="template"
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" /> enter="ease-out duration-300"
</TransitionChild> enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-10 overflow-y-auto"> <div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0"> <div
<TransitionChild as="template" enter="ease-out duration-300" class="flex justify-center min-h-full p-4 text-center sm:p-0"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" :class="[fullWidth ? 'items-start' : 'items-center']"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" >
leave-from="opacity-100 translate-y-0 sm:scale-100" <TransitionChild
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> as="template"
<DialogPanel enter="ease-out duration-300"
:class="[fullWidth ? 'sm:max-w-full' : 'sm:max-w-lg sm:my-8', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:w-full']"> enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
<!-- Body Section --> enter-to="opacity-100 translate-y-0 sm:scale-100"
<div class="px-4 py-4 bg-gray-50"> leave="ease-in duration-200"
<div class="items-start"> leave-from="opacity-100 translate-y-0 sm:scale-100"
<div class="flex items-start justify-between w-full"> leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
<DialogTitle as="h3" >
class="flex-1 text-2xl font-semibold leading-6 text-gray-900"> <DialogPanel
{{ title }} :class="[
</DialogTitle> fullWidth ? 'sm:max-w-full md:m-8' : 'sm:max-w-lg md:my-8',
<div class="flex items-center ml-3 h-7"> 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:w-full'
<button type="button" ]"
class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0" >
@click="handleOnClose"> <!-- Body Section -->
<span class="sr-only">Close panel</span> <div class="px-4 py-4 bg-gray-50">
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" <div class="items-start">
xmlns="http://www.w3.org/2000/svg"> <div class="flex items-start justify-between w-full">
<path <DialogTitle
d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z" as="h3"
fill="#343330" /> class="flex-1 text-2xl font-semibold leading-6 text-gray-900"
</svg> >
{{ title }}
</DialogTitle>
<div class="flex items-center ml-3 h-7">
<button
type="button"
class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0"
@click="handleOnClose"
>
<span class="sr-only">Close panel</span>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z"
fill="#343330"
/>
</svg>
</button>
</div>
</div>
</button> <div class="w-full mt-6">
</div> <slot></slot>
</div> </div>
<div class="w-full mt-6">
<slot></slot>
</div>
</div>
</div>
</DialogPanel>
</TransitionChild>
</div> </div>
</div> </div>
</Dialog> </DialogPanel>
</TransitionRoot> </TransitionChild>
</template> </div>
</div>
</Dialog>
</TransitionRoot>
</template>

12
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
View File

@ -23,15 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -566,6 +558,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
emit('update:loadingSubData', loadingSubData.value) emit('update:loadingSubData', loadingSubData.value)
}) })
} }
@ -581,7 +574,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

22
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
View File

@ -23,15 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -558,15 +550,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -1160,6 +1144,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1177,7 +1162,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

7
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
View File

@ -71,12 +71,11 @@ const filterData = async (params: any) => {
.then((result) => { .then((result) => {
if (result.data.data != undefined) { if (result.data.data != undefined) {
if (jenisLaporan.name == 'Laporan Berulang Unit') { if (jenisLaporan.name == 'Laporan Berulang Unit') {
data.value = result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
} else if (jenisLaporan.name == 'Laporan Rating Negatif') { } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
data.value = data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
} else { } else {
data.value = result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
} }
} else { } else {
data.value = [] data.value = []

10
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
View File

@ -22,15 +22,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"

227
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
View File

@ -23,14 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -407,15 +400,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -467,7 +452,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="no_laporan_referensi" data-field="referensi_marking"
caption="No Laporan Referensi" caption="No Laporan Referensi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -476,7 +461,7 @@
:width="150" :width="150"
alignment="center" alignment="center"
data-field="waktu_lapor" data-field="waktu_lapor"
caption="Tgl/Jam Lapor" caption="Tgl Lapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
@ -484,7 +469,7 @@
:width="150" :width="150"
alignment="center" alignment="center"
data-field="waktu_response" data-field="waktu_response"
caption="Tgl/Jam Datang" caption="Dalam Proses Bidang"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
@ -492,7 +477,7 @@
:width="150" :width="150"
alignment="center" alignment="center"
data-field="waktu_recovery" data-field="waktu_recovery"
caption="Tgl/Jam Nyala" caption="Selesai Bidang Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
@ -515,35 +500,11 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="durasi_dispatch_time" data-field="status_akhir"
caption="Durasi Penugasan Regu" caption="Status"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatTime" cell-template="formatTime"
/> />
<DxColumn
:width="150"
alignment="center"
data-field="durasi_perjalanan"
caption="Durasi Perjalanan Regu"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="distance"
caption="Jarak Closing"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="dispatch_by"
caption="Dispacth Oleh"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
@ -587,72 +548,16 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="media" data-field="uraian"
caption="Sumber Lapor" caption="Uraian"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="diselesaikan_oleh" data-field="respon_pelanggan"
caption="Diselesaikan Oleh" caption="Response Pelanggan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_induk"
caption="Status Induk"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking_induk"
caption="Referensi Marking Induk"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kode_gangguan"
caption="Kode Gangguan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jenis_gangguan"
caption="Jenis Gangguan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tindaan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
@ -689,6 +594,11 @@
<InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
@ -698,18 +608,18 @@
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
<InputText <InputText
:readonly="true" :readonly="true"
:value="dataSubSelected?.no_laporan_referensi" :value="dataSubSelected?.referensi_marking"
class-name="flex-1" class-name="flex-1"
/> />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText <InputText
:readonly="true" :readonly="true"
:value="dataSubSelected?.waktu_response" :value="dataSubSelected?.waktu_response"
@ -718,7 +628,7 @@
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
<InputText <InputText
:readonly="true" :readonly="true"
:value="dataSubSelected?.waktu_recovery" :value="dataSubSelected?.waktu_recovery"
@ -753,39 +663,8 @@
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_dispatch_time)
? formatWaktu(dataSubSelected?.durasi_dispatch_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
<InputText :readonly="true" :value="dataSubSelected?.jarak_closing" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
<InputText :readonly="true" :value="dataSubSelected?.dispatch_oleh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -828,61 +707,24 @@
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
<InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
<InputText <InputText
:readonly="true" :readonly="true"
:value="dataSubSelected?.diselesaikan_oleh" type="textarea"
:value="dataSubSelected?.uraian"
class-name="flex-1" class-name="flex-1"
/> />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status Induk:</h3>
<InputText :readonly="true" :value="dataSubSelected?.status_induk" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking Induk:</h3>
<InputText <InputText
:readonly="true" :readonly="true"
:value="dataSubSelected?.referensi_marking_induk" type="textarea"
:value="dataSubSelected?.respon_pelanggan"
class-name="flex-1" class-name="flex-1"
/> />
</div> </div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.jenis_gangguan"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
@ -989,11 +831,14 @@ const getDetail = async () => {
.then((result) => { .then((result) => {
if (result.data.data != undefined) { if (result.data.data != undefined) {
if (jenisLaporan.name == 'Laporan Berulang Unit') { if (jenisLaporan.name == 'Laporan Berulang Unit') {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitBerulang dataSub.value =
result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang
} else if (jenisLaporan.name == 'Laporan Rating Negatif') { } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitRatingNegatif dataSub.value =
result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
} else { } else {
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitSkipStep dataSub.value =
result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
} }
} else { } else {
dataSub.value = [] dataSub.value = []
@ -1004,6 +849,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1050,7 +896,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

24
src/components/Pages/Cico/LaporanCICO.vue
View File

@ -24,15 +24,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -215,15 +207,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -865,6 +849,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -898,6 +883,7 @@ import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -947,6 +933,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -959,7 +946,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

12
src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
View File

@ -23,15 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -163,6 +155,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -191,6 +184,7 @@ import gql from 'graphql-tag'
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql' import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)

10
src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
View File

@ -323,15 +323,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<!-- <DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"

47
src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
View File

@ -12,8 +12,7 @@
column-resizing-mode="widget"> column-resizing-mode="widget">
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" /> <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator" <!-- -->
:show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<!-- <DxColumn <!-- <DxColumn
@ -231,10 +230,15 @@
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget"> @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" <DxPager
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator" :allowed-page-sizes="[20, 50, 100]"
:show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<!-- -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@ -446,6 +450,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -467,10 +473,6 @@ import {
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { requestGraphQl, queries } from '@/utils/api/api.graphql' import { requestGraphQl, queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@ -484,9 +486,8 @@ import {
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_ALL' } from '@/report/Gangguan/Rekap/RGangguan_ALL'
import { getDataRowGroup } from '@/utils/helper' import { getDataRowGroup } from '@/utils/helper'
const calculateGroupValue = (e: any) => { import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
console.log(e)
}
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
const position = { of: '#data' } const position = { of: '#data' }
@ -765,6 +766,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
const dataGridRef = ref<DxDataGrid | null>(null) const dataGridRef = ref<DxDataGrid | null>(null)
@ -780,27 +782,10 @@ const showDetail = () => {
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true // getDetail()
getDetail()
} }
} }
const handleRowClick = (e: any) => {
if (e.rowType === 'group') {
// Retrieve the group value
const groupValue = e.data.key;
// Perform actions based on the group value
// console.log('Group Value:', groupValue);
}
}
const handleCellClick = (e: any) => {
console.log(e.values)
const rowType = e.rowType;
const columnName = e.column.dataField;
// Perform actions based on row type and column name
console.log('Row Type:', rowType);
console.log('Column Name:', columnName);
}
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value) exportToPDF(reportMeta.value, data.value)

33
src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -174,15 +166,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -481,12 +465,14 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -515,6 +501,7 @@ import {
exportDetailToXLSX, exportDetailToXLSX,
exportDetailToPDF exportDetailToPDF
} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko' } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -548,9 +535,10 @@ const getDetail = async () => {
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_posko_lama != ref.id_posko_baru ? ref.id_posko_baru : ref.id_posko_lama,
idUid: ref.id_uid, idUid: ref.id_uid,
idUp3: ref.id_up3 idUp3: ref.id_up3,
idPoskoLama: ref.id_posko_lama,
idPoskoBaru: ref.id_posko_baru
} }
await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query) await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
@ -566,6 +554,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -578,7 +567,7 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true // dialogDetail.value = true
getDetail() getDetail()
} }

30
src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
View File

@ -8,6 +8,7 @@
> >
<Type1 @update:filters="(value) => (filters = value)" /> <Type1 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@ -29,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -169,15 +162,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -467,12 +452,14 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -500,6 +487,7 @@ import {
exportToXLSX, exportToXLSX,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia' } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -560,6 +548,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -573,8 +562,7 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (date.value != '') { if (date.value != '') {
dialogDetail.value = true // getDetail()
getDetail()
} }
} }

29
src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -207,15 +199,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -414,6 +398,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -421,7 +407,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -445,6 +431,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_CTTM' } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -544,6 +531,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -556,8 +544,7 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (monthSelected.value != null) { if (monthSelected.value != null) {
dialogDetail.value = true // getDetail()
getDetail()
} }
} }

26
src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -455,15 +447,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -753,6 +737,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -786,6 +772,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT' } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -839,6 +826,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -851,7 +839,7 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true // dialogDetail.value = true
getDetail() getDetail()
} }

13
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -426,6 +418,8 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -453,6 +447,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan' import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)

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

@ -33,15 +33,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -495,15 +487,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -797,12 +781,14 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
@ -831,6 +817,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE' } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -956,6 +943,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -969,7 +957,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

28
src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -345,15 +337,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -1099,12 +1083,14 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type18 from '@/components/Form/FiltersType/Type18.vue' import Type18 from '@/components/Form/FiltersType/Type18.vue'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -1135,6 +1121,8 @@ import {
} from '@/report/Gangguan/Rekap/RGangguan_KTI' } from '@/report/Gangguan/Rekap/RGangguan_KTI'
import { getMonthNumber } from '@/utils/texts' import { getMonthNumber } from '@/utils/texts'
import { getDataRowGroup } from '@/utils/helper' import { getDataRowGroup } from '@/utils/helper'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
const position = { of: '#data' } const position = { of: '#data' }
@ -1219,6 +1207,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1232,7 +1221,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (monthSelected.value != null) { if (monthSelected.value != null) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

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

@ -33,15 +33,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -582,15 +574,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -880,6 +864,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -915,6 +901,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerPosko' } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -978,6 +965,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -991,7 +979,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

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

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -592,15 +584,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -890,13 +874,15 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue' import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -923,6 +909,7 @@ import {
exportToXLSX, exportToXLSX,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerRegu' } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -989,6 +976,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1002,7 +990,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

25
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -340,15 +332,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -642,6 +626,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -673,6 +659,7 @@ import {
exportToXLSX, exportToXLSX,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal' } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -740,6 +727,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -753,7 +741,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

25
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -309,15 +301,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -643,6 +627,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -676,6 +662,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko' } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -741,6 +728,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -754,7 +742,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

26
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
View File

@ -8,6 +8,7 @@
> >
<Type1 @update:filters="(value) => (filters = value)" /> <Type1 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@ -27,15 +28,7 @@
<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" />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
@ -299,15 +292,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel <!-- -->
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -633,6 +618,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -665,6 +652,7 @@ import {
exportToXLSX, exportToXLSX,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu' } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -734,6 +722,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -747,7 +736,6 @@ const showDetail = () => {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

12
src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
View File

@ -31,16 +31,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -290,6 +280,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -316,6 +307,7 @@ import {
exportToXLSX, exportToXLSX,
exportToDOCX exportToDOCX
} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia' } from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)

11
src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
View File

@ -31,15 +31,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -325,6 +316,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -348,6 +340,7 @@ import {
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)

24
src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
View File

@ -31,15 +31,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -332,15 +324,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -430,6 +414,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -453,6 +438,7 @@ import {
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers' import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -508,6 +494,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -519,7 +506,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
if (detailType.value == 'table') { if (detailType.value == 'table') {
getDetail() getDetail()
} }

12
src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
View File

@ -47,16 +47,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -292,6 +282,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -318,6 +309,7 @@ import {
exportToDOCX, exportToDOCX,
exportToXLSX exportToXLSX
} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime' } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)

11
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -47,16 +47,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -310,6 +300,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

12
src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
View File

@ -31,16 +31,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -283,6 +273,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -305,6 +296,7 @@ import {
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)

12
src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
View File

@ -31,16 +31,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -303,6 +293,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -325,6 +316,7 @@ import {
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)

27
src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
View File

@ -28,15 +28,7 @@
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" /> <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@ -235,10 +227,15 @@
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget"> @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" <DxPager
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator" :allowed-page-sizes="[20, 50, 100]"
:show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@ -506,6 +503,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -535,6 +533,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL' import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -742,6 +741,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -758,7 +758,6 @@ const showDetail = () => {
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dataSub.value = [] dataSub.value = []
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }
} }

24
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -154,15 +146,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -460,6 +444,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -493,6 +478,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -597,6 +583,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -609,7 +596,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (date.value != '') { if (date.value != '') {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

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

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -467,15 +459,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -779,6 +763,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -813,6 +798,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers' import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -925,6 +911,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -937,7 +924,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

24
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -610,15 +602,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -922,6 +906,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -957,6 +942,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers' import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1062,6 +1048,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1074,7 +1061,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

25
src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -479,15 +471,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -785,6 +769,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -819,6 +805,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -926,6 +913,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -938,7 +926,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

25
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -481,15 +473,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -787,6 +771,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -822,6 +808,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import { reformatDate } from '@/utils/texts' import { reformatDate } from '@/utils/texts'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -924,6 +911,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -936,7 +924,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

24
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -612,15 +604,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -918,6 +902,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -953,6 +938,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1057,6 +1043,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1069,7 +1056,6 @@ const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (agreeToShowDialog.value) { if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail() getDetail()
} }
} }

14
src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
View File

@ -23,15 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -196,6 +188,7 @@
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -222,6 +215,7 @@ import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -307,6 +301,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -318,7 +313,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

12
src/components/Pages/Material/Daftar/Material_DGMYG.vue
View File

@ -28,16 +28,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -134,6 +124,7 @@
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -153,6 +144,7 @@ import { Type14 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)

12
src/components/Pages/Material/Rekap/Material_RPM.vue
View File

@ -28,16 +28,6 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -94,6 +84,7 @@
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -113,6 +104,7 @@ import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)

445
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -278,6 +270,424 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Detail Dispatching Time Gangguan"
@on-close="closedialogDetail"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="ULP"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl/Jam Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl/Jam Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl/Jam Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Penugasan Regu"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Perjalanan Regu"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Dispatch Oleh"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Sumber Lapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Diselesaikan Oleh"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Referensi Marking"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Kode Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Janis Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Tindakan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Janis Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -292,6 +702,7 @@ import {
DxGroupItem, DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPager,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
@ -310,6 +721,10 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -413,7 +828,13 @@ const getDetail = async () => {
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0, idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0, idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0 idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : '',
isSelesai: 0,
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
} }
loadingSubData.value = true loadingSubData.value = true
@ -430,6 +851,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -441,7 +863,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
@ -456,6 +877,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = data dataSubSelected.value = data
} }
const onExportingDetail = (e: any) => {}
const filters = ref() const filters = ref()
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -271,6 +263,7 @@
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -303,6 +296,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -425,6 +419,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -436,7 +431,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

113
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
View File

@ -28,15 +28,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -225,15 +217,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -261,7 +245,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_uid"
caption="UID/UIW" caption="UID/UIW"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -269,7 +253,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_up3"
caption="UP3" caption="UP3"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -278,7 +262,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_ulp"
caption="ULP" caption="ULP"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -287,7 +271,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="id_pelanggan"
caption="ID Pelanggan" caption="ID Pelanggan"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -296,7 +280,7 @@
<DxColumn <DxColumn
:width="200" :width="200"
alignment="center" alignment="center"
data-field="" data-field="nama_pelapor"
caption="Nama Pelapor" caption="Nama Pelapor"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -305,7 +289,7 @@
<DxColumn <DxColumn
:width="200" :width="200"
alignment="center" alignment="center"
data-field="" data-field="alamat_pelapor"
caption="Alamat Pelapor" caption="Alamat Pelapor"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -314,7 +298,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="no_telp_pelapor"
caption="No Telp Pelapor" caption="No Telp Pelapor"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -323,7 +307,7 @@
<DxColumn <DxColumn
:width="200" :width="200"
alignment="center" alignment="center"
data-field="" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" caption="Keterangan Pelapor"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -332,7 +316,7 @@
<DxColumn <DxColumn
:width="200" :width="200"
alignment="center" alignment="center"
data-field="" data-field="penyebab"
caption="Penyebab" caption="Penyebab"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -341,7 +325,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="kode_gangguan"
caption="Kode Gangguan" caption="Kode Gangguan"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -359,7 +343,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_response_time"
caption="Durasi Response Time" caption="Durasi Response Time"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
@ -368,8 +352,8 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_recovery_time"
caption="Durasi Recoery Time:" caption="Durasi Recovery Time:"
:allow-resizing="false" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatTime" cell-template="formatTime"
@ -414,81 +398,109 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">ID Pelanggan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">ID Pelanggan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.id_pengguna" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.nama_jenis_gangguan"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" value="" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -524,6 +536,7 @@ import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -643,6 +656,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -654,7 +668,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
View File

@ -28,15 +28,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -140,6 +132,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -169,6 +162,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -280,6 +274,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -291,7 +286,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
View File

@ -28,15 +28,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -366,6 +358,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -397,6 +390,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -509,6 +503,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -520,7 +515,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible.sync="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -272,6 +264,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -304,6 +297,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -426,6 +420,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -437,7 +432,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -273,6 +265,7 @@
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -305,6 +298,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -431,6 +425,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -442,7 +437,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -278,6 +270,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -310,6 +303,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -431,6 +425,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -442,7 +437,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -278,6 +270,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -310,6 +303,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -431,6 +425,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -442,7 +437,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
View File

@ -28,15 +28,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -126,6 +118,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -155,6 +148,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -234,6 +228,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -245,7 +240,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -368,6 +360,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -399,6 +392,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -476,6 +470,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -487,7 +482,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -268,6 +260,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -300,6 +293,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -422,6 +416,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -433,7 +428,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -201,6 +193,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -231,6 +224,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql' import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -309,6 +303,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -320,7 +315,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -273,6 +265,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -305,6 +298,7 @@ import { getMonthName } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql' import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -387,6 +381,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -398,7 +393,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -278,6 +270,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -310,6 +303,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -432,6 +426,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -443,7 +438,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -278,6 +270,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -308,6 +301,7 @@ import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -429,6 +423,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -440,7 +435,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

24
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -368,15 +360,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -642,6 +626,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -676,6 +661,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -755,6 +741,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -766,7 +753,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -256,6 +248,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -288,6 +281,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -366,6 +360,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -377,7 +372,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

12
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -268,6 +260,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -300,6 +293,7 @@ import { getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)

27
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -692,15 +684,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -966,6 +950,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -985,7 +970,8 @@ import {
DxSummary, DxSummary,
DxTotalItem, DxTotalItem,
DxGroupItem, DxGroupItem,
DxGrouping DxGrouping,
DxPager
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -1000,6 +986,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1079,6 +1066,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -1090,7 +1078,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -340,6 +332,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -370,6 +363,7 @@ import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { getMonthName, getMonthNameShort } from '@/utils/texts' import { getMonthName, getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -444,6 +438,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -455,7 +450,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -256,6 +248,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -288,6 +281,7 @@ import { getMonthName } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -366,6 +360,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -377,7 +372,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
View File

@ -29,15 +29,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -268,6 +260,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -300,6 +293,7 @@ import { getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -378,6 +372,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -389,7 +384,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

14
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
View File

@ -30,15 +30,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -715,6 +707,7 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -747,6 +740,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -825,6 +819,7 @@ const getDetail = async () => {
}) })
.finally(() => { .finally(() => {
loadingSubData.value = false loadingSubData.value = false
dialogDetail.value = true
}) })
} }
@ -836,7 +831,6 @@ const clearSelection = () => {
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
dialogDetail.value = true
getDetail() getDetail()
} }

12
src/components/Pages/PencarianData/PencarianData.vue
View File

@ -29,15 +29,7 @@
:show-info="true" :show-info="true"
:show-navigation-buttons="true" :show-navigation-buttons="true"
/> />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -234,6 +226,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -258,6 +251,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)

13
src/components/Pages/Transaksi/Transaksi.vue
View File

@ -23,16 +23,7 @@
<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" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport
:enabled="true" :enabled="true"
@ -127,6 +118,7 @@
/> />
</DxDataGrid> </DxDataGrid>
</div> </div>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -149,6 +141,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { Type17 } from '@/components/Form/FiltersType' import { Type17 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)

10
src/report/Gangguan/Rekap/RGangguan_ALL.ts
View File

@ -687,7 +687,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -719,7 +722,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
View File

@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
View File

@ -444,7 +444,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -476,7 +479,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_CTTM.ts
View File

@ -455,7 +455,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -487,7 +490,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
View File

@ -602,7 +602,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -634,7 +637,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

5
src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
View File

@ -538,7 +538,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)

10
src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
View File

@ -655,7 +655,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -687,7 +690,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_KTI.ts
View File

@ -521,7 +521,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -553,7 +556,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
View File

@ -635,7 +635,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -667,7 +670,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
View File

@ -706,7 +706,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -738,7 +741,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
View File

@ -700,7 +700,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -732,7 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
View File

@ -451,7 +451,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 8, column: 1 } topLeftCell: { row: 8, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -483,7 +486,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

10
src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
View File

@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 10, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(

6
src/utils/api/api.graphql.ts
View File

@ -1651,16 +1651,18 @@ export const queries = {
query detailGangguanAlihPosko( query detailGangguanAlihPosko(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
$idPoskoLama: Int!
$idPoskoBaru: Int!
) { ) {
detailGangguanAlihPosko( detailGangguanAlihPosko(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
idPoskoLama: $idPoskoLama
idPoskoBaru: $idPoskoBaru
) { ) {
id id
nama_regional nama_regional