Add new store files and update table components

This commit is contained in:
probdg
2024-02-02 10:41:31 +07:00
parent a278bb353c
commit ecc64c7b61
26 changed files with 691 additions and 283 deletions

View File

@ -1,76 +1,8 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { getUid, getUp3,getPosko } from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
interface Item {
id: number;
name: any;
}
const items = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
// Fetch data from the API using Axios
const fetchData = async () => {
try {
const res = await getUid()
// console.log(res.data);
items.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataUp3 = async (uid: number) => {
try {
const res = await getUp3(uid)
itemsUp3.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataPosko = async (uppp: number) => {
try {
const res = await getPosko(uppp)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
}
const selectedUppp = (value: any) => {
useUp3Store().setData(value.id);
fetchDataPosko(value.id);
}
const selectedPosko = (value: any) => {
usePostsStore().setData(value.id);
}
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
fetchData();
</script>
<template>
@ -97,5 +29,4 @@ fetchData();
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
</div>
</template>
@/stores/up3
</template>

View File

@ -1,13 +1,15 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
fetchData();
</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>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,13 +17,13 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" 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 placeholder="Semua Posko" />
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

View File

@ -0,0 +1,72 @@
import { getUid, getUp3,getPosko } from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
interface Item {
id: number;
name: any;
}
const items = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
// Fetch data from the API using Axios
const fetchData = async () => {
try {
const res = await getUid()
// console.log(res.data);
items.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataUp3 = async (uid: number) => {
try {
const res = await getUp3(uid)
itemsUp3.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataPosko = async (uppp: number) => {
try {
const res = await getPosko(uppp)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
}
const selectedUppp = (value: any) => {
useUp3Store().setData(value.id);
fetchDataPosko(value.id);
}
const selectedPosko = (value: any) => {
usePostsStore().setData(value.id);
}
export { selectedUid, selectedUppp, selectedPosko ,fetchData , items, itemsUp3, itemsPosko};