changes

app/components/pos/Address.vue

@@ -20,7 +20,7 @@ function openEditModal() {
 <template>
   <div
     :class="['card is-clickable', selected && 'selected']"
-    @click="$emit('selectAddress', address.id)"
+    @click="$emit('selectAddress', address)"
   >
     <div class="card-content is-flex is-justify-content-space-between">
       <div>

app/components/pos/ChooseIMEIModal.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   variant: Object,
 });
 const store = useStore();
-const { $getdata, $snackbar } = useNuxtApp();
+const { $getdata, $insertapi, $snackbar } = useNuxtApp();
 const emit = defineEmits(["close"]);
 
 const isLoading = ref(false);
@@ -26,7 +26,10 @@ function toggleSelected(imeiRec) {
 }
 
 function addToCart() {
-  store.selectedImeis = [...store.selectedImeis, ...selectedImeis.value];
+  // store.selectedImeis = [...store.selectedImeis, ...selectedImeis.value];
+  /* 
+    insert into cart with customer = 
+   */
   $snackbar(`Thêm ${selectedImeis.value.length} sản phẩm vào giỏ hàng`, "Success");
   emit("close");
 }

app/components/pos/ConfirmOrder.vue

@@ -0,0 +1,138 @@
+<script setup>
+import ProductCard from "~/components/pos/ProductCard.vue";
+
+const props = defineProps({
+  customer: Object,
+  address: Object,
+  paymentMethod: Object,
+});
+
+const { $insertapi } = useNuxtApp();
+const id = "confirmOrder";
+const store = useStore();
+const subtotal = computed(() => {
+  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+});
+const shipping_address = computed(() => {
+  return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.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,
+    },
+  });
+}
+</script>
+
+<template>
+  <div :id="id">
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:supervisor-account-outline-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Khách hàng</span>
+        </p>
+        <div>
+          <p>{{ props.customer.fullname }}</p>
+          <p class="is-size-7 has-text-grey">
+            {{ props.customer.phone }}
+            •
+            {{ props.customer.email }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:shopping-cart-outline-rounded"
+              :size="18"
+            />
+          </span>
+          <span>{{ store.selectedImeis.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"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text font-semibold mb-2">
+          <span class="icon">
+            <Icon
+              name="material-symbols:credit-card-outline"
+              :size="18"
+            />
+          </span>
+          <span>Thanh toán</span>
+        </p>
+        <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>
+          </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>
+                </td>
+                <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
+              </tr>
+              <tr>
+                <td class="font-bold fs-14">Tổng cộng</td>
+                <td class="has-text-right has-text-success-35 font-bold fs-17">
+                  {{ $numtoString(subtotal, { hasUnit: true }) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <pre>{{ props }}</pre>
+    <Teleport
+      defer
+      :to="`.modal-card:has(#${id}) .modal-card-foot`"
+    >
+      <div class="buttons w-full is-right">
+        <button
+          @click="$emit('close')"
+          class="button is-white"
+        >
+          Huỷ
+        </button>
+        <button class="button is-success">Đặt hàng</button>
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style scoped>
+.table {
+  background-color: transparent;
+
+  td {
+    background-color: transparent;
+  }
+}
+</style>

app/components/pos/POS.vue

@@ -1,8 +1,8 @@
 <script setup>
+import { isNil } from "es-toolkit";
 import Address from "~/components/pos/Address.vue";
 import ProductCard from "~/components/pos/ProductCard.vue";
 import SearchBox from "~/components/SearchBox.vue";
-import { isNil } from "es-toolkit";
 
 const store = useStore();
 const { $getdata, $numtoString } = useNuxtApp();
@@ -19,6 +19,7 @@ function openModal() {
 const orderInfo = ref({
   customer: null,
   address: null,
+  deliveryMethod: null,
   paymentMethod: null,
 });
 const addresses = ref([]);
@@ -39,7 +40,7 @@ watch(
       await getAddresses();
       if (oldVal === null || oldVal.id !== newVal.id) {
         const defaultAddress = addresses.value.find((add) => add.is_default);
-        orderInfo.value.address = defaultAddress?.id;
+        orderInfo.value.address = defaultAddress;
       }
     } else {
       addresses.value = null;
@@ -47,38 +48,49 @@ watch(
     }
   },
 );
+
+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,
+  };
+}
 </script>
 
 <template>
   <div>
-    <div class="block">
-      <button
-        @click="openModal"
-        class="button is-primary"
-      >
-        <span class="icon">
-          <Icon
-            name="material-symbols:add-rounded"
-            :size="20"
-          />
-        </span>
-        <span>Chọn sản phẩm</span>
-      </button>
-    </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="card">
             <div class="card-content">
-              <p class="icon-text fs-16 font-semibold mb-4">
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:shopping-cart-outline-rounded"
-                    :size="18"
-                  />
-                </span>
-                <span>Giỏ hàng</span>
-              </p>
+              <div class="is-flex is-justify-content-space-between">
+                <p class="icon-text fs-16 font-semibold mb-4">
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:shopping-cart-outline-rounded"
+                      :size="18"
+                    />
+                  </span>
+                  <span>Giỏ hàng</span>
+                </p>
+                <button
+                  @click="openModal"
+                  class="button is-primary"
+                >
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:add-rounded"
+                      :size="20"
+                    />
+                  </span>
+                  <span>Thêm sản phẩm</span>
+                </button>
+              </div>
               <div
                 v-if="store.selectedImeis.length > 0"
                 class="is-flex is-flex-direction-column is-gap-1"
@@ -87,11 +99,12 @@ watch(
                   v-for="imei in store.selectedImeis"
                   :key="imei.id"
                   :imei="imei"
+                  deleteable
                 />
               </div>
               <p
                 v-else
-                class="py-4 fs-16 has-text-grey has-text-centered"
+                class="py-4 fs-16 has-text-centered has-text-grey"
               >
                 Không có sản phẩm nào trong giỏ hàng
               </p>
@@ -99,7 +112,7 @@ watch(
           </div>
         </div>
         <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-4']">
-          <div class="card mb-3">
+          <div class="card">
             <div class="card-content">
               <p class="icon-text fs-16 font-semibold mb-4">
                 <span class="icon">
@@ -130,7 +143,7 @@ watch(
               </div>
             </div>
           </div>
-          <div class="card mb-3">
+          <div class="card">
             <div class="card-content">
               <p class="icon-text fs-16 font-semibold mb-4">
                 <span class="icon">
@@ -142,6 +155,18 @@ watch(
                 <span>Giao hàng</span>
               </p>
               <div>
+                <SearchBox
+                  v-bind="{
+                    api: 'Delivery_Method',
+                    field: 'name',
+                    column: ['name'],
+                    first: true,
+                    placeholder: 'Phương thức giao hàng',
+                    onOption: (e) => (orderInfo.deliveryMethod = e),
+                  }"
+                />
+              </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">
@@ -179,16 +204,22 @@ watch(
                       v-for="address in addresses"
                       :key="address"
                       :address="address"
-                      :selected="orderInfo.address === address.id"
+                      :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>
             </div>
           </div>
-          <div class="card mb-3">
+          <div class="card">
             <div class="card-content">
               <p class="icon-text fs-16 font-semibold mb-4">
                 <span class="icon">
@@ -213,7 +244,7 @@ watch(
               </div>
             </div>
           </div>
-          <div class="card mb-3">
+          <div class="card">
             <div class="card-content">
               <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
               <div>
@@ -235,6 +266,7 @@ watch(
                   </tbody>
                 </table>
                 <button
+                  @click="openConfirmModal"
                   class="button is-fullwidth is-success"
                   :disabled="Object.values(orderInfo).some(isNil)"
                 >
@@ -246,5 +278,10 @@ watch(
         </div>
       </div>
     </div>
+    <Modal
+      v-if="showConfirmModal"
+      v-bind="showConfirmModal"
+      @close="showConfirmModal = undefined"
+    />
   </div>
 </template>

app/components/pos/ProductCard.vue

@@ -3,6 +3,7 @@ import { remove } from "es-toolkit";
 
 const props = defineProps({
   imei: Object,
+  deleteable: Boolean,
 });
 const { $numtoString, $snackbar } = useNuxtApp();
 const store = useStore();
@@ -35,7 +36,7 @@ function removeFromCart() {
         </div>
         <p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
       </div>
-      <div>
+      <div v-if="deleteable">
         <button
           @click="removeFromCart"
           class="button is-danger is-light"