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

Refactor Select.vue and Type4.vue components

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-04-01 01:02:21 +07:00
parent 2a6cb4a176
commit 71e04cddb4
5 changed files with 107 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Form/FiltersType/Type4.vue
View File

@ -1,7 +1,15 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference'
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
itemsUid,
itemsUp3,
itemsUlp,
fetchUid
} from './reference'
import { computed, onMounted, ref } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -27,7 +35,7 @@ const data = ref({
up3: uppp.value,
ulp: ulp.value,
periode: '',
jenisLaporan: ''
jenisLaporan: jenisLaporan.value[0]
})
const setUid = (value: any) => {
uid.value = value
@ -51,7 +59,7 @@ const setUlp = (value: any) => {
onMounted(() => {
emit('update:filters', data.value)
// fetchUid()
fetchUid()
})
</script>
@ -78,11 +86,7 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Laporan:</label>
<Select
@update:selected="(value) => (data.jenisLaporan = value)"
:data="jenisLaporan"
:placeholder="'Semua Jenis Laporan'"
/>
<Select @update:selected="(value) => (data.jenisLaporan = value)" :data="jenisLaporan" />
</div>
<div class="flex flex-col flex-1 space-y-2">

68
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
View File

@ -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,49 +44,57 @@ 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 { 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),
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
idUp3: up3 ? up3.id : 0,
namaRegional: ''
}
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) {
.then((result) => {
if (result.data.data != undefined) {
if (jenisLaporan.name == 'Laporan Berulang Unit') {
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang
data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
} else if (jenisLaporan.name == 'Laporan Rating Negatif') {
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif
data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
} else {
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep
data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
}
} else {
data.value = []
}
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
.catch((err) => {
console.error(err)
})
watch(loading, (value) => {
loadingData.value = value
.finally(() => {
loadingData.value = false
})
}

21
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
View File

@ -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

22
src/components/Select.vue
View File

@ -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
// }
// )
</script>
<template>

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

@ -3003,12 +3003,16 @@ export const queries = {
gangguan: {
unitBerulang: gql`
query anomaliPenangananPengaduanGangguanUnitBerulang(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanUnitBerulang(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
@ -3042,12 +3046,16 @@ export const queries = {
`,
unitRatingNegatif: gql`
query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanUnitRatingNegatif(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
@ -3081,12 +3089,16 @@ export const queries = {
`,
unitSkipStep: gql`
query anomaliPenangananPengaduanGangguanUnitSkipStep(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanUnitSkipStep(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
@ -3120,12 +3132,16 @@ export const queries = {
`,
petugasBerulang: gql`
query anomaliPenangananPengaduanGangguanPetugasBerulang(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanPetugasBerulang(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
@ -3155,12 +3171,16 @@ export const queries = {
`,
petugasRatingNegatif: gql`
query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
@ -3190,12 +3210,16 @@ export const queries = {
`,
petugasSkipStep: gql`
query anomaliPenangananPengaduanGangguanPetugasSkipStep(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliPenangananPengaduanGangguanPetugasSkipStep(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid