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.
 
 
 

510 lines
17 KiB

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