147 lines
4.1 KiB
Vue
147 lines
4.1 KiB
Vue
<script setup>
|
|
import { isEqual } from "es-toolkit";
|
|
|
|
const props = defineProps({
|
|
customerId: Number,
|
|
address: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["modalevent", "close"]);
|
|
|
|
const { $insertapi, $patchapi } = useNuxtApp();
|
|
const addressRef = ref({ ...props.address });
|
|
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", payload)
|
|
: await $insertapi("Customer_Address", { data: payload });
|
|
isLoading.value = false;
|
|
emit("modalevent", { name: "submit" });
|
|
emit("close");
|
|
}
|
|
|
|
const isDirty = computed(() => {
|
|
if (props.address) return !isEqual(props.address, addressRef.value);
|
|
return true;
|
|
});
|
|
const isValid = computed(() => {
|
|
if (!addressRef.value.city) return false;
|
|
if (!addressRef.value.district) return false;
|
|
if (!addressRef.value.ward) return false;
|
|
if (!addressRef.value.address_detail) return false;
|
|
return true;
|
|
});
|
|
</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="Phường"
|
|
/>
|
|
</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="Quận"
|
|
/>
|
|
</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="Thành phố"
|
|
/>
|
|
</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-70']"
|
|
: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="address ? !isDirty || !isValid : !isValid"
|
|
@click="submitAddress"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
:name="address ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
<span>{{ address ? "Cập nhật" : "Tạo" }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|