update src/views/Auth/Profile/Document/index.js, src/views/Auth/Profile/Document/index.scss, src/views/Auth/Profile/Upload/index.js and src/views/Auth/Profile/index.js

master
Reza_ashrafi 2 years ago
parent 82d7aec1df
commit 92e000e0d5
  1. 7
      src/views/Auth/Profile/Document/index.js
  2. 5
      src/views/Auth/Profile/Document/index.scss
  3. 2
      src/views/Auth/Profile/Upload/index.js
  4. 200
      src/views/Auth/Profile/index.js

@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import './index.scss';
export default function Document({ defaultValue, name, onChange }) { export default function Document({ value, name, onChange }) {
return ( return (
<div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3"> <div className="mobile-auth-profile__document flex justify-center items-center mb-3">
{defaultValue.docFileIds === "" ? ( {!value?.docFileIds ? (
<> <>
<input <input
type="file" type="file"

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: 50px; height: 50px;
border-radius: 10px; border-radius: 10px;
border: 2px dashed $gray1; border: 2px dashed #aaa;
position: relative; position: relative;
input { input {
width: 100%; width: 100%;
@ -21,8 +21,7 @@
border-radius: 50%; border-radius: 50%;
} }
span { span {
color: #afafaf; color: #444;
font-family: numeralLight;
} }
} }
} }

@ -27,7 +27,7 @@ function Upload({ name, value: initValue, onChange }) {
value value
? value?.indexOf("data") > -1 ? value?.indexOf("data") > -1
? value ? value
: "https://iranesch.com/api/v1/file/" + value : "https://dnvn.ir/api/v1/file/" + value
: camera : camera
} }
alt="" alt=""

@ -5,10 +5,10 @@ import { user, file, publicApi } from "../../../redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import moment from "jalali-moment"; import moment from "jalali-moment";
//components
import Select from "../../../components/Select"; import Select from "../../../components/Select";
import Input from "../../../components/Input"; import Input from "../../../components/Input";
import TextArea from "../../../components/Textarea"; import TextArea from "../../../components/Textarea";
import Button from "../../../components/Button";
import Upload from "./Upload"; import Upload from "./Upload";
import Gender from "./GenderSwitch"; import Gender from "./GenderSwitch";
import Birthdate from "./Birthdate"; import Birthdate from "./Birthdate";
@ -40,47 +40,43 @@ function Profile({
const momentDate = moment(profile?.birthDate); const momentDate = moment(profile?.birthDate);
const isValid = momentDate.isValid(); const isValid = momentDate.isValid();
setFormData({ setFormData({
file: uploads["file"] || profile.picFileId, // file: uploads["file"] || profile.picFileId,
picFileId: uploads["file"] || profile.picFileId, picFileId: uploads["file"] || profile?.picFileId,
docFileIds: uploads["docFileIds"] || profile.docFileIds, docFileIds: uploads["docFileIds"] || profile?.docFileIds,
firstName: profile.firstName, firstName: profile?.firstName,
lastName: profile.lastName, lastName: profile?.lastName,
password: profile.password, password: profile?.password,
username: profile.username, username: profile?.username,
address: profile.address, address: profile?.address,
email: profile.email, email: profile?.email,
birthDate: { birthDate: {
day: isValid ? moment(profile?.birthDate).format("jDD") : null, day: isValid ? moment(profile?.birthDate).format("jDD") : null,
month: isValid ? moment(profile?.birthDate).format("jMM") : null, month: isValid ? moment(profile?.birthDate).format("jMM") : null,
year: isValid ? moment(profile?.birthDate).format("jYYYY") : null, year: isValid ? moment(profile?.birthDate).format("jYYYY") : null,
}, },
gender: profile.gender || 1, gender: profile?.gender || 1,
status: profile.status || 1, status: profile?.status || 1,
nationalId: profile.nationalId || "", nationalId: profile?.nationalId || "",
phone: profile.phone || "", phone: profile?.phone || "",
schools: profile.schools || null, cellphone: profile?.cellphone || "",
zoneId: profile.zoneId || "", schools: profile?.schools || null,
schoolId: profile.schoolId || "", zoneId: profile?.zoneId || "",
postalCode: profile.postalCode || "", schoolId: profile?.schoolId || "",
gradeIds: profile.gradeIds || [], postalCode: profile?.postalCode || "",
provinceId: profile.provinceId || null, gradeIds: profile?.gradeIds || [],
cityId: profile.cityId || null, provinceId: profile?.provinceId || null,
cityId: profile?.cityId || null,
}); });
} }
}, [user]); }, [user]);
useEffect(() => { useEffect(() => {
if(isMobile){
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}
getProvince(); getProvince();
getCity({ provinceId: profile.provinceId });
}, []); }, []);
useEffect(() => {
if (setDone) {
navigate("/");
}
}, [setDone]);
const grades = [ const grades = [
{ {
name: window.t("پیش دبستانی"), name: window.t("پیش دبستانی"),
@ -136,77 +132,41 @@ function Profile({
}, },
]; ];
const onChange = (name, value) => { const onSubmit = React.useCallback(async () => {
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 = { const data = {
firstName: firstName || profile.firstName, firstName: formData?.firstName,
lastName: lastName || profile.lastName, lastName: formData?.lastName,
username: username || profile.username, username: formData?.username,
cellphone: profile.cellphone, cellphone: formData?.cellphone,
password: password || profile.password, password: formData?.password,
postalCode: postalCode || profile.postalCode, postalCode: formData?.postalCode,
address: address || profile.address, address: formData?.address,
email: email || profile.email, email: formData?.email,
phone: phone || profile.phone, phone: formData?.phone,
nationalId: nationalId || profile.nationalId, cellphone: formData?.cellphone,
picFileId: uploads["file"] || picFileId || profile.picFileId, nationalId: formData?.nationalId,
gender: gender || profile.gender, picFileId: uploads["picFileId"] || formData?.picFileId,
birthDate: birthDate || profile.birthDate, birthDate: moment
schools: schools || profile.schools, .from(
gradeIds: gradeIds || profile.gradeIds, `${formData?.birthDate?.year}/${formData?.birthDate?.month}/${formData?.birthDate?.day}`,
status: status || profile.status, "fa",
provinceId: provinceId || profile.provinceId, "YYYY/MM/DD"
cityId: cityId || profile.cityId, )
docFileIds: uploads["docFileIds"] || docFileIds || profile.docFileIds, .locale("en"),
}; gender: formData?.gender,
await setProfile(data); schools: formData?.schools,
gradeIds: formData?.gradeIds,
status: formData?.status,
provinceId: formData?.provinceId,
cityId: formData?.cityId,
docFileIds: uploads["docFileIds"] || formData?.docFileIds,
}; };
// if (setDone) return <Navigate path="/" />; await setProfile(data);
}, [formData, uploads]);
return isMobile ? ( return isMobile ? (
<div className="flex flex-col gap-6 lg:hidden px-4 pb-20"> <div className="lg:hidden flex flex-col gap-6 px-4 pb-20">
<header className="flex flex-col gap-2 w-full"> <header className="flex flex-col gap-2 w-full">
<h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1> <h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1>
<p className="text-sm text-gray1"> <p className="text-sm text-gray1">
@ -218,9 +178,14 @@ function Profile({
onSubmit={(e) => e.preventDefault()} onSubmit={(e) => e.preventDefault()}
> >
<Upload <Upload
name="file" name="picFileId"
value={formData?.file} value={String(
onChange={onChange} uploads["picFileId"] || uploadId || formData?.picFileId
)}
onChange={(name, value) => {
upload({ file: value, target: name });
setFormData({ ...formData, [name]: value });
}}
label={window.t("فایل")} label={window.t("فایل")}
/> />
<Input <Input
@ -293,11 +258,17 @@ function Profile({
regex={(val) => onInput.englishAndNumberWithoutSpace(val)} regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/> />
<Gender <Gender
options={[window.t("معلم"), window.t("دانش آموز")]} options={[window.t("دانش آموز"), window.t("معلم")]}
name="status" name="status"
label={window.t("عنوان")} label={window.t("عنوان")}
selectedOption={formData?.status} selectedOption={formData?.status}
onChange={onChange} onChange={(name, value) => {
setFormData({
...formData,
gradeIds: formData?.gradeIds?.slice(0, 1) || [],
[name]: value,
});
}}
/> />
{formData?.status === 1 ? ( {formData?.status === 1 ? (
<Select <Select
@ -348,9 +319,10 @@ function Profile({
name="provinceId" name="provinceId"
label={window.t("استان")} label={window.t("استان")}
selectedOptions={formData?.provinceId} selectedOptions={formData?.provinceId}
onChange={(name, value) => onChange={(name, value) => {
setFormData({ ...formData, [name]: value }) setFormData({ ...formData, cityId: null, [name]: value });
} getCity({ provinceId: provinceList.find((province) => province.name === value)?.id });
}}
/> />
<Select <Select
options={cityList} options={cityList}
@ -378,23 +350,28 @@ function Profile({
label={window.t("محل تدریس")} label={window.t("محل تدریس")}
defaultValue={formData} defaultValue={formData}
regex={(val) => onInput.persianOnly(val)} regex={(val) => onInput.persianOnly(val)}
onChange={onChange} onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/> />
) : null} ) : null}
{formData?.status == 2 ? ( {formData?.status == 2 ? (
<Document <Document
onChange={(name, value) => onChange={(name, value) => {
setFormData({ ...formData, [name]: value }) upload({ file: value, target: name });
} setFormData({ ...formData, [name]: value });
value={formData?.docFileIds} }}
value={String(uploads["docFileIds"] || formData?.docFileIds)}
name="docFileIds" name="docFileIds"
/> />
) : null} ) : null}
<Input <Input
name="postalCode" name="postalCode"
placeholder={window.t("کد پستی")} label={window.t("کد پستی")}
align="left" align="left"
onChange={onChange} onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
maxLength={10} maxLength={10}
inputMode="numeric" inputMode="numeric"
value={formData?.postalCode} value={formData?.postalCode}
@ -418,16 +395,15 @@ function Profile({
</div> </div>
) : ( ) : (
<div <div
className="flex flex-col items-center gap-5 w-full pt-5 select-none" className="hidden lg:flex flex-col items-center gap-5 w-full pt-5 select-none"
onSubmit={(e) => onSubmit()} onSubmit={(e) => onSubmit()}
> >
<Upload <Upload
name="file" name="file"
value={String(uploadId || formData?.picFileId)} value={String(uploadId || formData?.picFileId)}
onChange={onChange} onChange={(name, value) => setFormData({ ...formData, [name]: value })}
label="فایل" label="فایل"
/> />
<br />
<div <div
className={`w-full gap-5 lg:flex lg:flex-row lg:my-2 lg:items-center flex flex-col`} className={`w-full gap-5 lg:flex lg:flex-row lg:my-2 lg:items-center flex flex-col`}
> >

Loading…
Cancel
Save