pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Forms Update UserInfo

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 2d5fc3d7fb
commit 4dd9b8c08d
5 changed files with 128 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      public/index.html
  2. BIN
      public/logo.ico
  3. 6
      src/components/Button/index.js
  4. 7
      src/components/input/index.js
  5. 140
      src/view/register/index.js

4
public/index.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/logo.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>اندیشمند</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

6
src/components/Button/index.js
Unescape View File

@ -8,7 +8,8 @@ const Button = (
borderType, borderType,
to, to,
type, type,
className className,
submit
} }
) => { ) => {
return ( return (
@ -17,7 +18,8 @@ const Button = (
className={`${className} Login-box-form-btn w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-solid border-red52 ${type == 'outlined' ? 'text-red52' : 'text-white bg-red52'} flex items-center justify-center mt-4`} className={`${className} Login-box-form-btn w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-solid border-red52 ${type == 'outlined' ? 'text-red52' : 'text-white bg-red52'} flex items-center justify-center mt-4`}
onClick={onClick} onClick={onClick}
> >
{title} {submit ? <input type="submit" value={title}/> :
title}
</Link> </Link>
); );
}; };

7
src/components/input/index.js
Unescape View File

@ -8,7 +8,8 @@ const Input = ({
id, id,
type, type,
direction, direction,
className className,
onChange
}) => { }) => {
@ -44,11 +45,13 @@ const Input = ({
<input <input
type={type ? type : 'text'} type={type ? type : 'text'}
name="Login-box-form-item-input-name" name="Login-box-form-item-input-name"
id="Login-box-form-item-input-name" id={`Login-box-form-item-input-name${id}`}
className="Login-box-form-item-input w-full h-full bg-transparent px-4 outline-0 rounded text-red52" className="Login-box-form-item-input w-full h-full bg-transparent px-4 outline-0 rounded text-red52"
style={{ direction: direction ? direction : "ltr" }} style={{ direction: direction ? direction : "ltr" }}
onFocus={() => focusHandler(id ? id : 0)} onFocus={() => focusHandler(id ? id : 0)}
onBlur={() => blurHandler(id ? id : 0)} onBlur={() => blurHandler(id ? id : 0)}
onChange={onChange}
/> />
</div> </div>
) )

140
src/view/register/index.js
Unescape View File

@ -11,6 +11,7 @@ import Input from "../../components/input";
import FileInput from "../../components/fileInput"; import FileInput from "../../components/fileInput";
import Button from "../../components/Button"; import Button from "../../components/Button";
import Stepper from "../../components/Stepper"; import Stepper from "../../components/Stepper";
import UserInfo from "../dashboard2/UserInfo";
const Register = ({ activeLogin }) => { const Register = ({ activeLogin }) => {
@ -19,6 +20,40 @@ const Register = ({ activeLogin }) => {
const [register, setRegister] = useState(false); const [register, setRegister] = useState(false);
const timeoutRef = useRef(null); const timeoutRef = useRef(null);
const [activeStep, setActiveStep] = useState([true, false, false, false]); const [activeStep, setActiveStep] = useState([true, false, false, false]);
const [error, setError] = useState('');
const [userInfo, setUserInfo] = useState({
name: null,
familyName: null,
nationalId: null,
birthDate: null,
grade: null,
schoolName: null,
city: null,
state: null,
fatherName: null,
fatherNationalId: null,
fatherFamilyName: null,
fatherJob: null,
fatherMajor: null,
fatherPhoneNumber: null,
fatherJobAddress: null,
fatherJobPhoneNumber: null,
motherName: null,
motherNationalId: null,
motherFamilyName: null,
motherJob: null,
motherMajor: null,
motherPhoneNumber: null,
motherJobAddress: null,
motherJobPhoneNumber: null,
familyNumber: null,
address: null,
homePhoneNumber: null,
});
const focusHandler = (id) => { const focusHandler = (id) => {
let inputs = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item");
@ -120,14 +155,17 @@ const Register = ({ activeLogin }) => {
] ]
return ( return (
<div className="flex justify-center mb-4" style={{ direction: 'rtl', marginTop: '8.5%', marginRight:'6.5%',width:'93.5%', marginRight:'6.5%' }}> <div className="flex justify-center mb-4" style={{ direction: 'rtl', marginTop: '8.5%', marginRight: '6.5%', width: '93.5%', marginRight: '6.5%' }}>
<div className="w-11/12 flex"> <div className="w-11/12 flex">
{/* form */} {/* form */}
{console.log(userInfo)}
<div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6"> <div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6">
{/* <img src={logo} className="w-1/2 m-4 mt-0" /> */} {/* <img src={logo} className="w-1/2 m-4 mt-0" /> */}
<div className="flex flex-col items-center justify-start leading-normal"> <div className="flex flex-col items-center justify-start leading-normal">
<p className="w-full text-xl text-red26"> <p className="w-full text-xl text-red52 font-bold">
{/* سامانه ثبت نام مدارس موسسه علمی اندیشمند */} {/* سامانه ثبت نام مدارس موسسه علمی اندیشمند */}
تکمیل اطلاعات پروفایل تکمیل اطلاعات پروفایل
</p> </p>
@ -170,7 +208,7 @@ const Register = ({ activeLogin }) => {
<div className="w-4/5 mx-10 flex flex-col items-start text-right b"> <div className="w-4/5 mx-10 flex flex-col items-start text-right b">
{ {
steps == 0 && steps == 0 &&
<> <form>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی دانش آموز</h1> <h1 className="font-black">مشخصات هویتی دانش آموز</h1>
@ -179,7 +217,7 @@ const Register = ({ activeLogin }) => {
<div className="flex"> <div className="flex">
<div className="flex w-2/5 "> <div className="flex w-2/5 ">
<div className="ml-2"> <div className="ml-2">
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' /> <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
<Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' /> <Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' />
</div> </div>
<div className="mr-2"> <div className="mr-2">
@ -189,10 +227,10 @@ const Register = ({ activeLogin }) => {
</div> </div>
<div className="w-3/5 flex justify-center"> <div className="w-3/5 flex justify-center">
<div className="w-2/5 mx-4"> <div className="w-2/5 mx-4">
<FileInput title="بارگزای صفحه اول شناسنامه" id={1} /> <FileInput title="بارگزاری صفحه اول شناسنامه" id={1} />
</div> </div>
<div className="w-2/5 mx-4"> <div className="w-2/5 mx-4">
<FileInput title="بارگزای صفحه اول شناسنامه" id={2} /> <FileInput title="بارگزاری عکس پرسنلی" id={2} />
</div> </div>
</div> </div>
@ -222,26 +260,43 @@ const Register = ({ activeLogin }) => {
<option key={`Grade__${item.id}`}>{item.title}</option> <option key={`Grade__${item.id}`}>{item.title}</option>
))} ))}
</select> </select>
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={5} /> <Input title="شهر" borderType="rounded" gapSize="8" direction='rtl' id={5} />
<Input title="کدملی" borderType="rounded" gapSize="12" id={6} type='number' /> <Input title="منطقه" borderType="rounded" gapSize="12" id={6} type='number' />
</div> </div>
<div className="flex pt-10 justify-end"> <div className="flex pt-10 justify-end">
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => { <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(1) const inputs = document.querySelectorAll('.Login-box-form-item-input')
setActiveStep([true, true, false, false]) if (inputs[0].value && inputs[1].value && inputs[2].value && inputs[3].value && inputs[4].value && inputs[5].value && inputs[6].value) {
setSteps(1)
setActiveStep([true, true, false, false])
setError('')
} else {
alert('لطفا تمامی فیلد ها را پر کنید')
}
setUserInfo(prevState => {
return {
...prevState,
name: document.getElementById('Login-box-form-item-input-name0').value,
nationalId: document.getElementById('Login-box-form-item-input-name1').value,
familyName: document.getElementById('Login-box-form-item-input-name2').value,
birthDate: document.getElementById('Login-box-form-item-input-name3').value,
}
})
}} /> }} />
</div> </div>
</div> </div>
</div> </div>
</> </form>
} }
{ {
steps == 1 && steps == 1 &&
<> <form>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی پدر</h1> <h1 className="font-black">مشخصات هویتی پدر</h1>
@ -250,7 +305,7 @@ const Register = ({ activeLogin }) => {
<div className="flex"> <div className="flex">
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' /> <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
<Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' /> <Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' />
@ -281,8 +336,8 @@ const Register = ({ activeLogin }) => {
<div className="w-full px-10 py-6 border-b border-solid border-gray-200"> <div className="w-full px-10 py-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی پدر</h1> <h1 className="font-black">مشخصات هویتی مادر</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p> <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی مادر را وارد کنید</p>
</div> </div>
<div className="flex"> <div className="flex">
@ -335,8 +390,8 @@ const Register = ({ activeLogin }) => {
<div className="flex justify-start items-center"> <div className="flex justify-start items-center">
<div className="w-2/5 flex"> <div className="w-2/5 flex">
<Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} className="w-1/2" /> <Input title="تلفن ثابت" borderType="rounded" type='number' gapSize="40" direction='rtl' id={18} className="w-1/2" />
<Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} className="w-1/2" /> <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={19} className="w-1/2" />
</div> </div>
@ -351,15 +406,54 @@ const Register = ({ activeLogin }) => {
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => { <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(2); const inputs = document.querySelectorAll('.Login-box-form-item-input')
setActiveStep([true, true, true, false]) if (inputs[0].value) {
setSteps(2);
setActiveStep([true, true, true, false])
} else {
alert('لطفا تمامی فیلد ها را پر کنید')
}
setUserInfo(prevState => {
return {
...prevState,
fatherName: document.getElementById('Login-box-form-item-input-name0').value,
fatherNationalId: document.getElementById('Login-box-form-item-input-name1').value,
fatherFamilyName: document.getElementById('Login-box-form-item-input-name2').value,
fatherMajor: document.getElementById('Login-box-form-item-input-name3').value,
fatherPhoneNumber: document.getElementById('Login-box-form-item-input-name4').value,
fatherJob: document.getElementById('Login-box-form-item-input-name5').value,
fatherJobAddress: document.getElementById('Login-box-form-item-input-name6').value,
fatherJobPhoneNumber: document.getElementById('Login-box-form-item-input-name7').value,
motherName: document.getElementById('Login-box-form-item-input-name8').value,
motherNationalId: document.getElementById('Login-box-form-item-input-name9').value,
motherFamilyName: document.getElementById('Login-box-form-item-input-name10').value,
motherMajor: document.getElementById('Login-box-form-item-input-name11').value,
motherPhoneNumber: document.getElementById('Login-box-form-item-input-name12').value,
motherJob: document.getElementById('Login-box-form-item-input-name13').value,
motherJobAddress: document.getElementById('Login-box-form-item-input-name14').value,
motherJobPhoneNumber: document.getElementById('Login-box-form-item-input-name15').value,
familyNumber: document.getElementById('Login-box-form-item-input-name16').value,
address: document.getElementById('Login-box-form-item-input-name17').value,
homePhoneNumber: document.getElementById('Login-box-form-item-input-name18').value,
}
})
}} /> }} />
</div> </div>
</div> </div>
</div> </div>
</> </form>
} }
{ {
@ -391,11 +485,11 @@ const Register = ({ activeLogin }) => {
<input type="checkbox" className="w-6 h-6" /> <input type="checkbox" className="w-6 h-6" />
<label className="mr-4 font-bold text-gray-500"> <label className="mr-4 font-bold text-gray-500">
اینجانبان اینجانبان
<span className="text-red52 font-bold"> اصغر تقی غلی خوان </span> <span className="text-red52 font-bold"> {userInfo.fatherName} {userInfo.fatherFamilyName} </span>
و و
<span className="text-red52 font-bold"> بتول کلاغ تپه زاده </span> <span className="text-red52 font-bold"> {userInfo.motherName} {userInfo.motherFamilyName} </span>
سرپرست های دانش آموز سرپرست های دانش آموز
<span className="text-red52 font-bold"> امیر سام تقی غلی خوان </span> <span className="text-red52 font-bold"> {userInfo.name} {userInfo.familyName} </span>
با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد
</label> </label>
</div> </div>

Write Preview
Loading…
Cancel
Save