implementasi komponen ke data pasien

2025-08-28 15:08:52 +07:00
parent 89b36b7d1f
commit fc16b2bded
5 changed files with 253 additions and 202 deletions
--- a/components/TabelData.vue
+++ b/components/TabelData.vue
@@ -1,7 +1,8 @@
+<!-- components/TabelData.vue -->
 <template>
  <v-card-text>
    <!-- Title Section -->
-    <v-row no-gutters class="mb-3">
+    <v-row no-gutters class="mb-3" v-if="title">
      <v-col cols="12">
        <v-card-title class="text-subtitle-1 font-weight-bold pa-0" :class="{ 'red--text': title.includes('TERLAMBAT') }">
          {{ title }}
@@ -17,9 +18,11 @@
          <v-select
            v-model="itemsPerPage"
            :items="[10, 25, 50, 100]"
-            density="default"
+            density="compact"
+            variant="outlined"
            hide-details
-            class="shrink"
+            class="mx-2"
+            style="width: 80px;"
          />
          <span>entries</span>
        </div>
@@ -30,10 +33,10 @@
          <span class="mr-2">Search:</span>
          <v-text-field
            v-model="search"
-            label="Search"
            hide-details
            density="compact"
-            style="min-width: 200px"
+            variant="outlined"
+            style="width: 200px;"
          />
        </div>
      </v-col>
@@ -41,12 +44,39 @@

    <v-data-table
      :headers="headers"
-      :items="paginatedItems"
+      :items="filteredItems"
+      :items-per-page="itemsPerPage"
      :search="search"
      no-data-text="No data available in table"
      hide-default-footer
      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 }">
        <slot name="actions" :item="item" />
      </template>
@@ -56,51 +86,23 @@
      </template>
    </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">
        Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalEntries }} entries
      </div>
-      <div class="d-flex align-center">
-        <v-btn
-          :disabled="currentPage === 1"
-          @click="previousPage"
-          variant="text"
-          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>
+      
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :total-visible="7"
+      />
    </div>
  </v-card-text>
 </template>

 <script setup>
 import { ref, computed, watch } from "vue";
