defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Filters component to include a reset-form event in Transaksi, PencarianData, Anomali_LAPPKU, Anomali_LAPPGU, and Anomali_LAPPGP.vue files

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-04-06 00:29:48 +07:00
parent 9f3f8fcd88
commit b27972b0b5
8 changed files with 284 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Form/Filters.vue
View File

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

11
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
View File

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

10
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
View File

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

10
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
View File

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

177
src/components/Pages/Material/Daftar/Material_DGMYG.vue
View File

@ -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)
}
}

136
src/components/Pages/Material/Rekap/Material_RPM.vue
View File

@ -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)

2
src/components/Pages/PencarianData/PencarianData.vue
View File

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

2
src/components/Pages/Transaksi/Transaksi.vue
View File

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