arie.bagus.2905/Web-Antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementasi komponen ke data pasien

Browse Source
This commit is contained in:
bagus-arie05
2025-08-28 15:08:52 +07:00
parent 89b36b7d1f
commit fc16b2bded
5 changed files with 253 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
components/TabelData.vue
View File

@@ -1,7 +1,8 @@
<!-- components/TabelData.vue -->
<template> <template>
<v-card-text> <v-card-text>
<!-- Title Section --> <!-- Title Section -->
<v-row no-gutters class="mb-3"> <v-row no-gutters class="mb-3" v-if="title">
<v-col cols="12"> <v-col cols="12">
<v-card-title class="text-subtitle-1 font-weight-bold pa-0" :class="{ 'red--text': title.includes('TERLAMBAT') }"> <v-card-title class="text-subtitle-1 font-weight-bold pa-0" :class="{ 'red--text': title.includes('TERLAMBAT') }">
{{ title }} {{ title }}
@@ -17,9 +18,11 @@
<v-select <v-select
v-model="itemsPerPage" v-model="itemsPerPage"
:items="[10, 25, 50, 100]" :items="[10, 25, 50, 100]"
density="default" density="compact"
variant="outlined"
hide-details hide-details
class="shrink" class="mx-2"
style="width: 80px;"
/> />
<span>entries</span> <span>entries</span>
</div> </div>
@@ -30,10 +33,10 @@
<span class="mr-2">Search:</span> <span class="mr-2">Search:</span>
<v-text-field <v-text-field
v-model="search" v-model="search"
label="Search"
hide-details hide-details
density="compact" density="compact"
style="min-width: 200px" variant="outlined"
style="width: 200px;"
/> />
</div> </div>
</v-col> </v-col>
@@ -41,12 +44,39 @@
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="paginatedItems" :items="filteredItems"
:items-per-page="itemsPerPage"
:search="search" :search="search"
no-data-text="No data available in table" no-data-text="No data available in table"
hide-default-footer hide-default-footer
class="elevation-1" class="elevation-1"
item-value="id"
> >
<!-- Custom slot untuk nomor urut -->
<template v-slot:item.no="{ index }">
{{ (currentPage - 1) * itemsPerPage + index + 1 }}
</template>
<!-- Custom slot untuk status -->
<template v-slot:item.status="{ item }">
<v-chip
:color="getStatusColor(item.status)"
size="small"
text-color="white"
>
{{ item.status }}
</v-chip>
</template>
<!-- Custom slot untuk keterangan -->
<template v-slot:item.keterangan="{ item }">
<span v-if="item.keterangan" class="text-red font-weight-bold">
{{ item.keterangan }}
</span>
<span v-else>-</span>
</template>
<!-- Slot untuk aksi -->
<template v-slot:item.aksi="{ item }"> <template v-slot:item.aksi="{ item }">
<slot name="actions" :item="item" /> <slot name="actions" :item="item" />
</template> </template>
@@ -56,51 +86,23 @@
</template> </template>
</v-data-table> </v-data-table>
<div class="d-flex justify-space-between align-center pa-4"> <!-- Footer Pagination -->
<div class="d-flex justify-space-between align-center mt-4">
<div class="text-body-2 text-grey-darken-1"> <div class="text-body-2 text-grey-darken-1">
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalEntries }} entries Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalEntries }} entries
</div> </div>
<div class="d-flex align-center">
<v-btn <v-pagination
:disabled="currentPage === 1" v-model="currentPage"
@click="previousPage" :length="totalPages"
variant="text" :total-visible="7"
size="small" />
class="text-body-2"
>
Previous
</v-btn>
<template v-for="page in visiblePages" :key="page">
<v-btn
v-if="page !== '...'"
:color="page === currentPage ? 'primary' : ''"
:variant="page === currentPage ? 'flat' : 'text'"
@click="goToPage(page)"
size="small"
class="mx-1"
min-width="40"
>
{{ page }}
</v-btn>
<span v-else class="mx-1">...</span>
</template>
<v-btn
:disabled="currentPage === totalPages"
@click="nextPage"
variant="text"
size="small"
class="text-body-2"
>
Next
</v-btn>
</div>
</div> </div>
</v-card-text> </v-card-text>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from "vue";
import { defineProps } from "vue";
const props = defineProps({ const props = defineProps({
headers: { headers: {
@@ -128,71 +130,68 @@ const currentPage = ref(1);
const totalEntries = computed(() => props.items.length); const totalEntries = computed(() => props.items.length);
const totalPages = computed(() => Math.ceil(totalEntries.value / itemsPerPage.value)); const totalPages = computed(() => Math.ceil(totalEntries.value / itemsPerPage.value));
const paginatedItems = computed(() => { // Filter items based on search and pagination
const filteredItems = computed(() => {
let filtered = props.items;
if (search.value) {
const searchLower = search.value.toLowerCase();
filtered = props.items.filter(item => {
return Object.values(item).some(value =>
String(value).toLowerCase().includes(searchLower)
);
});
}
const start = (currentPage.value - 1) * itemsPerPage.value; const start = (currentPage.value - 1) * itemsPerPage.value;
const end = start + itemsPerPage.value; const end = start + itemsPerPage.value;
return props.items.slice(start, end); return filtered.slice(start, end);
}); });
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1); const currentPageStart = computed(() => {
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalEntries.value)); if (totalEntries.value === 0) return 0;
return (currentPage.value - 1) * itemsPerPage.value + 1;
const visiblePages = computed(() => {
const pages = [];
const total = totalPages.value;
const current = currentPage.value;
if (total <= 7) {
for (let i = 1; i <= total; i++) {
pages.push(i);
}
} else {
if (current <= 4) {
for (let i = 1; i <= 5; i++) {
pages.push(i);
}
pages.push("...");
pages.push(total);
} else if (current >= total - 3) {
pages.push(1);
pages.push("...");
for (let i = total - 4; i <= total; i++) {
pages.push(i);
}
} else {
pages.push(1);
pages.push("...");
for (let i = current - 1; i <= current + 1; i++) {
pages.push(i);
}
pages.push("...");
pages.push(total);
}
}
return pages;
}); });
const previousPage = () => { const currentPageEnd = computed(() => {
if (currentPage.value > 1) { const end = currentPage.value * itemsPerPage.value;
currentPage.value--; return Math.min(end, totalEntries.value);
});
// Method untuk mendapatkan warna status
const getStatusColor = (status) => {
switch (status) {
case 'Tunggu Daftar':
return 'orange';
case 'Barcode':
return 'blue';
case 'Selesai':
return 'green';
case 'Batal':
return 'red';
default:
return 'grey';
} }
}; };
const nextPage = () => { // Watch untuk reset halaman ketika items per page berubah
if (currentPage.value < totalPages.value) {
currentPage.value++;
}
};
const goToPage = (page) => {
currentPage.value = page;
};
watch(itemsPerPage, () => { watch(itemsPerPage, () => {
currentPage.value = 1; currentPage.value = 1;
}); });
// Watch untuk reset halaman ketika items berubah
watch(() => props.items, () => { watch(() => props.items, () => {
currentPage.value = 1; currentPage.value = 1;
}); });
</script>
// Watch untuk reset halaman ketika search berubah
watch(search, () => {
currentPage.value = 1;
});
</script>
<style scoped>
.text-red {
color: #d32f2f;
}
</style>

2
layouts/default.vue
View File

@@ -2,7 +2,7 @@
<!-- Root component for the entire Vuetify application --> <!-- Root component for the entire Vuetify application -->
<v-app> <v-app>
<!-- App bar di bagian atas layout --> <!-- App bar di bagian atas layout -->
<v-app-bar app color="green darken-1" dark> <v-app-bar app color=#ff9248 dark>
<v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon> <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
<v-toolbar-title class="ml-2">Antrean RSSA</v-toolbar-title> <v-toolbar-title class="ml-2">Antrean RSSA</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>

1
pages/List-Pasien.vue
View File

@@ -50,6 +50,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import TabelListPasien from '~/components/TabelListPasien.vue' import TabelListPasien from '~/components/TabelListPasien.vue'

1
pages/data-pasien/edit/[id].vue
View File

@@ -1,3 +1,4 @@
<!-- page edit id data pasien -->
<template> <template>
<div class="edit-pasien"> <div class="edit-pasien">
<!-- Header --> <!-- Header -->

264
pages/data-pasien/index.vue
View File

@@ -1,112 +1,50 @@
<!-- pages/data-pasien.vue -->
<template> <template>
<div class="data-pasien"> <div class="data-pasien">
<!-- Header --> <!-- Header -->
<div class="d-flex justify-space-between align-center mb-4"> <div class="d-flex justify-space-between align-center mb-4">
<h2>Data Pasien</h2> <h2>Data Pasien</h2>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<v-btn color="primary" prepend-icon="mdi-plus"> <v-btn color="primary" prepend-icon="mdi-plus" @click="addPatient">
Add Patient Add Patient
</v-btn> </v-btn>
</div> </div>
</div> </div>
<!-- Controls --> <!-- Menggunakan komponen TabelData -->
<div class="d-flex justify-space-between align-center mb-4"> <TabelData
<div class="d-flex align-center gap-2">
<span>Show</span>
<v-select
v-model="itemsPerPage"
:items="[10, 25, 50, 100]"
density="compact"
variant="outlined"
style="width: 80px;"
></v-select>
<span>entries</span>
</div>
<div class="d-flex align-center gap-2">
<span>Search:</span>
<v-text-field
v-model="search"
density="compact"
variant="outlined"
hide-details
style="width: 200px;"
></v-text-field>
</div>
</div>
<!-- Table -->
<v-data-table
:headers="headers" :headers="headers"
:items="pasienItems" :items="pasienItems"
:items-per-page="itemsPerPage" title="Daftar Data Pasien"
:search="search" :show-search="true"
class="elevation-1"
item-value="id"
> >
<template v-slot:item.no="{ index }"> <template #actions="{ item }">
{{ (currentPage - 1) * itemsPerPage + index + 1 }}
</template>
<template v-slot:item.status="{ item }">
<v-chip
:color="getStatusColor(item.status)"
size="small"
text-color="white"
>
{{ item.status }}
</v-chip>
</template>
<template v-slot:item.keterangan="{ item }">
<span v-if="item.keterangan" class="text-red font-weight-bold">
{{ item.keterangan }}
</span>
<span v-else>-</span>
</template>
<template v-slot:item.aksi="{ item }">
<div class="d-flex gap-1"> <div class="d-flex gap-1">
<v-btn <v-btn
icon="mdi-eye"
size="small" size="small"
color="primary" color="primary"
variant="flat"
@click="viewPasien(item)" @click="viewPasien(item)"
></v-btn> >VIEW</v-btn>
<v-btn <v-btn
icon="mdi-pencil"
size="small" size="small"
color="warning" color="warning"
variant="flat"
@click="editPasien(item)" @click="editPasien(item)"
></v-btn> >EDIT</v-btn>
</div> </div>
</template> </template>
</v-data-table> </TabelData>
<!-- Footer Pagination -->
<div class="d-flex justify-space-between align-center mt-4">
<div>
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
</div>
<v-pagination
v-model="currentPage"
:length="totalPages"
:total-visible="7"
></v-pagination>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import TabelData from '@/components/TabelData.vue';
// Data // Headers untuk tabel
const search = ref('');
const itemsPerPage = ref(10);
const currentPage = ref(1);
const headers = [ const headers = [
{ title: 'No', key: 'no', sortable: false, width: '60px' }, { title: 'No', key: 'no', sortable: false, width: '60px' },
{ title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' }, { title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' },
@@ -122,9 +60,11 @@ const headers = [
{ title: 'Aksi', key: 'aksi', sortable: false, width: '100px' } { title: 'Aksi', key: 'aksi', sortable: false, width: '100px' }
]; ];
// Data pasien dengan informasi lengkap untuk edit
const pasienItems = ref([ const pasienItems = ref([
{ {
id: 1, id: 1,
no: 1,
tgl_daftar: '2025-07-15 13:47:33', tgl_daftar: '2025-07-15 13:47:33',
no_barcode: '25027100001', no_barcode: '25027100001',
no_antrian: 'HO1001', no_antrian: 'HO1001',
@@ -135,10 +75,23 @@ const pasienItems = ref([
keterangan: '', keterangan: '',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' // Data tambahan untuk form edit
editData: {
tanggal_daftar: '2025-07-15 13:47:33',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100001',
no_antrian: 'HO1001',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '',
klinik: 'HOM',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: '',
pembayaran: 'JKN'
}
}, },
{ {
id: 2, id: 2,
no: 2,
tgl_daftar: '2025-07-24 13:50:01', tgl_daftar: '2025-07-24 13:50:01',
no_barcode: '25027100002', no_barcode: '25027100002',
no_antrian: 'OB1001', no_antrian: 'OB1001',
@@ -149,10 +102,22 @@ const pasienItems = ref([
keterangan: '', keterangan: '',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Barcode', status: 'Barcode',
aksi: '' editData: {
tanggal_daftar: '2025-07-24 13:50:01',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100002',
no_antrian: 'OB1001',
no_klinik: '',
no_rekammedik: '',
klinik: 'KANDUNGAN',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: '',
pembayaran: 'JKN'
}
}, },
{ {
id: 3, id: 3,
no: 3,
tgl_daftar: '2025-07-24 13:50:37', tgl_daftar: '2025-07-24 13:50:37',
no_barcode: '25027100003', no_barcode: '25027100003',
no_antrian: 'OB1002', no_antrian: 'OB1002',
@@ -163,10 +128,22 @@ const pasienItems = ref([
keterangan: '', keterangan: '',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Barcode', status: 'Barcode',
aksi: '' editData: {
tanggal_daftar: '2025-07-24 13:50:37',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100003',
no_antrian: 'OB1002',
no_klinik: '',
no_rekammedik: '',
klinik: 'KANDUNGAN',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: '',
pembayaran: 'JKN'
}
}, },
{ {
id: 4, id: 4,
no: 4,
tgl_daftar: '2025-07-28 08:18:20', tgl_daftar: '2025-07-28 08:18:20',
no_barcode: '25027100004', no_barcode: '25027100004',
no_antrian: 'AN1001', no_antrian: 'AN1001',
@@ -177,10 +154,22 @@ const pasienItems = ref([
keterangan: '', keterangan: '',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Barcode', status: 'Barcode',
aksi: '' editData: {
tanggal_daftar: '2025-07-28 08:18:20',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100004',
no_antrian: 'AN1001',
no_klinik: '',
no_rekammedik: '',
klinik: 'ANAK',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: '',
pembayaran: 'JKN'
}
}, },
{ {
id: 5, id: 5,
no: 5,
tgl_daftar: '2025-08-13 00:00:02', tgl_daftar: '2025-08-13 00:00:02',
no_barcode: '25027100005', no_barcode: '25027100005',
no_antrian: 'HO1002', no_antrian: 'HO1002',
@@ -191,10 +180,22 @@ const pasienItems = ref([
keterangan: 'Online 25#27100005', keterangan: 'Online 25#27100005',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:02',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100005',
no_antrian: 'HO1002',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '11412684',
klinik: 'HOM',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'Online 25#27100005',
pembayaran: 'JKN'
}
}, },
{ {
id: 6, id: 6,
no: 6,
tgl_daftar: '2025-08-13 00:00:03', tgl_daftar: '2025-08-13 00:00:03',
no_barcode: '25027100006', no_barcode: '25027100006',
no_antrian: 'HO1003', no_antrian: 'HO1003',
@@ -205,10 +206,22 @@ const pasienItems = ref([
keterangan: 'Online 25#27100006', keterangan: 'Online 25#27100006',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:03',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100006',
no_antrian: 'HO1003',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '',
klinik: 'HOM',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'Online 25#27100006',
pembayaran: 'JKN'
}
}, },
{ {
id: 7, id: 7,
no: 7,
tgl_daftar: '2025-08-13 00:00:03', tgl_daftar: '2025-08-13 00:00:03',
no_barcode: '25027100007', no_barcode: '25027100007',
no_antrian: 'IP1001', no_antrian: 'IP1001',
@@ -219,10 +232,22 @@ const pasienItems = ref([
keterangan: 'Online 25#27100007', keterangan: 'Online 25#27100007',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:03',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100007',
no_antrian: 'IP1001',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '11555500',
klinik: 'IPD',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'FINGATMANA ONLINE',
pembayaran: 'JKN'
}
}, },
{ {
id: 8, id: 8,
no: 8,
tgl_daftar: '2025-08-13 00:00:04', tgl_daftar: '2025-08-13 00:00:04',
no_barcode: '25027100008', no_barcode: '25027100008',
no_antrian: 'IP1001', no_antrian: 'IP1001',
@@ -233,10 +258,22 @@ const pasienItems = ref([
keterangan: 'Online 25#27100008', keterangan: 'Online 25#27100008',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:04',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100008',
no_antrian: 'IP1001',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '11333855',
klinik: 'IPD',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'Online 25#27100008',
pembayaran: 'JKN'
}
}, },
{ {
id: 9, id: 9,
no: 9,
tgl_daftar: '2025-08-13 00:00:04', tgl_daftar: '2025-08-13 00:00:04',
no_barcode: '25027100009', no_barcode: '25027100009',
no_antrian: 'IP1001', no_antrian: 'IP1001',
@@ -247,10 +284,22 @@ const pasienItems = ref([
keterangan: 'Online 25#27100009', keterangan: 'Online 25#27100009',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:04',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100009',
no_antrian: 'IP1001',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '11565554',
klinik: 'IPD',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'Online 25#27100009',
pembayaran: 'JKN'
}
}, },
{ {
id: 10, id: 10,
no: 10,
tgl_daftar: '2025-08-13 00:00:04', tgl_daftar: '2025-08-13 00:00:04',
no_barcode: '25027100010', no_barcode: '25027100010',
no_antrian: 'IP1001', no_antrian: 'IP1001',
@@ -261,36 +310,41 @@ const pasienItems = ref([
keterangan: 'Online 25#27100010', keterangan: 'Online 25#27100010',
pembayaran: 'JKN', pembayaran: 'JKN',
status: 'Tunggu Daftar', status: 'Tunggu Daftar',
aksi: '' editData: {
tanggal_daftar: '2025-08-13 00:00:04',
tanggal_periksa: '2025-08-27',
no_barcode: '25027100010',
no_antrian: 'IP1001',
no_klinik: 'Belum Mendapatkan Antrian Klinik',
no_rekammedik: '11627608',
klinik: 'IPD',
shift: 'Shift 1 = Mulai Pukul 07:00',
keterangan: 'Online 25#27100010',
pembayaran: 'JKN'
}
} }
]); ]);
// Computed
const totalItems = computed(() => pasienItems.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
// Methods // Methods
const getStatusColor = (status) => { const addPatient = () => {
switch (status) { // Navigate to add patient page
case 'Tunggu Daftar': navigateTo('/data-pasien/add');
return 'orange';
case 'Barcode':
return 'blue';
default:
return 'grey';
}
}; };
const viewPasien = (item) => { const viewPasien = (item) => {
// Implement view functionality // Implement view functionality
console.log('View pasien:', item); console.log('View pasien:', item);
// You can navigate to a view page or open a modal
// navigateTo(`/data-pasien/view/${item.id}`);
}; };
const editPasien = (item) => { const editPasien = (item) => {
// Navigate to edit page
navigateTo(`/data-pasien/edit/${item.id}`); navigateTo(`/data-pasien/edit/${item.id}`);
}; };
// Provide data globally untuk diakses oleh halaman edit
provide('pasienData', pasienItems);
</script> </script>
<style scoped> <style scoped>
@@ -305,8 +359,4 @@ const editPasien = (item) => {
.gap-2 { .gap-2 {
gap: 8px; gap: 8px;
} }
.text-red {
color: #d32f2f;
}
</style> </style>