munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sep): update filter function

Browse Source
This commit is contained in:
riefive
2025-09-11 13:33:26 +07:00
parent bbb0ac03d4
commit 9638f208f1
4 changed files with 92 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/sep/entry-form.vue
+12 -4
View File
@@ -13,7 +13,7 @@ import { Textarea } from '~/components/pub/ui/textarea'
import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
const emit = defineEmits<{
(e: "event", value: any): void
(e: 'event', value: any): void
}>()
const items = [
@@ -92,7 +92,11 @@ const onSubmit = handleSubmit((values) => {
<!-- Data Pasien -->
<div class="flex items-center gap-2">
<h3 class="text-lg font-semibold">Data Pasien</h3>
<Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50" @click="emit('event', 'search-patient')">
<Button
variant="outline"
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
@click="emit('event', 'search-patient')"
>
<Icon name="i-lucide-search" class="h-5 w-5" />
Cari Pasien
</Button>
@@ -134,7 +138,11 @@ const onSubmit = handleSubmit((values) => {
<Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
<div class="flex gap-2">
<Input class="flex-1" v-model="noSuratKontrol" />
<Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
<Button
variant="outline"
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
@click="emit('event', 'search-letter')"
>
<Icon name="i-lucide-search" class="h-5 w-5" />
Cari Data
</Button>
@@ -259,7 +267,7 @@ const onSubmit = handleSubmit((values) => {
>
<Icon name="i-lucide-eye" class="h-5 w-5" />Preview
</Button>
<Button type="submit" class="h-[40px] text-white min-w-[120px]">
<Button type="submit" class="h-[40px] min-w-[120px] text-white">
<Icon name="i-lucide-save" class="h-5 w-5" />
Simpan
</Button>
app/components/app/sep/search-letter.vue
+32 -29
View File
@@ -14,11 +14,14 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
const props = defineProps<{
open: boolean
patients: Array<{
ktp: string
rm: string
bpjs: string
nama: string
letters: Array<{
noSurat: string
tglRencana: string
noSep: string
namaPasien: string
noBpjs: string
klinik: string
dokter: string
}>
selected: string
}>()
@@ -30,15 +33,11 @@ const emit = defineEmits<{
}>()
const search = ref('')
const filteredPatients = computed(() =>
props.patients.filter(
(p) =>
p.ktp.includes(search.value) ||
p.rm.includes(search.value) ||
p.bpjs.includes(search.value) ||
p.nama.toLowerCase().includes(search.value.toLowerCase()),
),
)
const filteredLetters = computed(() => {
const letters = props.letters || []
return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
})
function saveSelection() {
emit('save')
@@ -49,16 +48,16 @@ function saveSelection() {
<template>
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
<DialogTrigger as-child>
<Button>Cari Pasien</Button>
<Button>Cari No. Surat Kontrol</Button>
</DialogTrigger>
<DialogContent class="max-w-3xl">
<DialogContent class="max-w-[50%]">
<DialogHeader>
<DialogTitle>Cari Pasien</DialogTitle>
<DialogTitle>Cari No. Surat Kontrol</DialogTitle>
</DialogHeader>
<!-- Input Search -->
<div class="mb-2 max-w-[50%]">
<Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
<Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
</div>
<!-- Table -->
@@ -67,25 +66,29 @@ function saveSelection() {
<thead class="bg-gray-100">
<tr class="text-left">
<th class="p-2"></th>
<th class="p-2">NO. KTP</th>
<th class="p-2">NO. RM</th>
<th class="p-2">NO. KARTU BPJS</th>
<th class="p-2">NO. SURAT KONTROL</th>
<th class="p-2">TGL RENCANA KONTROL</th>
<th class="p-2">NO. SEP</th>
<th class="p-2">NAMA PASIEN</th>
<th class="p-2">NO. KARTU BPJS</th>
<th class="p-2">KLINIK</th>
<th class="p-2">DOKTER</th>
</tr>
</thead>
<tbody class="font-normal">
<tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
<tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
<td class="p-2">
<RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
<RadioGroupItem :id="p.ktp" :value="p.ktp" />
<RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
</RadioGroup>
</td>
<td class="p-2">{{ p.ktp }}</td>
<td class="p-2">{{ p.rm }}</td>
<td class="p-2">{{ p.bpjs }}</td>
<td class="p-2">
{{ p.nama }}
</td>
<td class="p-2">{{ p.noSurat }}</td>
<td class="p-2">{{ p.tglRencana }}</td>
<td class="p-2">{{ p.noSep }}</td>
<td class="p-2">{{ p.namaPasien }}</td>
<td class="p-2">{{ p.noBpjs }}</td>
<td class="p-2">{{ p.klinik }}</td>
<td class="p-2">{{ p.dokter }}</td>
</tr>
</tbody>
</table>
app/components/app/sep/search-patient.vue
+6 -7
View File
@@ -30,15 +30,16 @@ const emit = defineEmits<{
}>()
const search = ref('')
const filteredPatients = computed(() =>
props.patients.filter(
const filteredPatients = computed(() => {
const patients = props.patients || []
return patients.filter(
(p) =>
p.ktp.includes(search.value) ||
p.rm.includes(search.value) ||
p.bpjs.includes(search.value) ||
p.nama.toLowerCase().includes(search.value.toLowerCase()),
),
)
)
})
function saveSelection() {
emit('save')
@@ -83,9 +84,7 @@ function saveSelection() {
<td class="p-2">{{ p.ktp }}</td>
<td class="p-2">{{ p.rm }}</td>
<td class="p-2">{{ p.bpjs }}</td>
<td class="p-2">
{{ p.nama }}
</td>
<td class="p-2">{{ p.nama }}</td>
</tr>
</tbody>
</table>
app/components/content/sep/entry.vue
+42 -22
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
const isLoading = ref(false)
const open = ref(false)
const selected = ref('3456512345678880')
const openPatient = ref(false)
const openLetter = ref(false)
const selectedPatient = ref('3456512345678880')
const selectedLetter = ref('SK22334442')
const patients = [
{
@@ -20,35 +21,43 @@ const patients = [
const letters = [
{
noSurat: "SK22334442",
tglRencana: "12 Agustus 2025",
noSep: "SEP3232332",
namaPasien: "Ahmad Baidowi",
noBpjs: "33442331214",
klinik: "Penyakit Dalam",
dokter: "dr. Andi Prasetyo, Sp.PD-KHOM",
noSurat: 'SK22334442',
tglRencana: '12 Agustus 2025',
noSep: 'SEP3232332',
namaPasien: 'Ahmad Baidowi',
noBpjs: '33442331214',
klinik: 'Penyakit Dalam',
dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
},
{
noSurat: "SK99120039",
tglRencana: "12 Agustus 2025",
noSep: "SEP4443232",
namaPasien: "Bian Maulana",
noBpjs: "33442367656",
klinik: "Gigi",
dokter: "dr. Achmad Suparjo",
noSurat: 'SK99120039',
tglRencana: '12 Agustus 2025',
noSep: 'SEP4443232',
namaPasien: 'Bian Maulana',
noBpjs: '33442367656',
klinik: 'Gigi',
dokter: 'dr. Achmad Suparjo',
},
]
function handleSavePatient() {
console.log('Pasien dipilih:', selectedPatient.value)
}
function handleSave() {
console.log('Pasien dipilih:', selected.value)
function handleSaveLetter() {
console.log('Letter dipilih:', selectedLetter.value)
}
function handleEvent(value: string) {
if (value === 'search-patient') {
open.value = true
openPatient.value = true
return
} else if (value === 'back') {
}
if (value === 'search-letter') {
openLetter.value = true
return
}
if (value === 'back') {
navigateTo('/bpjs/sep')
}
}
@@ -60,5 +69,16 @@ function handleEvent(value: string) {
<span class="font-semibold">Tambah</span> SEP
</div>
<AppSepEntryForm @event="handleEvent" />
<AppSepSearchPatient v-model:open="open" v-model:selected="selected" :patients="patients" @save="handleSave" />
<AppSepSearchPatient
v-model:open="openPatient"
v-model:selected="selectedPatient"
:patients="patients"
@save="handleSavePatient"
/>
<AppSepSearchLetter
v-model:open="openLetter"
v-model:selected="selectedLetter"
:letters="letters"
@save="handleSaveLetter"
/>
</template>