|
|
/* eslint-disable no-useless-escape */ |
|
|
import React, { Component } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
import Select from "../Auth/Profile/Select/index"; |
|
|
import Input from "../Auth/Profile/Input/index"; |
|
|
import TextArea from "../Auth/Profile/TextArea/index"; |
|
|
import Upload from "../Auth/Profile/Upload/index"; |
|
|
import Gender from "../Auth/Profile/GenderSwitch/index"; |
|
|
import Birthdate from "../Auth/Profile/Birthdate/index"; |
|
|
import MultipleSelector from "../Auth/Profile/MultipleSelector/index"; |
|
|
import Document from "../Auth/Profile/Document/index"; |
|
|
|
|
|
import logo from "~/assets/icons/logo.png"; |
|
|
import pic from "~/assets/images/pic.png"; |
|
|
|
|
|
import "../Auth/Profile/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, |
|
|
}, |
|
|
}; |
|
|
|
|
|
class NewProfile extends Component { |
|
|
state = { |
|
|
render: false, |
|
|
file: null, |
|
|
docFileIds: "", |
|
|
firstName: "", |
|
|
lastName: "", |
|
|
password: "", |
|
|
username: "", |
|
|
address: "", |
|
|
email: "", |
|
|
gender: window.t("دختر"), |
|
|
userRoleId: window.t("دانش آموز"), |
|
|
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 === window.t("معلم")) { |
|
|
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, |
|
|
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); |
|
|
}; |
|
|
|
|
|
forcePersian = (txt) => { |
|
|
let yas = txt; |
|
|
yas = yas.replace(/`/g, ""); |
|
|
yas = yas.replace(/0/g, ""); |
|
|
yas = yas.replace(/1/g, ""); |
|
|
yas = yas.replace(/2/g, ""); |
|
|
yas = yas.replace(/3/g, ""); |
|
|
yas = yas.replace(/4/g, ""); |
|
|
yas = yas.replace(/5/g, ""); |
|
|
yas = yas.replace(/6/g, ""); |
|
|
yas = yas.replace(/7/g, ""); |
|
|
yas = yas.replace(/8/g, ""); |
|
|
yas = yas.replace(/9/g, ""); |
|
|
yas = yas.replace(/0/g, ""); |
|
|
yas = yas.replace(/q/g, ""); |
|
|
yas = yas.replace(/w/g, ""); |
|
|
yas = yas.replace(/e/g, ""); |
|
|
yas = yas.replace(/r/g, ""); |
|
|
yas = yas.replace(/t/g, ""); |
|
|
yas = yas.replace(/y/g, ""); |
|
|
yas = yas.replace(/u/g, ""); |
|
|
yas = yas.replace(/i/g, ""); |
|
|
yas = yas.replace(/o/g, ""); |
|
|
yas = yas.replace(/p/g, ""); |
|
|
yas = yas.replace(/\[/g, ""); |
|
|
yas = yas.replace(/\]/g, ""); |
|
|
yas = yas.replace(/a/g, ""); |
|
|
yas = yas.replace(/s/g, ""); |
|
|
yas = yas.replace(/d/g, ""); |
|
|
yas = yas.replace(/f/g, ""); |
|
|
yas = yas.replace(/g/g, ""); |
|
|
yas = yas.replace(/h/g, ""); |
|
|
yas = yas.replace(/j/g, ""); |
|
|
yas = yas.replace(/k/g, ""); |
|
|
yas = yas.replace(/l/g, ""); |
|
|
yas = yas.replace(/\;/g, ""); |
|
|
yas = yas.replace(/\'/g, ""); |
|
|
yas = yas.replace(/z/g, ""); |
|
|
yas = yas.replace(/x/g, ""); |
|
|
yas = yas.replace(/c/g, ""); |
|
|
yas = yas.replace(/v/g, ""); |
|
|
yas = yas.replace(/b/g, ""); |
|
|
yas = yas.replace(/n/g, ""); |
|
|
yas = yas.replace(/m/g, ""); |
|
|
yas = yas.replace(/\,/g, ""); |
|
|
yas = yas.replace(/\./g, ""); |
|
|
yas = yas.replace(/\//g, ""); |
|
|
yas = yas.replace(/~/g, " "); |
|
|
yas = yas.replace(/Q/g, ""); |
|
|
yas = yas.replace(/W/g, ""); |
|
|
yas = yas.replace(/E/g, ""); |
|
|
yas = yas.replace(/R/g, ""); |
|
|
yas = yas.replace(/T/g, ""); |
|
|
yas = yas.replace(/Y/g, ""); |
|
|
yas = yas.replace(/U/g, ""); |
|
|
yas = yas.replace(/I/g, ""); |
|
|
yas = yas.replace(/O/g, ""); |
|
|
yas = yas.replace(/P/g, ""); |
|
|
yas = yas.replace(/A/g, ""); |
|
|
yas = yas.replace(/S/g, ""); |
|
|
yas = yas.replace(/G/g, ""); |
|
|
yas = yas.replace(/H/g, ""); |
|
|
yas = yas.replace(/J/g, ""); |
|
|
yas = yas.replace(/K/g, ""); |
|
|
yas = yas.replace(/L/g, ""); |
|
|
yas = yas.replace(/Z/g, ""); |
|
|
yas = yas.replace(/X/g, ""); |
|
|
yas = yas.replace(/B/g, ""); |
|
|
yas = yas.replace(/N/g, ""); |
|
|
yas = yas.replace(/M/g, ""); |
|
|
yas = yas.replace(/\?/g, ""); |
|
|
return yas; |
|
|
}; |
|
|
|
|
|
render() { |
|
|
const { profile } = this.props; |
|
|
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("دوازدهم"), |
|
|
]; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
<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 }}> |
|
|
لطفا مشخصات خود را به صورت کامل نمایید. |
|
|
</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={window.t("نام")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="lastName" |
|
|
label={window.t("نام خانوادگی")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="username" |
|
|
label={window.t("نام کاربری")} |
|
|
parent={this} |
|
|
defaultValue={profile} |
|
|
align="left" |
|
|
/> |
|
|
</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" |
|
|
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={[window.t("معلم"), window.t("دانش آموز")]} |
|
|
name="userRoleId" |
|
|
label={window.t("عنوان")} |
|
|
selectedOption={this.state.userRoleId} |
|
|
/> |
|
|
</div> |
|
|
{this.state.userRoleId === window.t("دانش آموز") ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("معلم") ? ( |
|
|
<div className="mb-2"> |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
{this.state.userRoleId === window.t("دانش آموز") && |
|
|
this.state.gradeId > 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.gradeId} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="province" |
|
|
label={window.t("استان")} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="city" |
|
|
label={window.t("شهرستان")} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={window.t("شهر/روستا")} |
|
|
/> |
|
|
</div> |
|
|
{this.state.userRoleId === window.t("دانش آموز") ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={window.t("نام مدرسه")} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("معلم") ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={window.t("محل تدریس")} |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={window.t("کد پستی")} |
|
|
align="left" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<TextArea |
|
|
parent={this} |
|
|
label={window.t("آدرس محل سکونت")} |
|
|
name="address" |
|
|
/> |
|
|
</div> |
|
|
<div className="auth-profile__box--form__footer d-flex justify-content-center"> |
|
|
<button>{window.t("ذخیره")}</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
<div className="mobile-auth-profile d-flex flex-column"> |
|
|
<img src={logo} alt={window.t("دانوین")} /> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}>افزودن کاربر جدید</h1> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{window.t("لطفا مشحصات خود را به صورت کامل وارد نمایید")}{" "} |
|
|
</p> |
|
|
<Upload name="file" parent={this} /> |
|
|
<Input |
|
|
name="firstName" |
|
|
label={window.t("نام")} |
|
|
parent={this} |
|
|
onInput={this.forcePersian} |
|
|
/> |
|
|
<Input |
|
|
name="lastName" |
|
|
label={window.t("نام خانوادگی")} |
|
|
parent={this} |
|
|
onInput={this.forcePersian} |
|
|
/> |
|
|
<Input |
|
|
name="username" |
|
|
label={window.t("نام کاربری")} |
|
|
parent={this} |
|
|
align="left" |
|
|
/> |
|
|
<Gender |
|
|
options={[window.t("دختر"), window.t("پسر")]} |
|
|
parent={this} |
|
|
name="gender" |
|
|
selectedOption={this.state.gender} |
|
|
/> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label={window.t("کد ملی")} |
|
|
parent={this} |
|
|
align="left" |
|
|
maxLength={10} |
|
|
inputMode="numeric" |
|
|
/> |
|
|
<Birthdate /> |
|
|
<Gender |
|
|
parent={this} |
|
|
options={[window.t("معلم"), window.t("دانش آموز")]} |
|
|
name="userRoleId" |
|
|
selectedOption={this.state.userRoleId} |
|
|
/> |
|
|
{this.state.userRoleId === window.t("دانش آموز") ? ( |
|
|
<Select |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("معلم") ? ( |
|
|
<MultipleSelector |
|
|
parent={this} |
|
|
options={grades} |
|
|
name="gradeId" |
|
|
label={window.t("پایه تحصیلی")} |
|
|
selectedOptions={this.state.gradeId} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("دانش آموز") && |
|
|
Number(this.state.gradeId) > 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.gradeId} |
|
|
/> |
|
|
) : null} |
|
|
|
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="provinceId" |
|
|
label={window.t("استان")} |
|
|
/> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["karaj", "tehran"]} |
|
|
name="cityId" |
|
|
label={window.t("شهرستان")} |
|
|
/> |
|
|
<Select |
|
|
parent={this} |
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={window.t("شهر/روستا")} |
|
|
/> |
|
|
{this.state.userRoleId === window.t("دانش آموز") ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={window.t("نام مدرسه")} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("معلم") ? ( |
|
|
<Input |
|
|
parent={this} |
|
|
name="schoolId" |
|
|
label={window.t("محل تدریس")} |
|
|
/> |
|
|
) : null} |
|
|
{this.state.userRoleId === window.t("معلم") ? ( |
|
|
<Document parent={this} name="docFileIds" /> |
|
|
) : null} |
|
|
<Input |
|
|
parent={this} |
|
|
name="postalCode" |
|
|
label={window.t("کد پستی")} |
|
|
align="left" |
|
|
/> |
|
|
<TextArea |
|
|
parent={this} |
|
|
label={window.t("آدرس محل سکونت")} |
|
|
name="address" |
|
|
/> |
|
|
<div className="mobile-auth-profile__footer d-flex justify-content-center"> |
|
|
<button onClick={() => this.onSubmit()}> |
|
|
{window.t("ذخیره")} |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect((state) => ({}), {})(NewProfile); |
|
|
|
|
|
NewProfile.defaultProps = { |
|
|
user: { |
|
|
name: "اکبر", |
|
|
icon: pic, |
|
|
description: "", |
|
|
}, |
|
|
};
|
|
|
|