From 90cb112117ee84ce79731d419a7aeb1a23dc9dd4 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 26 Jan 2025 03:00:07 +0330
Subject: [PATCH] added address modal

---
 frontend/components/cart/AddressModal.vue | 211 ++++++++++++++++++++++
 1 file changed, 211 insertions(+)
 create mode 100644 frontend/components/cart/AddressModal.vue

diff --git a/frontend/components/cart/AddressModal.vue b/frontend/components/cart/AddressModal.vue
new file mode 100644
index 0000000..20da1ae
--- /dev/null
+++ b/frontend/components/cart/AddressModal.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    address?: Address;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { address } = toRefs(props);
+
+// emit
+
+const emit = defineEmits(["add"]);
+
+// state
+
+const isShow = ref(false);
+
+const addressData = ref<
+    Pick<Address, "province" | "city" | "postal_code" | "full_address">
+>({
+    province: address.value?.province ?? "",
+    city: address.value?.city ?? "",
+    postal_code: address.value?.postal_code ?? "",
+    full_address: address.value?.full_address ?? "",
+});
+
+// computed
+
+const isEditing = computed(() => !!address.value);
+
+// methods
+
+const closeModal = () => {
+    if (!isEditing.value) {
+        addressData.value = {
+            province: "",
+            city: "",
+            postal_code: "",
+            full_address: "",
+        };
+    }
+    isShow.value = false;
+};
+
+const addNew = () => {
+    emit("add", { ...addressData.value, id: Date.now() });
+    closeModal();
+};
+</script>
+
+<template>
+    <DialogRoot
+        v-model:open="isShow"
+        @update:open="
+            (state) => {
+                !state ? closeModal() : null;
+            }
+        "
+    >
+        <DialogTrigger>
+            <button
+                class="flex items-center gap-1 rtl:flex-row-reverse font-iran-yekan-x cursor-pointer"
+            >
+                <span class="font-bold text-cyan-500 text-sm lg:text-[1rem]">
+                    {{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
+                </span>
+                <Icon
+                    v-if="!!address"
+                    name="bi:pen"
+                    class="**:fill-cyan-500"
+                    size="16"
+                />
+                <Icon
+                    v-else
+                    name="bi:plus"
+                    class="**:stroke-cyan-500"
+                    size="20"
+                />
+            </button>
+        </DialogTrigger>
+        <DialogPortal>
+            <DialogOverlay
+                class="bg-black/20 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]"
+            >
+                <div
+                    class="w-full flex items-center px-6 justify-between py-[1.8rem] border-b border-slate-200"
+                >
+                    <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-red-600" />
+                    </DialogClose>
+                    <DialogTitle class="typo-sub-h-xl font-semibold">
+                        {{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
+                    </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="province"
+                                class="text-xs font-semibold lg:text-sm text-gray-900"
+                                >استان
+                                <span class="text-sm text-red-500"
+                                    >*</span
+                                ></label
+                            >
+
+                            <ComboBox
+                                id="province"
+                                :options="[
+                                    {
+                                        name: 'استان ها',
+                                        children: [
+                                            { name: 'مشهد' },
+                                            { name: 'مشهد' },
+                                            { name: 'مشهد' },
+                                        ],
+                                    },
+                                ]"
+                                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
+                            >
+                            <ComboBox
+                                id="city"
+                                :options="[
+                                    {
+                                        name: 'استان ها',
+                                        children: [
+                                            { name: 'مشهد' },
+                                            { name: 'مشهد' },
+                                            { name: 'مشهد' },
+                                        ],
+                                    },
+                                ]"
+                                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="جست و جو"
+                                class="rounded-xl"
+                                v-model="addressData.postal_code"
+                            />
+                        </div>
+                    </div>
+
+                    <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
+                        >
+                        <textarea
+                            id="address"
+                            placeholder="آدرس خود را بنویسید"
+                            v-model="addressData.full_address"
+                            class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover: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>
+                </div>
+
+                <div class="p-6 border-t border-slate-200 flex gap-3">
+                    <Button @click="addNew" class="rounded-full px-10"
+                        >ثبت</Button
+                    >
+                    <DialogClose aria-label="Close">
+                        <Button variant="outlined" class="rounded-full px-10">
+                            انصراف
+                        </Button>
+                    </DialogClose>
+                </div>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style scoped></style>