138 lines
4.0 KiB
Vue
Executable File
138 lines
4.0 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import Select from '@/components/Select.vue';
|
|
import {
|
|
selectedUid,
|
|
selectedUp3Ulp,
|
|
fetchRegional,
|
|
fetchUid, itemsUid,
|
|
itemsUp3,
|
|
itemsUlp,
|
|
itemsRegional,
|
|
months,
|
|
years
|
|
} from './reference';
|
|
import { onMounted, ref } from 'vue';
|
|
import { getMonthName } from '@/utils/texts';
|
|
|
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
|
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
|
const regionalPlaceholder = 'Semua Regional'
|
|
const bulanPlaceholder = getMonthName(new Date().getMonth())
|
|
const tahunPlaceholder = new Date().getFullYear().toString()
|
|
const bulanSelected = new Date().getMonth()
|
|
const tahunSelected = new Date().getFullYear()
|
|
const uppp = ref({ id: 0, name: up3Placholder })
|
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
|
|
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
|
|
const regional = ref({ id: 0, name: regionalPlaceholder })
|
|
const emit = defineEmits(['update:filters'])
|
|
// Find index of January
|
|
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
|
|
console.log(bulanSelected)
|
|
// Remove January if found
|
|
if (bulanIndex !== -1) {
|
|
months.splice(bulanIndex, 1)
|
|
}
|
|
// Find index of current year
|
|
const tahunIndex = years.value.findIndex((year) => year.id === tahun.value.id)
|
|
if (tahunIndex !== -1) {
|
|
years.value.splice(tahunIndex, 1)
|
|
}
|
|
|
|
const data = ref({
|
|
regional: regional.value,
|
|
uid: uid.value,
|
|
up3: uppp.value,
|
|
ulp: ulp.value,
|
|
periode: '',
|
|
bulan: bulan.value,
|
|
tahun: tahun.value
|
|
})
|
|
|
|
const setRegional = (value: any) => {
|
|
regional.value = value
|
|
fetchUid()
|
|
// harusnya fetchUidWithRegional(value);
|
|
selectedUid(value)
|
|
uid.value = { id: 0, name: uidPlaceholder }
|
|
data.value.regional = value
|
|
}
|
|
|
|
const setUid = (value: any) => {
|
|
uid.value = value
|
|
selectedUid(value)
|
|
uppp.value = { id: 0, name: up3Placholder }
|
|
data.value.uid = value
|
|
}
|
|
|
|
const setUp3 = (value: any) => {
|
|
uppp.value = value
|
|
selectedUp3Ulp(value)
|
|
ulp.value = { id: 0, name: ulpPlaceholder }
|
|
data.value.up3 = value
|
|
}
|
|
|
|
const setUlp = (value: any) => {
|
|
ulp.value = value
|
|
selectedUp3Ulp(value)
|
|
data.value.ulp = value
|
|
}
|
|
|
|
const setMonth = (value: any) => {
|
|
bulan.value = value
|
|
data.value.bulan = value
|
|
console.log(data.value)
|
|
}
|
|
|
|
const setYear = (value: any) => {
|
|
tahun.value = value
|
|
data.value.tahun = value
|
|
}
|
|
|
|
onMounted(() => {
|
|
emit('update:filters', data.value)
|
|
fetchRegional()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Regional:</label>
|
|
|
|
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
|
|
|
<Select @update:selected="setUid($event)" :data="itemsUid" :selected="uid" :placeholder="uidPlaceholder" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
|
|
|
<Select @update:selected="setUp3($event)" :selected="uppp" :data="itemsUp3" :placeholder="up3Placholder" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
|
|
|
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Periode</label>
|
|
|
|
<div class="grid grid-cols-2 gap-x-2">
|
|
<Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
|
|
<Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|