This commit is contained in:
marzban-dev
2025-04-19 21:08:15 +03:30
26 changed files with 519 additions and 483 deletions
+21 -72
View File
@@ -4,9 +4,7 @@
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 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";
@@ -40,18 +38,11 @@ const profilePictureModalIsShow = ref(false);
const { isNotEqual, clear: clearObjectTracker } = useObjectTrack(personalData);
const alises = ref([
"شکارچی",
"آیفون باز",
"خوش سلیقه",
"دست و دلباز",
"چرم باز",
]);
const alises = ref(["شکارچی", "آیفون باز", "خوش سلیقه", "دست و دلباز", "چرم باز"]);
// queries
const { mutateAsync: updateAccount, isPending: updateAccountIsPending } =
useUpdateAccount();
const { mutateAsync: updateAccount, isPending: updateAccountIsPending } = useUpdateAccount();
// computed
@@ -59,52 +50,28 @@ const formRules = computed(() => {
return {
first_name: {
required: helpers.withMessage("فیلد نام الزامی می باشد", required),
minLength: helpers.withMessage(
"فیلد نام حداقل ۳ کرکتر می باشد",
minLength(3)
),
minLength: helpers.withMessage("فیلد نام حداقل ۳ کرکتر می باشد", minLength(3)),
},
last_name: {
required: helpers.withMessage(
"فیلد نام خانوادگی الزامی می باشد",
required
),
minLength: helpers.withMessage(
"فیلد نام خانوادگی حداقل ۳ کرکتر می باشد",
minLength(3)
),
required: helpers.withMessage("فیلد نام خانوادگی الزامی می باشد", required),
minLength: helpers.withMessage("فیلد نام خانوادگی حداقل ۳ کرکتر می باشد", minLength(3)),
},
phone: {
required: helpers.withMessage(
"فیلد شماره تلفن الزامی می باشد",
required
),
required: helpers.withMessage("فیلد شماره تلفن الزامی می باشد", required),
phoneValidator: helpers.withMessage(
"شماره تلفن وارد شده معتبر نمی باشد",
helpers.regex(/^0?[1-9][0-9]{9}$/)
),
},
gender: {
required: helpers.withMessage(
"فیلد جنسیت الزامی می باشد",
required
),
required: helpers.withMessage("فیلد جنسیت الزامی می باشد", required),
},
email: {
required: helpers.withMessage(
"فیلد حساب الکترونیکی الزامی می باشد",
required
),
email: helpers.withMessage(
"حساب الکترونیکی وارد شده معتبر نمی باشد",
email
),
required: helpers.withMessage("فیلد حساب الکترونیکی الزامی می باشد", required),
email: helpers.withMessage("حساب الکترونیکی وارد شده معتبر نمی باشد", email),
},
birth_date: {
required: helpers.withMessage(
"فیلد تاریخ تولد الزامی می باشد",
required
),
required: helpers.withMessage("فیلد تاریخ تولد الزامی می باشد", required),
},
};
});
@@ -167,18 +134,14 @@ const handleSubmit = (withValidation: boolean) => {
<div
class="w-full flex flex-col lg:flex-row items-center max-lg:gap-5 lg:justify-between border p-6 rounded-xl border-slate-200"
>
<div
class="flex items-center justify-start gap-5 w-full lg:w-8/12"
>
<div class="flex items-center justify-start gap-5 w-full lg:w-8/12">
<div class="relative shrink-0 rounded-full flex-center">
<Avatar
class="!size-20 lg:!size-32"
:src="account!.profile_photo"
:alt="
account?.first_name && account?.last_name
? `${account?.first_name.charAt(
0
)} ${account?.last_name.charAt(0)}`
? `${account?.first_name.charAt(0)} ${account?.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
@@ -192,18 +155,12 @@ const handleSubmit = (withValidation: boolean) => {
<div class="flex flex-col gap-2 lg:gap-3">
<span class="typo-sub-h-md lg:typo-sub-h-lg"
>{{ account?.first_name }}
{{ account?.last_name }}</span
>{{ account?.first_name }} {{ account?.last_name }}</span
>
<span
class="typo-sub-h-xs lg:typo-sub-h-sm !font-light text-slate-600 leading-[200%]"
>
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
بایوگرافی درست میکنه :)
<span class="typo-sub-h-xs lg:typo-sub-h-sm !font-light text-slate-600 leading-[200%]">
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک بایوگرافی درست میکنه :)
</span>
<div
class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
>
<div class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full">
<div class="rounded-full p-1.5 lg:p-2">
<Icon
name="bi:patch-check"
@@ -211,26 +168,20 @@ const handleSubmit = (withValidation: boolean) => {
size="20"
/>
</div>
<span class="text-[10px] lg:text-xs text-yellow-500"
>جزو ۳ مشتری برتر</span
>
<span class="text-[10px] lg:text-xs text-yellow-500">جزو ۳ مشتری برتر</span>
</div>
</div>
</div>
<div class="flex flex-col items-start gap-3 w-full lg:w-4/12">
<span class="typo-sub-h-md lg:typo-sub-h-lg"
>لقب های شما</span
>
<span class="typo-sub-h-md lg:typo-sub-h-lg">لقب های شما</span>
<span class="flex w-full flex-wrap gap-2">
<span
v-for="(alise, index) in alises"
:key="index"
class="flex-center bg-slate-50 border border-slate-200 py-1.5 lg:py-2 px-3 w-max rounded-full"
>
<span class="text-[10px] lg:text-xs text-black">{{
alise
}}</span>
<span class="text-[10px] lg:text-xs text-black">{{ alise }}</span>
</span>
</span>
</div>
@@ -251,9 +202,7 @@ const handleSubmit = (withValidation: boolean) => {
<span v-else> ثبت تغییرات </span>
</Button>
</template>
<div
class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5"
>
<div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5">
<DataField
id="personal-data-name"
label="نام"