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

Refactor code: Remove console.log statements and fix column width in RKeluhan_ALL.vue

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-25 11:31:01 +07:00
parent 3fb69f209a
commit 77b4eddadf
10 changed files with 484 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -781,9 +781,6 @@ const filterData = (params: any) => {
if (queryResult.networkStatus == 7) {
loadingData.value = false
}
console.log('loading', queryResult.loading)
console.log('networkStatus', queryResult.networkStatus)
console.log('stale', queryResult.stale)
})
onError((error) => {

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

@ -19,13 +19,11 @@
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -44,7 +42,7 @@
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<!-- <DxColumnFixing :enabled="true" /> -->
<DxColumn
alignment="center"
@ -61,7 +59,6 @@
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn
@ -70,7 +67,6 @@
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
cell-template="formatText"
:group-index="1"
/>
<DxColumn
@ -79,7 +75,6 @@
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="2"
/>
<DxColumn
@ -88,7 +83,6 @@
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="3"
/>
@ -863,7 +857,7 @@ const getDetail = async () => {
result.onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailRekapitulasiKeluhanAll
dataSub.value = queryResult.data.detailKeluhanAll
}
})

87
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -132,7 +132,7 @@
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -494,7 +494,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -508,40 +512,30 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
media: ''
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media: ''
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media: ''
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
}
console.log(queryResult.data)
})
onError((error) => {
@ -553,7 +547,41 @@ const filterData = (params: any) => {
})
}
const getDetail = () => {}
const getDetail = () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
@ -562,8 +590,8 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
console.log(dataSelected.value)
getDetail()
}
@ -599,14 +627,13 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref()

95
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -400,7 +400,7 @@
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -442,9 +442,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -767,9 +765,12 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -783,37 +784,29 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
})
onError((error) => {
@ -826,7 +819,39 @@ const filterData = (params: any) => {
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -836,6 +861,7 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
@ -872,17 +898,22 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref({ groupBy: false })
const filters = ref({
uid: 0,
up3: 0,
ulp: 0,
periode: '',
groupBy: false
})
onMounted(() => {
if (import.meta.env.DEV) {

100
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
View File

@ -51,9 +51,8 @@
css-class="custom-table-column"
:width="100"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
data-field="no"
data-field="number"
caption="No"
cell-template="formatNumber"
/>
@ -917,7 +916,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -931,38 +934,36 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerJenisKeluhan,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerJenisKeluhan,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
data.value = [...queryResult.data.rekapitulasiKeluhanPerJenisKeluhan]
.sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
.map((item: any, index: number) => {
return {
...item,
number: index + 1
}
})
}
console.log(queryResult.data)
})
onError((error) => {
@ -975,7 +976,39 @@ const filterData = (params: any) => {
}
const getDetail = () => {
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -985,6 +1018,7 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
@ -1021,21 +1055,27 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
data.value = [...dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan]
.sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
.map((item: any, index: number) => {
return {
...item,
number: index + 1
}
})
}
})
</script>

94
src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
View File

@ -53,7 +53,6 @@
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
data-field="no"
caption="No"
cell-template="formatNumber"
/>
@ -412,7 +411,7 @@
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -454,9 +453,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -775,7 +772,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -789,38 +790,29 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerKelompokKeluhan,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerKelompokKeluhan,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
}
console.log(queryResult.data)
})
onError((error) => {
@ -833,7 +825,39 @@ const filterData = (params: any) => {
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -843,6 +867,7 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
@ -879,17 +904,22 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref({ groupBy: false })
const filters = ref({
uid: 0,
up3: 0,
ulp: 0,
periode: '',
groupBy: false
})
onMounted(() => {
if (import.meta.env.DEV) {

90
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -415,7 +415,7 @@
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -457,9 +457,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -778,7 +776,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -792,35 +794,29 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerTanggal, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: '',
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerTanggal,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
}
console.log(queryResult.data)
})
onError((error) => {
@ -833,7 +829,39 @@ const filterData = (params: any) => {
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -843,6 +871,7 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
@ -879,17 +908,22 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref({ groupBy: false })
const filters = ref({
uid: 0,
up3: 0,
ulp: 0,
periode: '',
groupBy: false
})
onMounted(() => {
if (import.meta.env.DEV) {

73
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -49,11 +49,10 @@
<DxColumn
:width="100"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
data-type="number"
data-field="no"
data-field="number"
cell-template="formatNumber"
/>
@ -915,7 +914,11 @@ import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -929,19 +932,11 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -955,9 +950,15 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
data.value = [...queryResult.data.rekapitulasiKeluhanPerUnit]
.sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
.map((item, index) => {
return {
...item,
number: index + 1
}
})
}
console.log(queryResult.data)
})
onError((error) => {
@ -970,7 +971,39 @@ const filterData = (params: any) => {
}
const getDetail = () => {
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -980,8 +1013,8 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
console.log(dataSelected.value)
getDetail()
}
@ -1017,14 +1050,13 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref()
@ -1438,6 +1470,13 @@ onMounted(() => {
total_diatas_sla_recovery: 27
}
]
.sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
.map((item, index) => {
return {
...item,
number: index + 1
}
})
}
})
</script>

158
src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
View File

@ -13,7 +13,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@ -29,8 +29,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -202,7 +201,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { ref } from 'vue'
import { ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -221,10 +220,106 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerRatingUnit,
{
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
}
const getDetail = () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const 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
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -253,52 +348,17 @@ 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[]>([])
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.rekap.keluhanPerRatingUnit,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
)
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
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: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
}
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
}
const filters = ref()
</script>

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

@ -682,14 +682,14 @@ export const queries = {
}
`,
rekapKeluhanAllDetail: gql`
query detailRekapitulasiKeluhanAll(
query detailKeluhanAll(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
detailRekapitulasiKeluhanAll(
detailKeluhanAll(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp