Forms Update UserInfo

main
Pedram Keshavarzi 3 years ago
parent 2d5fc3d7fb
commit 4dd9b8c08d
  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

@ -2,7 +2,7 @@
<html lang="en">
<head>
<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="theme-color" content="#000000" />
<meta
@ -24,7 +24,7 @@
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`.
-->
<title>React App</title>
<title>اندیشمند</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

@ -8,7 +8,8 @@ const Button = (
borderType,
to,
type,
className
className,
submit
}
) => {
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`}
onClick={onClick}
>
{title}
{submit ? <input type="submit" value={title}/> :
title}
</Link>
);
};

@ -8,7 +8,8 @@ const Input = ({
id,
type,
direction,
className
className,
onChange
}) => {
@ -44,11 +45,13 @@ const Input = ({
<input
type={type ? type : 'text'}
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"
style={{ direction: direction ? direction : "ltr" }}
onFocus={() => focusHandler(id ? id : 0)}
onBlur={() => blurHandler(id ? id : 0)}
onChange={onChange}
/>
</div>
)

@ -11,6 +11,7 @@ import Input from "../../components/input";
import FileInput from "../../components/fileInput";
import Button from "../../components/Button";
import Stepper from "../../components/Stepper";
import UserInfo from "../dashboard2/UserInfo";
const Register = ({ activeLogin }) => {
@ -19,6 +20,40 @@ const Register = ({ activeLogin }) => {
const [register, setRegister] = useState(false);
const timeoutRef = useRef(null);
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) => {
let inputs = document.querySelectorAll(".Login-box-form-item");
@ -120,14 +155,17 @@ const Register = ({ activeLogin }) => {
]
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">
{/* form */}
{console.log(userInfo)}
<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" /> */}
<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>
@ -170,7 +208,7 @@ const Register = ({ activeLogin }) => {
<div className="w-4/5 mx-10 flex flex-col items-start text-right b">
{
steps == 0 &&
<>
<form>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
<div className="mb-4">
<h1 className="font-black">مشخصات هویتی دانش آموز</h1>
@ -179,7 +217,7 @@ const Register = ({ activeLogin }) => {
<div className="flex">
<div className="flex w-2/5 ">
<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' />
</div>
<div className="mr-2">
@ -189,10 +227,10 @@ const Register = ({ activeLogin }) => {
</div>
<div className="w-3/5 flex justify-center">
<div className="w-2/5 mx-4">
<FileInput title="بارگزای صفحه اول شناسنامه" id={1} />
<FileInput title="بارگزاری صفحه اول شناسنامه" id={1} />
</div>
<div className="w-2/5 mx-4">
<FileInput title="بارگزای صفحه اول شناسنامه" id={2} />
<FileInput title="بارگزاری عکس پرسنلی" id={2} />
</div>
</div>
@ -222,26 +260,43 @@ const Register = ({ activeLogin }) => {
<option key={`Grade__${item.id}`}>{item.title}</option>
))}
</select>
<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="8" direction='rtl' id={5} />
<Input title="منطقه" borderType="rounded" gapSize="12" id={6} type='number' />
</div>
<div className="flex pt-10 justify-end">
<div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(1)
setActiveStep([true, true, false, false])
const inputs = document.querySelectorAll('.Login-box-form-item-input')
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>
</>
</form>
}
{
steps == 1 &&
<>
<form>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
<div className="mb-4">
<h1 className="font-black">مشخصات هویتی پدر</h1>
@ -250,7 +305,7 @@ const Register = ({ activeLogin }) => {
<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' />
@ -281,8 +336,8 @@ const Register = ({ activeLogin }) => {
<div className="w-full px-10 py-6 border-b border-solid border-gray-200">
<div className="mb-4">
<h1 className="font-black">مشخصات هویتی پدر</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
<h1 className="font-black">مشخصات هویتی مادر</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی مادر را وارد کنید</p>
</div>
<div className="flex">
@ -335,8 +390,8 @@ const Register = ({ activeLogin }) => {
<div className="flex justify-start items-center">
<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={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={19} className="w-1/2" />
</div>
@ -351,15 +406,54 @@ const Register = ({ activeLogin }) => {
<div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(2);
setActiveStep([true, true, true, false])
const inputs = document.querySelectorAll('.Login-box-form-item-input')
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>
</>
</form>
}
{
@ -391,11 +485,11 @@ const Register = ({ activeLogin }) => {
<input type="checkbox" className="w-6 h-6" />
<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>
</div>

Loading…
Cancel
Save