component, master loket, edit loket

components/TabelData.vue

@@ -1,35 +1,43 @@
 <template>
   <v-card-text>
-    <v-toolbar flat color="transparent" dense>
-      <v-toolbar-title class="text-subtitle-1 font-weight-bold" :class="{ 'red--text': title.includes('TERLAMBAT') }">
-        {{ title }}
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <div class="d-flex align-center">
-        <span>Show</span>
-        <v-select
-          :items="[10, 25, 50, 100]"
-          v-model="itemsPerPage"
-          label="entries"
-          dense
-          single-line
-          hide-details
-          class="shrink mx-2"
-          style="width: 80px"
-        ></v-select>
-        <span>entries</span>
-      </div>
-      <div v-if="showSearch" class="d-flex align-center ml-4">
-        <span class="mr-2">Search:</span>
-        <v-text-field
-          v-model="search"
-          label="Search"
-          hide-details
-          density="compact"
-          style="min-width: 200px"
-        ></v-text-field>
-      </div>
-    </v-toolbar>
+    <!-- Title Section -->
+    <v-row no-gutters class="mb-3">
+      <v-col cols="12">
+        <v-card-title class="text-subtitle-1 font-weight-bold pa-0" :class="{ 'red--text': title.includes('TERLAMBAT') }">
+          {{ title }}
+        </v-card-title>
+      </v-col>
+    </v-row>
+
+    <!-- Controls Section -->
+    <v-row no-gutters class="d-flex align-center mb-4">
+      <v-col cols="12" sm="6" class="d-flex align-center">
+        <div class="d-flex align-center">
+          <span>Show</span>
+          <v-select
+            v-model="itemsPerPage"
+            :items="[10, 25, 50, 100]"
+            density="default"
+            hide-details
+            class="shrink"
+          />
+          <span>entries</span>
+        </div>
+      </v-col>
+
+      <v-col cols="12" sm="6" class="d-flex justify-end align-center">
+        <div v-if="showSearch" class="d-flex align-center">
+          <span class="mr-2">Search:</span>
+          <v-text-field
+            v-model="search"
+            label="Search"
+            hide-details
+            density="compact"
+            style="min-width: 200px"
+          />
+        </div>
+      </v-col>
+    </v-row>
 
     <v-data-table
       :headers="headers"
@@ -40,12 +48,15 @@
       class="elevation-1"
     >
       <template v-slot:item.aksi="{ item }">
-        <slot name="actions" :item="item">
-          </slot>
+        <slot name="actions" :item="item" />
+      </template>
+
+      <template #no-data>
+        <div class="text-center pa-4">No data available in table</div>
       </template>
     </v-data-table>
 
-    <div class="d-flex justify-space-between align-center pt-4">
+    <div class="d-flex justify-space-between align-center pa-4">
       <div class="text-body-2 text-grey-darken-1">
         Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalEntries }} entries
       </div>
@@ -107,7 +118,7 @@ const props = defineProps({
   showSearch: {
     type: Boolean,
     default: true,
-  }
+  },
 });
 
 const search = ref("");
@@ -177,12 +188,10 @@ const goToPage = (page) => {
   currentPage.value = page;
 };
 
-// Reset halaman ke 1 saat jumlah itemsPerPage berubah
 watch(itemsPerPage, () => {
   currentPage.value = 1;
 });
 
-// Reset halaman ke 1 saat data items berubah (misalnya, setelah filter atau fetch data baru)
 watch(() => props.items, () => {
   currentPage.value = 1;
 });

components/TabelLayanan.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="items"
+    hide-default-footer
+    class="elevation-1"
+  >
+    <template v-slot:item.pilih="{ item }">
+      <v-checkbox
+        :model-value="isSelected(item.id)"
+        @change="toggleService(item.id)"
+      ></v-checkbox>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  headers: Array,
+  items: Array,
+  selectedItems: Array,
+});
+
+const emit = defineEmits(['update:selectedItems']);
+
+const isSelected = (id) => props.selectedItems.includes(id);
+
+const toggleService = (id) => {
+  const newSelection = isSelected(id)
+    ? props.selectedItems.filter(serviceId => serviceId !== id)
+    : [...props.selectedItems, id];
+  
+  emit('update:selectedItems', newSelection);
+};
+</script>

pages/Setting/Edit-Loket/[id].vue

