changes

app/components/pos/CartTabs.vue

@@ -0,0 +1,129 @@
+<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>