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

Fix select options in Filters.vue component

Browse Source
This commit is contained in:
probdg 2024-02-09 18:37:00 +07:00
parent 9f9c1423ab
commit 9cd11db6e6
3 changed files with 17 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
<!-- ss -->
<script setup lang="ts">
// components
import Button from '@/components/Button.vue'

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

@ -4,24 +4,21 @@ import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchData,
items,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
// fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const uppp = ref({ id: 0, name: uppPlaceholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
@ -54,56 +51,35 @@ const setPosko = (value: any) => {
}
onMounted(() => {
fetchUid();
emit('update:filters', data.value)
})
</script>
<template>
<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 Induk Distribusi/Wilayah:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select
:data="items"
@update:selected="setUid($event)"
:placeholder="uidPlaceholder"
:selected="uid"
/>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
</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 Pelaksanaan Pelayanan Pelanggan:</label
>
<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"
:selected="uppp"
:placeholder="uppPlaceholder"
/>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
</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"
:selected="posko"
: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">
<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>

12
src/components/Form/FiltersType/reference.ts
View File

@ -30,18 +30,17 @@ const years = ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({ id: year - i, name: year - i })
}
const timeout = ref()
const items = ref<Item[]>([]);
const itemsUid = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
const itemsUlp = ref<Item[]>([]);
const itemsRegional = ref<Item[]>([]);
const itemsMedia = ref<Item[]>([]);
// Fetch data from the API using Axios
const fetchData = async () => {
const fetchUid = async () => {
try {
const res = await getUid()
items.value = res.data.map((item: any) => (
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
@ -82,8 +81,6 @@ const fetchDataUlp = async (up3: number) => {
}
}
const fetchDataPosko = async (up3: number) => {
clearTimeout(timeout.value)
timeout.value = setTimeout(async () => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => (
@ -95,7 +92,6 @@ const fetchDataPosko = async (up3: number) => {
} catch (error) {
console.error('Error fetching data:', error);
}
}, 300);
};
const fetchMedia = () => {
itemsMedia.value = [
@ -152,4 +148,4 @@ const selectedUlp = (value: any) => {
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };