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

Update date picker in Form FiltersType components

Browse Source
This commit is contained in:
probdg
2024-02-09 19:26:49 +07:00
parent 01e66847bf
commit 945914a48b
24 changed files with 379 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,52 @@
<!-- ss -->
<script setup lang="ts">
// components
import Button from '@/components/Button.vue';
import { useSearchStore } from '@/stores/filtersAction';
// icons
import {
PhArrowsCounterClockwise,
PhFileText,
PhMagnifyingGlass
} from '@phosphor-icons/vue';
const cariButton = useSearchStore()
defineProps({
reportButton: {
type: Boolean,
default: false
}
})
// components
import Button from '@/components/Button.vue'
import { useSearchStore } from '@/stores/filtersAction'
// icons
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
const cariButton = useSearchStore()
defineProps({
reportButton: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['runSearch'])
</script>
<template>
<div class="filters rounded-2xl">
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
<slot></slot>
</form>
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-buttons flex gap-3 flex-wrap">
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
<Button
@click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
label="Ulangi"
style-type="outline"
class-name="bg-white"
>
<PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
</Button>
<Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
<Button
v-if="reportButton"
label="Lihat Laporan"
style-type="outline"
class-name="bg-white"
>
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
<Button @on:click="() => emit('runSearch')" label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
</Button>
</div>
</div>
</div>
</template>
</template>

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

@ -1,58 +1,98 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { ref } from '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 });
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
itemsUid,
itemsUp3,
itemsPosko,
fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
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,
posko: posko.value,
periode: ''
})
watch(data.value, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: uppPlaceholder };
};
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: uppPlaceholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Posko(value);
posko.value = { id: 0, name: poskoPlaceholder };
};
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value;
selectedPosko(value);
};
posko.value = value
selectedPosko(value)
data.value.posko = value
}
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 @update:selected="setUid($event)" :data="items"
:placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>
</template>

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

@ -29,7 +29,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -29,7 +29,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type12.vue
View File

@ -30,7 +30,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -30,7 +30,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type14.vue
View File

@ -29,6 +29,9 @@
<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>

5
src/components/Form/FiltersType/Type15.vue
View File

@ -20,6 +20,9 @@
<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>

5
src/components/Form/FiltersType/Type16.vue
View File

@ -35,6 +35,9 @@ fetchMedia();
<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>

5
src/components/Form/FiltersType/Type17.vue
View File

@ -8,7 +8,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
fetchData();
const departments = [
@ -20,7 +20,7 @@ const departments = [
<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 @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

8
src/components/Form/FiltersType/Type2.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@ -19,7 +18,7 @@ const setRegional = (value: any) => {
};
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
selectedUid(value);
uppp.value = { id: 0, name: up3Placholder };
};
@ -33,6 +32,7 @@ const setUlp = (value: any) => {
ulp.value = value;
selectedUp3Ulp(value);
};
</script>
<template>
@ -45,7 +45,7 @@ const setUlp = (value: any) => {
<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 @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@ -33,7 +33,7 @@ const setUlp = (value: any) => {
<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 @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -51,6 +51,9 @@ const setUlp = (value: any) => {
<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>

5
src/components/Form/FiltersType/Type4.vue
View File

@ -37,6 +37,9 @@
<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>

5
src/components/Form/FiltersType/Type5.vue
View File

@ -27,6 +27,9 @@
<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>

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

@ -2,7 +2,7 @@
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
<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 @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -61,7 +61,10 @@ import { ref } from 'vue';
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type8.vue
View File

@ -21,6 +21,9 @@
<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>

5
src/components/Form/FiltersType/Type9.vue
View File

@ -28,7 +28,10 @@
<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>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -1,11 +1,10 @@
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
import { useUlpStore } from '@/stores/ulp';
import { useUp3Store } from '@/stores/up3';
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
import { ref } from 'vue'
interface Item {
id: any;
name: any;
@ -30,73 +29,13 @@ 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 () => {
try {
const res = await getUid()
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 fetchDataUlp = async (up3: number) => {
try {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => (
{
id: item.name,
name: item.name,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}
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) => (
{
id: item.nama,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}, 300);
};
const fetchMedia = () => {
itemsMedia.value = [
{ id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile"},
@ -115,6 +54,62 @@ const fetchMedia = () => {
]
}
// Fetch data from the API using Axios
const fetchUid = async () => {
try {
const res = await getUid()
itemsUid.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 fetchDataUlp = async (up3: number) => {
try {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error)
}
}
const fetchDataPosko = async (up3: number) => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error)
}
}
const fetchRegional = () => {
itemsRegional.value = [
{ id: "1", name: "Wilayah Sumatera" },
{ id: "2", name: "Wilayah Jawa Bali" },
{ id: "3", name: "Wilayah Kalimantan" },
{ id: "4", name: "Wilayah Sulawesi" },
{ id: "5", name: "Wilayah Nusa Tenggara" },
{ id: "6", name: "Wilayah Maluku Papua" },
]
}
const fetchStatus = (data : any) => {
const status = [
@ -132,24 +127,25 @@ const fetchStatus = (data : any) => {
return name;
}
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
useRegionStore().setData(value.id)
fetchDataUp3(value.id)
}
const selectedUp3Posko = (value: any) => {
useUp3Store().setData(value.id);
fetchDataPosko(value.id);
if (value.id != 0) {
useUp3Store().setData(value.id)
fetchDataPosko(value.id)
}
}
const selectedUp3Ulp = (value: any) => {
useUp3Store().setData(value.id);
fetchDataUlp(value.id);
useUp3Store().setData(value.id)
fetchDataUlp(value.id)
}
const selectedPosko = (value: any) => {
usePostsStore().setData(value.id);
usePostsStore().setData(value.id)
}
const selectedUlp = (value: any) => {
useUlpStore().setData(value.id);
useUlpStore().setData(value.id)
}
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp,fetchRegional, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };