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
Split 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">
<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>

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,
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>
);
};

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

@ -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>
)

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

@ -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>

Write Preview
Loading…
Cancel
Save