changes

app/components/pos/CartItem.vue

@@ -1,9 +1,12 @@
 <script setup>
 const props = defineProps({
   cartItem: Object,
+  deleteable: Boolean,
 });
 const { $deleteapi, $numtoString, $snackbar } = useNuxtApp();
+const { getCart } = inject("pos");
 const showConfirmModal = ref();
+const isDeleting = ref(false);
 
 function openConfirmModal() {
   showConfirmModal.value = {
@@ -17,9 +20,10 @@ function openConfirmModal() {
   };
 }
 
-const getCart = inject("getCart");
 async function removeFromCart() {
+  isDeleting.value = true;
   await $deleteapi("Cart_Item", props.cartItem.id);
+  isDeleting.value = false;
   $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
   getCart();
 }
@@ -51,8 +55,9 @@ async function removeFromCart() {
         </p>
       </div>
       <button
+        v-if="deleteable"
         @click="openConfirmModal"
-        class="button is-danger is-light"
+        :class="['button is-danger is-light', isDeleting && 'is-loading']"
       >
         <span class="icon">
           <Icon

app/components/pos/ChooseIMEIModal.vue

@@ -22,8 +22,7 @@ function toggleSelected(imeiRec) {
   }
 }
 
-const cartItems = inject("cartItems");
-const getCart = inject("getCart");
+const { cartItems, getCart } = inject("pos");
 const isAdding = ref(false);
 async function addToCart() {
   try {
@@ -70,10 +69,12 @@ async function fetchImeis() {
   const imeisFetched = await $getdata("IMEI", {
     filter: { variant: props.variant.id },
   });
+  const imeisSoldFetched = await $getdata("IMEI_Sold");
 
   imeis.value = imeisFetched.filter((imeiRec) => {
-    const alreadyInCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
-    return !alreadyInCart;
+    const inCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
+    const sold = imeisSoldFetched.find((imeiSold) => imeiSold.imei === imeiRec.imei);
+    return !inCart && !sold;
   });
 
   isLoading.value = false;

app/components/pos/ConfirmOrder.vue

@@ -1,33 +1,84 @@
 <script setup>
-import ProductCard from "~/components/pos/ProductCard.vue";
+import CartItem from "~/components/pos/CartItem.vue";
 
-const props = defineProps({
-  customer: Object,
-  address: Object,
-  paymentMethod: Object,
-});
-
-const { $insertapi } = useNuxtApp();
+const emit = defineEmits(["close"]);
+const { $patchapi, $deleteapi, $insertapi, $dayjs, $snackbar } = useNuxtApp();
 const id = "confirmOrder";
-const store = useStore();
+const isPending = ref(false);
+const { cartItems, orderInfo, getCart } = inject("pos");
+
 const subtotal = computed(() => {
-  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
 const shipping_address = computed(() => {
-  return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.address.city}`;
+  return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
 });
 
 async function createOrder() {
-  const order = await $insertapi("Invoice", {
-    data: {
-      customer: props.customer.id,
-      customer_name: props.customer.fullname,
-      customer_phone: props.customer.phone,
-      customer_email: props.customer.email,
-      shipping_address,
-      product_amount: store.selectedImeis.length,
-    },
-  });
+  try {
+    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,
+        shipping_address: shipping_address.value,
+        product_amount: cartItems.value.length,
+        shipping_fee: 0,
+        total_amount: subtotal.value,
+        discount_amount: 0,
+        final_amount: subtotal.value,
+        order_type: "pos",
+        status: "pending",
+        ordered_at: new Date(),
+        paid_at: new Date(),
+        delivery_method: orderInfo.value.deliveryMethod.id,
+      },
+      notify: false,
+    });
+
+    const imeisSoldPayload = cartItems.value.map((cartItem) => ({
+      imei: cartItem.imei__imei,
+      variant: cartItem.imei__variant,
+      sold_date: $dayjs().format("YYYY-MM-DD"),
+    }));
+
+    const imeisSold = await $insertapi("IMEI_Sold", {
+      data: imeisSoldPayload,
+      notify: false,
+    });
+
+    const invoiceDetailPayload = cartItems.value.map((cartItem) => {
+      const imeiSold = imeisSold.find((imeiSold) => imeiSold.imei === cartItem.imei__imei);
+      return {
+        invoice: invoice.id,
+        variant: cartItem.imei__variant,
+        imei_sold: imeiSold.id,
+        price: cartItem.imei__variant__price,
+      };
+    });
+
+    const invoiceDetails = await $insertapi("Invoice_Detail", {
+      data: invoiceDetailPayload,
+      notify: false,
+    });
+
+    $snackbar("Tạo đơn hàng thành công", "Success");
+
+    await Promise.all(cartItems.value.map(({ id }) => $deleteapi("Cart_Item", id)));
+    await $patchapi("Cart", {
+      id: cartItems.value[0].cart,
+      customer: null,
+    });
+    getCart();
+    emit("close");
+  } catch (error) {
+    console.error(error);
+    $snackbar("Tạo đơn hàng không thành công", "Error");
+  } finally {
+    isPending.value = false;
+  }
 }
 </script>
 
@@ -45,11 +96,11 @@ async function createOrder() {
           <span>Khách hàng</span>
         </p>
         <div>
-          <p>{{ props.customer.fullname }}</p>
+          <p>{{ orderInfo.customer.fullname }}</p>
           <p class="is-size-7 has-text-grey">
-            {{ props.customer.phone }}
+            {{ orderInfo.customer.phone }}
             •
-            {{ props.customer.email }}
+            {{ orderInfo.customer.email }}
           </p>
         </div>
       </div>
@@ -63,17 +114,43 @@ async function createOrder() {
               :size="18"
             />
           </span>
-          <span>{{ store.selectedImeis.length }} sản phẩm</span>
+          <span>{{ cartItems.length }} sản phẩm</span>
         </p>
         <div class="is-flex is-flex-direction-column is-gap-1">
-          <ProductCard
-            v-for="imei in store.selectedImeis"
-            :key="imei.id"
-            :imei="imei"
+          <CartItem
+            v-for="cartItem in cartItems"
+            :key="cartItem.id"
+            :cartItem="cartItem"
           />
         </div>
       </div>
     </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-4">
+          <span class="icon">
+            <Icon
+              name="material-symbols:delivery-truck-speed-outline-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Giao hàng</span>
+        </p>
+        <div>
+          <div v-if="orderInfo.deliveryMethod.code === 'INSTORE_PICKUP'">
+            <p>Nhận tại cửa hàng</p>
+          </div>
+          <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> • </span>
+              <span>{{ orderInfo.customer.phone }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="card">
       <div class="card-content has-background-primary-100">
         <p class="icon-text font-semibold mb-2">
@@ -88,14 +165,14 @@ async function createOrder() {
         <div>
           <div class="block is-flex is-justify-content-space-between">
             <span>Phương thức thanh toán</span>
-            <span>{{ props.paymentMethod.name }}</span>
+            <span>{{ orderInfo.paymentMethod.name }}</span>
           </div>
           <table class="table is-fullwidth fs-13">
             <tbody>
               <tr>
                 <td>
                   <span>Tạm tính</span>
-                  <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                  <span> ({{ cartItems.length }} sản phẩm)</span>
                 </td>
                 <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
               </tr>
@@ -110,7 +187,6 @@ async function createOrder() {
         </div>
       </div>
     </div>
-    <pre>{{ props }}</pre>
     <Teleport
       defer
       :to="`.modal-card:has(#${id}) .modal-card-foot`"
@@ -122,11 +198,23 @@ async function createOrder() {
         >
           Huỷ
         </button>
-        <button class="button is-success">Đặt hàng</button>
+        <button
+          @click="createOrder"
+          :class="['button is-success', isPending && 'is-loading']"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:check-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Đặt hàng</span>
+        </button>
       </div>
     </Teleport>
   </div>
 </template>
+
 <style scoped>
 .table {
   background-color: transparent;

app/components/pos/POS.vue

@@ -1,35 +1,35 @@
 <script setup>
-import { isNil } from "es-toolkit";
 import Address from "~/components/pos/Address.vue";
 import CartItem from "~/components/pos/CartItem.vue";
 import SearchBox from "~/components/SearchBox.vue";
 
 const store = useStore();
-const { $getdata, $numtoString } = useNuxtApp();
+const { $getdata, $patchapi, $numtoString } = useNuxtApp();
 const cart = ref();
 const cartItems = ref();
+const isUpdating = ref(false);
 
 async function getCart() {
-  console.count("getCart");
-  const cartFetched = await $getdata("Cart", {
-    filter: { customer: store.customer },
-    first: true,
-  });
-  cart.value = cartFetched;
+  try {
+    isUpdating.value = true;
+    const cartFetched = await $getdata("Cart", {
+      first: true,
+    });
+    cart.value = cartFetched;
 
-  const cartItemsFetched = await $getdata("Cart_Item", {
-    filter: {
-      cart: cartFetched.id,
-    },
-  });
-  cartItems.value = cartItemsFetched;
-
-  console.log("cartFetched", cartFetched);
-  console.log("cartItemsFetched", cartItemsFetched);
+    const cartItemsFetched = await $getdata("Cart_Item", {
+      filter: {
+        cart: cartFetched.id,
+      },
+    });
+    cartItems.value = cartItemsFetched;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isUpdating.value = false;
+  }
 }
 
-provide("cartItems", cartItems);
-provide("getCart", getCart);
 onMounted(getCart);
 
 const showProductSelectionModal = ref();
@@ -50,8 +50,7 @@ const orderInfo = ref({
 });
 const addresses = ref([]);
 const subtotal = computed(() => {
-  return 0;
-  // return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
 
 async function getAddresses() {
@@ -63,6 +62,12 @@ async function getAddresses() {
 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) {
@@ -76,16 +81,41 @@ watch(
   },
 );
 
+watch(
+  () => orderInfo.value.deliveryMethod,
+  (newVal) => {
+    if (newVal?.code === "HOME_DELIVERY") {
+      const defaultAddress = addresses.value.find((add) => add.is_default);
+      orderInfo.value.address = defaultAddress;
+    }
+  },
+);
+
+const isOrderValid = computed(() => {
+  if (cartItems.value?.length === 0) return false;
+  if (!orderInfo.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;
+
+  return true;
+});
+
 const showConfirmModal = ref();
 function openConfirmModal() {
   showConfirmModal.value = {
     component: "pos/ConfirmOrder",
     title: "Xác nhận đơn hàng",
     width: "60%",
-    height: "auto",
-    vbind: orderInfo.value,
+    height: "400px",
   };
 }
+
+provide("pos", {
+  cartItems,
+  orderInfo,
+  getCart,
+});
 </script>
 
 <template>
@@ -104,6 +134,16 @@ function openConfirmModal() {
                     />
                   </span>
                   <span>Giỏ hàng</span>
+                  <span
+                    v-if="isUpdating"
+                    class="icon"
+                  >
+                    <Icon
+                      name="svg-spinners:180-ring-with-bg"
+                      :size="18"
+                      class="has-text-primary"
+                    />
+                  </span>
                 </p>
                 <button
                   @click="openProductSelectionModal"
@@ -119,20 +159,21 @@ function openConfirmModal() {
                 </button>
               </div>
               <div
-                v-if="cartItems"
+                v-if="cartItems?.length > 0"
                 class="is-flex is-flex-direction-column is-gap-1"
               >
                 <CartItem
                   v-for="cartItem in cartItems"
                   :key="cartItem.id"
                   :cartItem="cartItem"
+                  deleteable
                 />
               </div>
               <p
                 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
+                Không có sản phẩm nào trong giỏ hàng.
               </p>
             </div>
           </div>
@@ -156,6 +197,7 @@ function openConfirmModal() {
                     field: 'label',
                     column: ['label'],
                     first: true,
+                    optionid: cart?.customer,
                     placeholder: 'Khách hàng',
                     onOption: (e) => (orderInfo.customer = e),
                     addon: {
@@ -180,7 +222,7 @@ function openConfirmModal() {
                 </span>
                 <span>Giao hàng</span>
               </p>
-              <div>
+              <div class="block">
                 <SearchBox
                   v-bind="{
                     api: 'Delivery_Method',
@@ -192,57 +234,62 @@ function openConfirmModal() {
                   }"
                 />
               </div>
-              <div v-if="orderInfo.customer">
-                <div class="block">
-                  <p class="mb-2">Thông tin người nhận</p>
-                  <div v-if="orderInfo.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"
-                          placeholder="Name"
-                          disabled
-                        />
-                      </p>
+              <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
+                <div v-if="orderInfo.customer">
+                  <div class="block">
+                    <p class="mb-2">Thông tin người nhận</p>
+                    <div v-if="orderInfo.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"
+                            placeholder="Name"
+                            disabled
+                          />
+                        </p>
+                      </div>
+                      <div>
+                        <label class="label is-small">SĐT</label>
+                        <p class="control">
+                          <input
+                            class="input is-small"
+                            type="email"
+                            :value="orderInfo.customer?.phone"
+                            placeholder="Phone"
+                            disabled
+                          />
+                        </p>
+                      </div>
                     </div>
-                    <div>
-                      <label class="label is-small">SĐT</label>
-                      <p class="control">
-                        <input
-                          class="input is-small"
-                          type="email"
-                          :value="orderInfo.customer?.phone"
-                          placeholder="Phone"
-                          disabled
-                        />
-                      </p>
+                  </div>
+                  <hr />
+                  <div class="block">
+                    <p class="mb-2">Địa chỉ giao hàng</p>
+                    <div v-if="addresses.length > 0">
+                      <Address
+                        v-for="address in addresses"
+                        :key="address"
+                        :address="address"
+                        :selected="orderInfo.address?.id === address.id"
+                        @selectAddress="orderInfo.address = $event"
+                        @update="getAddresses"
+                      />
+                    </div>
+                    <div v-else>
+                      <p class="has-text-grey has-text-centered p-4">Khách hàng chưa có địa chỉ</p>
                     </div>
                   </div>
                 </div>
-                <hr />
-                <div class="block">
-                  <p class="mb-2">Địa chỉ giao hàng</p>
-                  <div>
-                    <Address
-                      v-for="address in addresses"
-                      :key="address"
-                      :address="address"
-                      :selected="orderInfo.address?.id === address.id"
-                      @selectAddress="orderInfo.address = $event"
-                      @update="getAddresses"
-                    />
-                  </div>
-                </div>
-              </div>
-              <p
-                v-else-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'"
-                class="has-text-grey-light py-4 has-text-centered"
-              >
-                Chưa chọn khách hàng
-              </p>
+                <p
+                  v-else
+                  class="has-text-grey-light py-4 has-text-centered"
+                >
+                  Chưa chọn khách hàng
+                </p>
+              </template>
             </div>
           </div>
           <div class="card">
@@ -279,8 +326,7 @@ function openConfirmModal() {
                     <tr>
                       <td>
                         <span>Tạm tính</span>
-                        <span> ({{ 0 }} sản phẩm)</span>
-                        <!-- <span> ({{ store.selectedImeis.length }} sản phẩm)</span> -->
+                        <span> ({{ cartItems?.length || 0 }} sản phẩm)</span>
                       </td>
                       <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                     </tr>
@@ -294,8 +340,8 @@ function openConfirmModal() {
                 </table>
                 <button
                   @click="openConfirmModal"
+                  :disabled="!isOrderValid"
                   class="button is-fullwidth is-success"
-                  :disabled="Object.values(orderInfo).some(isNil)"
                 >
                   Thanh toán
                 </button>

app/components/pos/ProductCard.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { remove } from "es-toolkit";
-
-const props = defineProps({
-  imei: Object,
-  deleteable: Boolean,
-});
-const { $numtoString, $snackbar } = useNuxtApp();
-const store = useStore();
-function removeFromCart() {
-  remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
-  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
-}
-</script>
-
-<template>
-  <div class="card m-0">
-    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
-      <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
-        <div class="media m-0">
-          <div class="media-left">
-            <figure class="image is-48x48">
-              <img :src="imei.variant__image__path" />
-            </figure>
-          </div>
-          <div class="media-content">
-            <p class="font-semibold fs-15">{{ imei.variant__product__name }}</p>
-            <p class="fs-13 has-text-grey">
-              <span>{{ imei.variant__ram__code }}</span>
-              <span> • </span>
-              <span>{{ imei.variant__internal_storage__code }}</span>
-              <span> • </span>
-              <span>{{ imei.variant__color__name }}</span>
-            </p>
-          </div>
-        </div>
-        <p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
-      </div>
-      <div v-if="deleteable">
-        <button
-          @click="removeFromCart"
-          class="button is-danger is-light"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:delete-outline-rounded"
-              :size="18"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>