before change register submit function

main
alireza khaji 3 years ago
parent 64300df701
commit f6f7c59b01
  1. 111
      src/components/fileInput/index.js
  2. 89
      src/view/LoginSignUp/SignUpBox.js
  3. 169
      src/view/register/index.js
  4. 8
      src/view/services/index.js

@ -1,14 +1,15 @@
import React from "react";
import { useState, useEffect } from "react";
import loadingGiff from "../../assets/img/Rolling-2s-223px.gif";
const FileInput = ({
title,
id,
mobile,
onChange,
file,
deleteHandler
deleteHandler,
loading
}) => {
const [focus, setFocus] = useState('border-gray-300 border-dotted');
@ -50,47 +51,107 @@ const FileInput = ({
// }
// }, [mobile])
return (
<div className={mobile ? "w-full" : `max-w-48 min-w-40 w-52`} onDrop={overrideEventDefaults}
<div
className={mobile ? "w-full" : `max-w-48 min-w-40 w-52`}
onDrop={overrideEventDefaults}
onDragEnter={overrideEventDefaults}
onDragLeave={overrideEventDefaults}
onDragOver={overrideEventDefaults}>
<input type='file' className="hidden" id={`file` + id} accept="image/*" onFocus={() => setFocus('border-red52')} onChange={e => { onChange(e.target.files[0]); setFocus('border-red52 border-solid') }} />
onDragOver={overrideEventDefaults}
>
<input
type="file"
className="hidden"
id={`file` + id}
accept="image/*"
onFocus={() => setFocus("border-red52")}
onChange={(e) => {
onChange(e.target.files[0]);
setFocus("border-red52 border-solid");
}}
/>
<label
onDrop={handleDragAndDropFiles}
onDragEnter={overrideEventDefaults}
onDragLeave={overrideEventDefaults}
onDragOver={overrideEventDefaults}
for={"file" + id}
className={`flex flex-col w-full max-w-52 text-center justify-center items-center py-6 border-2 ${focus} rounded-lg p-4 cursor-pointer`} style={{ maxHeight: '200px' }}>
{imageUrl == null ?
className={`flex flex-col w-full max-w-52 text-center justify-center items-center py-6 border-2 ${focus} rounded-lg p-4 cursor-pointer`}
style={{ maxHeight: "200px" }}
>
{imageUrl == null ? (
<>
<div>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44001 10.9 3.20001L12.4 5.20001C12.78 5.70001 13 6 14 6H17C21 6 22 7 22 11V13" stroke="rgba(110,132,159,0.3)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.7601 18.32C11.4101 18.49 11.4101 21.89 13.7601 22.06H19.3201C19.9901 22.06 20.6501 21.81 21.1401 21.36C22.7901 19.92 21.91 17.04 19.74 16.77C18.96 12.08 12.1801 13.86 13.7801 18.33" stroke="rgba(110,132,159,0.3)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44001 10.9 3.20001L12.4 5.20001C12.78 5.70001 13 6 14 6H17C21 6 22 7 22 11V13"
stroke="rgba(110,132,159,0.3)"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.7601 18.32C11.4101 18.49 11.4101 21.89 13.7601 22.06H19.3201C19.9901 22.06 20.6501 21.81 21.1401 21.36C22.7901 19.92 21.91 17.04 19.74 16.77C18.96 12.08 12.1801 13.86 13.7801 18.33"
stroke="rgba(110,132,159,0.3)"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<h1 className=" text-ellipsis w-full font-bold text-gray-400" style={{fontSize: '80%'}}>{title}</h1>
<p className="text-sm leading-7 text-gray-400" style={{fontSize: '70%'}}>فایل خود را بکشید و اینجا رها کنید</p>
<p className="bg-gray-200 p-2 rounded text-sm mt-1 text-gray-500">انتخاب فایل</p>
<h1
className=" text-ellipsis w-full font-bold text-gray-400"
style={{ fontSize: "80%" }}
>
{title}
</h1>
<p
className="text-sm leading-7 text-gray-400"
style={{ fontSize: "70%" }}
>
فایل خود را بکشید و اینجا رها کنید
</p>
<p className="bg-gray-200 p-2 rounded text-sm mt-1 text-gray-500">
انتخاب فایل
</p>
</>
:
) : (
<>
<div className="h-40 flex flex-col justify-center items-center w-full" >
<img src={imageUrl} className="rounded-lg max-w-full max-h-32" />
<div className="h-40 flex flex-col justify-center items-center w-full relative">
<img
src={imageUrl}
className="rounded-lg max-w-full max-h-32"
style={loading ? { opacity: "0.5" } : null}
/>
{loading && (
<div className="w-full h-full flex items-center justify-center absolute top-0 left-0">
<img
src={loadingGiff}
alt="loadingGiff"
className="h-1/3"
/>
</div>
)}
</div>
</>
}
)}
</label>
{del && <div className=" top-0 mt-2 cursor-pointer relative bg-red-500 w-full h-12 flex items-center justify-center text-white rounded-lg" onClick={() => deleteHandler(null)}>
{del && (
<div
className=" top-0 mt-2 cursor-pointer relative bg-red-500 w-full h-12 flex items-center justify-center text-white rounded-lg"
onClick={() => deleteHandler(null)}
>
حذف
</div>}
</div>
)
)}
</div>
);
}
export default FileInput;

@ -9,10 +9,16 @@ const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
const [data, setData] = useState(null);
const submitHandler = () => {
let input = document.querySelectorAll("input");
let select = document.querySelectorAll("select");
let firstName = input[0].value;
let lastName = input[1].value;
let nationalId = input[2].value;
let cellphone = input[3].value;
let gender = select[0].value;
let grade = select[1].value;
console.log("gender:");
console.log(select)
console.log(gender);
if (firstName.length < 1) {
toast.error("لطفاً نام دانشاموز را وارد کنید");
} else if (lastName.length < 1) {
@ -21,12 +27,18 @@ const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
toast.error("لطفاً کد ملی دانشاموز را وارد کنید");
} else if (cellphone.length < 11) {
toast.error("لطفاً شماره موبایل را به درستی وارد کنید");
} else if (isNaN(gender)) {
toast.error("لطفا جنسیت را مشخص کنید");
} else if (isNaN(grade)) {
toast.error("لطفا پایه تحصیلی را مشخص کنید");
} else {
setData({
firstName,
lastName,
nationalId,
cellphone,
gender,
gradeIds: grade,
});
sendOtp({ cellphone });
setStep(1);
@ -66,21 +78,43 @@ const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
//otpLoginHandler--------------
const otpLoginHandler = () => {
let codeInput = document.querySelectorAll(".codeInput");
let code = codeInput[0].value + codeInput[1].value + codeInput[2].value + codeInput[3].value;
let code =
codeInput[0].value +
codeInput[1].value +
codeInput[2].value +
codeInput[3].value;
if (code.length < 4) {
toast.error("لطفا کد را به صورت کامل وارد کنید")
toast.error("لطفا کد را به صورت کامل وارد کنید");
} else {
otpLogin({
cellphone: data.cellphone,
firstName: data.firstName,
lastName: data.lastName,
nationalId: data.nationalId,
gender : data.gender,
gradeIds : data.gradeIds,
otp: code,
userToken: "1",
applicationToken: "1",
});
}
}
};
//gradeList--------------------
let gradeList = [
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
'هشتم',
"نهم",
"دهم",
"یازدهم",
"دوازدهم"
]
return (
<div className="SignUpBox w-full h-full flex flex-col items-center justify-center bg-white absolute top-0 left-0 rounded-lg ">
{/* ---------back-btn-------------- */}
@ -104,8 +138,39 @@ const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
<div className="w-[85%]">
<Input label="نام دانشآموز" index={0} />
<Input label="نام خانوادگی دانشآموز" index={1} />
<Input label="کد ملی دانشآموز" index={2} maxLength={10} />
<Input label="شماره موبایل" index={3} maxLength={11} />
<Input
label="کد ملی دانشآموز"
index={2}
maxLength={10}
example="0020112220"
/>
<Input
label="شماره موبایل"
index={3}
maxLength={11}
example="09123456789"
/>
<div className="w-full h-[40px] flex flex-row-reverse items-center justify-between mb-2">
<select
name="gender"
id="select-gender"
className="w-[47%] h-full px-1 py-0 rounded-lg border border-[#ECECEC] outline-0 text-[#999]"
>
<option value="null">جنسیت</option>
<option value={1}>آقا</option>
<option value={2}>خانم</option>
</select>
<select
name="grade"
id="select-grade"
className="w-[47%] h-full px-1 py-0 rounded-lg border border-[#ECECEC] outline-0 text-[#999]"
>
<option value="null">پایه تحصیلی</option>
{gradeList.map((item, index) => (
<option key={index} value={index+1}>{item}</option>
))}
</select>
</div>
</div>
)}
{/* -------SendCodeText----------- */}
@ -149,7 +214,7 @@ const SignUpBox = ({ setSignUp, sendOtp,otpLogin }) => {
{/* -----btn--- */}
{step === 0 && (
<div
className="w-[85%] h-[50px] rounded-lg bg-[#DF1452] flex items-center justify-center text-lg text-white mt-5 cursor-pointer"
className="w-[85%] h-[50px] rounded-lg bg-[#DF1452] flex items-center justify-center text-lg text-white mt-1 cursor-pointer"
onClick={submitHandler}
>
ثبت اطلاعات و دریافت کد
@ -180,7 +245,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(SignUpBox);
//----------------------------------
const Input = ({ label, index, maxLength }) => {
const Input = ({ label, index, maxLength,example }) => {
const onFocushandler = (i) => {
let box = document.querySelectorAll(".Input");
let label = document.querySelectorAll(".Input-label");
@ -209,7 +274,10 @@ const Input = ({ label, index, maxLength }) => {
}
};
return (
<div className="Input w-full h-[40px] res1_2:h-[50px] relative border border-[#ECECEC] rounded-lg mt-5 flex items-center box-border">
<div
className="Input w-full h-[40px] res1_2:h-[50px] relative border border-[#ECECEC] rounded-lg mt-5 flex items-center box-border"
style={example ? { marginBottom: "30px" } : null}
>
<div
className="line h-[2px] absolute top-[-1.5px] rigth-[5%] bg-white right-[20px] hidden"
style={{ width: `${label.length * 6}px` }}
@ -224,6 +292,11 @@ const Input = ({ label, index, maxLength }) => {
<div className="Input-label text-[#8A8A8A] absolute right-[10px] pointer-events-none transition-all duration-300 ease-out">
{label}
</div>
{example && (
<div className="w-full text-sm text-right text-[#999] absolute -bottom-6">
مثال:{example}
</div>
)}
</div>
);
};

@ -27,6 +27,7 @@ import { ApiConfig } from "../../constants/defaultValues";
import { toast } from "react-toastify";
import moment from "jalali-moment";
import loadingGiff from "../../assets/img/Rolling-2s-223px.gif";
import { upload } from "@testing-library/user-event/dist/upload";
const Register = ({
activeLogin,
@ -40,7 +41,10 @@ const Register = ({
getUserInfo,
loading,
getRulse,
termInfo
termInfo,
uploadLoading,
uploadImg,
lastUploadId,
}) => {
const [steps, setSteps] = useState(0);
console.log("user:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
@ -55,8 +59,9 @@ const Register = ({
getRulse({ id: localStorage.getItem("termId") });
}, []);
console.log("termInfo:^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
console.log(
"termInfo:^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^"
);
console.log(termInfo);
useEffect(() => {
if (user?.firstName !== null) {
@ -385,26 +390,34 @@ const Register = ({
const [selectedState, setSelectedState] = useState(null);
const [selectedCity, setSelectedCity] = useState(null);
const [uploadImgNumber, setUploadImgNumber] = useState(0);
const uploadImghandler1 = (e) => {
uploadImg({
file: e,
});
setUploadImgNumber(1);
setFiles({ ...files, personalPic: e });
};
const uploadImghandler2 = (e) => {
setFiles({ ...files, shenasNameh: e });
console.log("fffffff:")
console.log(e);
uploadImg({
file: e,
});
setUploadImgNumber(2);
};
useEffect(() => {
if (uploadImgNumber === 1) {
setUserInfo({ ...userInfo, personalPicFileId: lastUploadId });
} else if (uploadImgNumber === 2) {
setUserInfo({ ...userInfo, shenasnamehFileId: lastUploadId });
}
}, [uploadImgNumber]);
const firstStepSubmit = () => {
// if (
// userInfo.firstName &&
// userInfo.lastName &&
// userInfo.birthDate &&
// userInfo.gradeIds &&
// userInfo.nationalId &&
// userInfo.gender &&
// // userInfo.previousSchoolName &&
// // userInfo.previousSchoolType &&
// // userInfo.zone &&
// files.personalPic &&
// files.shenasNameh
// ) {
// setSteps(1);
// setActiveStep([true, true, false, false]);
// setError("");
// } else {
// toast.warning("لطفا تمامی فیلد ها را پر کنید");
// }
if (!userInfo.firstName && !userInfo.lastName) {
toast.warning("لطفا نام و نام خانوادگی خود را وارد کنید");
} else if (!userInfo.birthDate) {
@ -415,7 +428,7 @@ const Register = ({
toast.warning("لطفا کد ملی خود را وارد کنید");
} else if (!userInfo.gender) {
toast.warning("لطفا جنسیت خود را مشخص کنید");
} else if ((!files.personalPic && !files.shenasNameh)) {
} else if (!files.personalPic && !files.shenasNameh) {
toast.warning("لطفا عکس شناسنامه و عکس پرسنلی خود را وارد کنید");
} else {
setSteps(1);
@ -612,10 +625,12 @@ const Register = ({
title="بارگزاری صفحه اول شناسنامه"
id={1}
file={files.shenasNameh}
onChange={(e) => setFiles({ ...files, shenasNameh: e })}
onChange={(e) => uploadImghandler2(e)}
// onChange={(e) => setFiles({ ...files, shenasNameh: e })}
deleteHandler={(e) =>
setFiles({ ...files, shenasNameh: e })
}
loading={uploadLoading}
/>
</div>
@ -623,10 +638,12 @@ const Register = ({
title="بارگزاری عکس پرسنلی"
id={2}
file={files.personalPic}
onChange={(e) => setFiles({ ...files, personalPic: e })}
// onChange={(e) => setFiles({ ...files, personalPic: e })}
onChange={(e) => uploadImghandler1(e)}
deleteHandler={(e) =>
setFiles({ ...files, personalPic: e })
}
loading={uploadLoading}
/>
</div>
</div>
@ -1139,82 +1156,23 @@ const Register = ({
</div>
<div className="w-40">
{/* <Button
borderType="rounded"
title="مرحله بعد"
<div
className="w-full h-12 mt-4 rounded-lg bg-red52 flex items-center justify-center text-white cursor-pointer"
onClick={() => {
// const inputs = document.querySelectorAll('.Login-box-form-item-input')
// if (
// userInfo?.motherInfo.cellphone &&
// userInfo?.motherInfo.education &&
// userInfo?.motherInfo.firstName &&
// userInfo?.motherInfo.job &&
// userInfo?.motherInfo.lastName &&
// userInfo?.motherInfo.nationalId &&
// userInfo?.motherInfo.workPhone &&
// userInfo?.motherInfo.workPlace &&
// userInfo?.fatherInfo.cellphone &&
// userInfo?.fatherInfo.education &&
// userInfo?.fatherInfo.firstName &&
// userInfo?.fatherInfo.job &&
// userInfo?.fatherInfo.lastName &&
// userInfo?.fatherInfo.nationalId &&
// userInfo?.fatherInfo.workPhone &&
// userInfo?.fatherInfo.workPlace &&
// userInfo?.familyMemberCount &&
// userInfo?.address &&
// userInfo?.phone
// ) {
// setSteps(2);
// setActiveStep([true, true, true, false]);
// } else {
// toast.warning("لطفا تمامی فیلد ها را پر کنید");
// }
// alert("joooo");
if (
!userInfo?.motherInfo.cellphone &&
!userInfo?.motherInfo.education &&
!userInfo?.motherInfo.firstName &&
!userInfo?.motherInfo.job &&
!userInfo?.motherInfo.lastName &&
!userInfo?.motherInfo.nationalId &&
!userInfo?.motherInfo.workPhone &&
!userInfo?.motherInfo.workPlace
) {
toast.warning(
"لطفااطلاعات مادر را به صورت کامل وارد کنید"
);
} else if (
!userInfo?.fatherInfo.cellphone &&
!userInfo?.fatherInfo.education &&
!userInfo?.fatherInfo.firstName &&
!userInfo?.fatherInfo.job &&
!userInfo?.fatherInfo.lastName &&
!userInfo?.fatherInfo.nationalId &&
!userInfo?.fatherInfo.workPhone &&
!userInfo?.fatherInfo.workPlace
!userInfo?.fatherInfo?.cellphone &&
!userInfo?.fatherInfo?.education &&
!userInfo?.fatherInfo?.firstName &&
!userInfo?.fatherInfo?.job &&
!userInfo?.fatherInfo?.lastName &&
!userInfo?.fatherInfo?.nationalId &&
!userInfo?.fatherInfo?.workPhone &&
!userInfo?.fatherInfo?.workPlace
) {
toast.warning(
"لطفااطلاعات پدر را به صورت کامل وارد کنید"
);
} else if (!userInfo?.familyMemberCount) {
toast.warning(
"لطفا تعداد اعضای خانواده را وارد کنید"
);
} else if (!userInfo?.address && !userInfo?.phone) {
toast.warning("لطفاآدرس و تلفن خود را وارد کنید");
} else {
setSteps(2);
setActiveStep([true, true, true, false]);
}
}}
/> */}
<div
className="w-full h-12 mt-4 rounded-lg bg-red52 flex items-center justify-center text-white cursor-pointer"
onClick={() => {
if (
} else if (
!userInfo?.motherInfo?.cellphone &&
!userInfo?.motherInfo?.education &&
!userInfo?.motherInfo?.firstName &&
@ -1227,19 +1185,6 @@ const Register = ({
toast.warning(
"لطفااطلاعات مادر را به صورت کامل وارد کنید"
);
} else if (
!userInfo?.fatherInfo?.cellphone &&
!userInfo?.fatherInfo?.education &&
!userInfo?.fatherInfo?.firstName &&
!userInfo?.fatherInfo?.job &&
!userInfo?.fatherInfo?.lastName &&
!userInfo?.fatherInfo?.nationalId &&
!userInfo?.fatherInfo?.workPhone &&
!userInfo?.fatherInfo?.workPlace
) {
toast.warning(
"لطفااطلاعات پدر را به صورت کامل وارد کنید"
);
} else if (!userInfo?.familyMemberCount) {
toast.warning(
"لطفا تعداد اعضای خانواده را وارد کنید"
@ -1486,15 +1431,17 @@ const mapStateToProps = (state) => ({
city: state.publicApi.city,
user: state.user.status,
// loading: state.user.loading,
loading: state.file.loading,
termInfo:state.term.info
uploadLoading: state.file.loading,
termInfo: state.term.info,
lastUploadId : state.file.lastUpload
});
const mapDispatchToProps = {
setProfile: user.setProfile,
getProvince: publicApi.getProvince,
getCity: publicApi.getCity,
getUserInfo: user.info,
getRulse: term.info
getRulse: term.info,
uploadImg : file.upload
};
export default connect(mapStateToProps, mapDispatchToProps)(Register);

@ -274,7 +274,7 @@ const Services = ({
<BsFillCheckCircleFill />
</div>
</div>
<div className="flex items-center ">
{/* <div className="flex items-center ">
<div
className="w-20 h-10 rounded-lg border border-gray-300 text-sm text-gray-300 flex items-center justify-center ml-2 cursor-pointer gap-x-1"
style={
@ -299,7 +299,7 @@ const Services = ({
<div>دخترانه</div>
<BsFillCheckCircleFill />
</div>
</div>
</div> */}
</div>
)}
@ -310,7 +310,9 @@ const Services = ({
<React.Fragment key={index}>
{(gameId !== 3 ||
(!fliterList.includes(product?.productType - 1) &&
!fliterList.includes(product?.gender))) && (
(product?.gender === userInfo?.gender ||
product?.gender=== null) &&
product?.gradeIds === Number(userInfo?.gradeIds))) && (
<div
// to={"/class/" + product?.id}
className="w-[30%]"

Loading…
Cancel
Save