96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<div class="gp-room-column">
|
|
<div class="column-header">
|
|
<v-icon size="20" class="mr-2" color="white">mdi-domain</v-icon>
|
|
<span class="column-title">{{ clinicName.toUpperCase() }}</span>
|
|
</div>
|
|
|
|
<div class="column-content">
|
|
<template v-if="currentPatient || queuePatients.length > 0">
|
|
<GpCurrentPatient
|
|
v-if="currentPatient"
|
|
:queue-number="currentPatient.noAntrian"
|
|
:room-name="currentPatient.roomIndicator"
|
|
:room-options="roomOptions"
|
|
@pemeriksaan-awal="$emit('pemeriksaan-awal', currentPatient, $event)"
|
|
@panggil-pemeriksaan="$emit('panggil-pemeriksaan', currentPatient, $event)"
|
|
@action-pending="$emit('action-pending', currentPatient)"
|
|
@action-selesai="$emit('action-selesai', currentPatient)"
|
|
/>
|
|
|
|
<GpQueueList
|
|
:patients="queuePatients"
|
|
@view-detail="p => $emit('view-detail', p)"
|
|
@process-patient="p => $emit('process-patient', p)"
|
|
/>
|
|
</template>
|
|
<div v-else class="empty-column-state">
|
|
<v-icon size="48" color="#D1D5DB" class="mb-4">mdi-account-off</v-icon>
|
|
<div class="empty-text">TIDAK ADA PASIEN YANG DIPROSES</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import GpCurrentPatient from './GpCurrentPatient.vue';
|
|
import GpQueueList from './GpQueueList.vue';
|
|
|
|
defineProps({
|
|
clinicName: { type: String, required: true },
|
|
currentPatient: { type: Object, default: null },
|
|
queuePatients: { type: Array, default: () => [] },
|
|
roomOptions: { type: Array, default: () => [] }
|
|
});
|
|
|
|
defineEmits(['pemeriksaan-awal', 'panggil-pemeriksaan', 'view-detail', 'action-pending', 'action-selesai', 'process-patient']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-room-column {
|
|
width: 380px;
|
|
min-width: 380px;
|
|
background: var(--gp-bg, #F5F7FA);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
margin-right: 16px;
|
|
}
|
|
.column-header {
|
|
background: var(--gp-primary, #3F51B5);
|
|
color: white;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.column-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.column-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: white; /* Make the whole column body white */
|
|
}
|
|
.empty-column-state {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px;
|
|
text-align: center;
|
|
background: white;
|
|
}
|
|
.empty-text {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-secondary, #6b7280);
|
|
}
|
|
</style>
|