Refactor Type4.vue component

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

@@ -1,92 +1,159 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
-      Laporan Pengaduan PLN Mobile
-    </h1>
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="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">
+  <DxDataGrid
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :data-source="data"
+    :show-column-lines="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 :position="position" :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
     <DxColumnFixing :enabled="true" />
 
-    <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-      css-class="custom-table-column" />
-    <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
-      css-class="custom-table-column" />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_posko"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_petugas"
+      caption="Nama Petugas"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-      <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
-          css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        caption="(PLN Mobile, CC123, DLL)"
+        css-class="custom-table-column"
+      >
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_wo"
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column">
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
-          data-type="number" caption="b" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
-          data-type="number" caption="c" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
-          caption="d=b+c" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="d=b+c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
-          data-type="number" caption="e=b/a" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="e=b/a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
-          data-type="number" caption="f=c/a" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="f=c/a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali" data-type="number"
-          caption="g=e+f" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="g=e+f"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-
   </DxDataGrid>
 </template>
 
 <script setup lang="ts">
-defineProps({
-  filtersDetail: {
-    type: Object as PropType<any>,
-    required: true
-  }
-})
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { ref, watch, type PropType } from 'vue'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
-const data = ref<any[]>([])
-const filtersDetail = ref({}); // Declare the 'filters' variable
-
-// watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
-//     filterData(newValue)
-// }, { immediate: true })
+import { computed } from 'vue'
+const props = defineProps({
+  data: Array as () => any[]
+})
+const data = computed(() => props.data)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -95,7 +162,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -106,7 +173,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -121,69 +188,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-
-const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
-  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
-  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
-    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      jenisLaporan :$jenisLaporan
-      idUid: $idUid
-      idUp3: $idUp3
-      posko: $posko
-
-    ) {
-        nama_petugas
-        nama_posko
-        persen_penyelesaian_petugas_anomali
-        persen_penyelesaian_petugas_anomali_cc_123
-        persen_penyelesaian_petugas_anomali_pln_mobile
-        total_penyelesaian_petugas_anomali
-        total_penyelesaian_petugas_anomali_cc_123
-        total_penyelesaian_petugas_anomali_pln_mobile
-        total_wo
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    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),
-    posko: posko ? posko.id : "",
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item,
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-</script>
+</script>