Files
frontend/app/components/StatusBadge.vue

38 lines
1.2 KiB
Vue

<script setup lang="ts">
import type { ReportStatus } from '~/types/api'
interface Props {
status: ReportStatus
}
const props = defineProps<Props>()
const badgeConfig = computed(() => {
const config: Record<ReportStatus, { color: string, text: string, icon: string }> = {
OPEN: { color: 'info', text: 'Aperta', icon: 'it-info-circle' },
UNDER_REVIEW: { color: 'warning', text: 'In Revisione', icon: 'it-clock' },
ASSIGNED: { color: 'primary', text: 'Assegnata', icon: 'it-user' },
IN_PROGRESS: { color: 'primary', text: 'In Lavorazione', icon: 'it-settings' },
RESOLVED: { color: 'success', text: 'Risolta', icon: 'it-check-circle' },
REJECTED: { color: 'danger', text: 'Rifiutata', icon: 'it-close-circle' },
CLOSED: { color: 'secondary', text: 'Chiusa', icon: 'it-locked' }
}
return config[props.status] || { color: 'secondary', text: props.status, icon: 'it-info-circle' }
})
</script>
<template>
<span class="badge badge-pill rounded-pill d-inline-flex align-items-center gap-1" :class="`bg-${badgeConfig.color}`">
<BIIcon :name="badgeConfig.icon" size="xs" color="white" />
{{ badgeConfig.text }}
</span>
</template>
<style scoped>
.badge {
font-weight: 600;
padding: 0.35em 0.65em;
}
</style>