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.
 
 
 

613 lines
22 KiB

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