112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<script>
|
|
|
|
definePageMeta({
|
|
title: 'Data Pasien',
|
|
icon: 'mdi-account-injury-outline',
|
|
drawerIndex: 0,
|
|
})
|
|
const randomData = ref(generateRandomDataPasien(10));
|
|
|
|
const headers = [
|
|
{ text: 'No RM' },
|
|
{ text: 'Nama' },
|
|
{ text: 'tanggal Lahir' },
|
|
{ text: 'Alamat' },
|
|
{ text: 'No KTP' },
|
|
{ text: 'No JKN' },
|
|
{ text: 'Kelamin' },
|
|
{ text: 'Aksi' },
|
|
// { text: 'Aksi' },
|
|
];
|
|
|
|
|
|
const searchQuery = ref('');
|
|
const filteredData = computed(() => {
|
|
if (searchQuery.value.length >= 3) {
|
|
return randomData.value.filter(item =>
|
|
item.norm.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
|
item.no_ktp.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
|
item.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
|
|
);
|
|
}
|
|
return randomData.value;
|
|
});
|
|
|
|
console.log(randomData.value)
|
|
console.log(randomData.value.length)
|
|
</script>
|
|
<template>
|
|
<v-container>
|
|
<v-card>
|
|
<div class="py-4 px-3">
|
|
<div class="d-flex justify-space-between mb-6">
|
|
<h5 class="text-h5 ">Kunjungan Pasien</h5>
|
|
<div class="w-sm-25">
|
|
<v-text-field label="Cari" v-model="searchField" variant="outlined" density="compact" type="text"
|
|
hide-details color="primary"></v-text-field>
|
|
</div>
|
|
</div>
|
|
<v-row>
|
|
<div class="d-flex flex-wrap">
|
|
<!-- <v-col v-for="item in filteredData" :key="item.id" cols="12" md="4">
|
|
<v-lazy :min-height="200" :options="{ 'threshold': 1 }" transition="fade-transition">
|
|
<v-card>
|
|
<template v-slot:append>
|
|
<h3>{{ item.norm }}</h3>
|
|
</template>
|
|
|
|
<template v-slot:prepend>
|
|
<v-avatar size="50" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:user-circle-broken" class="text-secondary" height="36" />
|
|
</v-avatar>
|
|
</template>
|
|
|
|
<template v-slot:title>
|
|
<h4>{{ capitalizeEachWord(item.nama) }}</h4>
|
|
</template>
|
|
|
|
<template v-slot:subtitle>
|
|
<p>{{ item.no_ktp }}</p>
|
|
</template>
|
|
|
|
<template v-slot:text>
|
|
<p>{{ capitalizeEachWord(item.alamat) }}</p>
|
|
</template>
|
|
|
|
<template v-slot:actions>
|
|
<div class="d-flex justify-end">
|
|
<v-btn color="primary" @click="editItem(item.norm)">Ubah</v-btn>
|
|
<v-btn color="error" @click="deleteItem(item.norm)">Hapus</v-btn>
|
|
|
|
</div>
|
|
</template>
|
|
</v-card>
|
|
</v-lazy>
|
|
</v-col> -->
|
|
<div v-for="(data, i) in filteredData" :key="i">
|
|
<p>s</p>
|
|
|
|
</div>
|
|
<v-card class="mx-4">
|
|
<template v-slot:prepend>
|
|
left
|
|
</template>
|
|
<template v-slot:append>
|
|
right
|
|
</template>
|
|
</v-card>
|
|
<v-card>
|
|
<template v-slot:prepend>
|
|
left
|
|
</template>
|
|
<template v-slot:append>
|
|
right
|
|
</template>
|
|
</v-card>
|
|
</div>
|
|
</v-row>
|
|
</div>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|