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.
 
 
 

450 lines
13 KiB

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