changes

2026-06-15 09:47:39 +07:00
parent 2932730fc3
commit a9c37cfff5
12 changed files with 319 additions and 123 deletions
--- a/app/components/AppLoading.vue
+++ b/app/components/AppLoading.vue
@@ -24,7 +24,10 @@ onMounted(() => {
 </script>

 <template>
-  <div class="h-dvh">
+  <div
+    class="absolute w-dvw h-dvh has-background-blue-100"
+    style="z-index: 40; /* because .navbar is 30 */"
+  >
    <div
      class="absolute is-flex is-gap-1.5 is-flex-direction-column is-justify-content-center is-align-items-center"
      style="top: 40%; left: 50%; transform: translateX(-50%)"
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -215,10 +215,17 @@ if (selected.value) doSelect(selected.value);

 watch(
  () => props.optionid,
-  () => {
-    if (props.optionid) selected.value = $find(suggestions.value, { id: props.optionid });
-    if (selected.value) doSelect(selected.value);
-    else value.value = undefined;
+  (newVal) => {
+    if (!newVal) {
+      selected.value = undefined;
+      value.value = undefined;
+      clearTrigger.value++;
+    } else {
+      selected.value = $find(suggestions.value, { id: newVal });
+      if (selected.value) {
+        doSelect(selected.value);
+      } else value.value = undefined;
+    }
  },
 );

--- a/app/components/datatable/ScrollBox.vue
+++ b/app/components/datatable/ScrollBox.vue
@@ -17,7 +17,7 @@
          <td>
            <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
            <span
-              v-if="checked[i] && !notick"
+              v-if="tick && checked[i]"
              class="icon right-3 has-background-inherit"
            >
              <Icon
@@ -42,7 +42,7 @@
      >
        <span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
        <span
-          v-if="checked[i] && notick !== true"
+          v-if="tick && checked[i]"
          class="icon right-3 has-background-inherit"
        >
          <Icon
@@ -64,7 +64,10 @@ const props = defineProps({
  sort: String,
  selects: String,
  keyval: String,
-  notick: Boolean,
+  tick: {
+    type: Boolean,
+    default: true,
+  },
  inContext: Boolean,
  clearTrigger: Number,
 });
--- a/app/components/pos/CartItem.vue
+++ b/app/components/pos/CartItem.vue
@@ -4,7 +4,7 @@ const props = defineProps({
  deleteable: Boolean,
 });
 const { $deleteapi, $numtoString, $snackbar } = useNuxtApp();
-const { getCart } = inject("pos");
+const { getCarts } = inject("pos");
 const showConfirmModal = ref();
 const isDeleting = ref(false);

@@ -25,7 +25,7 @@ async function removeFromCart() {
  await $deleteapi("Cart_Item", props.cartItem.id);
  isDeleting.value = false;
  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
-  getCart();
+  getCarts();
 }
 </script>

--- a/app/components/pos/CartTabs.vue
+++ b/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>
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -22,28 +22,15 @@ function toggleSelected(imeiRec) {
  }
 }

-const { cartItems, getCart } = inject("pos");
+const { activeCart, activeCartItems, getCarts } = inject("pos");
 const isAdding = ref(false);

 async function addToCart() {
  try {
    isAdding.value = true;
-    let cart = await $getdata("Cart", {
-      filter: { customer: store.customer },
-      first: true,
-    });
-
-    if (!cart) {
-      const newCart = await $insertapi("Cart", {
-        data: { customer: store.customer },
-        notify: false,
-      });
-
-      cart = newCart;
-    }

    const cartItemsPayload = selectedImeis.value.map((imeiRec) => ({
-      cart: cart.id,
+      cart: activeCart.value.id,
      imei: imeiRec.id,
      quantity: 1,
      total_price: imeiRec.variant__price,
@@ -54,7 +41,7 @@ async function addToCart() {
    });

    $snackbar(`Đã thêm ${newCartItems.length} sản phẩm vào giỏ hàng`, "Success");
-    getCart();
+    getCarts();
    emit("close");
  } catch (error) {
    console.error(error);
@@ -72,7 +59,7 @@ async function fetchImeis() {
  const imeisSoldFetched = await $getdata("IMEI_Sold");

  imeis.value = imeisFetched.filter((imeiRec) => {
-    const inCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
+    const inCart = activeCartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
    const sold = imeisSoldFetched.find((imeiSold) => imeiSold.imei === imeiRec.imei);
    return !inCart && !sold;
  });
--- a/app/components/pos/ConfirmOrder.vue
+++ b/app/components/pos/ConfirmOrder.vue
@@ -5,10 +5,10 @@ const emit = defineEmits(["close"]);
 const { $patchapi, $deleteapi, $insertapi, $dayjs, $snackbar } = useNuxtApp();
 const id = "confirmOrder";
 const isPending = ref(false);
-const { cartItems, orderInfo, getCart } = inject("pos");
+const { activeCart, activeCartItems, orderInfo, getCarts } = inject("pos");

 const subtotal = computed(() => {
-  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
+  return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
 const shipping_address = computed(() => {
  return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
@@ -19,12 +19,12 @@ async function createOrder() {
    isPending.value = true;
    const invoice = await $insertapi("Invoice", {
      data: {
-        customer: orderInfo.value.customer.id,
-        customer_name: orderInfo.value.customer.fullname,
-        customer_phone: orderInfo.value.customer.phone,
-        customer_email: orderInfo.value.customer.email,
+        customer: "",
+        customer_name: "",
+        customer_phone: "",
+        customer_email: "",
        shipping_address: shipping_address.value,
-        product_amount: cartItems.value.length,
+        product_amount: activeCartItems.value.length,
        shipping_fee: 0,
        total_amount: subtotal.value,
        discount_amount: 0,
@@ -38,7 +38,7 @@ async function createOrder() {
      notify: false,
    });

-    const imeisSoldPayload = cartItems.value.map((cartItem) => ({
+    const imeisSoldPayload = activeCartItems.value.map((cartItem) => ({
      imei: cartItem.imei__imei,
      variant: cartItem.imei__variant,
      sold_date: $dayjs().format("YYYY-MM-DD"),
@@ -49,7 +49,7 @@ async function createOrder() {
      notify: false,
    });

-    const invoiceDetailPayload = cartItems.value.map((cartItem) => {
+    const invoiceDetailPayload = activeCartItems.value.map((cartItem) => {
      const imeiSold = imeisSold.find((imeiSold) => imeiSold.imei === cartItem.imei__imei);
      return {
        invoice: invoice.id,
@@ -69,14 +69,14 @@ async function createOrder() {
    await Promise.all([
      $deleteapi(
        "Cart_Item",
-        cartItems.value.map((c) => c.id),
+        activeCartItems.value.map((c) => c.id),
      ),
      $patchapi("Cart", {
-        id: cartItems.value[0].cart,
+        id: activeCartItems.value[0].cart,
        customer: null,
      }),
    ]);
-    getCart();
+    getCarts();
    emit("close");
  } catch (error) {
    console.error(error);
@@ -101,11 +101,11 @@ async function createOrder() {
          <span>Khách hàng</span>
        </p>
        <div>
-          <p>{{ orderInfo.customer.fullname }}</p>
+          <p>{{ activeCart.customer__fullname }}</p>
          <p class="is-size-7 has-text-grey">
-            {{ orderInfo.customer.phone }}
+            {{ activeCart.customer__phone }}
            •
-            {{ orderInfo.customer.email }}
+            {{ activeCart.customer__email }}
          </p>
        </div>
      </div>
@@ -119,11 +119,11 @@ async function createOrder() {
              :size="18"
            />
          </span>
-          <span>{{ cartItems.length }} sản phẩm</span>
+          <span>{{ activeCartItems.length }} sản phẩm</span>
        </p>
        <div class="is-flex is-flex-direction-column is-gap-1">
          <CartItem
-            v-for="cartItem in cartItems"
+            v-for="cartItem in activeCartItems"
            :key="cartItem.id"
            :cartItem="cartItem"
          />
@@ -148,9 +148,9 @@ async function createOrder() {
          <div v-else>
            <p class="font-medium fs-16 mb-0.5">{{ shipping_address }}</p>
            <p class="has-text-grey">
-              <span>{{ orderInfo.customer.fullname }}</span>
+              <span>{{ activeCart.customer__fullname }}</span>
              <span> • </span>
-              <span>{{ orderInfo.customer.phone }}</span>
+              <span>{{ activeCart.customer__phone }}</span>
            </p>
          </div>
        </div>
@@ -177,7 +177,7 @@ async function createOrder() {
              <tr>
                <td>
                  <span>Tạm tính</span>
-                  <span> ({{ cartItems.length }} sản phẩm)</span>
+                  <span> ({{ activeCartItems.length }} sản phẩm)</span>
                </td>
                <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
              </tr>
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -1,36 +1,45 @@
 <script setup>
+import { without } from "es-toolkit";
 import Address from "~/components/pos/Address.vue";
 import CartItem from "~/components/pos/CartItem.vue";
+import CartTabs from "~/components/pos/CartTabs.vue";
 import SearchBox from "~/components/SearchBox.vue";

 const store = useStore();
-const { $getdata, $patchapi, $numtoString } = useNuxtApp();
-const cart = ref();
-const cartItems = ref();
+const { $findapi, $getapi, $getdata, $patchapi, $numtoString } = useNuxtApp();
+const carts = ref([]);
+const cartItems = ref([]);
+const customers = ref([]);
+const activeCartId = ref();
+const activeCart = computed(() => carts.value.find((c) => c.id === activeCartId.value));
+const activeCartItems = computed(() => cartItems.value.filter((ci) => ci.cart === activeCartId.value));
 const isUpdating = ref(false);

-async function getCart() {
-  try {
-    isUpdating.value = true;
-    const cartFetched = await $getdata("Cart", {
-      first: true,
-    });
-    cart.value = cartFetched;
+async function getCarts() {
+  const apis = $findapi(["Cart", "Cart_Item", "customer"]);
+  const [cartsRes, cartItemsRes, customersRes] = await $getapi(apis);

-    const cartItemsFetched = await $getdata("Cart_Item", {
-      filter: {
-        cart: cartFetched.id,
-      },
-    });
-    cartItems.value = cartItemsFetched;
-  } catch (error) {
-    console.error(error);
-  } finally {
-    isUpdating.value = false;
-  }
+  carts.value = cartsRes.data.rows || [];
+  cartItems.value = cartItemsRes.data.rows || [];
+  customers.value = customersRes.data.rows || [];
 }

-onMounted(getCart);
+const customerIdsWithNoCart = computed(() => {
+  const cusIds = customers.value.map((c) => c.id);
+  const cusIdsWithCart = carts.value.filter((c) => c.customer).map((c) => c.customer);
+  const cusIdsWithNoCart = without(cusIds, ...cusIdsWithCart);
+  return cusIdsWithNoCart;
+});
+
+onMounted(async () => {
+  await getCarts();
+  activeCartId.value = carts.value[0].id;
+});
+
+watch(activeCartId, () => {
+  orderInfo.value.deliveryMethod = null;
+  orderInfo.value.paymentMethod = null;
+});

 const showProductSelectionModal = ref();
 function openProductSelectionModal() {
@@ -43,43 +52,45 @@ function openProductSelectionModal() {
 }

 const orderInfo = ref({
-  customer: null,
  address: null,
  deliveryMethod: null,
  paymentMethod: null,
 });
 const addresses = ref([]);
 const subtotal = computed(() => {
-  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
+  return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });

 async function getAddresses() {
  addresses.value = await $getdata("Customer_Address", {
-    filter: { customer: orderInfo.value.customer.id },
+    filter: { customer: activeCart.value.customer },
  });
 }

-watch(
-  () => orderInfo.value.customer,
-  async (newVal, oldVal) => {
-    const updatedCart = await $patchapi("Cart", {
-      id: cart.value.id,
-      customer: newVal?.id,
-    });
-    getCart();
-
-    if (newVal) {
-      await getAddresses();
-      if (oldVal === null || oldVal.id !== newVal.id) {
-        const defaultAddress = addresses.value.find((add) => add.is_default);
-        orderInfo.value.address = defaultAddress;
-      }
-    } else {
-      addresses.value = null;
-      orderInfo.value.address = null;
+watch(activeCart, async (newVal, oldVal) => {
+  // set order info
+  if (newVal.customer) {
+    await getAddresses();
+    if (!oldVal || !oldVal.customer || oldVal.customer !== newVal.customer) {
+      const defaultAddress = addresses.value.find((add) => add.is_default);
+      orderInfo.value.address = defaultAddress;
    }
-  },
-);
+  } else {
+    addresses.value = null;
+    orderInfo.value.address = null;
+  }
+});
+
+const isChangingCus = ref(false);
+async function changeCustomer(cusId) {
+  isChangingCus.value = true;
+  const updatedCart = await $patchapi("Cart", {
+    id: activeCartId.value,
+    customer: cusId,
+  });
+  await getCarts();
+  isChangingCus.value = false;
+}

 watch(
  () => orderInfo.value.deliveryMethod,
@@ -92,8 +103,8 @@ watch(
 );

 const isOrderValid = computed(() => {
-  if (cartItems.value?.length === 0) return false;
-  if (!orderInfo.value.customer) return false;
+  if (activeCartItems.value?.length === 0) return false;
+  if (!activeCart.value?.customer) return false;
  if (!orderInfo.value.deliveryMethod) return false;
  if (!orderInfo.value.paymentMethod) return false;
  if (orderInfo.value.deliveryMethod.code === "HOME_DELIVERY" && !orderInfo.value.address) return false;
@@ -112,17 +123,34 @@ function openConfirmModal() {
 }

 provide("pos", {
-  cartItems,
+  carts,
+  activeCartId,
+  activeCart,
+  activeCartItems,
+  isChangingCus,
  orderInfo,
-  getCart,
+  getCarts,
 });
 </script>

 <template>
  <div>
-    <div class="fixed-grid has-1-cols-mobile has-12-cols">
-      <div class="grid">
-        <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-8']">
+    <!-- <div class="fs-11">
+      <pre>customerIdsWithNoCart: {{ customerIdsWithNoCart }}</pre>
+      <pre>{{ customerIdsWithNoCart }}</pre>
+      <pre>{{ activeCart }}</pre>
+      <pre>{{ JSON.stringify(activeCartItems) }}</pre>
+      <pre>{{ JSON.stringify(activeCart) }}</pre>
+      <pre>activeCart?.customer: {{ JSON.stringify(activeCart?.customer) }}</pre>
+      <pre>{{ orderInfo }}</pre>
+    </div> -->
+    <CartTabs />
+    <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
+      <div
+        class="grid"
+        style="row-gap: 0"
+      >
+        <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
          <div class="card">
            <div class="card-content">
              <div class="block is-flex is-justify-content-space-between">
@@ -159,11 +187,11 @@ provide("pos", {
                </button>
              </div>
              <div
-                v-if="cartItems?.length > 0"
+                v-if="activeCartItems?.length > 0"
                class="is-flex is-flex-direction-column is-gap-1"
              >
                <CartItem
-                  v-for="cartItem in cartItems"
+                  v-for="cartItem in activeCartItems"
                  :key="cartItem.id"
                  :cartItem="cartItem"
                  deleteable
@@ -173,12 +201,12 @@ provide("pos", {
                v-else
                class="py-4 fs-16 has-text-centered has-text-grey"
              >
-                Không có sản phẩm nào trong giỏ hàng.
+                Chưa có sản phẩm nào trong giỏ hàng.
              </p>
            </div>
          </div>
        </div>
-        <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-4']">
+        <div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
          <div class="card">
            <div class="card-content">
              <p class="icon-text fs-16 font-semibold mb-4">
@@ -194,12 +222,15 @@ provide("pos", {
                <SearchBox
                  v-bind="{
                    api: 'customer',
+                    // filter: { id__in: [...customerIdsWithNoCart, activeCart?.customer] },
                    field: 'label',
                    column: ['label'],
                    first: true,
-                    optionid: cart?.customer,
                    placeholder: 'Khách hàng',
-                    onOption: (e) => (orderInfo.customer = e),
+                    optionid: activeCart?.customer,
+                    onOption: (e) => {
+                      if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
+                    },
                    addon: {
                      component: 'customer/CustomerQuickAdd',
                      width: '50%',
@@ -230,22 +261,23 @@ provide("pos", {
                    column: ['name'],
                    first: true,
                    placeholder: 'Phương thức giao hàng',
+                    optionid: orderInfo.deliveryMethod?.id,
                    onOption: (e) => (orderInfo.deliveryMethod = e),
                  }"
                />
              </div>
              <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
-                <div v-if="orderInfo.customer">
+                <div v-if="activeCart.customer">
                  <div class="block">
                    <p class="mb-2">Thông tin người nhận</p>
-                    <div v-if="orderInfo.customer">
+                    <div v-if="activeCart.customer">
                      <div class="field">
                        <label class="label is-small">Tên</label>
                        <p class="control">
                          <input
                            class="input is-small"
                            type="email"
-                            :value="orderInfo.customer.fullname"
+                            :value="activeCart.customer__fullname"
                            placeholder="Name"
                            disabled
                          />
@@ -257,7 +289,7 @@ provide("pos", {
                          <input
                            class="input is-small"
                            type="email"
-                            :value="orderInfo.customer?.phone"
+                            :value="activeCart.customer__phone"
                            placeholder="Phone"
                            disabled
                          />
@@ -311,6 +343,7 @@ provide("pos", {
                    column: ['name'],
                    first: true,
                    placeholder: 'Phương thức thanh toán',
+                    optionid: orderInfo.paymentMethod?.id,
                    onOption: (e) => (orderInfo.paymentMethod = e),
                  }"
                />
@@ -326,7 +359,7 @@ provide("pos", {
                    <tr>
                      <td>
                        <span>Tạm tính</span>
-                        <span> ({{ cartItems?.length || 0 }} sản phẩm)</span>
+                        <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
                      </td>
                      <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                    </tr>
@@ -363,3 +396,28 @@ provide("pos", {
    />
  </div>
 </template>
+
+<style lang="scss" scoped>
+@use "bulma/sass/utilities/mixins.scss" as *;
+
+.cell > .card {
+  border-radius: 0;
+  border: none;
+  margin-bottom: 0;
+}
+
+.fixed-grid {
+  border: 1px solid var(--bulma-border);
+  border-bottom-left-radius: var(--bulma-radius);
+  border-bottom-right-radius: var(--bulma-radius);
+}
+.sidebar {
+  border-left: 1px solid var(--bulma-border);
+  border-top: none;
+
+  @include touch {
+    border-left: none;
+    border-top: 1px solid var(--bulma-border);
+  }
+}
+</style>