From 05272270189a9479fdfc17814e2f69e00e71fd39 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Tue, 12 Mar 2024 20:54:46 +0700
Subject: [PATCH] feat: create pdf export in Daftar Gangguan Dialihkan ke Posko
 Lain

---
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  | 814 +++++++++++-------
 1 file changed, 510 insertions(+), 304 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 3b47fd3..40ed0b0 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -1,181 +1,342 @@
 <template>
-    <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => filters = value" />
-    </Filters>
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-    <div id="dataTable">
-        <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :remote-operations="true" :data-source="data"
-            key-expr="no_laporan" :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">
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxSelection mode="single" />
-            <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-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" />
-            <DxColumn css-class="custom-table-column !text-right" :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="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
-                caption="Pembuat Laporan" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
-                caption="Tgl Dialihkan" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" cell-template="data-waktu" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" cell-template="data-waktu" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko Asal" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
-                caption="Posko Tujuan" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko" cell-template="cellLeft" />
+  <div id="dataTable">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :remote-operations="true"
+      :data-source="data"
+      key-expr="no_laporan"
+      :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"
+    >
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxSelection mode="single" />
+      <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-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"
+      />
+      <DxColumn
+        css-class="custom-table-column !text-right"
+        :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="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data-waktu"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data-waktu"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_lama"
+        caption="Posko Asal"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_baru"
+        caption="Posko Tujuan"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="250"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="cellLeft"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_lama"
+        caption="Posko"
+        cell-template="cellLeft"
+      />
 
-            <template #cellCenter="{ data }">
-                <p class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </p>
-            </template>
+      <template #cellCenter="{ data }">
+        <p class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
 
-            <template #cellLeft="{ data }">
-                <p class="text-left cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </p>
-            </template>
+      <template #cellLeft="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
 
-            <template #data-waktu="{ data }">
-                <p class="cursor-pointer" @click="showData()">
-                    {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
-                </p>
-            </template>
-        </DxDataGrid>
+      <template #data-waktu="{ data }">
+        <p class="cursor-pointer" @click="showData()">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <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>
+        <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>
+        <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>
+        <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?.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?.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>
+        <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>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(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>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_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">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>
+        <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>
+        <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>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
+      </div>
     </div>
-
-    <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>
-                <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>
-                <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>
-                <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?.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?.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>
-                <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>
-                <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-        ? formatWaktu(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>
-                <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
-        ? formatWaktu(dataDetail?.durasi_recovery_time)
-        : '-'
-        " />
-            </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>
-                <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>
-                <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>
-                <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>
-                <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>
-                <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>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_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">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>
-                <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>
-                <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>
-                <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -183,13 +344,13 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { onMounted, ref } from 'vue'
@@ -203,6 +364,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
@@ -211,146 +373,190 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const closeDetail = () => showDetail.value = false
+const closeDetail = () => (showDetail.value = false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF({
-            orientation: 'landscape',
-            unit: 'mm',
-            format: 'F4'
-        })
+  if (e.format === 'pdf') {
+    const doc = new jsPDF({
+      orientation: 'landscape'
+    })
 
-        // Initialize page number
-        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'
-                ]
-            ],
-            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
-            ]),
-            styles: {
-                fontSize: 6,
-                cellWidth: 'wrap'
-            }
-        })
-        doc.setProperties({
-            title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-            subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
-        })
+    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'
+        ]
+      ],
+      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: 3
+      }
+    })
 
-        pageNumber.value++ // Increment the pageNumber
-        doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+    doc.save('Daftar Gangguan Dialihkan Ke Posko Lain.pdf')
 
-        // exportToPdf({
-        //   jsPDFDocument: doc,
-        //   component: e.component,
-        // }).then(() => {
-        // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+    // const doc = new jsPDF({
+    //     orientation: 'landscape',
+    //     unit: 'mm',
+    //     format: 'F4'
+    // })
+    // // Initialize page number
+    // 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'
+    //         ]
+    //     ],
+    //     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
+    //     ]),
+    //     styles: {
+    //         fontSize: 6,
+    //         cellWidth: 'wrap'
+    //     }
+    // })
+    // doc.setProperties({
+    //     title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+    //     subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
+    // })
+    // pageNumber.value++ // Increment the pageNumber
+    // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
-        // })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'DaftarGangguanDialihkanKePoskoLain.xlsx'
+        )
+      })
+    })
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(
-                    new Blob([buffer], { type: 'application/octet-stream' }),
-                    'DaftarGangguanDialihkanKePoskoLain.xlsx'
-                )
-            })
-        })
-
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 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 : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  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 : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.daftar.dataDialihkanKePoskoLain,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: 0,
-        idUid: 0,
-        idUp3: 0
-    }
+  queries.gangguan.daftar.dataDialihkanKePoskoLain,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
 )
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
+  const data = selectedRowsData[0]
+  dataDetail.value = data
 }
-const showData = () => showDetail.value = true
+const showData = () => (showDetail.value = true)
 const filters = ref()
 onMounted(() => {
-    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
 })
-</script>
\ No newline at end of file
+</script>