Fix import statements and add prop for showPosko

This commit is contained in:
Dede Fuji Abdul 2024-03-19 14:22:28 +07:00
parent 071ec7510d
commit db39a55fa1
2 changed files with 25 additions and 10 deletions

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue'; import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'; import DatePicker from '@/components/DatePicker.vue'
import { import {
selectedUid, selectedUid,
selectedUp3Posko, selectedUp3Posko,
@ -9,8 +9,8 @@ import {
itemsUp3, itemsUp3,
itemsPosko, itemsPosko,
fetchUid fetchUid
} from './reference'; } from './reference'
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -26,6 +26,13 @@ const data = ref({
periode: '' periode: ''
}) })
defineProps({
showPosko: {
type: Boolean,
required: true
}
})
watch(data.value, (value) => { watch(data.value, (value) => {
emit('update:filters', value) emit('update:filters', value)
}) })
@ -68,14 +75,23 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label> <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" /> <Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3placeholder"
/>
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2" v-if="showPosko">
<label class="filter-input-label">Posko:</label> <label class="filter-input-label">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" <Select
:placeholder="poskoPlaceholder" /> @update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
@ -83,5 +99,4 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" /> <DatePicker @update:date-value="(value) => (data.periode = value)" />
</div> </div>
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" /> <Type1 @update:filters="(value) => (filters = value)" :showPosko="false" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid