49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<script setup>
|
|
import OrderKanbanCard from '@/components/orders/OrderKanbanCard.vue';
|
|
|
|
const props = defineProps({
|
|
orders: Array,
|
|
statuses: Array,
|
|
});
|
|
|
|
const emit = defineEmits(['selectOrder', 'unselect']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-5 fixed-grid has-4-cols">
|
|
<div class="grid">
|
|
<div
|
|
v-for="status in statuses"
|
|
:key="status.id"
|
|
class="card"
|
|
style="border: none"
|
|
>
|
|
<div class="card-content p-0 is-clipped">
|
|
<div :class="['p-4 is-flex is-justify-content-space-between is-align-items-center', `has-background-${status.color}-90`]">
|
|
<p class="font-semibold has-text-grey-10">{{ status.name }}</p>
|
|
<p class="px-2 py-1 font-semibold rounded-lg has-background-white"
|
|
:style="{ border: `1px solid var(--bulma-${status.color}-60)`}"
|
|
>
|
|
{{ orders.filter(o => o.status === status.id).length }}
|
|
</p>
|
|
</div>
|
|
<hr class="m-0 has-background-grey-80" />
|
|
<div class="has-background-grey-95 p-4">
|
|
<OrderKanbanCard
|
|
v-if="orders.filter(o => o.status === status.id).length > 0"
|
|
v-for="order in orders.filter(o => o.status === status.id)"
|
|
:key="order.id"
|
|
:order="order"
|
|
@selectOrder="emit('selectOrder', order.id)"
|
|
@unselect="emit('unselect')"
|
|
/>
|
|
<p v-else class="fs-13 has-text-centered has-text-grey">
|
|
Không có đơn hàng
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|