160 lines
4.1 KiB
Vue
Executable File
160 lines
4.1 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() + 1)
|
|
const tahunPlaceholder = new Date().getFullYear().toString()
|
|
const bulanSelected = new Date().getMonth() + 1
|
|
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)
|
|
// 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>
|