From b27972b0b507ede0002d6578f8bf7a4321f95bab Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 6 Apr 2024 00:29:48 +0700
Subject: [PATCH] Refactor Filters component to include a reset-form event in
 Transaksi, PencarianData, Anomali_LAPPKU, Anomali_LAPPGU, and
 Anomali_LAPPGP.vue files

---
 src/components/Form/Filters.vue               |  20 +-
 .../Pages/Anomali/Gangguan/Anomali_LAPPGP.vue |  11 +-
 .../Pages/Anomali/Gangguan/Anomali_LAPPGU.vue |  10 +-
 .../Pages/Anomali/Keluhan/Anomali_LAPPKU.vue  |  10 +-
 .../Pages/Material/Daftar/Material_DGMYG.vue  | 177 +++++++++++++-----
 .../Pages/Material/Rekap/Material_RPM.vue     | 136 +++++++++++---
 .../Pages/PencarianData/PencarianData.vue     |   2 +-
 src/components/Pages/Transaksi/Transaksi.vue  |   2 +-
 8 files changed, 284 insertions(+), 84 deletions(-)

diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
index 6c51262..02fc36c 100755
--- a/src/components/Form/Filters.vue
+++ b/src/components/Form/Filters.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Button from '@/components/Buttons/Button.vue';
-import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue';
+import Button from '@/components/Buttons/Button.vue'
+import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
 
 defineProps({
   reportButton: {
@@ -20,12 +20,22 @@ const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
 
     <div class="flex justify-end px-4 py-3 filter-footer rounded-b-2xl bg-primary-50">
       <div class="flex flex-wrap gap-3 filter-buttons">
-        <Button @on:click="() => emit('resetForm')" label="Ulangi" style-type="outline" class-name="bg-white !text-xs">
+        <Button
+          @on:click="() => emit('resetForm')"
+          label="Ulangi"
+          style-type="outline"
+          class-name="bg-white !text-xs"
+        >
           <PhArrowsCounterClockwise size="16" class="ml-1" weight="regular" />
         </Button>
 
-        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white !text-xs"
-          @on:click="() => emit('runReport')">
+        <Button
+          v-if="reportButton"
+          label="Lihat Laporan"
+          style-type="outline"
+          class-name="bg-white !text-xs"
+          @on:click="() => emit('runReport')"
+        >
           <PhFileText size="16" class="ml-1" weight="regular" />
         </Button>
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 5036b84..b43e5c7 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -1,5 +1,14 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
+    @run-search="() => filterData(filters)"
+    @reset-form="
+      () => {
+        data = []
+        dataSub = []
+      }
+    "
+    class="mb-4"
+  >
     <Type4
       @update:filters="(value) => (filters = value)"
       :jenis-laporan="[
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index c9854c0..61680e5 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -1,5 +1,13 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
+    @run-search="() => filterData(filters)"
+    @reset-form="
+      () => {
+        data = []
+      }
+    "
+    class="mb-4"
+  >
     <Type4
       @update:filters="(value) => (filters = value)"
       :jenis-laporan="[
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index 4244652..20bbb4c 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -1,5 +1,13 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
+    @run-search="() => filterData(filters)"
+    @reset-form="
+      () => {
+        data = []
+      }
+    "
+    class="mb-4"
+  >
     <Type4
       @update:filters="(value) => (filters = value)"
       :jenis-laporan="[
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index bdc98ac..256c646 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -1,46 +1,140 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid 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"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <DxDataGrid
+      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"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[20, 50, 100]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" :width="50" alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="formatNumber" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="formatNumber"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="no_laporan"
-        caption="Nomor Gangguan" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelanggan" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="keterangan_pelapor"
-        caption="Isi Laporan" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="penyebab"
-        caption="Penyebab Gangguan" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Padam" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Nyala" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu"
-        cell-template="formatText" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="Nomor Gangguan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelanggan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="300"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Isi Laporan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="300"
+        alignment="center"
+        data-field="penyebab"
+        caption="Penyebab Gangguan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Padam"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Nyala"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="regu"
+        caption="Regu"
+        cell-template="formatText"
+      />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="media" caption="Sumber"
-          cell-template="formatText" />
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
-          caption="Nama" cell-template="formatText" />
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan_material"
-          caption="Satuan" cell-template="formatText" />
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume_material"
-          caption="Vol" cell-template="formatText" />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="media"
+          caption="Sumber"
+          cell-template="formatText"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="nama_material"
+          caption="Nama"
+          cell-template="formatText"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="satuan_material"
+          caption="Satuan"
+          cell-template="formatText"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="volume_material"
+          caption="Vol"
+          cell-template="formatText"
+        />
       </DxColumn>
 
       <template #formatText="{ data }">
@@ -52,12 +146,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right">
           {{
-    isNumber(data.text)
-      ? data.column.caption == '%'
-        ? formatPercentage(data.text)
-        : formatNumber(data.text)
-      : data.text
-  }}
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
     </DxDataGrid>
@@ -144,9 +238,7 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import { exportToPDF, exportToXLSX,
-  exportToDOCX
- } from '@/report/Material/Daftar/Material_DGMYG'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Material/Daftar/Material_DGMYG'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -243,7 +335,6 @@ const onExporting = (e: any) => {
     exportToXLSX(reportMeta, e)
   } else {
     exportToDOCX(reportMeta, data)
-
   }
 }
 
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index d1ae8ef..eccff33 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -1,36 +1,102 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid 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"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <DxDataGrid
+      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"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[20, 50, 100]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" :width="50" alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="formatNumber" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="formatNumber"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode"
-        caption="Kode Material" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
-        caption="Nama Material" cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan"
-        cell-template="formatText" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
-        caption="Sumber Material" cell-template="formatText" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="kode"
+        caption="Kode Material"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_material"
+        caption="Nama Material"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="120"
+        alignment="center"
+        data-field="satuan"
+        caption="Satuan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="sumber_material"
+        caption="Sumber Material"
+        cell-template="formatText"
+      />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-          :caption="i" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn
+          v-for="i in 31"
+          :width="150"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="total" caption="Jumlah"
-        cell-template="formatNumber" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Jumlah"
+        cell-template="formatNumber"
+      />
 
       <template #formatText="{ data }">
         <p class="text-left">
@@ -41,18 +107,22 @@
       <template #formatNumber="{ data }">
         <p class="text-right">
           {{
-    isNumber(data.text)
-      ? data.column.caption == '%'
-        ? formatPercentage(data.text)
-        : formatNumber(data.text)
-      : data.text
-  }}
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Pemakaian Material" @on-close="closeDialog">
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Pemakaian Material"
+    @on-close="closeDialog"
+  >
     <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">Kode Material:</h3>
@@ -110,7 +180,11 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Material/Rekapitulasi/Material_RPM'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Material/Rekapitulasi/Material_RPM'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 58534c8..d8b2336 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type15 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index fe0b775..f8d1fbe 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -26,7 +26,7 @@
     </button>
   </div>
 
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type17 @update:filters="(value) => (filters = value)" />
   </Filters>