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

Refactor DKeluhan_ResponseTime.vue and api.graphql.ts

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-22 15:40:27 +07:00
parent 9d94e5f2c3
commit a59565679f
3 changed files with 147 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -364,8 +364,8 @@ const showDetail = () => {
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onExporting = (e: any) => {

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

@ -19,7 +19,7 @@
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
@ -194,9 +194,106 @@
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Daftar Keluhan Selesai di Contact Center"
@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="dataSelected?.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">Contact Center:</h3>
<InputText :readonly="true" :value="dataSelected?.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 Induk Distribusi:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_uid" 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 Pelaksana Pelayanan Pelanggan:
</h3>
<InputText :readonly="true" :value="dataSelected?.nama_up3" 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" :value="dataSelected?.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-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataSelected?.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="dataSelected?.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"
type="textarea"
:value="dataSelected?.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="dataSelected?.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"
type="textarea"
:value="dataSelected?.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">Status:</h3>
<InputText :readonly="true" :value="dataSelected?.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">Create By:</h3>
<InputText :readonly="true" :value="dataSelected?.pembuat_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="dataSelected?.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 Recovery:</h3>
<InputText :readonly="true" :value="dataSelected?.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">Jumlah Lapor Ulang:</h3>
<InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
<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 Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
@ -218,12 +315,37 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import autoTable from 'jspdf-autotable'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
}
const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@ -419,15 +541,6 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
clearSelection()
}
const data = ref<any[]>([])
@ -438,7 +551,8 @@ const { onResult, onError, loading, refetch } = useQuery(
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
idUp3: 0,
media: ''
}
)
const filters = ref()
@ -462,7 +576,8 @@ const filterData = (params: any) => {
: new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
idUp3: up3 ? up3.id : 0,
media: ''
})
onResult((queryResult) => {
@ -471,7 +586,6 @@ const filterData = (params: any) => {
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {

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

@ -143,6 +143,7 @@ export const queries = {
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$media: String!
) {
daftarKeluhanDiselesaikanCC123(
dateFrom: $dateFrom
@ -150,22 +151,28 @@ export const queries = {
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
media: $media
) {
alamat_pelapor
idpel_nometer
jumlah_lapor
pembuat_laporan
keterangan_pelapor
media
nama_uid
nama_ulp
nama_pelapor
no_laporan
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
status_akhir
pembuat_laporan
waktu_lapor
waktu_recovery
jumlah_lapor
media
nama_issuetype
nama_subissuetype
no_telp_pelapor
status_akhir
waktu_recovery
}
}
`,