diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue index 97d459d..2c99814 100755 --- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue +++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue @@ -47,6 +47,7 @@ import Filters from '@/components/Form/Filters.vue' import Type6 from '@/components/Form/FiltersType/Type6.vue' -import { formatWaktu } from '@/components/Form/FiltersType/reference' -import { onMounted, ref } from 'vue' +import DetailDialog from '@/components/Dialogs/DetailDialog.vue' +import InputText from '@/components/InputText.vue' +import CustomStore from 'devextreme/data/custom_store' +import BufferDialog from '@/components/Dialogs/BufferDialog.vue' + import { DxDataGrid } from 'devextreme-vue' import { DxColumn, DxExport, - DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import DetailDialog from '@/components/Dialogs/DetailDialog.vue' -import InputText from '@/components/InputText.vue' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { onMounted, ref, reactive } from 'vue' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, isNumber } from '@/utils/numbers' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K' -import { apolloClient } from '@/utils/api/api.graphql' -import { provideApolloClient } from '@vue/apollo-composable' -import BufferDialog from '@/components/Dialogs/BufferDialog.vue' -const client = apolloClient() -provideApolloClient(client) -const position = { of: '#data' } -const showIndicator = ref(true) -const shading = ref(true) -const showPane = ref(true) -const data = ref([]) +import type { IRequestOptions } from '@/types/requestParams' + +const requestOptions = reactive({ + skip: 0, + take: 20, + requireTotalCount: true, + sort: null, + filter: null +}) + const dataSub = ref([]) const dataSelected = ref() const dataSubSelected = ref() const dialogDetail = ref(false) -const closedialogDetail = () => (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const detailType = ref('form') // form, table - +const detailType = ref('form') +const dataGridRef = ref(null) const filters = ref() const reportMeta = ref({ uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, @@ -468,6 +469,56 @@ const reportMeta = ref({ maxJmlLapor: 1 }) +const allowTableRequest = ref(false) +const data = new CustomStore({ + load: async (loadOptions: any) => { + if (allowTableRequest.value) { + loadOptions.requireTotalCount = true + + const query = { + skip: loadOptions.skip, + take: loadOptions.take, + sort: loadOptions.sort ? loadOptions.sort : null, + filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null, + requireTotalCount: loadOptions.requireTotalCount, + ...createQuery(filters.value) + } + + return await requestGraphQl( + queries.gangguan.daftar.ssdaftarGangguanMelaporLebihDariSatuKali, + query + ) + .then((result) => { + const response = result.data.data.ssdaftarGangguanMelaporLebihDariSatuKali + + let no = query.skip ?? 0 + + for (const data of response.data) { + data.no = ++no + } + + return { + data: response.data, + totalCount: response.totalCount + } + }) + .catch((err) => { + throw Error(err) + }) + .finally(() => { + reportMeta.value = filters.value + }) + } else { + return new Promise(function (resolve) { + resolve({ + data: [], + totalCount: 0 + }) + }) + } + } +}) + const setDetailType = (columnCaption: string) => { if (columnCaption == 'Jml Lapor') { detailType.value = 'table' @@ -503,14 +554,16 @@ const getDetail = async () => { }) } -const dataGridRef = ref(null) const clearSelection = () => { const dataGrid = dataGridRef.value!.instance! dataGrid.clearSelection() } + const showDetail = () => { clearSelection() + dataSubSelected.value = null + if (detailType.value == 'table') { getDetail() } else { @@ -521,23 +574,96 @@ const showDetail = () => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] + dataSubSelected.value = data } const closeDialog = () => (dialogDetail.value = false) const resetData = () => { - data.value = [] + allowTableRequest.value = false dataSub.value = [] + + const dataGrid = dataGridRef.value!.instance! + const dataGridDataSource = dataGrid.getDataSource() + + dataGridDataSource.reload() +} + +const handleRequestChange = (e: any) => { + if (e.name === 'searchPanel') { + if (e.value !== '') { + requestOptions.filter = createSearchOptions(e.value) + } else { + requestOptions.filter = null + } + } + + if (e.name === 'paging') { + requestOptions.take = e.value + } + + if (e.name === 'columns') { + const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1]) + const columnDataField = e.component.columnOption(columnIndex).dataField + + requestOptions.sort = [ + { + selector: columnDataField, + desc: e.value === 'desc' + } + ] + } +} + +const createSearchOptions = (keyword: string) => { + const dataGrid = dataGridRef.value!.instance! + const columns = dataGrid.getVisibleColumns() + + const searchOptions = [] + + for (const column of columns) { + if (column.dataField === 'no' || !column.dataField) { + continue + } + + searchOptions.push({ + field: column.dataField, + value: keyword + }) + } + + return searchOptions +} + +const mapSearchOptions = (searchOptions: any) => { + const result = searchOptions.map((option: any) => { + if (Array.isArray(option) && option[0] !== 'no') { + return { + field: option[0], + value: option[2] + } + } + }) + + return result.filter((item: any) => item) } const filterData = async (params: any) => { + llowTableRequest.value = true + + const dataGrid = dataGridRef.value!.instance! + const dataGridDataSource = dataGrid.getDataSource() + + dataGridDataSource.reload() + resetData() const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params const dateValue = params.periode.split(' s/d ') diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts index 7a9f18b..a649525 100755 --- a/src/utils/api/api.graphql.ts +++ b/src/utils/api/api.graphql.ts @@ -2502,6 +2502,57 @@ export const queries = { } } `, + ssdaftarGangguanMelaporLebihDariSatuKali: gql` + query ssdaftarGangguanMelaporLebihDariSatuKali( + $dateFrom: Date! + $dateTo: Date! + $posko: Int! + $idUid: Int! + $idUp3: Int! + $minJmlLapor: Int! + $maxJmlLapor: Int! + $skip: Int + $take: Int + $requireTotalCount: Boolean + $sort: [SortInput] + $filter: [FilterInput] + ) { + ssdaftarGangguanMelaporLebihDariSatuKali( + dateFrom: $dateFrom + dateTo: $dateTo + minJmlLapor: $minJmlLapor + maxJmlLapor: $maxJmlLapor + posko: $posko + idUid: $idUid + idUp3: $idUp3 + skip: $skip + take: $take + requireTotalCount: $requireTotalCount + sort: $sort + filter: $filter + ) { + totalCount + data { + no_laporan + pembuat_laporan + waktu_lapor + waktu_response + waktu_recovery + jumlah_lapor + durasi_response_time + durasi_recovery_time + status_akhir + idpel_nometer + nama_pelapor + alamat_pelapor + no_telp_pelapor + keterangan_pelapor + media + nama_posko + } + } + } + `, diselesaikanMobileAPKT: gql` query daftarGangguanDiselesaikanMobileAPKT( $dateFrom: Date!