130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<script setup>
|
|
const { carts, activeCartId, activeCartItems, isChangingCus, getCarts } = inject("pos");
|
|
|
|
const { $insertapi, $deleteapi } = useNuxtApp();
|
|
const isAddingCart = ref(false);
|
|
|
|
async function addCart() {
|
|
isAddingCart.value = true;
|
|
const newCart = await $insertapi("Cart", { notify: false });
|
|
activeCartId.value = newCart.id;
|
|
isAddingCart.value = false;
|
|
getCarts();
|
|
}
|
|
|
|
const isDeletingCart = ref();
|
|
async function removeCart(cartId) {
|
|
isDeletingCart.value = cartId;
|
|
|
|
await $deleteapi(
|
|
"Cart_Item",
|
|
activeCartItems.value.map((c) => c.id),
|
|
);
|
|
await $deleteapi("Cart", cartId);
|
|
isDeletingCart.value = undefined;
|
|
|
|
if (cartId === activeCartId.value) {
|
|
if (carts.value.length === 1) {
|
|
activeCartId.value = undefined;
|
|
}
|
|
const deletedCartIndex = carts.value.findIndex((c) => c.id === cartId);
|
|
|
|
if (deletedCartIndex === 0) {
|
|
activeCartId.value = carts.value[deletedCartIndex + 1].id;
|
|
} else {
|
|
activeCartId.value = carts.value[deletedCartIndex - 1].id;
|
|
}
|
|
}
|
|
getCarts();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tabs is-boxed mb-0">
|
|
<ul class="is-align-items-stretch">
|
|
<li
|
|
v-for="cart in carts"
|
|
:key="cart.id"
|
|
:class="['is-size-7 w-41', cart.id === activeCartId && 'is-active']"
|
|
@click="activeCartId = cart.id"
|
|
:title="cart.customer__fullname"
|
|
>
|
|
<a class="is-justify-content-start h-full relative">
|
|
<span class="icon mr-0.5">
|
|
<Icon
|
|
:name="
|
|
(cart.id === activeCartId && isChangingCus) || cart.id === isDeletingCart
|
|
? 'svg-spinners:180-ring-with-bg'
|
|
: cart.customer
|
|
? 'material-symbols:person-rounded'
|
|
: 'material-symbols:person-outline-rounded'
|
|
"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
<span
|
|
:style="{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}"
|
|
>
|
|
{{ cart.customer__fullname || "Khách hàng mới" }}
|
|
</span>
|
|
<span
|
|
@click.stop="removeCart(cart.id)"
|
|
class="close ml-auto icon rounded-full"
|
|
>
|
|
<Icon name="material-symbols:close-rounded" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li
|
|
@click="addCart"
|
|
title="Tạo giỏ hàng"
|
|
>
|
|
<a class="new h-full">
|
|
<Icon
|
|
:name="isAddingCart ? 'svg-spinners:180-ring-with-bg' : 'material-symbols:add-rounded'"
|
|
:size="16"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tabs a {
|
|
background-color: hsl(from var(--bulma-tabs-boxed-link-hover-background-color) h s calc(l + 1));
|
|
--bulma-tabs-link-padding: 0.4em 1em 0.4em 0.5em;
|
|
&.new {
|
|
--bulma-tabs-link-padding: 0.4em 0.5em 0.4em 0.5em;
|
|
}
|
|
}
|
|
|
|
.tabs a:hover {
|
|
background-color: hsl(from var(--bulma-tabs-boxed-link-hover-background-color) h s calc(l - 2));
|
|
}
|
|
|
|
.tabs ul {
|
|
border: none;
|
|
}
|
|
|
|
.tabs li.is-active a {
|
|
cursor: initial;
|
|
}
|
|
|
|
.close {
|
|
display: none;
|
|
background-color: var(--bulma-white-ter);
|
|
cursor: pointer;
|
|
}
|
|
li:hover .close {
|
|
display: flex;
|
|
}
|
|
.close:hover {
|
|
background-color: var(--bulma-grey-lighter);
|
|
}
|
|
</style>
|