changes

app/components/pos/Address.vue

@@ -1,9 +1,12 @@
 <script setup>
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+
 const props = defineProps({
   address: Object,
   selected: Boolean,
 });
 
+const { activeCart } = useActiveCart();
 const showModal = ref(false);
 
 function openEditModal() {
@@ -12,7 +15,10 @@ function openEditModal() {
     title: "Cập nhật địa chỉ",
     width: "50%",
     height: "auto",
-    vbind: { address: props.address },
+    vbind: {
+      customerId: activeCart.value.customer,
+      address: props.address,
+    },
   };
 }
 </script>

app/components/pos/AddressForm.vue

@@ -2,10 +2,11 @@
 import { isEqual } from "es-toolkit";
 
 const props = defineProps({
+  customerId: Number,
   address: Object,
 });
 
-const emit = defineEmits(["modalevent"]);
+const emit = defineEmits(["modalevent", "close"]);
 
 const { $insertapi, $patchapi } = useNuxtApp();
 const addressRef = ref({ ...props.address });
@@ -13,11 +14,16 @@ const isLoading = ref(false);
 
 async function submitAddress() {
   isLoading.value = true;
+  const payload = {
+    ...addressRef.value,
+    customer: props.customerId,
+  };
   const res = props.address
-    ? await $patchapi("Customer_Address", addressRef.value)
-    : await $insertapi("Customer_Address", addressRef.value);
+    ? await $patchapi("Customer_Address", payload)
+    : await $insertapi("Customer_Address", { data: payload });
   isLoading.value = false;
   emit("modalevent", { name: "submit" });
+  emit("close");
 }
 
 const isDirty = computed(() => {

app/components/pos/POS.vue

@@ -40,6 +40,10 @@ function openAddAddressModal() {
     title: "Thêm địa chỉ",
     width: "50%",
     height: "auto",
+    vbind: {
+      customerId: activeCart.value.customer,
+      address: undefined,
+    },
   };
 }
 </script>
@@ -214,25 +218,11 @@ function openAddAddressModal() {
                     </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"
-                          @submit="posStore.getAddresses(activeCart.customer)"
-                        />
-                      </div>
-                      <div
-                        v-else
-                        class="has-text-centered"
-                      >
-                        <p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
+                      <div class="block is-flex is-justify-content-space-between is-align-items-center">
+                        <p>Địa chỉ giao hàng</p>
                         <button
                           @click="openAddAddressModal"
-                          class="button is-light is-primary"
+                          class="button is-small is-light is-primary"
                         >
                           <span class="icon">
                             <Icon
@@ -243,6 +233,21 @@ function openAddAddressModal() {
                           <span>Thêm địa chỉ</span>
                         </button>
                       </div>
+                      <Address
+                        v-if="addresses.length > 0"
+                        v-for="address in addresses"
+                        :key="address"
+                        :address="address"
+                        :selected="orderInfo.address?.id === address.id"
+                        @selectAddress="orderInfo.address = $event"
+                        @submit="posStore.getAddresses(activeCart.customer)"
+                      />
+                      <div
+                        v-else
+                        class="has-text-grey has-text-centered p-4"
+                      >
+                        Khách hàng chưa có địa chỉ
+                      </div>
                     </div>
                   </div>
                   <p
@@ -370,6 +375,7 @@ function openAddAddressModal() {
       v-if="showModal"
       v-bind="showModal"
       @close="showModal = undefined"
+      @submit="posStore.getAddresses(activeCart.customer)"
     />
   </div>
 </template>