serega404
047611fd24
🚀 Create and publish a Docker image / Detect changes in backend and frontend (push) Successful in 5s
🚀 Create and publish a Docker image / Build & publish backend image (push) Successful in 8s
🚀 Create and publish a Docker image / Update stack on Portainer (push) Successful in 3s
44 lines
1.7 KiB
Vue
44 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
status: 'pending' | 'active' | 'done' | 'cancelled' | 'approved' | 'rejected' | string
|
|
}>()
|
|
|
|
const statusMap: Record<string, { label: string; cls: string }> = {
|
|
pending: { label: 'Ожидание', cls: 'warning' },
|
|
active: { label: 'Активно', cls: 'success' },
|
|
done: { label: 'Завершено', cls: 'info' },
|
|
cancelled: { label: 'Отменено', cls: 'danger' },
|
|
approved: { label: 'Одобрено', cls: 'success' },
|
|
rejected: { label: 'Отклонено', cls: 'danger' },
|
|
open: { label: 'Открыта', cls: 'success' },
|
|
closed: { label: 'Закрыта', cls: 'danger' },
|
|
full: { label: 'Нет мест', cls: 'warning' },
|
|
upcoming: { label: 'Будущая', cls: 'info' },
|
|
ongoing: { label: 'Идет', cls: 'success' },
|
|
completed: { label: 'Завершена', cls: 'info' },
|
|
registered:{ label: 'Записан', cls: 'success' },
|
|
attended: { label: 'Посещено', cls: 'info' },
|
|
needsReview: { label: 'Нужен отзыв', cls: 'warning' },
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<span class="status-badge" :class="statusMap[status]?.cls ?? 'info'">
|
|
{{ statusMap[status]?.label ?? status }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.success { background: rgba(220,252,231,0.9); color: #166534; border: 1px solid #86EFAC; }
|
|
.warning { background: rgba(254,243,199,0.9); color: #92400E; border: 1px solid #FDE68A; }
|
|
.danger { background: rgba(254,226,226,0.9); color: #991B1B; border: 1px solid #FCA5A5; }
|
|
.info { background: rgba(224,242,254,0.9); color: #1E40AF; border: 1px solid #93C5FD; }
|
|
</style>
|