Refactor dialogDetail variable names in Vue components

This commit is contained in:
Dede Fuji Abdul 2024-03-20 17:10:15 +07:00
parent 9d75cdf7c2
commit b472cd29a7
27 changed files with 547 additions and 180 deletions

View File

@ -140,7 +140,7 @@
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -152,18 +152,18 @@
</template> </template>
<template #formatPercentage="{ data }"> <template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }} {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }" @click="showData()"> <template #formatTime="{ data }" @click="showDetail()">
<p class="!text-right"> <p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
@ -197,12 +197,12 @@ const data = computed(() => props.data)
const dataSub = ref([]) const dataSub = ref([])
const dataSelected = ref({}) const dataSelected = ref({})
const dataSubSelected = ref({}) const dataSubSelected = ref({})
const showDetail = ref(false) const dialogDetail = ref(false)
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {

View File

@ -214,7 +214,7 @@
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -226,18 +226,18 @@
</template> </template>
<template #formatPercentage="{ data }"> <template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }} {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }" @click="showData()"> <template #formatTime="{ data }" @click="showDetail()">
<p class="!text-right"> <p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
@ -391,12 +391,12 @@ const data = computed(() => props.data)
const dataSub = ref<any[]>([]) const dataSub = ref<any[]>([])
const dataSelected = ref<any>({}) const dataSelected = ref<any>({})
const dataSubSelected = ref<any>({}) const dataSubSelected = ref<any>({})
const showDetail = ref(false) const dialogDetail = ref(false)
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const loading = ref(computed(() => props.loading)) const loading = ref(computed(() => props.loading))

View File

@ -78,7 +78,7 @@
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -90,18 +90,18 @@
</template> </template>
<template #formatPercentage="{ data }"> <template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }} {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }" @click="showData()"> <template #formatTime="{ data }" @click="showDetail()">
<p class="!text-right"> <p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
@ -135,12 +135,12 @@ const data = computed(() => props.data)
const dataSub = ref<any[]>([]) const dataSub = ref<any[]>([])
const dataSelected = ref<any>({}) const dataSelected = ref<any>({})
const dataSubSelected = ref<any>({}) const dataSubSelected = ref<any>({})
const showDetail = ref(false) const dialogDetail = ref(false)
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {

View File

@ -262,7 +262,7 @@
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -274,18 +274,18 @@
</template> </template>
<template #formatPercentage="{ data }"> <template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }} {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }" @click="showData()"> <template #formatTime="{ data }" @click="showDetail()">
<p class="!text-right"> <p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
@ -472,9 +472,9 @@ const data = computed(() => props.data)
const dataSelected = ref() const dataSelected = ref()
const dataSub = ref([]) const dataSub = ref([])
const dataSubSelected = ref() const dataSubSelected = ref()
const showDetail = ref(false) const dialogDetail = ref(false)
const showData = () => (showDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()

View File

@ -164,7 +164,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const data = ref<any[]>([]) const data = ref<any[]>([])
const showDetail = ref(false) const dialogDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -268,8 +268,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = data dataDetail.value = data
console.log(data) console.log(data)
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const filters = ref() const filters = ref()
</script> </script>

View File

@ -13,7 +13,7 @@
:show-borders="true" :show-borders="true"
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="" @selection-changed="onSelectionChanged"
:column-width="100" :column-width="100"
@exporting="onExporting" @exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
@ -167,28 +167,133 @@
cell-template="formatText" cell-template="formatText"
/> />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="!text-right"> <p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Berdasarkan Media"
@on-close="closeDialog"
>
<div class="w-full 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-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.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-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">TGL Media:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.waktu_media"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type16 from '@/components/Form/FiltersType/Type16.vue' import Type16 from '@/components/Form/FiltersType/Type16.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
@ -217,6 +322,17 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dialogDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, { const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),

View File

@ -202,19 +202,19 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
@ -222,9 +222,9 @@
</div> </div>
<DetailDialog <DetailDialog
:open="showDetail" :open="dialogDetail"
title="Daftar Gangguan Dialihkan ke Posko Lain" title="Daftar Gangguan Dialihkan ke Posko Lain"
@on-close="closeDetail" @on-close="closeDialog"
> >
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -377,7 +377,6 @@ import {
VerticalAlign, VerticalAlign,
TextRun, TextRun,
WidthType, WidthType,
TableBorders,
PageOrientation PageOrientation
} from 'docx' } from 'docx'
@ -387,8 +386,8 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => (showDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const setHeaderStyle = ( const setHeaderStyle = (
worksheet: any, worksheet: any,
@ -451,7 +450,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
} }
const showData = () => (showDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const filters = ref() const filters = ref()
const reportMeta = ref({ const reportMeta = ref({

View File

@ -13,7 +13,7 @@
:show-borders="true" :show-borders="true"
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="" @selection-changed="onSelectionChanged"
:column-width="100" :column-width="100"
@exporting="onExporting" @exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
@ -60,7 +60,7 @@
alignment="center" alignment="center"
data-field="no_laporan" data-field="no_laporan"
caption="No Laporan" caption="No Laporan"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -68,7 +68,7 @@
alignment="center" alignment="center"
data-field="waktu_lapor" data-field="waktu_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -76,7 +76,7 @@
alignment="center" alignment="center"
data-field="waktu_response" data-field="waktu_response"
caption="Tgl Response" caption="Tgl Response"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -84,7 +84,7 @@
alignment="center" alignment="center"
data-field="waktu_recovery" data-field="waktu_recovery"
caption="Tgl Recovery" caption="Tgl Recovery"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -108,7 +108,7 @@
alignment="center" alignment="center"
data-field="status_akhir" data-field="status_akhir"
caption="Status" caption="Status"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -116,7 +116,7 @@
alignment="center" alignment="center"
data-field="idpel_nometer" data-field="idpel_nometer"
caption="IDPEL/NO METER" caption="IDPEL/NO METER"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -140,7 +140,7 @@
alignment="center" alignment="center"
data-field="no_telp_pelapor" data-field="no_telp_pelapor"
caption="No Telp Pelapor" caption="No Telp Pelapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -156,7 +156,7 @@
alignment="center" alignment="center"
data-field="media" data-field="media"
caption="Sumber Lapor" caption="Sumber Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -167,28 +167,143 @@
cell-template="formatText" cell-template="formatText"
/> />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="!text-right"> <p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Diselesaikan Mobile APKT"
@on-close="closeDialog"
>
<div class="w-full 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-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.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-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.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 { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
@ -217,6 +332,17 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dialogDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.diselesaikanMobileAPKT, queries.gangguan.daftar.diselesaikanMobileAPKT,

View File

@ -174,25 +174,25 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }} {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
@ -200,9 +200,9 @@
</div> </div>
<DetailDialog <DetailDialog
:open="showDetail" :open="dialogDetail"
title="Daftar Gangguan Melapor Lebih Dari 1 Kali" title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
@on-close="closeDetail" @on-close="closeDialog"
> >
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -337,7 +337,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({}) const dataDetail = ref<any>({})
const showDetail = ref(false) const dialogDetail = ref(false)
const filters = ref() const filters = ref()
const reportMeta = ref({ const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -353,9 +353,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = data dataDetail.value = data
} }
const showData = () => (showDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.melaporLebihDariSatuKali, queries.gangguan.daftar.melaporLebihDariSatuKali,

View File

@ -192,26 +192,26 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -359,16 +359,16 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({}) const dataDetail = ref<any>({})
const showDetail = ref(false) const dialogDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
} }
const showData = () => (showDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => { const filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params const { minTime, maxTime, posko, uid, up3 } = params

View File

@ -169,26 +169,26 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Daftar Gangguan Response Time" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -336,16 +336,16 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({}) const dataDetail = ref<any>({})
const showDetail = ref(false) const dialogDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
} }
const showData = () => (showDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => { const filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params const { minTime, maxTime, posko, uid, up3 } = params

View File

@ -13,7 +13,7 @@
:show-borders="true" :show-borders="true"
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="" @selection-changed="onSelectionChanged"
:column-width="100" :column-width="100"
@exporting="onExporting" @exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
@ -60,7 +60,7 @@
alignment="center" alignment="center"
data-field="no_laporan" data-field="no_laporan"
caption="No Laporan" caption="No Laporan"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -68,7 +68,7 @@
alignment="center" alignment="center"
data-field="waktu_lapor" data-field="waktu_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -76,7 +76,7 @@
alignment="center" alignment="center"
data-field="waktu_response" data-field="waktu_response"
caption="Tgl Response" caption="Tgl Response"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -84,7 +84,7 @@
alignment="center" alignment="center"
data-field="waktu_recovery" data-field="waktu_recovery"
caption="Tgl Recovery" caption="Tgl Recovery"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -108,7 +108,7 @@
alignment="center" alignment="center"
data-field="status_akhir" data-field="status_akhir"
caption="Status" caption="Status"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -116,7 +116,7 @@
alignment="center" alignment="center"
data-field="idpel_nometer" data-field="idpel_nometer"
caption="IDPEL/NO METER" caption="IDPEL/NO METER"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -140,7 +140,7 @@
alignment="center" alignment="center"
data-field="no_telp_pelapor" data-field="no_telp_pelapor"
caption="No Telp Pelapor" caption="No Telp Pelapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -156,7 +156,7 @@
alignment="center" alignment="center"
data-field="media" data-field="media"
caption="Sumber Lapor" caption="Sumber Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -167,28 +167,143 @@
cell-template="formatText" cell-template="formatText"
/> />
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="!text-right"> <p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Diselesaikan Tanpa ID Pelanggan"
@on-close="closeDialog"
>
<div class="w-full 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-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.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-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.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-[170px] text-gray-800">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.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-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.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 { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
@ -217,6 +332,17 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dialogDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.selesaiTanpaIDPelanggan, queries.gangguan.daftar.selesaiTanpaIDPelanggan,

View File

@ -306,7 +306,7 @@
<DetailDialog <DetailDialog
:open="dialogDetail" :open="dialogDetail"
title="Detail Rekapitulasi Koreksi Transaksi Individual" title="Detail Rekapitulasi Koreksi Transaksi Individual"
@on-close="closeDetail" @on-close="closeDialog"
:full-width="true" :full-width="true"
> >
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@ -1058,7 +1058,7 @@ const showDetail = () => {
} }
} }
const closeDetail = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }

View File

@ -235,7 +235,7 @@
<DetailDialog <DetailDialog
:open="dialogDetail" :open="dialogDetail"
title="Detail Rating Per Posko" title="Detail Rating Per Posko"
@on-close="closeDetail" @on-close="closeDialog"
:full-width="true" :full-width="true"
> >
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@ -697,7 +697,7 @@ const showDetail = () => {
getDetail() getDetail()
} }
} }
const closeDetail = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }

View File

@ -226,7 +226,7 @@
<DetailDialog <DetailDialog
:open="dialogDetail" :open="dialogDetail"
title="Detail Rating Per Regu" title="Detail Rating Per Regu"
@on-close="closeDetail" @on-close="closeDialog"
:full-width="true" :full-width="true"
> >
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@ -688,7 +688,7 @@ const showDetail = () => {
} }
} }
const closeDetail = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }

