77 lines
2.0 KiB
Vue
Executable File
77 lines
2.0 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import InputWithFilter from '../InputWithFilter.vue'
|
|
import DatePicker from '@/components/DatePicker.vue'
|
|
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
|
import { onMounted, ref } from 'vue'
|
|
const type = ref('Gangguan')
|
|
const keyword = ref('')
|
|
const reportType = [
|
|
{ id: 1, title: 'Nomor Laporan' },
|
|
{ id: 2, title: 'Nama Pelapor' },
|
|
{ id: 3, title: 'No Telepon' },
|
|
{ id: 4, title: 'Alamat' },
|
|
{ id: 5, title: 'Pembuat' }
|
|
]
|
|
const searchBy = ref<any>(reportType[0].title)
|
|
const emit = defineEmits(['update:filters'])
|
|
|
|
const data = ref({
|
|
type: type.value,
|
|
keyword: keyword.value,
|
|
searchBy: searchBy.value,
|
|
periode: ''
|
|
})
|
|
|
|
const changeKeyword = (value: string) => {
|
|
keyword.value = value
|
|
data.value.keyword = value
|
|
}
|
|
|
|
const changeReportTypeSelected = (id: any) => {
|
|
searchBy.value = reportType.find((item) => item.id == id)?.title
|
|
data.value.searchBy = searchBy.value
|
|
}
|
|
|
|
const setPengaduan = (value: any) => {
|
|
type.value = value.title
|
|
data.value.type = value.title
|
|
}
|
|
|
|
onMounted(() => {
|
|
emit('update:filters', data.value)
|
|
})
|
|
</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">Jenis Pengaduan:</label>
|
|
|
|
<InlineRadioGroup
|
|
@update:group-value="setPengaduan"
|
|
:radio-items="[
|
|
{ id: 1, title: 'Gangguan', checked: true },
|
|
{ id: 2, title: 'Keluhan' }
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Cari Report Number:</label>
|
|
|
|
<InputWithFilter
|
|
placeholder="Cari Report"
|
|
:filters="reportType"
|
|
@update:keyword="changeKeyword"
|
|
@update:filters="changeReportTypeSelected"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2" v-if="searchBy != 'Nomor Laporan'">
|
|
<label class="filter-input-label">Periode Tanggal:</label>
|
|
|
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
|
</div>
|
|
</div>
|
|
</template>
|