fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine order detail status layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 20:58:08 +07:00
parent aabebe9b90
commit f1129199bd
4 changed files with 179 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/orders/OrderStatusBadge.vue
View File

@@ -1,30 +1,26 @@
<script setup lang="ts">
import {
getOrderStatusBadgePresentation,
type OrderStatusTone,
} from '~/composables/useOrderStatusPresentation';
const props = defineProps<{
status: string;
}>();
const statusLabel = computed(() => {
if (props.status === 'NEW' || props.status === 'MANAGER_PROCESSING') return 'Заявка';
if (props.status === 'WAITING_DOUBLE_CONFIRM' || props.status === 'CONFIRMED') return 'Предложение';
if (props.status === 'IN_PROGRESS') return 'В работе';
if (props.status === 'COMPLETED') return 'Завершен';
if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'Отклонен';
if (props.status === 'MANAGER_BLOCKED') return 'Пауза';
return props.status;
});
const badgePresentation = computed(() => getOrderStatusBadgePresentation(props.status));
const className = computed(() => {
if (props.status === 'COMPLETED') return 'bg-[#139957]';
if (props.status === 'CLIENT_REJECTED' || props.status === 'MANAGER_REJECTED') return 'bg-[#d94b55]';
if (props.status === 'MANAGER_BLOCKED') return 'bg-[#f1a43a]';
if (props.status === 'NEW' || props.status === 'MANAGER_PROCESSING') return 'bg-[#f1a43a]';
function dotClass(tone: OrderStatusTone) {
if (tone === 'success') return 'bg-[#139957]';
if (tone === 'danger') return 'bg-[#d94b55]';
if (tone === 'warning') return 'bg-[#f1a43a]';
return 'bg-[#2e8de4]';
});
}
</script>
<template>
<span class="inline-flex items-center gap-2 text-sm font-semibold text-[#123824]">
<span class="h-2.5 w-2.5 rounded-full" :class="className" />
<span>{{ statusLabel }}</span>
<span class="inline-flex items-center gap-2 text-sm font-semibold leading-tight text-[#123824]">
<span class="h-2.5 w-2.5 rounded-full" :class="dotClass(badgePresentation.tone)" />
<span>{{ badgePresentation.label }}</span>
</span>
</template>