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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Button from '@/components/Buttons/Button.vue';
+import Button from '@/components/Buttons/Button.vue'
-import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/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"
+        <Button
-          @on:click="() => emit('runReport')">
+          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>
 

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="[

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="[

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="[

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"
+    <DxDataGrid
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      ref="dataGridRef"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :allow-column-reordering="true"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+      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"
+      <DxPager
-        :show-info="true" :show-navigation-buttons="true" />
+        :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" />
+      <DxExport
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        :formats="['pdf', 'xlsx', 'document']"
-        cell-template="formatNumber" />
+        :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"
+      <DxColumn
-        caption="Nomor Gangguan" cell-template="formatText" />
+        css-class="custom-table-column"
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelapor"
+        :width="170"
-        caption="Nama Pelanggan" cell-template="formatText" />
+        alignment="center"
-      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="keterangan_pelapor"
+        data-field="no_laporan"
-        caption="Isi Laporan" cell-template="formatText" />
+        caption="Nomor Gangguan"
-      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="penyebab"
+        cell-template="formatText"
-        caption="Penyebab Gangguan" cell-template="formatText" />
+      />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_lapor"
+      <DxColumn
-        caption="Tgl Padam" cell-template="formatText" />
+        css-class="custom-table-column"
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_recovery"
+        :width="170"
-        caption="Tgl Nyala" cell-template="formatText" />
+        alignment="center"
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu"
+        data-field="nama_pelapor"
-        cell-template="formatText" />
+        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"
+        <DxColumn
-          cell-template="formatText" />
+          css-class="custom-table-column"
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
+          :width="170"
-          caption="Nama" cell-template="formatText" />
+          alignment="center"
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan_material"
+          data-field="media"
-          caption="Satuan" cell-template="formatText" />
+          caption="Sumber"
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume_material"
+          cell-template="formatText"
-          caption="Vol" 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 }">
@@ -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,
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Material/Daftar/Material_DGMYG'
-  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)
-
   }
 }
 

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"
+    <DxDataGrid
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      ref="dataGridRef"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :allow-column-reordering="true"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+      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"
+      <DxPager
-        :show-info="true" :show-navigation-buttons="true" />
+        :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" />
+      <DxExport
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        :formats="['pdf', 'xlsx', 'document']"
-        cell-template="formatNumber" />
+        :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"
+      <DxColumn
-        caption="Kode Material" cell-template="formatText" />
+        css-class="custom-table-column"
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
+        :width="170"
-        caption="Nama Material" cell-template="formatText" />
+        alignment="center"
-      <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan"
+        data-field="kode"
-        cell-template="formatText" />
+        caption="Kode Material"
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
+        cell-template="formatText"
-        caption="Sumber 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"
+        <DxColumn
-          :caption="i" css-class="custom-table-column" cell-template="formatNumber" />
+          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"
+      <DxColumn
-        cell-template="formatNumber" />
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Jumlah"
+        cell-template="formatNumber"
+      />
 
       <template #formatText="{ data }">
         <p class="text-left">
@@ -52,7 +118,11 @@
     </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)

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">

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>