From 411d37b02da6701d4988d6995ff25e8e128684c1 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 14 Feb 2025 01:23:58 +0330
Subject: [PATCH] updated address modal

---
 frontend/components/cart/AddressModal.vue | 332 ++++++++++------------
 1 file changed, 154 insertions(+), 178 deletions(-)

diff --git a/frontend/components/cart/AddressModal.vue b/frontend/components/cart/AddressModal.vue
index 481e493..252ec59 100644
--- a/frontend/components/cart/AddressModal.vue
+++ b/frontend/components/cart/AddressModal.vue
@@ -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>