72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
// Components
|
|
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
|
|
|
// Types
|
|
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
|
|
|
// Configs
|
|
import { config } from './list-cfg.protocol'
|
|
|
|
const searchQuery = ref('')
|
|
|
|
function handleSearch(event: Event) {
|
|
const target = event.target as HTMLInputElement
|
|
searchQuery.value = target.value
|
|
// TODO: Implement search logic here
|
|
// You can emit an event to parent or filter data directly
|
|
}
|
|
|
|
interface Props {
|
|
data: any[]
|
|
paginationMeta: PaginationMeta
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
pageChange: [page: number]
|
|
}>()
|
|
|
|
function handlePageChange(page: number) {
|
|
emit('pageChange', page)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<!-- Title and Search Section -->
|
|
<div class="flex flex-col items-start">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div>
|
|
<h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
|
|
<p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative mt-10 w-72">
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
placeholder="Cari jadwal pemeriksaan..."
|
|
class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
@input="handleSearch"
|
|
/>
|
|
<span class="absolute right-3 top-2.5 text-gray-400">
|
|
<i class="ri-search-line"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<PubMyUiDataTable
|
|
v-bind="config"
|
|
:rows="data"
|
|
:skeleton-size="paginationMeta?.pageSize"
|
|
/>
|
|
<PaginationView
|
|
:pagination-meta="paginationMeta"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
</template>
|