Refactor component structure and add BufferDialog component

src/components/Pages/Transaksi/Transaksi.vue

@@ -7,6 +7,7 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -118,7 +119,7 @@
       />
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -142,13 +143,17 @@ import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const loading = ref(false)
+const loadingData = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -182,9 +187,21 @@ const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const showDetail = () => {
   clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onRowPrepared = (e: any) => {
@@ -199,53 +216,41 @@ const onRowPrepared = (e: any) => {
   }
 }
 
-const data = [
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  }
-]
-
 const filters = ref()
-const filterData = (filters: any) => {
-  console.log(filters)
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, idUid, idUp3 } = params
+  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),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(queries.transaksi.transaksiAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 </script>