fix: default month in select month

This commit is contained in:
kur0nek-o
2024-04-17 09:19:06 +07:00
parent 8c95193cde
commit 0fd4b4e433

View File

@ -1,26 +1,27 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import Select from '@/components/Select.vue'
import {
selectedUid,
selectedUp3Ulp,
fetchRegional,
fetchUid, itemsUid,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp,
itemsRegional,
months,
years
} from './reference';
import { onMounted, ref } from 'vue';
import { getMonthName } from '@/utils/texts';
} 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 bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
const tahunPlaceholder = new Date().getFullYear().toString()
const bulanSelected = new Date().getMonth()
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 })
@ -103,35 +104,57 @@ onMounted(() => {
<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" />
<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" />
<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" />
<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" />
<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="setMonth($event)"
:data="months"
:placeholder="bulanPlaceholder"
/>
<Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
</div>
</div>
</div>
</template>