48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<template>
|
|
<div :class="['gp-queue-list-item', { active: isActive }]">
|
|
<div class="item-left">
|
|
<span class="queue-number">{{ queueNumber }}</span>
|
|
</div>
|
|
<div class="item-right">
|
|
<GpStatusBadge v-if="status && !isActive" :status="status" />
|
|
<v-btn v-if="!isActive" icon="mdi-play" size="x-small" variant="text" color="success" class="ml-1" @click="$emit('process-patient')" />
|
|
<v-btn v-if="isActive" icon="mdi-eye" size="x-small" variant="text" color="#3F51B5" @click="$emit('view-detail')" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import GpStatusBadge from './GpStatusBadge.vue';
|
|
|
|
defineProps({
|
|
queueNumber: { type: String, required: true },
|
|
status: { type: String, default: '' },
|
|
isActive: { type: Boolean, default: false }
|
|
});
|
|
|
|
defineEmits(['view-detail', 'process-patient']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-queue-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--gp-border, #e5e7eb);
|
|
background-color: var(--gp-surface, #fff);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.gp-queue-list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.gp-queue-list-item.active {
|
|
background-color: #E3EBFF; /* Light blue highlighting active patient */
|
|
}
|
|
.queue-number {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-primary, #1f2937);
|
|
}
|
|
</style>
|