changes

app/components/pos/POS.vue

@@ -1,14 +1,40 @@
 <script setup>
 import { isNil } from "es-toolkit";
 import Address from "~/components/pos/Address.vue";
-import ProductCard from "~/components/pos/ProductCard.vue";
+import CartItem from "~/components/pos/CartItem.vue";
 import SearchBox from "~/components/SearchBox.vue";
 
 const store = useStore();
 const { $getdata, $numtoString } = useNuxtApp();
+const cart = ref();
+const cartItems = ref();
 
-function openModal() {
-  store.showmodal = {
+async function getCart() {
+  console.count("getCart");
+  const cartFetched = await $getdata("Cart", {
+    filter: { customer: store.customer },
+    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);
+}
+
+provide("cartItems", cartItems);
+provide("getCart", getCart);
+onMounted(getCart);
+
+const showProductSelectionModal = ref();
+function openProductSelectionModal() {
+  showProductSelectionModal.value = {
     component: "pos/ProductSelection",
     title: "Chọn sản phẩm",
     width: "85%",
@@ -24,7 +50,8 @@ const orderInfo = ref({
 });
 const addresses = ref([]);
 const subtotal = computed(() => {
-  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+  return 0;
+  // return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
 });
 
 async function getAddresses() {
@@ -68,7 +95,7 @@ function openConfirmModal() {
         <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-8']">
           <div class="card">
             <div class="card-content">
-              <div class="is-flex is-justify-content-space-between">
+              <div class="block is-flex is-justify-content-space-between">
                 <p class="icon-text fs-16 font-semibold mb-4">
                   <span class="icon">
                     <Icon
@@ -79,7 +106,7 @@ function openConfirmModal() {
                   <span>Giỏ hàng</span>
                 </p>
                 <button
-                  @click="openModal"
+                  @click="openProductSelectionModal"
                   class="button is-primary"
                 >
                   <span class="icon">
@@ -92,14 +119,13 @@ function openConfirmModal() {
                 </button>
               </div>
               <div
-                v-if="store.selectedImeis.length > 0"
+                v-if="cartItems"
                 class="is-flex is-flex-direction-column is-gap-1"
               >
-                <ProductCard
-                  v-for="imei in store.selectedImeis"
-                  :key="imei.id"
-                  :imei="imei"
-                  deleteable
+                <CartItem
+                  v-for="cartItem in cartItems"
+                  :key="cartItem.id"
+                  :cartItem="cartItem"
                 />
               </div>
               <p
@@ -253,7 +279,8 @@ function openConfirmModal() {
                     <tr>
                       <td>
                         <span>Tạm tính</span>
-                        <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                        <span> ({{ 0 }} sản phẩm)</span>
+                        <!-- <span> ({{ store.selectedImeis.length }} sản phẩm)</span> -->
                       </td>
                       <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                     </tr>
@@ -278,6 +305,11 @@ function openConfirmModal() {
         </div>
       </div>
     </div>
+    <Modal
+      v-if="showProductSelectionModal"
+      v-bind="showProductSelectionModal"
+      @close="showProductSelectionModal = undefined"
+    />
     <Modal
       v-if="showConfirmModal"
       v-bind="showConfirmModal"