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.
 
 
 

530 lines
15 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 moment from "jalali-moment";
//components
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({
isMobile,
profile,
uploads,
uploadId,
upload,
getProvince,
getCity,
setDone,
setProfile,
province,
provinceList,
cityList,
setHeaderOptions,
headerOptions,
loading,
}) {
let navigate = useNavigate();
const [formData, setFormData] = useState(null);
useEffect(() => {
if (user) {
const momentDate = moment(profile?.birthDate);
const isValid = momentDate.isValid();
setFormData({
// file: uploads["file"] || profile.picFileId,
picFileId: uploads["file"] || profile?.picFileId,
docFileIds: uploads["docFileIds"] || profile?.docFileIds,
firstName: profile?.firstName,
lastName: profile?.lastName,
password: profile?.password,
username: profile?.username,
address: profile?.address,
email: profile?.email,
birthDate: {
day: isValid ? moment(profile?.birthDate).format("jDD") : null,
month: isValid ? moment(profile?.birthDate).format("jMM") : null,
year: isValid ? moment(profile?.birthDate).format("jYYYY") : null,
},
gender: profile?.gender || 1,
status: profile?.status || 1,
nationalId: profile?.nationalId || "",
phone: profile?.phone || "",
cellphone: profile?.cellphone || "",
schools: profile?.schools || null,
zoneId: profile?.zoneId || "",
schoolId: profile?.schoolId || "",
postalCode: profile?.postalCode || "",
gradeIds: profile?.gradeIds || [],
provinceId: profile?.provinceId || null,
cityId: profile?.cityId || null,
});
}
}, [user]);
useEffect(() => {
if(isMobile){
setHeaderOptions(headerOptions);
}
getProvince();
}, []);
const grades = [
{
name: window.t("پیش دبستانی"),
value: 0,
},
{
name: window.t("اول"),
value: 1,
},
{
name: window.t("دوم"),
value: 2,
},
{
name: window.t("سوم"),
value: 3,
},
{
name: window.t("چهارم"),
value: 4,
},
{
name: window.t("پنجم"),
value: 5,
},
{
name: window.t("ششم"),
value: 6,
},
{
name: window.t("هفتم"),
value: 7,
},
{
name: window.t("هشتم"),
value: 8,
},
{
name: window.t("نهم"),
value: 9,
},
{
name: window.t("دهم"),
value: 10,
},
{
name: window.t("یازدهم"),
value: 11,
},
{
name: window.t("دوازدهم"),
value: 12,
},
];
const onSubmit = React.useCallback(async () => {
const data = {
firstName: formData?.firstName,
lastName: formData?.lastName,
username: formData?.username,
cellphone: formData?.cellphone,
password: formData?.password,
postalCode: formData?.postalCode,
address: formData?.address,
email: formData?.email,
phone: formData?.phone,
cellphone: formData?.cellphone,
nationalId: formData?.nationalId,
picFileId: uploads["picFileId"] || formData?.picFileId,
birthDate: moment
.from(
`${formData?.birthDate?.year}/${formData?.birthDate?.month}/${formData?.birthDate?.day}`,
"fa",
"YYYY/MM/DD"
)
.locale("en"),
gender: formData?.gender,
schools: formData?.schools,
gradeIds: formData?.gradeIds,
status: formData?.status,
provinceId: formData?.provinceId,
cityId: formData?.cityId,
docFileIds: uploads["docFileIds"] || formData?.docFileIds,
};
await setProfile(data);
}, [formData, uploads]);
return isMobile ? (
<div className="lg:hidden flex flex-col gap-6 px-4 pb-20">
<header className="flex flex-col gap-2 w-full">
<h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1>
<p className="text-sm text-gray1">
{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}
</p>
</header>
<form
className="flex flex-col items-center w-full gap-4"
onSubmit={(e) => e.preventDefault()}
>
<Upload
name="picFileId"
value={String(
uploads["picFileId"] || uploadId || formData?.picFileId
)}
onChange={(name, value) => {
upload({ file: value, target: name });
setFormData({ ...formData, [name]: value });
}}
label={window.t("فایل")}
/>
<Input
name="firstName"
label={window.t("نام")}
align="right"
onInput={onInput.persianOnly}
value={formData?.firstName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
/>
<Input
name="lastName"
label={window.t("نام نام خانوادگی")}
align="right"
value={formData?.lastName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
onInput={onInput.persianOnly}
regex={(val) => val}
/>
<Input
name="username"
label={window.t("نام کاربری")}
value={formData?.username}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
align="left"
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
<Gender
options={[window.t("دختر"), window.t("پسر")]}
name="gender"
selectedOption={formData?.gender}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
label="جنسیت"
/>
<Input
name="nationalId"
label={window.t("کد ملی/اتباع")}
align="left"
maxLength={13}
value={formData?.nationalId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => onInput.numberOnly(val)}
/>
<Birthdate
name="birthDate"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.birthDate}
/>
<Input
name="password"
label={window.t("رمز عبور")}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.password}
align="left"
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
<Gender
options={[window.t("دانش آموز"), window.t("معلم")]}
name="status"
label={window.t("عنوان")}
selectedOption={formData?.status}
onChange={(name, value) => {
setFormData({
...formData,
gradeIds: formData?.gradeIds?.slice(0, 1) || [],
[name]: value,
});
}}
/>
{formData?.status === 1 ? (
<Select
options={grades}
name="gradeIds"
label={window.t("پایه تحصیلی")}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
) : null}
{formData?.status === 2 ? (
<MultipleSelector
options={grades}
name="gradeIds"
label={window.t("پایه تحصیلی")}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
align="right"
defaultValue={profile}
/>
) : null}
{formData?.status === window.t("دانش آموز") &&
formData?.gradeIds > 9 ? (
<Select
options={[
window.t("ریاضی"),
window.t("تجربی"),
window.t("انسانی"),
window.t("فنی حرفهای"),
window.t("کاردانش"),
window.t("معارف"),
]}
name="field"
label={window.t("رشته تحصیلی")}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
) : null}
<Select
options={provinceList}
name="provinceId"
label={window.t("استان")}
selectedOptions={formData?.provinceId}
onChange={(name, value) => {
setFormData({ ...formData, cityId: null, [name]: value });
getCity({ provinceId: provinceList.find((province) => province.name === value)?.id });
}}
/>
<Select
options={cityList}
name="cityId"
label={window.t("شهرستان")}
selectedOptions={formData?.cityId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
{formData?.status == 1 ? (
<Input
name="schools"
label={window.t("نام مدرسه")}
value={formData?.schoolId}
regex={(val) => onInput.persianOnly(val)}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
) : null}
{formData?.status == 2 ? (
<Input
name="schools"
label={window.t("محل تدریس")}
defaultValue={formData}
regex={(val) => onInput.persianOnly(val)}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
) : null}
{formData?.status == 2 ? (
<Document
onChange={(name, value) => {
upload({ file: value, target: name });
setFormData({ ...formData, [name]: value });
}}
value={String(uploads["docFileIds"] || formData?.docFileIds)}
name="docFileIds"
/>
) : null}
<Input
name="postalCode"
label={window.t("کد پستی")}
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
maxLength={10}
inputMode="numeric"
value={formData?.postalCode}
regex={(val) => onInput.numberOnly(val)}
/>
<TextArea
placeholder={window.t("آدرس محل سکونت")}
name="address"
value={formData?.address}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
<button
className="w-full bg-blueC0 py-3 text-base text-white rounded-sm"
onClick={() => onSubmit()}
>
{window.t("ذخیره")}
</button>
</form>
</div>
) : (
<div
className="hidden lg:flex flex-col items-center gap-5 w-full pt-5 select-none"
onSubmit={(e) => onSubmit()}
>
<Upload
name="file"
value={String(uploadId || formData?.picFileId)}
onChange={(name, value) => setFormData({ ...formData, [name]: value })}
label="فایل"
/>
<div
className={`w-full gap-5 lg:flex lg:flex-row lg:my-2 lg:items-center flex flex-col`}
>
<Input
name="firstName"
label={window.t("نام")}
align="right"
onInput={onInput.persianOnly}
value={formData?.firstName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
/>
<Input
name="lastName"
label="نام خانوادگی"
align="right"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
value={formData?.lastName}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="cellphone"
label="شماره تلفن همراه"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.numberOnly}
value={formData?.cellphone}
maxLength={11}
direction={"ltr"}
/>
<Input
name="nationalId"
label="کدملی"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.numberOnly}
value={formData?.nationalId}
maxLength={10}
direction={"ltr"}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="email"
label="ایمیل"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.englishAndNumberWithoutSpace}
value={formData?.email}
/>
<Birthdate
name="birthDate"
onChange={(name, value) => setProfile({ name, value })}
value={formData?.birthDate}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Gender
options={[window.t("دختر"), window.t("پسر")]}
name="gender"
selectedOption={formData?.gender}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
label="جنسیت"
/>
<div className="w-full"></div>
</div>
<button
className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm"
onClick={() => onSubmit()}
>
{window.t("ذخیره")}
</button>
</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,
isMobile: state.config.device === "mobile",
}),
{
getProfile: user.getProfile,
setProfile: user.setProfile,
upload: file.upload,
getProvince: publicApi.getProvince,
getCity: publicApi.getCity,
setHeaderOptions: publicApi.setHeaderOptions,
}
)(Profile);
Profile.defaultProps = {
user: {
name: window.t("اکبر"),
icon: "",
description: "",
},
};