Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus
This commit is contained in:
kur0nek-o
@ -11,6 +11,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
@cell-click="onCellClicked"
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
@ -25,7 +26,7 @@
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
|
||||
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxPaging :page-size="40" :enabled="true" />
|
||||
<DxPager
|
||||
@ -495,13 +496,13 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
<p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -513,7 +514,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
<p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -522,6 +523,7 @@
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
:class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
|
||||
@click="setAgreementDialog(data.column.caption)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
@ -537,6 +539,7 @@
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
:class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
|
||||
@click="setAgreementDialog(data.column.caption)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
@ -552,6 +555,7 @@
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
:class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
|
||||
@click="setAgreementDialog(data.column.caption)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
@ -1074,7 +1078,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
|
||||
import { requestGraphQl, queries } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
@ -1096,6 +1100,11 @@ 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 reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
@ -1103,6 +1112,50 @@ const reportMeta = ref({
|
||||
periode: ''
|
||||
})
|
||||
|
||||
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) {
|
||||
const data = e.data.collapsedItems[0].items[0].items[0]
|
||||
groupData.value = data
|
||||
console.table(data)
|
||||
} else if (e.row.groupIndex == 2) {
|
||||
const data = e.data.collapsedItems[0].items[0]
|
||||
groupData.value = data
|
||||
console.table(data)
|
||||
} else if (e.row.groupIndex == 3) {
|
||||
const data = e.data.collapsedItems[0]
|
||||
groupData.value = data
|
||||
console.table(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 calculateCustomSummary = (options: any) => {
|
||||
if (options.name == 'persenSelesai') {
|
||||
console.log(options.component.persen_selesai)
|
||||
@ -1129,13 +1182,12 @@ const resetData = () => {
|
||||
dataSubSelected.value = null
|
||||
}
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
loadingData.value = true
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
@ -1145,25 +1197,25 @@ const filterData = (params: any) => {
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
}
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiAllGangguan
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != null) {
|
||||
data.value = result.data.data.rekapitulasiAllGangguan
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
loadingData.value = false
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
// loadingData.value = value
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
@ -1171,58 +1223,83 @@ 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),
|
||||
posko: selected?.id_posko ? selected?.id_posko : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
idRegu: selected?.id_regu ? selected?.id_regu : 0,
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: selected?.media ? selected?.media : ''
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
idRegu: 0,
|
||||
idUlp: 0,
|
||||
namaRegional: '',
|
||||
media: '',
|
||||
isSelesai: progressSelected.value,
|
||||
tanggal: ''
|
||||
}
|
||||
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),
|
||||
posko: selected?.id_posko ? selected?.id_posko : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
idRegu: selected?.id_regu ? selected?.id_regu : 0,
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: selected?.media ? selected?.media : '',
|
||||
isSelesai: progressSelected.value,
|
||||
tanggal: ''
|
||||
}
|
||||
}
|
||||
console.table(query)
|
||||
|
||||
await getGangguanDetail(query)
|
||||
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
|
||||
.then((result) => {
|
||||
// console.table(result.data.data.detailGangguan)
|
||||
dataSub.value = result.data.data.detailGangguan
|
||||
if (result.data.data != null) {
|
||||
dataSub.value = result.data.data.detailGangguan
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
|
||||
// const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
|
||||
// fetchPolicy: 'network-only'
|
||||
// })
|
||||
|
||||
// result.onResult((queryResult) => {
|
||||
// if (queryResult.data != undefined) {
|
||||
// dataSub.value = queryResult.data.detailGangguan
|
||||
// console.table(queryResult.data.detailGangguan)
|
||||
// }
|
||||
// })
|
||||
|
||||
// watch(result, (value) => {
|
||||
// if (dataSub.value != value.detailGangguan) {
|
||||
// console.table(value.detailGangguan)
|
||||
// }
|
||||
// })
|
||||
|
||||
// result.onError((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
|
||||
// watch(result.loading, (value) => {
|
||||
// loadingSubData.value = value
|
||||
// })
|
||||
}
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
@ -1234,10 +1311,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) => {
|
||||
|
||||
Reference in New Issue
Block a user