From 99e830e72b638c250acd8164af938500b6a36e6b Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 11 Feb 2025 23:24:14 +0330
Subject: [PATCH] added submit profile

---
 frontend/pages/profile/index.vue | 197 ++++++++++++++++++++++++++++---
 1 file changed, 180 insertions(+), 17 deletions(-)

diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index e64b2ff..9c2a28b 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 // imports
 
+import useVuelidate from "@vuelidate/core";
+import { helpers, required, minLength, email } from "@vuelidate/validators";
 import useGetAccount from "~/composables/api/account/useGetAccount";
+import useUpdateAccount, {
+    type UpdateAccountRequest,
+} from "~/composables/api/account/useUpdateAccount";
+import { useObjectTrack } from "~/composables/global/useObjectTrack";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
 
 // meta
 
@@ -12,15 +20,26 @@ definePageMeta({
 
 // state
 
-const personalData = ref({
-    name: "",
-    last_name: "",
-    phone: "",
-    gender: undefined,
-    email: "",
-    birthDate: "",
+const { data: account } = useGetAccount();
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
+const personalData = ref<UpdateAccountRequest>({
+    profile_photo: null,
+    first_name: account.value?.first_name ?? "",
+    last_name: account.value?.last_name ?? "",
+    phone: account.value?.phone ?? "",
+    gender: account.value?.gender ?? undefined,
+    email: account.value?.email ?? "",
+    birth_date: account.value?.birth_date ?? "",
 });
 
+const profilePictureModalIsShow = ref(false);
+
+const { isNotEqual, clear: clearObjectTracker } = useObjectTrack(personalData);
+
 const alises = ref([
     "شکارچی",
     "آیفون باز",
@@ -31,7 +50,109 @@ const alises = ref([
 
 // queries
 
-const { data: account } = useGetAccount();
+const { mutateAsync: updateAccount, isPending: updateAccountIsPending } =
+    useUpdateAccount();
+
+// computed
+
+const formRules = computed(() => {
+    return {
+        first_name: {
+            required: helpers.withMessage("فیلد نام الزامی می باشد", required),
+            minLength: helpers.withMessage(
+                "فیلد نام حداقل ۳ کرکتر می باشد",
+                minLength(3)
+            ),
+        },
+        last_name: {
+            required: helpers.withMessage(
+                "فیلد نام خانوادگی الزامی می باشد",
+                required
+            ),
+            minLength: helpers.withMessage(
+                "فیلد نام خانوادگی حداقل ۳ کرکتر می باشد",
+                minLength(3)
+            ),
+        },
+        phone: {
+            required: helpers.withMessage(
+                "فیلد شماره تلفن الزامی می باشد",
+                required
+            ),
+            phoneValidator: helpers.withMessage(
+                "شماره تلفن وارد شده معتبر نمی باشد",
+                helpers.regex(/^0?[1-9][0-9]{9}$/)
+            ),
+        },
+        gender: {
+            required: helpers.withMessage(
+                "فیلد جنسیت الزامی می باشد",
+                required
+            ),
+        },
+        email: {
+            required: helpers.withMessage(
+                "فیلد حساب الکترونیکی الزامی می باشد",
+                required
+            ),
+            email: helpers.withMessage(
+                "حساب الکترونیکی وارد شده معتبر نمی باشد",
+                email
+            ),
+        },
+        birth_date: {
+            required: helpers.withMessage(
+                "فیلد تاریخ تولد الزامی می باشد",
+                required
+            ),
+        },
+    };
+});
+
+const formValidator$ = useVuelidate(formRules, personalData);
+
+// methods
+
+const updateData = () => {
+    updateAccount(
+        { ...personalData.value },
+        {
+            onSuccess: (data) => {
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.account],
+                });
+
+                addToast({
+                    message: "اطلاعات با موفقیت تغییر یافت",
+                    options: {
+                        status: "success",
+                    },
+                });
+                clearObjectTracker();
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در تغییر اطلاعات رخ داد",
+                    options: {
+                        status: "error",
+                    },
+                });
+            },
+        }
+    );
+};
+
+const handleSubmit = (withValidation: boolean) => {
+    if (withValidation) {
+        formValidator$.value.$validate();
+        if (!formValidator$.value.$errors.length) {
+            updateData();
+        }
+    } else {
+        updateData();
+        profilePictureModalIsShow.value = false;
+    }
+};
 </script>
 
 <template>
@@ -57,7 +178,11 @@ const { data: account } = useGetAccount();
                             "
                         />
 
-                        <PictureModal />
+                        <ProfilePictureModal
+                            v-model:is-show="profilePictureModalIsShow"
+                            v-model="personalData.profile_photo!"
+                            @update:model-value="() => handleSubmit(false)"
+                        />
                     </div>
 
                     <div class="flex flex-col gap-3">
@@ -100,50 +225,88 @@ const { data: account } = useGetAccount();
                 </div>
             </div>
             <ProfileSection title="اطلاعات شما">
+                <template #button>
+                    <Button
+                        v-if="isNotEqual"
+                        :loading="updateAccountIsPending"
+                        class="rounded-full w-[6.5rem]"
+                        @click="handleSubmit(true)"
+                        size="md"
+                    >
+                        <Icon
+                            v-if="updateAccountIsPending"
+                            name="svg-spinners:3-dots-bounce"
+                        />
+                        <span v-else> ثبت تغییرات </span>
+                    </Button>
+                </template>
                 <div
                     class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5"
                 >
-                    <PersonalDataField id="personal-data-name" label="نام">
-                        <Input v-model="personalData.name" variant="outlined" />
+                    <PersonalDataField
+                        id="personal-data-name"
+                        label="نام"
+                        :error="formValidator$.first_name"
+                    >
+                        <Input
+                            v-model="personalData.first_name!"
+                            variant="outlined"
+                            :error="formValidator$.first_name.$error"
+                        />
                     </PersonalDataField>
                     <PersonalDataField
                         id="personal-data-last-name"
                         label="نام خانوادگی"
+                        :error="formValidator$.last_name"
                     >
                         <Input
-                            v-model="personalData.last_name"
+                            v-model="personalData.last_name!"
                             variant="outlined"
+                            :error="formValidator$.last_name.$error"
                         />
                     </PersonalDataField>
-                    <PersonalDataField id="personal-data-gender" label="جنسیت">
+                    <PersonalDataField
+                        id="personal-data-gender"
+                        label="جنسیت"
+                        :error="formValidator$.gender"
+                    >
                         <Select
-                            v-model="personalData.gender"
+                            v-model="personalData.gender!"
                             :options="['مرد', 'زن']"
                             variant="outlined"
+                            :error="formValidator$.gender.$error"
                         />
                     </PersonalDataField>
                     <PersonalDataField
                         id="personal-data-birth-date"
                         label="تاریخ تولد"
+                        :error="formValidator$.birth_date"
                     >
-                        <Datepicker v-model="personalData.birthDate" />
+                        <Datepicker
+                            v-model="personalData.birth_date!"
+                            :error="formValidator$.birth_date.$error"
+                        />
                     </PersonalDataField>
                     <PersonalDataField
                         id="personal-data-phone"
                         label="تلفن همراه"
+                        :error="formValidator$.phone"
                     >
                         <Input
-                            v-model="personalData.phone"
+                            v-model="personalData.phone!"
                             variant="outlined"
+                            :error="formValidator$.phone.$error"
                         />
                     </PersonalDataField>
                     <PersonalDataField
                         id="personal-email"
                         label="حساب الکترونیکی"
+                        :error="formValidator$.email"
                     >
                         <Input
-                            v-model="personalData.email"
+                            v-model="personalData.email!"
                             variant="outlined"
+                            :error="formValidator$.email.$error"
                         />
                     </PersonalDataField>
                 </div>