76 lines
3.3 KiB
Vue
76 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-app>
|
|
<v-main>
|
|
<v-container>
|
|
<v-row>
|
|
<v-col><h3>Jadwal Dokter</h3></v-col>
|
|
</v-row>
|
|
<v-card title="" flat class="mx-auto my-8 pt-3" elevation="3" min-width="300">
|
|
<div class="d-inline-flex ml-5 mb-3">
|
|
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1" width="500px"></v-text-field>
|
|
</div>
|
|
<v-data-table class="elevation-1 px-5" :headers="headers" :items="JadwalDokter" F :search="search" hide-default-header>
|
|
<template v-slot:body="{items}">
|
|
<!-- <thead>-->
|
|
<tr>
|
|
<th>Hari</th>
|
|
<th>Waktu</th>
|
|
<th>Spesialis</th>
|
|
<th>Subspesialis</th>
|
|
<th>Namalengkap</th>
|
|
</tr>
|
|
<!-- </thead> -->
|
|
<!-- <tbody> -->
|
|
<tr v-for="(item,index) in items" :key="index">
|
|
<td v-if="index===0||item.hari !== items[index-1].hari">{{ item.hari }}</td>
|
|
<td v-else></td>
|
|
<!-- <td>{{ item.hari }}</td> -->
|
|
<td>{{ item.waktu }}</td>
|
|
<td v-if="index===0||item.spesialis !== items[index-1].spesialis">{{ item.spesialis }}</td>
|
|
<td v-else></td>
|
|
<!-- <td>{{ item.spesialis }}</td> -->
|
|
<td v-if="index===0||item.subspesialis !== items[index-1].subspesialis">{{ item.subspesialis }}</td>
|
|
<td v-else></td>
|
|
<!-- <td>{{ item.subspesialis }}</td> -->
|
|
<td>{{ item.namalengkap }}</td>
|
|
</tr>
|
|
<!-- </tbody> -->
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const {JadwalDokter} = storeToRefs(useJadwalDokter());
|
|
const {loadJadwalDokter} = useJadwalDokter();
|
|
const dataJadwalDokter = ref([]);
|
|
const search = ref("");
|
|
const headers = [
|
|
{
|
|
align:'start',
|
|
key:'name',
|
|
sortable:false,
|
|
},
|
|
{key:'hari', title:'hari'},
|
|
{key:'waktu', title:'waktu'},
|
|
{key:'spesialis', title:'spesialis'},
|
|
{key:'subspesialis', title:'subspesialis'},
|
|
{key:'namalengkap', title:'namalengkap'},
|
|
]
|
|
|
|
|
|
onMounted(()=> {
|
|
loadJadwalDokter();
|
|
// console.log(JadwalDokter)
|
|
// console.log(hari)
|
|
})
|
|
</script>
|