From 71e04cddb4053ba8cc5b23f200141feb5bc17ad8 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Mon, 1 Apr 2024 01:02:21 +0700 Subject: [PATCH] Refactor Select.vue and Type4.vue components --- src/components/Form/FiltersType/Type4.vue | 20 +++-- .../Pages/Anomali/Gangguan/Anomali_LAPPGP.vue | 84 ++++++++++--------- .../Pages/Anomali/Gangguan/Anomali_LAPPGU.vue | 21 ++--- src/components/Select.vue | 22 +++-- src/utils/api/api.graphql.ts | 24 ++++++ 5 files changed, 107 insertions(+), 64 deletions(-) diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue index db91e07..086a1a3 100755 --- a/src/components/Form/FiltersType/Type4.vue +++ b/src/components/Form/FiltersType/Type4.vue @@ -1,7 +1,15 @@ @@ -78,11 +86,7 @@ onMounted(() => {
-
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue index 847939d..630b0ff 100644 --- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue +++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue @@ -20,7 +20,7 @@ import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.' import { useQuery } from '@vue/apollo-composable' import { Type4 } from '@/components/Form/FiltersType' import Filters from '@/components/Form/Filters.vue' -import { queries } from '@/utils/api/api.graphql' +import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' @@ -44,50 +44,58 @@ const filters = ref({ up3: 0 }) -const filterData = (params: any) => { +const resetData = () => { + data.value = [] + dataSub.value = [] +} + +const filterData = async (params: any) => { + resetData() const { ulp, uid, up3, jenisLaporan } = params + console.table('LAPPGP', jenisLaporan) const dateValue = params.periode.split(' s/d ') + 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: ulp ? ulp.id : 0, + idUid: uid ? uid.id : 0, + idUp3: up3 ? up3.id : 0, + namaRegional: '' + } - const { onResult, onError, loading, refetch } = useQuery( - filters.value.jenisLaporan.name == 'Laporan Berulang Unit' - ? queries.anomali.gangguan.petugasBerulang - : filters.value.jenisLaporan.name == 'Laporan Rating Negatif' - ? queries.anomali.gangguan.petugasRatingNegatif - : queries.anomali.gangguan.petugasSkipStep, - { - namaRegional: '', - // 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 - } + loadingData.value = true + await requestGraphQl( + jenisLaporan.name == 'Laporan Berulang Unit' + ? queries.anomali.gangguan.unitBerulang + : jenisLaporan.name == 'Laporan Rating Negatif' + ? queries.anomali.gangguan.unitRatingNegatif + : queries.anomali.gangguan.unitSkipStep, + query ) - - onResult((queryResult) => { - if (queryResult.data != undefined) { - if (jenisLaporan.name == 'Laporan Berulang Unit') { - data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang - } else if (jenisLaporan.name == 'Laporan Rating Negatif') { - data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif + .then((result) => { + if (result.data.data != undefined) { + if (jenisLaporan.name == 'Laporan Berulang Unit') { + data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang + } else if (jenisLaporan.name == 'Laporan Rating Negatif') { + data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif + } else { + data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep + } } else { - data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep + data.value = [] } - } - console.log(queryResult.data) - }) - onError((error) => { - console.log(error) - }) - - watch(loading, (value) => { - loadingData.value = value - }) + }) + .catch((err) => { + console.error(err) + }) + .finally(() => { + loadingData.value = false + }) } onMounted(() => { diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue index 77375b4..e0e9184 100644 --- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue +++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue @@ -52,26 +52,27 @@ const resetData = () => { const filterData = async (params: any) => { resetData() const { ulp, uid, up3, jenisLaporan } = params + console.table('LAPPGU', jenisLaporan) const dateValue = params.periode.split(' s/d ') const query = { - namaRegional: '', - // 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), + 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 + idUp3: up3 ? up3.id : 0, + namaRegional: '' } loadingData.value = true await requestGraphQl( - filters.value.jenisLaporan.name == 'Laporan Berulang Unit' + jenisLaporan.name == 'Laporan Berulang Unit' ? queries.anomali.gangguan.unitBerulang - : filters.value.jenisLaporan.name == 'Laporan Rating Negatif' + : jenisLaporan.name == 'Laporan Rating Negatif' ? queries.anomali.gangguan.unitRatingNegatif : queries.anomali.gangguan.unitSkipStep, query diff --git a/src/components/Select.vue b/src/components/Select.vue index 5092440..7f278ce 100755 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -19,19 +19,25 @@ const props = defineProps({ selected: { type: Object as () => DataItem, default: () => ({ id: 0, name: '' }) + }, + indexSelected: { + type: Number, + default: 0 } }) const emit = defineEmits(['update:selected']) -const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]) -const selected = ref(data.value[0].id) - -watch( - () => props.selected, - (value: any) => { - selected.value = value.id - } +const data = computed(() => + props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data] ) +const selected = ref(data.value[props.indexSelected].id) + +// watch( +// () => props.selected, +// (value: any) => { +// selected.value = value.id +// } +// )