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

Refactor RGangguan_ALL.vue and api.graphql.ts

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-29 14:10:53 +07:00
parent 5dfbc9bdb8
commit c80b1eb766
3 changed files with 162 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,15 +28,6 @@
>
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" />
<!-- <DxPaging :page-size="40" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 40, 60]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/> -->
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"

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

@ -9,6 +9,7 @@
</Filters>
<div>
<DxDataGrid
@cell-click="onCellClicked"
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
@ -23,10 +24,8 @@
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
@ -42,7 +41,6 @@
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<!-- <DxColumnFixing :enabled="true" /> -->
<DxColumn
alignment="center"
@ -493,7 +491,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="dalam_proses_bidang"
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
@ -502,7 +500,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="selesai_bidang_unit"
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
@ -529,7 +527,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
@ -583,7 +581,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_ulp"
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
@ -592,7 +590,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="uraian"
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
@ -601,7 +599,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="respon_pelanggan"
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
@ -621,7 +619,7 @@
</template>
<template #formatTime="{ data }">
<p>
<p class="text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -730,7 +728,7 @@
<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?.rayon" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -748,7 +746,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.response_pelanggan"
:value="dataSubSelected?.respon_pelanggan"
class-name="flex-1"
/>
</div>
@ -804,8 +802,77 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const onCellClicked = (e: any) => {
console.log('cell clicked', e)
// console.log('group cell clicked', e.column.caption)
// console.log('value', e.values[e.row.groupIndex])
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
setAgreementDialog(e.column.caption)
if (e.row.groupIndex == 0) {
//
} else if (e.row.groupIndex == 1) {
if (e.row.isExpanded) {
const data = e.data.items[0].collapsedItems[0].items[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 2) {
if (e.row.isExpanded) {
const data = e.data.items[0].collapsedItems[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 3) {
if (e.row.isExpanded) {
const data = e.data.items[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0]
groupData.value = data
}
}
showDetail()
} else {
groupDialog.value = false
}
}
const setAgreementDialog = (column: string) => {
if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
agreeToShowDialog.value = true
if (column == 'Total') {
progressSelected.value = 0
} else if (column == 'Selesai') {
progressSelected.value = 1
} else {
progressSelected.value = 2
}
} else {
agreeToShowDialog.value = false
}
}
const resetData = () => {
data.value = []
dataSub.value = []
dataSelected.value = null
dataSubSelected.value = null
}
const filterData = async (params: any) => {
resetData()
const { ulp, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
@ -842,16 +909,67 @@ const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
var query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
idUlp: 0,
idUid: 0,
idUp3: 0,
namaRegional: '',
isSelesai: progressSelected.value,
media: '',
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
}
if (groupDialog.value) {
if (groupIndex.value == 0) {
query = {
...query,
isSelesai: progressSelected.value
}
} else if (groupIndex.value == 1) {
query = {
...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (groupIndex.value == 2) {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (groupIndex.value == 3) {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
}
} else {
query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : '',
isSelesai: progressSelected.value,
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
}
}
loadingSubData.value = true
@ -881,10 +999,12 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {

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

@ -636,6 +636,12 @@ export const queries = {
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$namaRegional: String
$isSelesai: Int!
$media: String
$tanggal: String
$namaIssuetype: String
$namaSubissuetype: String
) {
detailKeluhanAll(
dateFrom: $dateFrom
@ -643,14 +649,25 @@ export const queries = {
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
namaRegional: $namaRegional
isSelesai: $isSelesai
media: $media
tanggal: $tanggal
namaIssuetype: $namaIssuetype
namaSubissuetype: $namaSubissuetype
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
no_laporan
pembuat_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_dispatch_time
durasi_response_time
durasi_recovery_time
status_akhir
@ -659,14 +676,8 @@ export const queries = {
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
jarak_closing
dispatch_oleh
diselesaikan_oleh
penyebab
tindakan
kode_gangguan
jenis_gangguan
respon_pelanggan
is_selesai
}
}
`