Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj

src/components/Pages/Gangguan/Table_1.vue

@@ -1,11 +1,6 @@
 <template>
-  <Filters @run-search="() => {
-    filterData(filters)
-  }" class="mb-4">
-    <Type1 @update:filters="(value) => {
-      filters = value
-    }
-      " />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="dataTable">
@@ -71,132 +66,95 @@
   <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
-          No Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
         <InputText :readonly="true" :value="dataDetail?.no_laporan" 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">
-          Pembuat Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
         <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" 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 Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
         <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>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
         <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>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_response" 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>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_recovery" 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">
-          Durasi Response Time:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
-          Durasi Recovery Time:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
-          Posko Awal:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" 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">
-          Posko Tujuan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" 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">
-          Status:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
-          IDPEL/NO METER:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" 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">
-          Nama Pelapor:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_pelapor" 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">
-          Alamat Pelapor:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
         <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
-          Pembuat Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
         <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" 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">
-          Keterangan Pelapor:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
         <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" 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">
-          Sumber Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
-          Posko:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
-
   </DetailDialog>
 </template>
 
@@ -210,66 +168,96 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-  DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
-
-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 { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#dataTable' }
 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)
-const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
-const onExporting = (e: any) => {
 
+const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'mm',
-      format: 'F4',
+      format: 'F4'
     })
-    // Add title on each page
-    const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
 
     // Initialize page number
-    const pageNumber = ref(1);
+    const pageNumber = ref(1)
     autoTable(doc, {
-      head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+      head: [
+        [
+          'No Laporan',
+          'Pembuat Laporan',
+          'Tgl Lapor',
+          'Tgl Dialihkan',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Posko Awal',
+          'Posko Tujuan',
+          'Status',
+          'IDPEL/NO METER',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Sumber Lapor',
+          'Posko'
+        ]
+      ],
       startY: 10,
-      body: data.value.map((item) =>
-        [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+      body: data.value.map((item) => [
+        item.no_laporan,
+        item.pembuat_laporan,
+        item.waktu_lapor,
+        item.waktu_dialihkan,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.nama_posko_lama,
+        item.nama_posko_baru,
+        item.status_akhir,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.posko
+      ]),
       styles: {
         fontSize: 6,
         cellWidth: 'wrap'
-      },
-
-
+      }
     })
     doc.setProperties({
       title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-    });
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
+    })
 
-    pageNumber.value++; // Increment the pageNumber
+    pageNumber.value++ // Increment the pageNumber
     doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
     // exportToPdf({
@@ -289,7 +277,10 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'DaftarGangguanDialihkanKePoskoLain.xlsx'
+        )
       })
     })
 
@@ -332,8 +323,12 @@ 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),
+    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 : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0