82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogFooter,
|
|
} from '~/components/pub/ui/dialog'
|
|
import { Input } from '~/components/pub/ui/input'
|
|
|
|
const props = defineProps<{
|
|
open: boolean
|
|
histories: Array<{
|
|
no_sep: string
|
|
tgl_sep: string
|
|
no_rujukan: string
|
|
diagnosis: string
|
|
pelayanan: string
|
|
kelas: string
|
|
}>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:open', value: boolean): void
|
|
}>()
|
|
|
|
const search = ref('')
|
|
|
|
const filteredHistories = computed(() => {
|
|
const histories = props.histories || []
|
|
return histories.filter((p) => p.no_sep.includes(search.value))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
|
<DialogTrigger as-child></DialogTrigger>
|
|
<DialogContent class="max-w-[50%]">
|
|
<DialogHeader>
|
|
<DialogTitle>History SEP</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<!-- Input Search -->
|
|
<div class="mb-2 max-w-[50%]">
|
|
<Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="overflow-x-auto rounded-lg border">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-100">
|
|
<tr class="text-left">
|
|
<th class="p-2">NO. SEP</th>
|
|
<th class="p-2">TGL. SEP</th>
|
|
<th class="p-2">NO. RUJUKAN</th>
|
|
<th class="p-2">DIAGNOSIS AWAL</th>
|
|
<th class="p-2">JENIS PELAYANAN</th>
|
|
<th class="p-2">KELAS RAWAT</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="font-normal">
|
|
<tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
|
|
<td class="p-2">{{ p.no_sep }}</td>
|
|
<td class="p-2">{{ p.tgl_sep }}</td>
|
|
<td class="p-2">{{ p.no_rujukan }}</td>
|
|
<td class="p-2">{{ p.diagnosis }}</td>
|
|
<td class="p-2">{{ p.pelayanan }}</td>
|
|
<td class="p-2">{{ p.kelas }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<DialogFooter>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|