-import { defineProps } from "vue";

 const props = defineProps({
  headers: {
@@ -128,71 +130,68 @@ const currentPage = ref(1);
 const totalEntries = computed(() => props.items.length);
 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 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 currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalEntries.value));
-
-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 currentPageStart = computed(() => {
+  if (totalEntries.value === 0) return 0;
+  return (currentPage.value - 1) * itemsPerPage.value + 1;
 });

-const previousPage = () => {
-  if (currentPage.value > 1) {
-    currentPage.value--;
+const currentPageEnd = computed(() => {
+  const end = currentPage.value * itemsPerPage.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 = () => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value++;
-  }
-};
-
-const goToPage = (page) => {
-  currentPage.value = page;
-};
-
+// Watch untuk reset halaman ketika items per page berubah
 watch(itemsPerPage, () => {
  currentPage.value = 1;
 });

+// Watch untuk reset halaman ketika items berubah
 watch(() => props.items, () => {
  currentPage.value = 1;
 });
+
+// Watch untuk reset halaman ketika search berubah
+watch(search, () => {
+  currentPage.value = 1;
+});
 </script>
+
+<style scoped>
+.text-red {
+  color: #d32f2f;
+}
+</style>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,7 @@
  <!-- Root component for the entire Vuetify application -->
  <v-app>
    <!-- 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-toolbar-title class="ml-2">Antrean RSSA</v-toolbar-title>
        <v-spacer></v-spacer>
--- a/pages/List-Pasien.vue
+++ b/pages/List-Pasien.vue
@@ -50,6 +50,7 @@
  </div>
 </template>

+
 <script setup>
 import { ref, onMounted } from 'vue'
 import TabelListPasien from '~/components/TabelListPasien.vue'
--- a/pages/data-pasien/edit/[id].vue
+++ b/pages/data-pasien/edit/[id].vue
@@ -1,3 +1,4 @@
+<!-- page edit id data pasien -->
 <template>
  <div class="edit-pasien">
    <!-- Header -->
--- a/pages/data-pasien/index.vue
+++ b/pages/data-pasien/index.vue
@@ -1,112 +1,50 @@
+<!-- pages/data-pasien.vue -->
 <template>
  <div class="data-pasien">
    <!-- Header -->
    <div class="d-flex justify-space-between align-center mb-4">
      <h2>Data Pasien</h2>
      <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
        </v-btn>
      </div>
    </div>

-    <!-- Controls -->
-    <div class="d-flex justify-space-between align-center mb-4">
-      <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
+    <!-- Menggunakan komponen TabelData -->
+    <TabelData
      :headers="headers"
      :items="pasienItems"
-      :items-per-page="itemsPerPage"
-      :search="search"
-      class="elevation-1"
-      item-value="id"
+      title="Daftar Data Pasien"
+      :show-search="true"
    >
-      <template v-slot:item.no="{ index }">
-        {{ (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 }">
+      <template #actions="{ item }">
        <div class="d-flex gap-1">
          <v-btn
-            icon="mdi-eye"
+    
            size="small"
            color="primary"
+            variant="flat"
            @click="viewPasien(item)"
-          ></v-btn>
+          >VIEW</v-btn>
          <v-btn
-            icon="mdi-pencil"
+     
            size="small"
            color="warning"
+            variant="flat"
            @click="editPasien(item)"
-          ></v-btn>
+          >EDIT</v-btn>
        </div>
      </template>
-    </v-data-table>
-
-    <!-- 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>
+    </TabelData>
  </div>
 </template>

 <script setup>
 import { ref, computed } from 'vue';
+import TabelData from '@/components/TabelData.vue';

-// Data
-const search = ref('');
-const itemsPerPage = ref(10);
-const currentPage = ref(1);
-
+// Headers untuk tabel
 const headers = [
  { title: 'No', key: 'no', sortable: false, width: '60px' },
  { title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' },
@@ -122,9 +60,11 @@ const headers = [
  { title: 'Aksi', key: 'aksi', sortable: false, width: '100px' }
 ];

+// Data pasien dengan informasi lengkap untuk edit
 const pasienItems = ref([
  {
    id: 1,
+    no: 1,
    tgl_daftar: '2025-07-15 13:47:33',
    no_barcode: '25027100001',
    no_antrian: 'HO1001',
@@ -135,10 +75,23 @@ const pasienItems = ref([
    keterangan: '',
    pembayaran: 'JKN',
    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,
+    no: 2,
    tgl_daftar: '2025-07-24 13:50:01',
    no_barcode: '25027100002',
    no_antrian: 'OB1001',
@@ -149,10 +102,22 @@ const pasienItems = ref([
    keterangan: '',
    pembayaran: 'JKN',
    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,
+    no: 3,
    tgl_daftar: '2025-07-24 13:50:37',
    no_barcode: '25027100003',
    no_antrian: 'OB1002',
@@ -163,10 +128,22 @@ const pasienItems = ref([
    keterangan: '',
    pembayaran: 'JKN',
    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,
+    no: 4,
    tgl_daftar: '2025-07-28 08:18:20',
    no_barcode: '25027100004',
    no_antrian: 'AN1001',
@@ -177,10 +154,22 @@ const pasienItems = ref([
    keterangan: '',
    pembayaran: 'JKN',
    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,
+    no: 5,
    tgl_daftar: '2025-08-13 00:00:02',
    no_barcode: '25027100005',
    no_antrian: 'HO1002',
@@ -191,10 +180,22 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100005',
    pembayaran: 'JKN',
    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,
+    no: 6,
    tgl_daftar: '2025-08-13 00:00:03',
    no_barcode: '25027100006',
    no_antrian: 'HO1003',
@@ -205,10 +206,22 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100006',
    pembayaran: 'JKN',
    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,
+    no: 7,
    tgl_daftar: '2025-08-13 00:00:03',
    no_barcode: '25027100007',
    no_antrian: 'IP1001',
@@ -219,10 +232,22 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100007',
    pembayaran: 'JKN',
    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,
+    no: 8,
    tgl_daftar: '2025-08-13 00:00:04',
    no_barcode: '25027100008',
    no_antrian: 'IP1001',
@@ -233,10 +258,22 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100008',
    pembayaran: 'JKN',
    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,
+    no: 9,
    tgl_daftar: '2025-08-13 00:00:04',
    no_barcode: '25027100009',
    no_antrian: 'IP1001',
@@ -247,10 +284,22 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100009',
    pembayaran: 'JKN',
    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,
+    no: 10,
    tgl_daftar: '2025-08-13 00:00:04',
    no_barcode: '25027100010',
    no_antrian: 'IP1001',
@@ -261,36 +310,41 @@ const pasienItems = ref([
    keterangan: 'Online 25#27100010',
    pembayaran: 'JKN',
    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
-const getStatusColor = (status) => {
-  switch (status) {
-    case 'Tunggu Daftar':
-      return 'orange';
-    case 'Barcode':
-      return 'blue';
-    default:
-      return 'grey';
-  }
+const addPatient = () => {
+  // Navigate to add patient page
+  navigateTo('/data-pasien/add');
 };

 const viewPasien = (item) => {
  // Implement view functionality
  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) => {
+  // Navigate to edit page
  navigateTo(`/data-pasien/edit/${item.id}`);
 };
+
+// Provide data globally untuk diakses oleh halaman edit
+provide('pasienData', pasienItems);
 </script>

 <style scoped>
@@ -305,8 +359,4 @@ const editPasien = (item) => {
 .gap-2 {
  gap: 8px;
 }
-
-.text-red {
-  color: #d32f2f;
-}
 </style>