heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added submit profile

Browse Source
This commit is contained in:
Mamalizz
2025-02-11 23:24:14 +03:30
parent 0b40de30f2
commit 99e830e72b
1 changed files with 180 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/profile/index.vue
+180 -17
View File
@@ -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>