|
|
import React, { useState, useEffect } from "react"; |
|
|
import { useNavigate } from "react-router-dom"; |
|
|
import onInput from "../../../utils/onInput"; |
|
|
import { user, file, publicApi } from "../../../redux/actions"; |
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
import Select from "../../../components/Select"; |
|
|
import Input from "../../../components/Input"; |
|
|
import TextArea from "../../../components/Textarea"; |
|
|
import Upload from "./Upload"; |
|
|
import Gender from "./GenderSwitch"; |
|
|
import Birthdate from "./Birthdate"; |
|
|
import MultipleSelector from "./MultipleSelector"; |
|
|
import Document from "./Document"; |
|
|
|
|
|
|
|
|
function Profile({ |
|
|
profile, |
|
|
uploads, |
|
|
getProvince, |
|
|
getCity, |
|
|
setDone, |
|
|
upload, |
|
|
setProfile, |
|
|
province, |
|
|
provinceList, |
|
|
cityList, |
|
|
}) { |
|
|
let navigate = useNavigate(); |
|
|
const [render, setRender] = useState(false); |
|
|
const [formData, setFormData] = useState({ |
|
|
file: uploads["file"] || profile.picFileId || null, |
|
|
picFileId: uploads["file"] || profile.picFileId || null, |
|
|
docFileIds: uploads["docFileIds"] || profile.docFileIds || "", |
|
|
firstName: profile.firstName || "", |
|
|
lastName: profile.lastName || "", |
|
|
password: profile.password || "", |
|
|
username: profile.username || "", |
|
|
address: profile.address || "", |
|
|
email: profile.email || "", |
|
|
birthDate: profile.birthDate || "", |
|
|
gender: profile.gender || 1, |
|
|
status: profile.status || 1, |
|
|
nationalId: profile.nationalId || "", |
|
|
phone: profile.phone || "", |
|
|
schools: profile.schools || null, |
|
|
zoneId: profile.zoneId || "", |
|
|
schoolId: profile.schoolId || "", |
|
|
postalCode: profile.postalCode || "", |
|
|
gradeIds: profile.gradeIds || [], |
|
|
provinceId: profile.provinceId || null, |
|
|
cityId: profile.cityId || null, |
|
|
}); |
|
|
|
|
|
useEffect(() => { |
|
|
getProvince(); |
|
|
getCity({ provinceId: profile.provinceId }); |
|
|
}, []); |
|
|
|
|
|
useEffect(() => { |
|
|
if (setDone) { |
|
|
navigate("/"); |
|
|
} |
|
|
}, [setDone]); |
|
|
|
|
|
const grades = [ |
|
|
{ |
|
|
name: "پیش دبستانی", |
|
|
value: 0, |
|
|
}, |
|
|
{ |
|
|
name: "اول", |
|
|
value: 1, |
|
|
}, |
|
|
{ |
|
|
name: "دوم", |
|
|
value: 2, |
|
|
}, |
|
|
{ |
|
|
name: "سوم", |
|
|
value: 3, |
|
|
}, |
|
|
{ |
|
|
name: "چهارم", |
|
|
value: 4, |
|
|
}, |
|
|
{ |
|
|
name: "پنجم", |
|
|
value: 5, |
|
|
}, |
|
|
{ |
|
|
name: "ششم", |
|
|
value: 6, |
|
|
}, |
|
|
{ |
|
|
name: "هفتم", |
|
|
value: 7, |
|
|
}, |
|
|
{ |
|
|
name: "هشتم", |
|
|
value: 8, |
|
|
}, |
|
|
{ |
|
|
name: "نهم", |
|
|
value: 9, |
|
|
}, |
|
|
{ |
|
|
name: "دهم", |
|
|
value: 10, |
|
|
}, |
|
|
{ |
|
|
name: "یازدهم", |
|
|
value: 11, |
|
|
}, |
|
|
{ |
|
|
name: "دوازدهم", |
|
|
value: 12, |
|
|
}, |
|
|
]; |
|
|
|
|
|
const onChange = (name, value) => { |
|
|
if (name === "provinceId") { |
|
|
getCity({ provinceId: value }); |
|
|
setFormData({ ...formData, cityId: null, [name]: value }); |
|
|
} else if (name === "status") { |
|
|
setFormData({ |
|
|
...formData, |
|
|
gradeIds: formData.gradeIds?.slice(0, 1) || [], |
|
|
[name]: value, |
|
|
}); |
|
|
} else if (name === "docFileIds") { |
|
|
upload({ file: value, target: name }); |
|
|
setFormData({ ...formData, [name]: value }); |
|
|
} else if (name === "file") { |
|
|
upload({ file: value, target: name }); |
|
|
setFormData({ ...formData, [name]: value }); |
|
|
} else { |
|
|
setFormData({ ...formData, [name]: value }); |
|
|
} |
|
|
}; |
|
|
|
|
|
const onSubmit = async () => { |
|
|
const { |
|
|
firstName, |
|
|
lastName, |
|
|
username, |
|
|
//cellphone, |
|
|
password, |
|
|
postalCode, |
|
|
address, |
|
|
email, |
|
|
phone, |
|
|
picFileId, |
|
|
gender, |
|
|
nationalId, |
|
|
birthDate, |
|
|
schools, |
|
|
gradeIds, |
|
|
status, |
|
|
provinceId, |
|
|
cityId, |
|
|
docFileIds, |
|
|
} = formData; |
|
|
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: uploads["file"] || picFileId || profile.picFileId, |
|
|
gender: gender || profile.gender, |
|
|
birthDate: birthDate || profile.birthDate, |
|
|
schools: schools || profile.schools, |
|
|
gradeIds: gradeIds || profile.gradeIds, |
|
|
status: status || profile.status, |
|
|
provinceId: provinceId || profile.provinceId, |
|
|
cityId: cityId || profile.cityId, |
|
|
docFileIds: uploads["docFileIds"] || docFileIds || profile.docFileIds, |
|
|
}; |
|
|
await setProfile(data); |
|
|
}; |
|
|
|
|
|
// if (setDone) return <Navigate path="/" />; |
|
|
|
|
|
return ( |
|
|
<div className="profile main d-flex justify-content-center"> |
|
|
<main> |
|
|
<header className="d-flex align-items-center justify-content-between"> |
|
|
<div> |
|
|
<h1>حساب کاربری</h1> |
|
|
<p>لطفا مشخصات خود را به صورت کامل نمایید.</p> |
|
|
</div> |
|
|
<div className="mobile justify-content-center"> |
|
|
<Upload |
|
|
name="file" |
|
|
value={formData.file} |
|
|
onChange={onChange} |
|
|
label="فایل" |
|
|
/> |
|
|
</div> |
|
|
</header> |
|
|
<div className="profile__box d-flex" onSubmit={(e) => onSubmit()}> |
|
|
<div className="profile__box--section"> |
|
|
<div className="mb-2 desktop justify-content-center"> |
|
|
<Upload |
|
|
name="file" |
|
|
value={formData.file} |
|
|
onChange={onChange} |
|
|
label="فایل" |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="firstName" |
|
|
label="نام" |
|
|
align="right" |
|
|
onInput={onInput.persianOnly} |
|
|
defaultValue={formData} |
|
|
onChange={onChange} |
|
|
// ref={usernameInput} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="lastName" |
|
|
label="نام خانوادگی" |
|
|
align="right" |
|
|
defaultValue={formData} |
|
|
onChange={onChange} |
|
|
onInput={onInput.persianOnly} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="username" |
|
|
label="نام کاربری" |
|
|
defaultValue={formData} |
|
|
onChange={onChange} |
|
|
align="left" |
|
|
onInput={onInput.englishAndNumberWithoutSpace} |
|
|
/> |
|
|
</div> |
|
|
|
|
|
<div className="mb-2"> |
|
|
<Gender |
|
|
options={["دختر", "پسر"]} |
|
|
name="gender" |
|
|
selectedOption={formData.gender} |
|
|
onChange={onChange} |
|
|
label="" |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="nationalId" |
|
|
label="کد ملی/اتباع" |
|
|
align="left" |
|
|
maxLength={13} |
|
|
defaultValue={formData} |
|
|
onChange={onChange} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Birthdate |
|
|
defaultValue={formData} |
|
|
name="birthDate" |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="password" |
|
|
label="رمز عبور" |
|
|
onChange={onChange} |
|
|
align="left" |
|
|
onInput={onInput.englishAndNumberWithoutSpace} |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div className="profile__box--section"> |
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Gender |
|
|
options={["معلم", "دانش آموز"]} |
|
|
name="status" |
|
|
label={"عنوان"} |
|
|
selectedOption={formData.status} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
{formData.status === 1 ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={"پایه تحصیلی"} |
|
|
selectedOptions={formData.gradeIds} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{formData.status === 2 ? ( |
|
|
<div className="mb-2"> |
|
|
<MultipleSelector |
|
|
options={grades} |
|
|
name="gradeIds" |
|
|
label={"پایه تحصیلی"} |
|
|
selectedOptions={formData.gradeIds} |
|
|
onChange={onChange} |
|
|
align="right" |
|
|
defaultValue={profile} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
|
|
|
{formData.status === "دانش آموز" && formData.gradeIds > 9 ? ( |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
options={[ |
|
|
"ریاضی", |
|
|
"تجربی", |
|
|
"انسانی", |
|
|
"فنی حرفهای", |
|
|
"کاردانش", |
|
|
"معارف", |
|
|
]} |
|
|
name="field" |
|
|
label={"رشته تحصیلی"} |
|
|
selectedOptions={formData.gradeIds} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{console.log(province)} |
|
|
<div className="mb-2" style={{ minWidth: "100%" }}> |
|
|
<Select |
|
|
options={provinceList} |
|
|
name="provinceId" |
|
|
label={"استان"} |
|
|
selectedOptions={formData.provinceId} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<Select |
|
|
options={cityList} |
|
|
name="cityId" |
|
|
label={"شهرستان"} |
|
|
selectedOptions={formData.cityId} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
{/* <div className="mb-2"> |
|
|
<Select |
|
|
|
|
|
options={["chaharbagh", "mahalat"]} |
|
|
name="zoneId" |
|
|
label={"شهر/روستا"} |
|
|
/> |
|
|
</div> */} |
|
|
{formData.status == 1 ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="schools" |
|
|
label={"نام مدرسه"} |
|
|
defaultValue={formData} |
|
|
onInput={onInput.persianOnly} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{formData.status == 2 ? ( |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="schools" |
|
|
label={"محل تدریس"} |
|
|
defaultValue={formData} |
|
|
onInput={onInput.persianOnly} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
) : null} |
|
|
{formData.status == 2 ? ( |
|
|
<Document |
|
|
onChange={onChange} |
|
|
defaultValue={formData} |
|
|
name="docFileIds" |
|
|
/> |
|
|
) : null} |
|
|
<div className="mb-2"> |
|
|
<Input |
|
|
name="postalCode" |
|
|
label={"کد پستی"} |
|
|
align="left" |
|
|
onChange={onChange} |
|
|
maxLength={10} |
|
|
inputMode="numeric" |
|
|
defaultValue={formData} |
|
|
onInput={onInput.numberOnly} |
|
|
/> |
|
|
</div> |
|
|
<div className="mb-2"> |
|
|
<TextArea |
|
|
placeholder={"آدرس محل سکونت"} |
|
|
name="address" |
|
|
defaultValue={formData} |
|
|
onChange={onChange} |
|
|
/> |
|
|
</div> |
|
|
<div className="profile__box--form__footer d-flex justify-content-center"> |
|
|
<button onClick={() => onSubmit()}>ذخیره</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
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: "", |
|
|
description: "", |
|
|
}, |
|
|
};
|
|
|
|