|
|
import React, { useState, useEffect } from "react"; |
|
|
import { useNavigate } from "react-router-dom"; |
|
|
import onInput from "../../../utils/onInput"; |
|
|
import { user, file, publicApi } from "../../../redux/actions"; |
|
|
import { connect } from "react-redux"; |
|
|
import moment from "jalali-moment"; |
|
|
|
|
|
//components |
|
|
import Select from "../../../components/Select"; |
|
|
import Input from "../../../components/Input"; |
|
|
import TextArea from "../../../components/Textarea"; |
|
|
import Upload from "./Upload"; |
|
|
import Gender from "./GenderSwitch"; |
|
|
import Birthdate from "./Birthdate"; |
|
|
import MultipleSelector from "./MultipleSelector"; |
|
|
import Document from "./Document"; |
|
|
|
|
|
function Profile({ |
|
|
isMobile, |
|
|
profile, |
|
|
uploads, |
|
|
uploadId, |
|
|
upload, |
|
|
getProvince, |
|
|
getCity, |
|
|
setDone, |
|
|
setProfile, |
|
|
province, |
|
|
provinceList, |
|
|
cityList, |
|
|
setHeaderOptions, |
|
|
headerOptions, |
|
|
loading, |
|
|
}) { |
|
|
let navigate = useNavigate(); |
|
|
const [formData, setFormData] = useState(null); |
|
|
|
|
|
useEffect(() => { |
|
|
if (user) { |
|
|
const momentDate = moment(profile?.birthDate); |
|
|
const isValid = momentDate.isValid(); |
|
|
setFormData({ |
|
|
// file: uploads["file"] || profile.picFileId, |
|
|
picFileId: uploads["file"] || profile?.picFileId, |
|
|
docFileIds: uploads["docFileIds"] || profile?.docFileIds, |
|
|
firstName: profile?.firstName, |
|
|
lastName: profile?.lastName, |
|
|
password: profile?.password, |
|
|
username: profile?.username, |
|
|
address: profile?.address, |
|
|
email: profile?.email, |
|
|
birthDate: { |
|
|
day: isValid ? moment(profile?.birthDate).format("jDD") : null, |
|
|
month: isValid ? moment(profile?.birthDate).format("jMM") : null, |
|
|
year: isValid ? moment(profile?.birthDate).format("jYYYY") : null, |
|
|
}, |
|
|
gender: profile?.gender || 1, |
|
|
status: profile?.status || 1, |
|
|
nationalId: profile?.nationalId || "", |
|
|
phone: profile?.phone || "", |
|
|
cellphone: profile?.cellphone || "", |
|
|
schools: profile?.schools || null, |
|
|
zoneId: profile?.zoneId || "", |
|
|
schoolId: profile?.schoolId || "", |
|
|
postalCode: profile?.postalCode || "", |
|
|
gradeIds: profile?.gradeIds || [], |
|
|
provinceId: profile?.provinceId || null, |
|
|
cityId: profile?.cityId || null, |
|
|
}); |
|
|
} |
|
|
}, [user]); |
|
|
|
|
|
useEffect(() => { |
|
|
if(isMobile){ |
|
|
setHeaderOptions(headerOptions); |
|
|
} |
|
|
getProvince(); |
|
|
}, []); |
|
|
|
|
|
const grades = [ |
|
|
{ |
|
|
name: window.t("پیش دبستانی"), |
|
|
value: 0, |
|
|
}, |
|
|
{ |
|
|
name: window.t("اول"), |
|
|
value: 1, |
|
|
}, |
|
|
{ |
|
|
name: window.t("دوم"), |
|
|
value: 2, |
|
|
}, |
|
|
{ |
|
|
name: window.t("سوم"), |
|
|
value: 3, |
|
|
}, |
|
|
{ |
|
|
name: window.t("چهارم"), |
|
|
value: 4, |
|
|
}, |
|
|
{ |
|
|
name: window.t("پنجم"), |
|
|
value: 5, |
|
|
}, |
|
|
{ |
|
|
name: window.t("ششم"), |
|
|
value: 6, |
|
|
}, |
|
|
{ |
|
|
name: window.t("هفتم"), |
|
|
value: 7, |
|
|
}, |
|
|
{ |
|
|
name: window.t("هشتم"), |
|
|
value: 8, |
|
|
}, |
|
|
{ |
|
|
name: window.t("نهم"), |
|
|
value: 9, |
|
|
}, |
|
|
{ |
|
|
name: window.t("دهم"), |
|
|
value: 10, |
|
|
}, |
|
|
{ |
|
|
name: window.t("یازدهم"), |
|
|
value: 11, |
|
|
}, |
|
|
{ |
|
|
name: window.t("دوازدهم"), |
|
|
value: 12, |
|
|
}, |
|
|
]; |
|
|
|
|
|
const onSubmit = React.useCallback(async () => { |
|
|
const data = { |
|
|
firstName: formData?.firstName, |
|
|
lastName: formData?.lastName, |
|
|
username: formData?.username, |
|
|
cellphone: formData?.cellphone, |
|
|
password: formData?.password, |
|
|
postalCode: formData?.postalCode, |
|
|
address: formData?.address, |
|
|
email: formData?.email, |
|
|
phone: formData?.phone, |
|
|
cellphone: formData?.cellphone, |
|
|
nationalId: formData?.nationalId, |
|
|
picFileId: uploads["picFileId"] || formData?.picFileId, |
|
|
birthDate: moment |
|
|
.from( |
|
|
`${formData?.birthDate?.year}/${formData?.birthDate?.month}/${formData?.birthDate?.day}`, |
|
|
"fa", |
|
|
"YYYY/MM/DD" |
|
|
) |
|
|
.locale("en"), |
|
|
gender: formData?.gender, |
|
|
schools: formData?.schools, |
|
|
gradeIds: formData?.gradeIds, |
|
|
status: formData?.status, |
|
|
provinceId: formData?.provinceId, |
|
|
cityId: formData?.cityId, |
|
|
docFileIds: uploads["docFileIds"] || formData?.docFileIds, |
|
|
}; |
|
|
|
|
|
await setProfile(data); |
|
|
}, [formData, uploads]); |
|
|
|
|
|
return isMobile ? ( |
|
|
<div className="lg:hidden flex flex-col gap-6 px-4 pb-20"> |
|
|
<header className="flex flex-col gap-2 w-full"> |
|
|
<h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1> |
|
|
<p className="text-sm text-gray1"> |
|
|
{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")} |
|
|
</p> |
|
|
</header> |
|
|
<form |
|
|
className="flex flex-col items-center w-full gap-4" |
|
|
onSubmit={(e) => e.preventDefault()} |
|
|
> |
|
|
<Upload |
|
|
name="picFileId" |
|
|
value={String( |
|
|
uploads["picFileId"] || uploadId || formData?.picFileId |
|
|
)} |
|
|
onChange={(name, value) => { |
|
|
upload({ file: value, target: name }); |
|
|
setFormData({ ...formData, [name]: value }); |
|
|
}} |
|
|
label={window.t("فایل")} |
|
|
/> |
|
|
<Input |
|
|
name="firstName" |
|
|
label={window.t("نام")} |
|
|
align="right" |
|
|
onInput={onInput.persianOnly} |
|
|
value={formData?.firstName} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={(val) => val} |
|
|
/> |
|
|
<Input |
|
|
name="lastName" |
|
|
label={window.t("نام نام خانوادگی")} |
|
|
align="right" |
|
|
value={formData?.lastName} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
onInput={onInput.persianOnly} |
|
|
regex={(val) => val} |
|
|
/> |
|
|
<Input |
|
|
name="username" |
|
|
label={window.t("نام کاربری")} |
|
|
value={formData?.username} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
align="left" |
|
|
regex={(val) => onInput.englishAndNumberWithoutSpace(val)} |
|
|
/> |
|
|
<Gender |
|
|
options={[window.t("دختر"), window.t("پسر")]} |
|
|
name="gender" |
|
|
selectedOption={formData?.gender} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
label="جنسیت" |
|
|
/> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label={window.t("کد ملی/اتباع")} |
|
|
align="left" |
|
|
maxLength={13} |
|
|
value={formData?.nationalId} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
/> |
|
|
<Birthdate |
|
|
name="birthDate" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
value={formData?.birthDate} |
|
|
/> |
|
|
<Input |
|
|
name="password" |
|
|
label={window.t("رمز عبور")} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
value={formData?.password} |
|
|
align="left" |
|
|
regex={(val) => onInput.englishAndNumberWithoutSpace(val)} |
|
|
/> |
|
|
<Gender |
|
|
options={[window.t("دانش آموز"), window.t("معلم")]} |
|
|
name="status" |
|
|
label={window.t("عنوان")} |
|
|
selectedOption={formData?.status} |
|
|
onChange={(name, value) => { |
|
|
setFormData({ |
|
|
...formData, |
|
|
gradeIds: formData?.gradeIds?.slice(0, 1) || [], |
|
|
[name]: value, |
|
|
}); |
|
|
}} |
|
|
/> |
|
|
{formData?.status === 1 ? ( |
|
|
<Select |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={formData?.gradeIds} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
) : null} |
|
|
{formData?.status === 2 ? ( |
|
|
<MultipleSelector |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={formData?.gradeIds} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
align="right" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
) : null} |
|
|
|
|
|
{formData?.status === window.t("دانش آموز") && |
|
|
formData?.gradeIds > 9 ? ( |
|
|
<Select |
|
|
options={[ |
|
|
window.t("ریاضی"), |
|
|
window.t("تجربی"), |
|
|
window.t("انسانی"), |
|
|
window.t("فنی حرفهای"), |
|
|
window.t("کاردانش"), |
|
|
window.t("معارف"), |
|
|
]} |
|
|
name="field" |
|
|
label={window.t("رشته تحصیلی")} |
|
|
selectedOptions={formData?.gradeIds} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
) : null} |
|
|
<Select |
|
|
options={provinceList} |
|
|
name="provinceId" |
|
|
label={window.t("استان")} |
|
|
selectedOptions={formData?.provinceId} |
|
|
onChange={(name, value) => { |
|
|
setFormData({ ...formData, cityId: null, [name]: value }); |
|
|
getCity({ provinceId: provinceList.find((province) => province.name === value)?.id }); |
|
|
}} |
|
|
/> |
|
|
<Select |
|
|
options={cityList} |
|
|
name="cityId" |
|
|
label={window.t("شهرستان")} |
|
|
selectedOptions={formData?.cityId} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
{formData?.status == 1 ? ( |
|
|
<Input |
|
|
name="schools" |
|
|
label={window.t("نام مدرسه")} |
|
|
value={formData?.schoolId} |
|
|
regex={(val) => onInput.persianOnly(val)} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
) : null} |
|
|
{formData?.status == 2 ? ( |
|
|
<Input |
|
|
name="schools" |
|
|
label={window.t("محل تدریس")} |
|
|
defaultValue={formData} |
|
|
regex={(val) => onInput.persianOnly(val)} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
) : null} |
|
|
{formData?.status == 2 ? ( |
|
|
<Document |
|
|
onChange={(name, value) => { |
|
|
upload({ file: value, target: name }); |
|
|
setFormData({ ...formData, [name]: value }); |
|
|
}} |
|
|
value={String(uploads["docFileIds"] || formData?.docFileIds)} |
|
|
name="docFileIds" |
|
|
/> |
|
|
) : null} |
|
|
<Input |
|
|
name="postalCode" |
|
|
label={window.t("کد پستی")} |
|
|
align="left" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
maxLength={10} |
|
|
inputMode="numeric" |
|
|
value={formData?.postalCode} |
|
|
regex={(val) => onInput.numberOnly(val)} |
|
|
/> |
|
|
<TextArea |
|
|
placeholder={window.t("آدرس محل سکونت")} |
|
|
name="address" |
|
|
value={formData?.address} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
/> |
|
|
<button |
|
|
className="w-full bg-blueC0 py-3 text-base text-white rounded-sm" |
|
|
onClick={() => onSubmit()} |
|
|
> |
|
|
{window.t("ذخیره")} |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="hidden lg:flex flex-col items-center gap-5 w-full pt-5 select-none" |
|
|
onSubmit={(e) => onSubmit()} |
|
|
> |
|
|
<Upload |
|
|
name="file" |
|
|
value={String(uploadId || formData?.picFileId)} |
|
|
onChange={(name, value) => setFormData({ ...formData, [name]: value })} |
|
|
label="فایل" |
|
|
/> |
|
|
<div |
|
|
className={`w-full gap-5 lg:flex lg:flex-row lg:my-2 lg:items-center flex flex-col`} |
|
|
> |
|
|
<Input |
|
|
name="firstName" |
|
|
label={window.t("نام")} |
|
|
align="right" |
|
|
onInput={onInput.persianOnly} |
|
|
value={formData?.firstName} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={(val) => val} |
|
|
/> |
|
|
<Input |
|
|
name="lastName" |
|
|
label="نام خانوادگی" |
|
|
align="right" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={(val) => val} |
|
|
value={formData?.lastName} |
|
|
/> |
|
|
</div> |
|
|
<div |
|
|
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`} |
|
|
> |
|
|
<Input |
|
|
name="cellphone" |
|
|
label="شماره تلفن همراه" |
|
|
align="left" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={onInput.numberOnly} |
|
|
value={formData?.cellphone} |
|
|
maxLength={11} |
|
|
direction={"ltr"} |
|
|
/> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label="کدملی" |
|
|
align="left" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={onInput.numberOnly} |
|
|
value={formData?.nationalId} |
|
|
maxLength={10} |
|
|
direction={"ltr"} |
|
|
/> |
|
|
</div> |
|
|
<div |
|
|
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`} |
|
|
> |
|
|
<Input |
|
|
name="email" |
|
|
label="ایمیل" |
|
|
align="left" |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
regex={onInput.englishAndNumberWithoutSpace} |
|
|
value={formData?.email} |
|
|
/> |
|
|
<Birthdate |
|
|
name="birthDate" |
|
|
onChange={(name, value) => setProfile({ name, value })} |
|
|
value={formData?.birthDate} |
|
|
/> |
|
|
</div> |
|
|
<div |
|
|
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`} |
|
|
> |
|
|
<Gender |
|
|
options={[window.t("دختر"), window.t("پسر")]} |
|
|
name="gender" |
|
|
selectedOption={formData?.gender} |
|
|
onChange={(name, value) => |
|
|
setFormData({ ...formData, [name]: value }) |
|
|
} |
|
|
label="جنسیت" |
|
|
/> |
|
|
<div className="w-full"></div> |
|
|
</div> |
|
|
<button |
|
|
className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" |
|
|
onClick={() => onSubmit()} |
|
|
> |
|
|
{window.t("ذخیره")} |
|
|
</button> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state) => ({ |
|
|
profile: state.user.status, |
|
|
setDone: state.user.setDone, |
|
|
loading: state.user.loading, |
|
|
uploading: state.file.loading, |
|
|
uploads: state.file.uploads, |
|
|
provinceList: state.publicApi.province, |
|
|
cityList: state.publicApi.city, |
|
|
isMobile: state.config.device === "mobile", |
|
|
}), |
|
|
{ |
|
|
getProfile: user.getProfile, |
|
|
setProfile: user.setProfile, |
|
|
upload: file.upload, |
|
|
getProvince: publicApi.getProvince, |
|
|
getCity: publicApi.getCity, |
|
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
|
} |
|
|
)(Profile); |
|
|
|
|
|
Profile.defaultProps = { |
|
|
user: { |
|
|
name: window.t("اکبر"), |
|
|
icon: "", |
|
|
description: "", |
|
|
}, |
|
|
};
|
|
|
|