defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor InputWithFilter and Type15 components

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-12 19:14:51 +07:00
parent d4ad845ac3
commit 7c284a4fea
4 changed files with 5036 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Form/FiltersType/Type15.vue
View File

@ -1,21 +1,44 @@
<script setup lang="ts">
import InputWithFilter from '../InputWithFilter.vue';
import DatePicker from '@/components/DatePicker.vue';
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue';
import { ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
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({
uid: uid.value,
up3: uppp.value,
ulp: ulp.value,
periode: '',
group: 1
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>
@ -24,20 +47,30 @@ const data = ref({
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Pengaduan:</label>
<InlineRadioGroup :radio-items="[{ id: 1, title: 'Gangguan', checked: true }, { id: 2, title: 'Keluhan' }]" />
<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="[{ id: 1, title: 'Nama Pelapor' }]" />
<InputWithFilter
placeholder="Cari Report"
:filters="reportType"
@update:keyword="changeKeyword"
@update:filters="changeReportTypeSelected"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<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" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

30
src/components/Form/InputWithFilter.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts">
import { PhMagnifyingGlass } from '@phosphor-icons/vue';
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
import { type PropType } from 'vue'
interface FilterItems {
id: number;
title: string;
id: number
title: string
}
const props = defineProps({
@ -25,29 +25,43 @@ const props = defineProps({
required: true
}
})
const emit = defineEmits(['update:keyword', 'update:filters'])
const setKeyword = (event: Event) => {
emit('update:keyword', (event.target as HTMLInputElement).value)
}
const setFilter = (event: Event) => {
emit('update:filters', (event.target as HTMLSelectElement).value)
}
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
</div>
<input
@input="setKeyword"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
type="text"
class="w-full px-4 py-2 pl-10 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
class="w-full px-4 py-2 pl-10 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
/>
<div class="absolute inset-y-0 right-0 flex items-center">
<label for="filters" class="sr-only">filters</label>
<span class="block border border-gray-600 h-5"></span>
<span class="block h-5 border border-gray-600"></span>
<select
@change="setFilter"
id="filters"
name="filters"
class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
class="h-full py-0 pl-2 text-sm text-gray-900 bg-gray-200 border-transparent rounded-lg pr-7 focus:outline-0 focus:border-0 focus:ring-0"
>
<option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
<option :key="filter.id" :value="filter.id" v-for="filter in filters">
{{ filter.title }}
</option>
</select>
</div>
</div>