58 lines
1.7 KiB
Vue
58 lines
1.7 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>
|