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

Refactor form filters in multiple components

Browse Source
This commit is contained in:
Eko Haryadi 2024-02-23 17:41:55 +07:00
parent f7d8cc102a
commit 21abb95623
10 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Form/FiltersType/Type1.vue
View File

@ -76,12 +76,9 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
"
/>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

10
src/components/Form/FiltersType/Type10.vue
View File

@ -18,13 +18,13 @@ import InputNumber from '@/components/Form/InputNumber.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
up3: up3.value,
posko: ulp.value,
periode: '',
minJmlLapor: 1,
@ -33,12 +33,12 @@ const data = ref({
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
up3.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
@ -78,6 +78,7 @@ onMounted(() => {
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
@ -90,6 +91,7 @@ onMounted(() => {
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:selected="ulp"
:placeholder="ulpPlaceholder"
/>
</div>

10
src/components/Form/FiltersType/Type11.vue
View File

@ -19,7 +19,7 @@ import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
@ -36,7 +36,7 @@ const sla = [
];
const data = ref({
uid: uid.value,
up3: uppp.value,
up3: up3.value,
posko: ulp.value,
periode: '',
minTime: 1,
@ -45,12 +45,12 @@ const data = ref({
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
up3.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
@ -106,7 +106,7 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

2
src/components/Form/FiltersType/Type13.vue
View File

@ -53,7 +53,7 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

32
src/components/Form/FiltersType/Type18.vue
View File

@ -4,15 +4,33 @@ import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
fetchUid();
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Posko';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: "", name: poskoPlaceholder });
const emit = defineEmits(['update:filters'])
const jenisTransakasi = [
{ id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
{ id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM', },
{ id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM', },
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev' },
]
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
periode: '',
jenisTransaksi: [],
group: 1
})
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
@ -25,14 +43,13 @@ const jenisTransakasi = [
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
@ -46,6 +63,9 @@ const jenisTransakasi = [
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

4
src/components/Form/FiltersType/Type3.vue
View File

@ -56,13 +56,13 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

4
src/components/Form/FiltersType/Type6.vue
View File

@ -56,13 +56,13 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

4
src/components/Form/FiltersType/Type7.vue
View File

@ -100,13 +100,13 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

4
src/components/Pages/Gangguan/Table_5.vue
View File

@ -54,7 +54,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
@ -103,7 +103,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
idUp3: 0,
})
const filterData = (params: any) => {
const { posko, uid, up3 } = params;
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),

2
src/components/Pages/Keluhan/Table_21.vue
View File

@ -59,7 +59,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,