Add cell-click event handler and related variables
This commit is contained in:
Dede Fuji Abdul
parent
8717d4b8cb
commit
c7bbf61878
@ -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"
|
||||
@ -1101,6 +1102,9 @@ 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' },
|
||||
@ -1108,9 +1112,36 @@ const reportMeta = ref({
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const setAgreementDialog = (column: string) => {
|
||||
console.log('column', column)
|
||||
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') {
|
||||
@ -1151,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),
|
||||
@ -1167,23 +1197,20 @@ 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
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
|
||||
.then((result) => {
|
||||
dataSub.value = result.data.data.rekapitulasiAllGangguan
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
@ -1191,56 +1218,79 @@ 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 requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
|
||||
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
|
||||
.then((result) => {
|
||||
dataSub.value = result.data.data.detailGangguan
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
})
|
||||
|
||||
// const { onResult, onError, refetch, loading } = useQuery(
|
||||
// queries.gangguan.rekap.gangguanAllDetail,
|
||||
// query,
|
||||
// {
|
||||
// fetchPolicy: 'network-only'
|
||||
// }
|
||||
// )
|
||||
|
||||
// onResult((queryResult) => {
|
||||
// if (queryResult.data != undefined) {
|
||||
// dataSub.value = queryResult.data.detailGangguan
|
||||
// }
|
||||
// })
|
||||
|
||||
// onError((error) => {
|
||||
// console.log(error)
|
||||
// })
|
||||
|
||||
// watch(loading, (value) => {
|
||||
// loadingSubData.value = value
|
||||
// })
|
||||
}
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
//deploy vm
|
||||
import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
|
||||
import {
|
||||
ApolloClient,
|
||||
createHttpLink,
|
||||
gql,
|
||||
InMemoryCache,
|
||||
type DocumentNode
|
||||
} from '@apollo/client/core'
|
||||
import axios from 'axios'
|
||||
const controller = new AbortController()
|
||||
const url = import.meta.env.VITE_APP_GRAPHQL_ENDPOINT
|
||||
@ -13,9 +19,11 @@ const instance = axios.create({
|
||||
signal: controller.signal
|
||||
})
|
||||
|
||||
export const requestGraphQl = async (query: string, data: any) => {
|
||||
export const getQueryString = (query: DocumentNode) => query.loc?.source.body!
|
||||
|
||||
export const requestGraphQl = async (query: DocumentNode, data: any) => {
|
||||
return await instance.post('', {
|
||||
query: query,
|
||||
query: getQueryString(query),
|
||||
variables: data
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user