Refactor code to improve readability and fix bugs in Gangguan and Monalisa components

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue

@@ -27,12 +27,14 @@
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
     @update:marking="marking = $event"
+    @update:data-group="dataByGroup = $event"
   />
 
   <Anomali_LAPPGP_LPP
     :data="dataSub"
     :filters="filters"
     :marking="marking"
+    :data-group="dataByGroup"
     @update:loading-sub-data="loadingSubData = $event"
   />
 
@@ -40,9 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 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, requestGraphQl } from '@/utils/api/api.graphql'
@@ -65,6 +66,13 @@ const grouping = ref<any[]>([
   }
 ])
 
+const dataByGroup = ref<any>(
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+)
+
 const client = apolloClient()
 provideApolloClient(client)
 const data = ref<any[]>([])
@@ -83,6 +91,10 @@ const filters = ref({
   up3: 0
 })
 
+const modifyData = (data: any[]) => {
+  dataSub.value = data
+}
+
 const resetData = () => {
   data.value = []
   dataSub.value = []

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue

@@ -29,7 +29,7 @@
 
     <DxColumn
       alignment="center"
-      data-field="nama_ulp"
+      data-field="nama_unit"
       caption="Nama Unit"
       css-class="custom-table-column"
       cell-template="formatText"
@@ -869,7 +869,8 @@ const props = defineProps({
   marking: {
     type: Number,
     default: 0
-  }
+  },
+  dataGroup: Object as () => any
 })
 const filters = computed(() => props.filters)
 const emit = defineEmits(['update:loadingSubData'])
@@ -906,22 +907,42 @@ 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),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
     namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
     media: parameterRequest.value?.media,
     isMarking: props.marking,
     idPetugas: selected?.id_regu ? selected?.id_regu : 0
   }
 
+  if (props.dataGroup.data == 'nama_uid') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0
+    }
+  } else if (props.dataGroup.data == 'nama_up3') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
+  } else if (props.dataGroup.data == 'nama_ulp') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0
+    }
+  }
+
   loadingSubData.value = true
   emit('update:loadingSubData', loadingSubData.value)
   await requestGraphQl(

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue

@@ -506,7 +506,12 @@ const props = defineProps({
   },
   loadingData: Boolean
 })
-const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
+const emit = defineEmits([
+  'update:dataSub',
+  'update:loadingSubData',
+  'update:marking',
+  'update:data-group'
+])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
@@ -736,7 +741,7 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
 
   const selected = dataSelected.value
-  let query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -768,12 +773,7 @@ const getDetail = async () => {
     }
   } 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),
+      ...query,
       idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
       idUid: selected?.id_uid ? selected?.id_uid : 0,
       idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
@@ -806,7 +806,18 @@ const getDetail = async () => {
       } else {
         dataSub.value = []
       }
+      dataSub.value = dataSub.value.map((e: any) => ({
+        ...e,
+        nama_unit: groupDialog.value
+          ? props.grouping[groupIndex.value].data == 'nama_uid'
+            ? e.nama_uid
+            : props.grouping[groupIndex.value].data == 'nama_up3'
+              ? e.nama_up3
+              : 'Semua Unit'
+          : e.nama_ulp
+      }))
       emit('update:dataSub', dataSub.value)
+      emit('update:data-group', props.grouping[groupIndex.value])
     })
     .catch((err) => {
       console.error(err)