77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import Card from '@/components/ui/Card.vue'
|
|
import Badge from '@/components/ui/Badge.vue'
|
|
import EmptyState from '@/components/ui/EmptyState.vue'
|
|
|
|
const props = defineProps({
|
|
orders: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const pendingOrders = computed(() =>
|
|
props.orders.filter(o => o.status === 'Pending' || o.status === 'InProgress'),
|
|
)
|
|
|
|
const resultedOrders = computed(() =>
|
|
props.orders.filter(o => o.status === 'Resulted'),
|
|
)
|
|
|
|
function statusVariant(status) {
|
|
if (status === 'Resulted') return 'success'
|
|
if (status === 'InProgress') return 'info'
|
|
return 'warning'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Card>
|
|
<template #header>
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
|
Orders
|
|
</h2>
|
|
</template>
|
|
|
|
<EmptyState v-if="orders.length === 0" message="No orders" />
|
|
|
|
<div v-else class="space-y-4">
|
|
<section v-if="pendingOrders.length">
|
|
<h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Pending</h3>
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<li
|
|
v-for="order in pendingOrders"
|
|
:key="order.id"
|
|
class="flex items-center justify-between gap-4 py-2 first:pt-0"
|
|
>
|
|
<div class="min-w-0">
|
|
<div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">{{ order.orderType }}</div>
|
|
</div>
|
|
<Badge :variant="statusVariant(order.status)" size="xs">{{ order.status }}</Badge>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section v-if="resultedOrders.length">
|
|
<h3 class="mb-2 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Resulted</h3>
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<li
|
|
v-for="order in resultedOrders"
|
|
:key="order.id"
|
|
class="py-2 first:pt-0"
|
|
>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<div class="text-sm text-gray-900 dark:text-white">{{ order.description }}</div>
|
|
<div v-if="order.resultSummary" class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ order.resultSummary }}
|
|
</div>
|
|
</div>
|
|
<Badge variant="success" size="xs">Resulted</Badge>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</Card>
|
|
</template>
|