View File

@ -172,20 +172,20 @@
/> />
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -323,14 +323,14 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -178,19 +178,19 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -202,14 +202,14 @@
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -348,14 +348,14 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -179,20 +179,20 @@
/> />
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -325,14 +325,14 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -179,19 +179,19 @@
/> />
<template #cellCenter="{ data }"> <template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -203,14 +203,14 @@
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -344,14 +344,14 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -170,20 +170,20 @@
/> />
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()"> <p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -316,14 +316,14 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -221,7 +221,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,

View File

@ -131,7 +131,7 @@
</div> </div>
<DetailDialog <DetailDialog
:open="showDetail" :open="dialogDetail"
title="Detail Gangguan Belum Selesai" title="Detail Gangguan Belum Selesai"
@on-close="closeDialog" @on-close="closeDialog"
:full-width="true" :full-width="true"
@ -470,15 +470,15 @@ const data = ref<any[]>([])
const dataSub = ref<any[]>([]) const dataSub = ref<any[]>([])
const dataSelected = ref<any>() const dataSelected = ref<any>()
const dataSubSelected = ref<any>() const dataSubSelected = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const loadingSubData = ref(false) const loadingSubData = ref(false)
const showDialog = () => { const showDialog = () => {
showDetail.value = true dialogDetail.value = true
} }
const closeDialog = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(

View File

@ -176,7 +176,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan, queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,

View File

@ -384,7 +384,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan, queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
{ {

View File

@ -288,7 +288,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.laporUlangGangguan, queries.monalisa.gangguan.rekap.laporUlangGangguan,
{ {

View File

@ -152,13 +152,13 @@
/> />
<template #formatTime="{ data }"> <template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()"> <p class="cursor-pointer !text-right" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()"> <p class="text-right cursor-pointer" @click="showDetail()">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
@ -170,14 +170,14 @@
</template> </template>
<template #formatText="{ data }"> <template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showData()"> <p class="cursor-pointer !text-left" @click="showDetail()">
{{ data.text }} {{ data.text }}
</p> </p>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Daftar Pencarian Report Number" @on-close="closeDetail"> <DetailDialog :open="dialogDetail" title="Daftar Pencarian Report Number" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<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-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -258,7 +258,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const filters = ref({ const filters = ref({
type: '', type: '',
keyword: '', keyword: '',
@ -266,12 +266,12 @@ const filters = ref({
periode: '' periode: ''
}) })
const closeDetail = () => { const closeDialog = () => {
showDetail.value = false dialogDetail.value = false
} }
const showData = () => { const showDetail = () => {
showDetail.value = true dialogDetail.value = true
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {

View File

@ -153,7 +153,7 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const dialogDetail = ref(false)
const loading = ref(false) const loading = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {