Add laporanCheckInCheckOut query to graphql.ts

src/components/Pages/Cico/LaporanCICO.vue

@@ -4,103 +4,35 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu"
-        :width="200"
+        css-class="custom-table-column" />
-        alignment="center"
+      <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
-        data-field="user_regu"
+        css-class="custom-table-column" />
-        caption="User Regu"
+      <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
-        css-class="custom-table-column"
+        caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
-      />
+      <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
-      <DxColumn
+        caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
-        :width="200"
+      <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
-        alignment="center"
+        caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
-        data-field="personil_yantek"
+      <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
-        caption="Personil Yantek"
+        caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
-        css-class="custom-table-column"
+      <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
-      />
+        caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
-      <DxColumn
+      <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
-        :width="200"
+        caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
-        alignment="center"
-        data-field="jumlah_wo_gangguan_individual"
-        data-type="number"
-        caption="Jumlah WO Gangguan Individual"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="avg_durasi_wo_gangguan_individual"
-        data-type="number"
-        caption="Rata-rata Durasi WO Gangguan"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="avg_rpt_wo_gangguan_individual"
-        data-type="number"
-        caption="Rata-rata RPT WO Gangguan"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="avg_rct_wo_gangguan_individual"
-        data-type="number"
-        caption="Rata-rata RCT WO Gangguan"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="jumlah_wo_penugasan_khusus"
-        data-type="number"
-        caption="Jumlah Wo Penugasan Khusus"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="avg_durasi_wo_penugasan_khusus"
-        data-type="number"
-        caption="Rata-rata Durasi WO Penugasan"
-        css-class="custom-table-column"
-      />
     </DxDataGrid>
   </div>
 </template>
@@ -127,6 +59,7 @@ import { Type1 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -171,32 +104,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    laporanCheckInCheckOut(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      avg_durasi_wo_gangguan_individual
-      avg_durasi_wo_penugasan_khusus
-      avg_rct_wo_gangguan_individual
-      avg_rpt_wo_gangguan_individual
-      jumlah_wo_gangguan_individual
-      jumlah_wo_penugasan_khusus
-      personil_yantek
-      user_regu
-    }
-  }
-`
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
@@ -207,20 +114,13 @@ const filterData = (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : '',
+    idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+      data.value = queryResult.data.laporanCheckInCheckOut
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -230,10 +130,10 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
+const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
-  posko: '',
+  idPosko: 0,
   idUid: 0,
   idUp3: 0
 })

src/utils/graphql.ts

@@ -660,5 +660,33 @@ export const queries = {
         `
       }
     }
+  },
+  cico: {
+    laporanCheckInCheckOut: gql`
+      query laporanCheckInCheckOut(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int
+        $idUid: Int
+        $idUp3: Int
+      ) {
+        laporanCheckInCheckOut(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+        ) {
+          user_regu
+          personil_yantek
+          jumlah_wo_gangguan_individual
+          avg_durasi_wo_gangguan_individual
+          avg_rpt_wo_gangguan_individual
+          avg_rct_wo_gangguan_individual
+          jumlah_wo_penugasan_khusus
+          avg_wo_penugasan_khusus
+        }
+      }
+    `
   }
 }