@@ -0,0 +1,113 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title>Edit Loket</v-card-title>
+      <v-card-text>
+        <v-form @submit.prevent="simpanLoket">
+          <v-text-field label="Nama Loket" v-model="loket.namaLoket"></v-text-field>
+          <v-text-field label="Kuota Bangku" v-model="loket.kuota" type="number"></v-text-field>
+
+          <v-select
+            label="Status Pelayanan"
+            :items="['RAWAT JALAN', 'RAWAT INAP']"
+            v-model="loket.statusPelayanan"
+          ></v-select>
+
+          <v-select
+            label="Pembayaran"
+            :items="['JKN', 'UMUM']"
+            v-model="loket.pembayaran"
+          ></v-select>
+
+          <v-select
+            label="Keterangan"
+            :items="['ONLINE', 'MANUAL']"
+            v-model="loket.keterangan"
+          ></v-select>
+
+          <div class="my-4">
+            <h3 class="text-h6">Pelayanan</h3>
+            <TabelLayanan
+              :headers="serviceHeaders"
+              :items="availableServices"
+              v-model:selected-items="loket.pelayanan"
+            />
+          </div>
+
+          <v-btn color="success" type="submit" class="mr-2">Simpan</v-btn>
+          <v-btn color="secondary" @click="cancelEdit">Batal</v-btn>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import TabelLayanan from '../../components/TabelLayanan.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+// Data dummy loket yang sama seperti di Master-Loket.vue
+const loketData = ref([
+  { id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+]);
+
+const loket = ref({
+  id: null,
+  namaLoket: '',
+  kuota: 0,
+  statusPelayanan: '',
+  pembayaran: '',
+  keterangan: '',
+  pelayanan: [],
+});
+
+const serviceHeaders = ref([
+  { title: '#', value: 'no', sortable: false },
+  { title: 'Kode', value: 'id' },
+  { title: 'Klinik', value: 'nama' },
+  { title: 'Pilih', value: 'pilih', sortable: false },
+]);
+
+const availableServices = ref([
+  { no: 1, id: 'AN', nama: 'ANAK' },
+  { no: 2, id: 'AS', nama: 'ANESTESI' },
+  { no: 3, id: 'BD', nama: 'BEDAH' },
+  { no: 4, id: 'GR', nama: 'GERIATRI' },
+  { no: 5, id: 'GI', nama: 'GIGI DAN MULUT' },
+  { no: 6, id: 'GZ', nama: 'GIZI' },
+  { no: 7, id: 'HO', nama: 'HOM' },
+  { no: 8, id: 'IP', nama: 'IPD' },
+]);
+
+onMounted(() => {
+  // Cari loket yang sesuai dengan ID di URL
+  const selectedLoket = loketData.value.find(loket => loket.id === parseInt(route.params.id));
+  
+  if (selectedLoket) {
+    // Jika data ditemukan, salin ke objek loket
+    loket.value = { ...selectedLoket };
+    // Konversi string pelayanan menjadi array untuk checkbox
+    if (typeof loket.value.pelayanan === 'string') {
+        loket.value.pelayanan = loket.value.pelayanan.split(', ').map(s => s.trim());
+    }
+  }
+});
+
+const simpanLoket = () => {
+  // Dalam aplikasi nyata, ini adalah tempat untuk memanggil API update data
+  
+  // Untuk simulasi, kita akan kembali ke halaman master
+  router.back();
+};
+
+const cancelEdit = () => {
+  router.back();
+};
+</script>

pages/Setting/Master-Loket.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="d-flex justify-space-between align-center">
+        <span>Master Loket</span>
+        <v-btn color="primary" @click="tambahLoket">Tambah Baru</v-btn>
+      </v-card-title>
+      <TabelData
+        :headers="loketHeaders"
+        :items="loketData"
+        title="Master Loket"
+      >
+        <template #actions="{ item }">
+          <v-btn small color="info" @click="editLoket(item)" class="mr-2">Edit</v-btn>
+          <v-btn small color="error" @click="deleteLoket(item)">Delete</v-btn>
+        </template>
+      </TabelData>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TabelData from '../../components/TabelData.vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const loketHeaders = ref([
+  { title: 'No', value: 'no' },
+  { title: 'Nama Loket', value: 'namaLoket' },
+  { title: 'Kuota', value: 'kuota' },
+  { title: 'Pelayanan', value: 'pelayanan' },
+  { title: 'Pembayaran', value: 'pembayaran' },
+  { title: 'Keterangan', value: 'keterangan' },
+  { title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
+]);
+
+// Master-Loket.vue
+const loketData = ref([
+  { id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+  { id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
+]);
+
+const editLoket = (item) => {
+  router.push({ path: `/Setting/Edit-Loket/${item.id}` });
+};
+
+const deleteLoket = (item) => {
+  const index = loketData.value.findIndex(loket => loket.id === item.id);
+  if (index !== -1) {
+    loketData.value.splice(index, 1);
+  }
+};
+
+const tambahLoket = () => {
+  router.push({ path: '/Setting/Tambah-Loket' });
+};
+</script>