changes

app/components/pos/EditAddress.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { isEqual } from "es-toolkit";
+
+const props = defineProps({
+  address: Object,
+});
+
+const emit = defineEmits(["modalevent"]);
+
+const { $patchapi } = useNuxtApp();
+const addressRef = ref({ ...props.address });
+const isLoading = ref(false);
+async function updateAddress() {
+  isLoading.value = true;
+  const updated = await $patchapi("Customer_Address", addressRef.value);
+  isLoading.value = false;
+  emit("modalevent", { name: "update" });
+}
+</script>
+
+<template>
+  <form>
+    <div class="field">
+      <label class="label">Địa chỉ</label>
+      <div class="control">
+        <input
+          v-model="addressRef.address_detail"
+          class="input"
+          type="text"
+          placeholder="Địa chỉ"
+        />
+      </div>
+    </div>
+    <div class="fixed-grid has-12-cols">
+      <div class="grid">
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Phường</label>
+            <div class="control">
+              <input
+                v-model="addressRef.ward"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Quận</label>
+            <div class="control">
+              <input
+                v-model="addressRef.district"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Thành phố</label>
+            <div class="control">
+              <input
+                v-model="addressRef.city"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="field">
+      <div class="control">
+        <label class="checkbox is-flex is-gap-0.5 is-align-items-center">
+          <Icon
+            :name="
+              addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
+            "
+            :class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-light']"
+            :size="24"
+            @click="addressRef.is_default = !addressRef.is_default"
+          />
+          <span>Địa chỉ mặc định</span>
+          <input
+            type="checkbox"
+            class="is-sr-only"
+            v-model="addressRef.is_default"
+          />
+        </label>
+      </div>
+    </div>
+    <div class="field is-grouped is-grouped-right">
+      <div class="control">
+        <button
+          type="button"
+          class="button is-white"
+          @click="$emit('close')"
+        >
+          Huỷ
+        </button>
+      </div>
+      <div class="control">
+        <button
+          type="button"
+          :class="['button is-link', isLoading && 'is-loading']"
+          :disabled="isEqual(address, addressRef)"
+          @click="updateAddress"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:edit-outline-rounded"
+              :size="16"
+            />
+          </span>
+          <span>Cập nhật</span>
+        </button>
+      </div>
+    </div>
+  </form>
+</template>