115 lines
5.0 KiB
Vue
115 lines
5.0 KiB
Vue
<script setup>
|
|
/**
|
|
* DialogDetailEvent — Dialog untuk menampilkan detail jadwal dokter
|
|
* yang diklik di kalender. Mendukung tampilan Rutin dan Adhoc.
|
|
* Menggunakan v-model pattern untuk kontrol buka/tutup dialog dari parent.
|
|
*/
|
|
|
|
const props = defineProps({
|
|
/** Kontrol buka/tutup dialog (v-model) */
|
|
modelValue: { type: Boolean, default: false },
|
|
/** Data event yang sedang ditampilkan */
|
|
event: { type: Object, default: null },
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'delete']);
|
|
|
|
/** Computed v-model proxy untuk dialog visibility */
|
|
const dialogOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val),
|
|
});
|
|
|
|
/**
|
|
* Emit event delete ke parent untuk menghapus jadwal.
|
|
*/
|
|
const handleDelete = () => {
|
|
emit('delete', props.event?.id);
|
|
dialogOpen.value = false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog v-model="dialogOpen" max-width="420px">
|
|
<v-card rounded="lg" class="pa-0">
|
|
<v-card-title class="pa-5" :class="event?.tipe === 'Adhoc' ? 'bg-secondary' : 'bg-primary'"
|
|
style="color:white;">
|
|
<div class="d-flex justify-space-between align-center w-100">
|
|
<div class="d-flex align-center gap-2">
|
|
<v-icon>{{ event?.tipe === 'Adhoc' ? 'mdi-calendar-clock' : 'mdi-calendar-sync'
|
|
}}</v-icon>
|
|
<span class="ml-2 text-h6 font-weight-bold">Jadwal {{ event?.tipe }}</span>
|
|
</div>
|
|
<v-btn icon="mdi-close" variant="text" size="small" style="color:white;"
|
|
@click="dialogOpen = false" />
|
|
</div>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pa-6" v-if="event">
|
|
<v-list density="compact" class="pa-0">
|
|
<v-list-item class="px-0">
|
|
<template #prepend>
|
|
<v-icon color="primary" size="small" class="mr-3">mdi-hospital-building</v-icon>
|
|
</template>
|
|
<div class="text-caption text-grey-darken-1">Poli / Klinik</div>
|
|
<div class="text-body-2 font-weight-bold">{{ event.poli }}</div>
|
|
</v-list-item>
|
|
|
|
<v-divider class="my-2" />
|
|
|
|
<v-list-item class="px-0">
|
|
<template #prepend>
|
|
<v-icon color="primary" size="small" class="mr-3">mdi-doctor</v-icon>
|
|
</template>
|
|
<div class="text-caption text-grey-darken-1">Dokter</div>
|
|
<div class="text-body-2 font-weight-bold">{{ event.dokter }}</div>
|
|
</v-list-item>
|
|
|
|
<v-divider class="my-2" />
|
|
|
|
<v-list-item class="px-0">
|
|
<template #prepend>
|
|
<v-icon color="primary" size="small" class="mr-3">mdi-calendar</v-icon>
|
|
</template>
|
|
<div class="text-caption text-grey-darken-1">Tanggal</div>
|
|
<div class="text-body-2 font-weight-bold">{{ event.tanggal }}</div>
|
|
</v-list-item>
|
|
|
|
<!-- Rutin: tampilkan hari -->
|
|
<template v-if="event.tipe === 'Rutin' && event.hari">
|
|
<v-divider class="my-2" />
|
|
<v-list-item class="px-0">
|
|
<template #prepend>
|
|
<v-icon color="primary" size="small" class="mr-3">mdi-calendar-week</v-icon>
|
|
</template>
|
|
<div class="text-caption text-grey-darken-1">Hari Praktek</div>
|
|
<div class="text-body-2 font-weight-bold">{{ event.hari }}</div>
|
|
</v-list-item>
|
|
</template>
|
|
|
|
<!-- Adhoc: tampilkan shift -->
|
|
<template v-if="event.tipe === 'Adhoc' && event.shift">
|
|
<v-divider class="my-2" />
|
|
<v-list-item class="px-0">
|
|
<template #prepend>
|
|
<v-icon color="secondary" size="small" class="mr-3">mdi-clock-outline</v-icon>
|
|
</template>
|
|
<div class="text-caption text-grey-darken-1">Waktu</div>
|
|
<div class="text-body-2 font-weight-bold">{{ event.shift }}</div>
|
|
</v-list-item>
|
|
</template>
|
|
</v-list>
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-actions class="pa-5 justify-space-between">
|
|
<v-btn color="error" variant="text" prepend-icon="mdi-trash-can-outline" @click="handleDelete">
|
|
Hapus
|
|
</v-btn>
|
|
<v-btn color="primary" variant="flat" @click="dialogOpen = false">Tutup</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|