|
|
import React, { Component } from "react"; |
|
|
import onInput from "~/util/onInput"; |
|
|
import { user } from "~/Redux/actions"; |
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
import Select from "./Select/index"; |
|
|
import Input from "./Input/index"; |
|
|
import TextArea from "./TextArea/index"; |
|
|
import Upload from "./Upload/index"; |
|
|
import Gender from "./GenderSwitch/index"; |
|
|
import Birthdate from "./Birthdate/index"; |
|
|
import MultipleSelector from "./MultipleSelector/index"; |
|
|
import Loader from "~/components/Loader/index"; |
|
|
import Document from "./Document/index"; |
|
|
import logo from "../../../assets/icons/logo.png"; |
|
|
import pic from "../../../assets/images/pic.png"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
const maxDesktopSize = 1250; |
|
|
const maxMobileSize = 550; |
|
|
|
|
|
const fontSize = { |
|
|
desktop: { |
|
|
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55, |
|
|
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
|
|
}, |
|
|
mobile: { |
|
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, |
|
|
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28, |
|
|
}, |
|
|
}; |
|
|
|
|
|
const toastMessages = { |
|
|
firstName: "نام وارد شده صحیح نیست!", |
|
|
lastName: "نام خانوادگی وارد شده صحیح نیست!", |
|
|
username: "نام کاربری صحیح نیست.", |
|
|
}; |
|
|
|
|
|
class Profile extends Component { |
|
|
state = { |
|
|
render: false, |
|
|
file: null, |
|
|
docFileIds: "", |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
password: "", |
|
|
username: "", |
|
|
address: "", |
|
|
email: "", |
|
|
gender: "دختر", |
|
|
userRoleId: "دانش آموز", |
|
|
nationalId: "", |
|
|
provinceId: "", |
|
|
phone: "", |
|
|
cityId: "", |
|
|
zoneId: "", |
|
|
schoolId: "", |
|
|
postalCode: "", |
|
|
gradeId: [], |
|
|
validation: { |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
username: "", |
|
|
email: "", |
|
|
postalCode: "", |
|
|
nationalId: "", |
|
|
schoolId: "", |
|
|
}, |
|
|
}; |
|
|
|
|
|
componentDidMount() { |
|
|
// this.props.getProfile(); |
|
|
} |
|
|
|
|
|
onChange = (name, value) => { |
|
|
if (name === "gardeId" && this.state.userRoleId === "معلم") { |
|
|
this.setState((prevState) => ({ |
|
|
gradeId: [...prevState.gradeId, value], |
|
|
})); |
|
|
} |
|
|
if (name === "userRoleId") { |
|
|
this.setState({ |
|
|
gradeId: [], |
|
|
[name]: value, |
|
|
}); |
|
|
} else { |
|
|
this.setState({ |
|
|
[name]: value, |
|
|
}); |
|
|
} |
|
|
}; |
|
|
|
|
|
onSubmit = async (e) => { |
|
|
const { |
|
|
firstName, |
|
|
lastName, |
|
|
username, |
|
|
cellphone, |
|
|
password, |
|
|
postalCode, |
|
|
address, |
|
|
email, |
|
|
phone, |
|
|
} = this.state; |
|
|
const { profile, setProfile } = this.props; |
|
|
const data = { |
|
|
firstName: firstName || profile.firstName, |
|
|
lastName: lastName || profile.lastName, |
|
|
username: username || profile.username, |
|
|
cellphone: profile.cellphone, |
|
|
password: password || profile.password, |
|
|
postalCode: postalCode || profile.postalCode, |
|
|
address: address || profile.address, |
|
|
email: email || profile.email, |
|
|
phone: phone || profile.phone, |
|
|
}; |
|
|
await setProfile(data); |
|
|
}; |
|
|
|
|
|
render() { |
|
|
const grades = [ |
|
|
"پیش دبستان", |
|
|
"اول", |
|
|
"دوم", |
|
|
"سوم", |
|
|
"چهارم", |
|
|
"پنجم", |
|
|
"ششم", |
|
|
"هفتم", |
|
|
"هشتم", |
|
|
"نهم", |
|
|
"دهم", |
|
|
"یازدهم", |
|
|
"دوازدهم", |
|
|
]; |
|
|
const { user, profile } = this.props; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
profile ? ( |
|
|
<div className="auth-profile d-flex justify-content-center"> |
|
|
<div className="auth-profile__box d-flex flex-column p-4"> |
|
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1> |
|
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
|
لطفا مشخصات خود را به صورت کامل نمایید. |
|
|
</p> |
|
|
<form |
|
|
className="auth-profile__box--form d-flex" |
|
|
onSubmit={(e) => this.onSubmit(e)} |
|
|
> |
|
|
<div style={{ width: "48%" }}> |
|
|
<div className="mb-2 d-flex justify-content-center"> |
|
|
<Upload name="file" parent={this} /> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="firstName" |
|
|
label="نام" |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="lastName" |
|
|
label="نام خانوادگی" |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="username" |
|
|
label="نام کاربری" |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
align="left" |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<div className="mb-2"> |
|
|
<Gender |
|
|
options={["دختر", "پسر"]} |
|
|
parent={this} |
|
|
name="gender" |
|
|
selectedOption={this.state.gender} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label="کد ملی" |
|
|
parent={this} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Birthdate /> |
|
|
</div> |
|
|
{/* <div className="mb-2"> |
|
|
<Input name="password" label="رمز عبور" parent={this} /> |
|
|
</div> */} |
|
|
</div> |
|
|
<div style={{ width: "48%" }}> |
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Gender |
|
|
parent={this} |
|
|
options={["معلم", "دانش آموز"]} |
|
|
name="userRoleId" |
|
|
label={"عنوان"} |
|
|
selectedOption={this.state.userRoleId} |
|
|
/> |
|
|
</div> |
|
|
{this.state.userRoleId === "دانش آموز" ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={"پایه تحصیلی"} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.userRoleId === "معلم" ? ( |
|
|
<div className="mb-2"> |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={"پایه تحصیلی"} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
{this.state.userRoleId === "دانش آموز" && |
|
|
this.state.gradeId > 9 ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={[ |
|
|
"ریاضی", |
|
|
"تجربی", |
|
|
"انسانی", |
|
|
"فنی حرفهای", |
|
|
"کاردانش", |
|
|
"معارف", |
|
|
]} |
|
|
name="field" |
|
|
label={"رشته تحصیلی"} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="province" |
|
|
label={"استان"} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="city" |
|
|
label={"شهرستان"} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={"شهر/روستا"} |
|
|
/> |
|
|
</div> |
|
|
{this.state.userRoleId === "دانش آموز" ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={"نام مدرسه"} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.userRoleId === "معلم" ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={"محل تدریس"} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={"کد پستی"} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<TextArea |
|
|
parent={this} |
|
|
label={"آدرس محل سکونت"} |
|
|
name="address" |
|
|
/> |
|
|
</div> |
|
|
<div className="auth-profile__box--form__footer d-flex justify-content-center"> |
|
|
<button>ذخیره</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
profile ? ( |
|
|
<div className="mobile-auth-profile d-flex flex-column"> |
|
|
<img src={logo} alt="دانوین" /> |
|
|
<div className="d-flex align-items-center"> |
|
|
<div className="d-flex flex-column"> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
لطفا مشحصات خود را به صورت کامل وارد نمایید |
|
|
</p> |
|
|
</div> |
|
|
<Upload name="file" parent={this} /> |
|
|
</div> |
|
|
|
|
|
<Input |
|
|
name="firstName" |
|
|
label="نام" |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
<Input |
|
|
name="lastName" |
|
|
label="نام خانوادگی" |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
<Input |
|
|
name="username" |
|
|
label="نام کاربری" |
|
|
parent={this} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
onInput={onInput.englishAndNumberWithoutSpace} |
|
|
/> |
|
|
<Gender |
|
|
options={["دختر", "پسر"]} |
|
|
parent={this} |
|
|
name="gender" |
|
|
selectedOption={this.state.gender} |
|
|
/> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label="کدملی / اتباع" |
|
|
parent={this} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
maxLength={13} |
|
|
inputMode="numeric" |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
<Birthdate /> |
|
|
<Gender |
|
|
parent={this} |
|
|
options={["معلم", "دانش آموز"]} |
|
|
name="userRoleId" |
|
|
selectedOption={this.state.userRoleId} |
|
|
/> |
|
|
{this.state.userRoleId === "دانش آموز" ? ( |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={"پایه تحصیلی"} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === "معلم" ? ( |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={"پایه تحصیلی"} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === "دانش آموز" && |
|
|
Number(this.state.gradeId) > 9 ? ( |
|
|
<Select |
|
|
parent={this} |
|
|
options={[ |
|
|
"ریاضی", |
|
|
"تجربی", |
|
|
"انسانی", |
|
|
"فنی حرفهای", |
|
|
"کاردانش", |
|
|
"معارف", |
|
|
]} |
|
|
name="field" |
|
|
label={"رشته تحصیلی"} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
) : null} |
|
|
|
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="provinceId" |
|
|
label={"استان"} |
|
|
/> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="cityId" |
|
|
label={"شهرستان"} |
|
|
/> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={"شهر/روستا"} |
|
|
/> |
|
|
{this.state.userRoleId === "دانش آموز" ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={"نام مدرسه"} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === "معلم" ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={"محل تدریس"} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === "معلم" ? ( |
|
|
<Document parent={this} name="docFileIds" /> |
|
|
) : null} |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={"کد پستی"} |
|
|
align="left" |
|
|
maxLength={13} |
|
|
inputMode="numeric" |
|
|
defaultValue={profile} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" /> |
|
|
<div className="mobile-auth-profile__footer d-flex justify-content-center"> |
|
|
<button onClick={() => this.onSubmit()}>ذخیره</button> |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state) => ({ |
|
|
profile: state.user.status, |
|
|
loading: state.user.loading, |
|
|
}), |
|
|
{ getProfile: user.getProfile, setProfile: user.setProfile } |
|
|
)(Profile); |
|
|
|
|
|
Profile.defaultProps = { |
|
|
user: { |
|
|
name: "اکبر", |
|
|
icon: pic, |
|
|
description: "", |
|
|
}, |
|
|
};
|
|
|
|