|
|
import React, { Component } from "react"; |
|
|
import onInput from "~/util/onInput"; |
|
|
import { user, file, publicApi } 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 pic from "../../../assets/images/pic.png"; |
|
|
import "./index.scss"; |
|
|
import { useHistory } from "react-router-dom"; |
|
|
import Navbar from "../../Home/Navbar/index"; |
|
|
function Navigate({ path }) { |
|
|
let history = useHistory(); |
|
|
return <>{history.push(path)}</>; |
|
|
} |
|
|
|
|
|
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, |
|
|
}, |
|
|
}; |
|
|
|
|
|
class Profile extends Component { |
|
|
state = { |
|
|
render: false, |
|
|
file: this.props.uploads["file"] || this.props.profile.picFileId || null, |
|
|
picFileId: |
|
|
this.props.uploads["file"] || this.props.profile.picFileId || null, |
|
|
docFileIds: |
|
|
this.props.uploads["docFileIds"] || this.props.profile.docFileIds || "", |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
password: "", |
|
|
username: "", |
|
|
address: "", |
|
|
email: "", |
|
|
birthDate: "", |
|
|
gender: this.props.profile.gender || 1, |
|
|
status: this.props.profile.status || 1, |
|
|
nationalId: "", |
|
|
|
|
|
phone: "", |
|
|
|
|
|
zoneId: "", |
|
|
schoolId: "", |
|
|
postalCode: "", |
|
|
gradeIds: this.props.profile.gradeIds, |
|
|
provinceId: this.props.profile.provinceId, |
|
|
cityId: this.props.profile.cityId, |
|
|
|
|
|
validation: { |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
username: "", |
|
|
email: "", |
|
|
postalCode: "", |
|
|
nationalId: "", |
|
|
schoolId: "", |
|
|
}, |
|
|
}; |
|
|
|
|
|
componentDidMount() { |
|
|
this.props.getProvince(); |
|
|
this.props.getCity({ provinceId: this.props.profile.provinceId }); |
|
|
// this.props.getProfile(); |
|
|
} |
|
|
|
|
|
onChange = (name, value) => { |
|
|
if (name === "provinceId") { |
|
|
this.props.getCity({ provinceId: value }); |
|
|
this.setState({ |
|
|
cityId: null, |
|
|
[name]: value, |
|
|
}); |
|
|
} else if (name === "status") { |
|
|
this.setState((prevState) => ({ |
|
|
gradeIds: String(prevState?.gradeIds || "").slice(0, 1) || "", |
|
|
[name]: value, |
|
|
})); |
|
|
} else if (name === "docFileIds") { |
|
|
this.props.upload({ file: value, target: name }); |
|
|
this.setState({ |
|
|
[name]: value, |
|
|
}); |
|
|
} else if (name === "file") { |
|
|
this.props.upload({ file: value, target: name }); |
|
|
this.setState({ |
|
|
[name]: value, |
|
|
}); |
|
|
} else { |
|
|
this.setState({ |
|
|
[name]: value, |
|
|
}); |
|
|
} |
|
|
}; |
|
|
|
|
|
onSubmit = async (e) => { |
|
|
const { |
|
|
firstName, |
|
|
lastName, |
|
|
username, |
|
|
//cellphone, |
|
|
password, |
|
|
postalCode, |
|
|
address, |
|
|
email, |
|
|
phone, |
|
|
picFileId, |
|
|
gender, |
|
|
nationalId, |
|
|
birthDate, |
|
|
schools, |
|
|
gradeIds, |
|
|
status, |
|
|
provinceId, |
|
|
cityId, |
|
|
docFileIds, |
|
|
} = 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, |
|
|
nationalId: nationalId || profile.nationalId, |
|
|
picFileId: String( |
|
|
this.props.uploads["file"] || picFileId || profile.picFileId |
|
|
), |
|
|
gender: gender || profile.gender, |
|
|
birthDate: birthDate || profile.birthDate, |
|
|
schools: schools || profile.schools, |
|
|
gradeIds: String(gradeIds || profile.gradeIds), |
|
|
status: status || profile.status, |
|
|
provinceId: provinceId || profile.provinceId, |
|
|
cityId: cityId || profile.cityId, |
|
|
docFileIds: String( |
|
|
this.props.uploads["docFileIds"] || docFileIds || profile.docFileIds |
|
|
), |
|
|
}; |
|
|
await setProfile(data); |
|
|
}; |
|
|
|
|
|
render() { |
|
|
if (this.props.setDone) return <Navigate path="/" />; |
|
|
const grades = [ |
|
|
window.t("پیش دبستان"), |
|
|
window.t("اول"), |
|
|
window.t("دوم"), |
|
|
window.t("سوم"), |
|
|
window.t("چهارم"), |
|
|
window.t("پنجم"), |
|
|
window.t("ششم"), |
|
|
window.t("هفتم"), |
|
|
window.t("هشتم"), |
|
|
window.t("نهم"), |
|
|
window.t("دهم"), |
|
|
window.t("یازدهم"), |
|
|
window.t("دوازدهم"), |
|
|
]; |
|
|
const { profile } = this.props; |
|
|
console.log({ profile }); |
|
|
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 }}> |
|
|
{window.t("حساب کاربری")} |
|
|
</h1> |
|
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
|
{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")} |
|
|
</p> |
|
|
<div |
|
|
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={window.t("نام")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="lastName" |
|
|
label={window.t("نام خانوادگی")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
required |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="username" |
|
|
label={window.t("نام کاربری")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
align="left" |
|
|
onInput={onInput.englishAndNumberWithoutSpace} |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<div className="mb-2"> |
|
|
<Gender |
|
|
options={[window.t("دختر"), window.t("پسر")]} |
|
|
parent={this} |
|
|
name="gender" |
|
|
selectedOption={this.state.gender} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label={window.t("کد ملی/اتباع")} |
|
|
parent={this} |
|
|
align="left" |
|
|
maxLength={13} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Birthdate |
|
|
defaultValue={profile} |
|
|
parent={this} |
|
|
name="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={[window.t("معلم"), window.t("دانش آموز")]} |
|
|
name="status" |
|
|
label={window.t("عنوان")} |
|
|
selectedOption={this.state.status} |
|
|
/> |
|
|
</div> |
|
|
{this.state.status === 1 ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<div className="mb-2"> |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
{this.state.status === window.t("دانش آموز") && |
|
|
this.state.gradeIds > 9 ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={[ |
|
|
window.t("ریاضی"), |
|
|
window.t("تجربی"), |
|
|
window.t("انسانی"), |
|
|
window.t("فنی حرفهای"), |
|
|
window.t("کاردانش"), |
|
|
window.t("معارف"), |
|
|
]} |
|
|
name="field" |
|
|
label={window.t("رشته تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Select |
|
|
parent={this} |
|
|
options={this.props.provinceList} |
|
|
name="provinceId" |
|
|
label={window.t("استان")} |
|
|
selectedOptions={this.state.provinceId} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={this.props.cityList} |
|
|
name="cityId" |
|
|
label={window.t("شهرستان")} |
|
|
selectedOptions={this.state.cityId} |
|
|
/> |
|
|
</div> |
|
|
{/* <div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={window.t("شهر/روستا")} |
|
|
/> |
|
|
</div> */} |
|
|
{this.state.status === 1 ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schools" |
|
|
label={window.t("نام مدرسه")} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schools" |
|
|
label={window.t("محل تدریس")} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<Document parent={this} name="docFileIds" /> |
|
|
) : null} |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={window.t("کد پستی")} |
|
|
align="left" |
|
|
maxLength={10} |
|
|
inputMode="numeric" |
|
|
defaultValue={profile} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<TextArea |
|
|
parent={this} |
|
|
label={window.t("آدرس محل سکونت")} |
|
|
name="address" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="auth-profile__box--form__footer d-flex justify-content-center"> |
|
|
<button onClick={() => this.onSubmit()}> |
|
|
{window.t("ذخیره")} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
profile ? ( |
|
|
<> |
|
|
<Navbar /> |
|
|
<div className="mobile-auth-profile d-flex flex-column"> |
|
|
<br /> |
|
|
{/* <img src={logo} alt={window.t("دانوین")} /> */} |
|
|
|
|
|
<div className="d-flex align-items-center"> |
|
|
<div className="d-flex flex-column"> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
|
{window.t("حساب کاربری")}{" "} |
|
|
</h1> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{window.t("لطفا مشخصات خود را به صورت کامل وارد نمایید")}{" "} |
|
|
</p> |
|
|
</div> |
|
|
<Upload name="file" parent={this} /> |
|
|
</div> |
|
|
|
|
|
<Input |
|
|
name="firstName" |
|
|
label={window.t("نام")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
required |
|
|
/> |
|
|
<Input |
|
|
name="lastName" |
|
|
label={window.t("نام خانوادگی")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
required |
|
|
/> |
|
|
<Input |
|
|
name="username" |
|
|
label={window.t("نام کاربری")} |
|
|
parent={this} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
onInput={onInput.englishAndNumberWithoutSpace} |
|
|
/> |
|
|
<Gender |
|
|
options={[window.t("دختر"), window.t("پسر")]} |
|
|
parent={this} |
|
|
name="gender" |
|
|
selectedOption={this.state.gender} |
|
|
/> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label={window.t("کدملی / اتباع")} |
|
|
parent={this} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
maxLength={13} |
|
|
inputMode="numeric" |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
<Birthdate |
|
|
defaultValue={profile} |
|
|
parent={this} |
|
|
name="birthDate" |
|
|
/> |
|
|
<Gender |
|
|
parent={this} |
|
|
options={[window.t("معلم"), window.t("دانش آموز")]} |
|
|
name="status" |
|
|
selectedOption={this.state.status} |
|
|
/> |
|
|
{this.state.status === 1 ? ( |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.status === 1 && Number(this.state.gradeIds) > 9 ? ( |
|
|
<Select |
|
|
parent={this} |
|
|
options={[ |
|
|
window.t("ریاضی"), |
|
|
window.t("تجربی"), |
|
|
window.t("انسانی"), |
|
|
window.t("فنی حرفهای"), |
|
|
window.t("کاردانش"), |
|
|
window.t("معارف"), |
|
|
]} |
|
|
name="field" |
|
|
label={window.t("رشته تحصیلی")} |
|
|
selectedOptions={this.state.gradeIds} |
|
|
/> |
|
|
) : null} |
|
|
|
|
|
<Select |
|
|
parent={this} |
|
|
options={this.props.provinceList} |
|
|
name="provinceId" |
|
|
label={window.t("استان")} |
|
|
selectedOptions={this.state.provinceId} |
|
|
/> |
|
|
<Select |
|
|
parent={this} |
|
|
options={this.props.cityList} |
|
|
name="cityId" |
|
|
label={window.t("شهرستان")} |
|
|
selectedOptions={this.state.cityId} |
|
|
/> |
|
|
{/* <Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={window.t("شهر/روستا")} |
|
|
/> */} |
|
|
{this.state.status === 1 ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schools" |
|
|
label={window.t("نام مدرسه")} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schools" |
|
|
label={window.t("محل تدریس")} |
|
|
defaultValue={profile} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.status === 2 ? ( |
|
|
<Document parent={this} name="docFileIds" /> |
|
|
) : null} |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={window.t("کد پستی")} |
|
|
align="left" |
|
|
maxLength={10} |
|
|
inputMode="numeric" |
|
|
defaultValue={profile} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
<TextArea |
|
|
parent={this} |
|
|
label={window.t("آدرس محل سکونت")} |
|
|
name="address" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
<div className="mobile-auth-profile__footer d-flex justify-content-center"> |
|
|
<button onClick={() => this.onSubmit()}> |
|
|
{window.t("ذخیره")} |
|
|
</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, |
|
|
setDone: state.user.setDone, |
|
|
loading: state.user.loading, |
|
|
uploading: state.file.loading, |
|
|
uploads: state.file.uploads, |
|
|
provinceList: state.publicApi.province, |
|
|
cityList: state.publicApi.city, |
|
|
}), |
|
|
{ |
|
|
getProfile: user.getProfile, |
|
|
setProfile: user.setProfile, |
|
|
upload: file.upload, |
|
|
getProvince: publicApi.getProvince, |
|
|
getCity: publicApi.getCity, |
|
|
} |
|
|
)(Profile); |
|
|
|
|
|
Profile.defaultProps = { |
|
|
user: { |
|
|
name: "اکبر", |
|
|
icon: pic, |
|
|
description: "", |
|
|
}, |
|
|
};
|
|
|
|