Refactor Select.vue and Type4.vue components

src/components/Form/FiltersType/Type4.vue

@@ -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
+      <Select @update:selected="(value) => (data.jenisLaporan = value)" :data="jenisLaporan" />
-        @update:selected="(value) => (data.jenisLaporan = value)"
-        :data="jenisLaporan"
-        :placeholder="'Semua Jenis Laporan'"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">

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(
+  loadingData.value = true
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+  await requestGraphQl(
-      ? queries.anomali.gangguan.petugasBerulang
+    jenisLaporan.name == 'Laporan Berulang Unit'
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      ? queries.anomali.gangguan.unitBerulang
-        ? queries.anomali.gangguan.petugasRatingNegatif
+      : jenisLaporan.name == 'Laporan Rating Negatif'
-        : queries.anomali.gangguan.petugasSkipStep,
+        ? queries.anomali.gangguan.unitRatingNegatif
-    {
+        : queries.anomali.gangguan.unitSkipStep,
-      namaRegional: '',
+    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
-    }
   )
-
+    .then((result) => {
-  onResult((queryResult) => {
+      if (result.data.data != undefined) {
-    if (queryResult.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep
+        data.value = []
       }
-    }
+    })
-    console.log(queryResult.data)
+    .catch((err) => {
-  })
+      console.error(err)
-  onError((error) => {
+    })
-    console.log(error)
+    .finally(() => {
-  })
+      loadingData.value = false
-
+    })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
 onMounted(() => {

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]
-    // dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
-    //   ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
-    //   : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
-    // dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
-    //   ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
-    //   : 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

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 data = computed(() =>
-const selected = ref(data.value[0].id)
+  props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
-
-watch(
-  () => props.selected,
-  (value: any) => {
-    selected.value = value.id
-  }
 )
+const selected = ref(data.value[props.indexSelected].id)
+
+// watch(
+//   () => props.selected,
+//   (value: any) => {
+//     selected.value = value.id
+//   }
+// )
 </script>
 
 <template>

src/utils/api/api.graphql.ts

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