Merge branch 'GraphQLIntegration' of https://gitea.callysta-engineering.com/APKT/eis into dev-bagus

src/components/Pages/Gangguan/Table_1.vue

@@ -1,5 +1,13 @@
 <template>
-  <Filters @run-search="() => console.log(filters)" class="mb-4">
+  <Filters
+    @run-search="
+      () => {
+        console.log(filters)
+        filterData(filters)
+      }
+    "
+    class="mb-4"
+  >
     <Type1
       @update:filters="
         (value) => {
@@ -53,23 +61,6 @@
         :allow-export-selected-data="false"
       />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_laporan"
-        caption="No Laporan"
-        cell-template="data"
-      />
-
       <DxColumn
         css-class="custom-table-column"
         :width="150"
@@ -82,7 +73,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_laporan"
+        data-field="waktu_lapor"
         caption="Tgl Lapor"
         cell-template="data"
       />
@@ -90,7 +81,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_dialihkan"
+        data-field="waktu_dialihkan"
         caption="Tgl Dialihkan"
         cell-template="data"
       />
@@ -98,7 +89,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_respon"
+        data-field="waktu_response"
         caption="Tgl Response"
         cell-template="data"
       />
@@ -106,7 +97,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_recovery"
+        data-field="waktu_recovery"
         caption="Tgl Recovery"
         cell-template="data"
       />
@@ -232,22 +223,22 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -319,10 +310,8 @@
 </template>
 
 <script setup lang="ts">
-// filters components
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -341,21 +330,15 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-import { useDialogStore } from '@/stores/dialog'
-import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useUp3Store } from '@/stores/up3'
-import { useRegionStore } from '@/stores/region'
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
@@ -404,6 +387,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
       id_gangguan
       idpel_nometer
       keterangan_pelapor
@@ -429,50 +415,47 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0
   }
 )
-// const reportButton = useSearchStore()
 // const detected = computed(() => reportButton.isTriggerChange)
-// watch(detected, () => {
-//   const dateValue = useDateStore().getDateValue().split(' s/d ')
-//   const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-//   const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-//   const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-//   refetch({
-//     dateFrom: dateValue[0].split('-').reverse().join('-'),
-//     dateTo: dateValue[1].split('-').reverse().join('-'),
-//     posko: posko,
-//     idUid: uid,
-//     idUp3: up3
-//   })
-//   onResult((queryResult) => {
-//     if (queryResult.data != undefined) {
-//       queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-//         data.value = [
-//           ...data.value,
-//           {
-//             ...item,
-//             pembuat_laporan: '-'
-//           }
-//         ]
-//       })
-//     }
-//     console.log(queryResult.data)
-//     console.log(queryResult.loading)
-//     console.log(queryResult.networkStatus)
-//   })
-//   onError((error) => {
-//     console.log(error)
-//   })
-// })
+const filterData = (filters: any) => {
+  console.log(filters)
+  const dateValue = filters().periode.split(' s/d ')
+  const posko = filters().posko ? filters().posko : ''
+  const up3 = filters().up3 ? filters().up3 : 0
+  const uid = filters().uid ? filters().uid : 0
+  refetch({
+    dateFrom: dateValue[0].split('-').reverse().join('-'),
+    dateTo: dateValue[1].split('-').reverse().join('-'),
+    posko: posko,
+    idUid: uid,
+    idUp3: up3
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item,
+            status_akhir: fetchStatus(item.status_akhir)
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
   console.log(data)
 }
-
 const showData = () => {
   showDetail.value = true
 }
-
-// filters handler
 const filters = ref()
 </script>