updated address modal
This commit is contained in:
Mamalizz
@@ -12,13 +12,23 @@ import { useToast } from "~/composables/global/useToast";
|
||||
|
||||
type Props = {
|
||||
address?: Address;
|
||||
isShow: boolean;
|
||||
};
|
||||
|
||||
type Emits = {
|
||||
"update:address": [value: File];
|
||||
"update:isShow": [value: boolean];
|
||||
};
|
||||
|
||||
// props
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const { address } = toRefs(props);
|
||||
const { address, isShow } = toRefs(props);
|
||||
|
||||
// emits
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// computed
|
||||
|
||||
@@ -30,8 +40,6 @@ const { $queryClient: queryClient } = useNuxtApp();
|
||||
|
||||
const { addToast } = useToast();
|
||||
|
||||
const isShow = ref(false);
|
||||
|
||||
const addressData = ref<CreateOrUpdateAddressRequest>({
|
||||
id: address.value?.id ?? undefined,
|
||||
province: address.value?.province ?? "",
|
||||
@@ -56,6 +64,13 @@ const {
|
||||
isPending: createAddressIsPending,
|
||||
} = useCreateOrUpdateAddress(isEditing);
|
||||
|
||||
// computed
|
||||
|
||||
const visible = computed({
|
||||
get: () => isShow.value ?? false,
|
||||
set: (value: boolean) => emit("update:isShow", value),
|
||||
});
|
||||
|
||||
// methods
|
||||
|
||||
const closeModal = () => {
|
||||
@@ -71,7 +86,6 @@ const closeModal = () => {
|
||||
for_me: "بله",
|
||||
};
|
||||
}
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
const addNew = () => {
|
||||
@@ -122,199 +136,161 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot
|
||||
v-model:open="isShow"
|
||||
@update:open="
|
||||
(state) => {
|
||||
!state ? closeModal() : null;
|
||||
}
|
||||
"
|
||||
<Modal
|
||||
v-model="visible"
|
||||
:title="!!address ? 'ویرایش آدرس' : 'افزودن آدرس'"
|
||||
:icon="!!address ? 'bi:pen' : 'ci:plus'"
|
||||
:iconSize="!!address ? '20' : '32'"
|
||||
contectClass="!w-[70vw]"
|
||||
@close="closeModal"
|
||||
>
|
||||
<DialogTrigger>
|
||||
<template #trigger>
|
||||
<Button
|
||||
:end-icon="!!address ? 'bi:pen' : 'bi:plus'"
|
||||
:end-icon="!!address ? 'bi:pen' : 'ci:plus'"
|
||||
size="md"
|
||||
class="rounded-full"
|
||||
>
|
||||
<span class="font-bold">
|
||||
<span class="font-bold whitespace-pre">
|
||||
{{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
|
||||
</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogPortal>
|
||||
<DialogOverlay
|
||||
class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
|
||||
/>
|
||||
<DialogContent
|
||||
class="data-[state=open]:animate-content-show text-black font-iran-yekan-x fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[50rem] translate-x-[-50%] translate-y-[-50%] rounded-3xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="flex-col-center gap-6 py-10" dir="rtl">
|
||||
<div
|
||||
class="w-full flex items-center px-6 justify-between py-[1.8rem] border-b border-slate-200"
|
||||
class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
<DialogClose
|
||||
class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon name="bi:x-lg" class="**:fill-black" />
|
||||
</DialogClose>
|
||||
<DialogTitle
|
||||
class="typo-sub-h-xl font-semibold flex items-center gap-3"
|
||||
>
|
||||
{{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
|
||||
<Icon
|
||||
:name="!!address ? 'bi:pen' : 'bi:plus'"
|
||||
:size="!!address ? '20' : '32'"
|
||||
/>
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<div class="flex-col-center gap-6 px-6 py-10" dir="rtl">
|
||||
<div
|
||||
class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="name"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>نام پیش فرض
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="province"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>آدرس شما؟
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
|
||||
<Select
|
||||
:options="['بله', 'خیر']"
|
||||
placeholder="انتخاب کنید"
|
||||
v-model="addressData.for_me"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="phone"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>شماره تلفن
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
|
||||
<Input
|
||||
id="phone"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="province"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>استان
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
|
||||
<Input
|
||||
id="province"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.province"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="city"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>شهر
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
<Input
|
||||
id="city"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.city"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="post"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>کد پستی
|
||||
<span class="text-sm text-red-500"
|
||||
>*</span
|
||||
></label
|
||||
>
|
||||
<Input
|
||||
id="post"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.postal_code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="address"
|
||||
for="name"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>آدرس کامل
|
||||
>نام پیش فرض
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
<textarea
|
||||
id="address"
|
||||
placeholder="آدرس خود را بنویسید"
|
||||
v-model="addressData.address"
|
||||
class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
|
||||
></textarea>
|
||||
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.name!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="province"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>آدرس شما؟
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
|
||||
<Select
|
||||
:options="['بله', 'خیر']"
|
||||
placeholder="انتخاب کنید"
|
||||
v-model="addressData.for_me as string"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="phone"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>شماره تلفن
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
|
||||
<Input
|
||||
id="phone"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.phone!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="province"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>استان
|
||||
<span class="text-sm text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
id="province"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.province!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="city"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>شهر
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
<Input
|
||||
id="city"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.city!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label
|
||||
for="post"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>کد پستی
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
<Input
|
||||
id="post"
|
||||
type="text"
|
||||
placeholder="اینجا وارد کنید ..."
|
||||
v-model="addressData.postal_code!"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-slate-200 flex gap-3">
|
||||
<Button
|
||||
:disabled="createAddressIsPending"
|
||||
@click="addNew"
|
||||
class="rounded-full px-10"
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<label
|
||||
for="address"
|
||||
class="text-xs font-semibold lg:text-sm text-gray-900"
|
||||
>آدرس کامل
|
||||
<span class="text-sm text-red-500">*</span></label
|
||||
>
|
||||
<Icon
|
||||
v-if="createAddressIsPending"
|
||||
name="svg-spinners:3-dots-bounce"
|
||||
/>
|
||||
<span v-else>ثبت</span>
|
||||
</Button>
|
||||
<DialogClose aria-label="Close">
|
||||
<Button variant="outlined" class="rounded-full px-10">
|
||||
انصراف
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<textarea
|
||||
id="address"
|
||||
placeholder="آدرس خود را بنویسید"
|
||||
v-model="addressData.address"
|
||||
class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
|
||||
></textarea>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</DialogRoot>
|
||||
</div>
|
||||
|
||||
<div class="py-6 border-t border-slate-200 flex gap-3">
|
||||
<Button
|
||||
:disabled="createAddressIsPending"
|
||||
@click="addNew"
|
||||
class="rounded-full px-10"
|
||||
>
|
||||
<Icon
|
||||
v-if="createAddressIsPending"
|
||||
name="svg-spinners:3-dots-bounce"
|
||||
/>
|
||||
<span v-else>ثبت</span>
|
||||
</Button>
|
||||
<DialogClose aria-label="Close">
|
||||
<Button variant="outlined" class="rounded-full px-10">
|
||||
انصراف
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user