You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

541 lines
18 KiB

/* 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: "",
},
};