170 lines
9.6 KiB
JavaScript
170 lines
9.6 KiB
JavaScript
import React, {useContext, useState} from 'react';
|
|
import {Box, Input, SimpleGrid} from "@chakra-ui/react";
|
|
import {MDBBtn, MDBInputGroup, MDBInputGroupText} from "mdb-react-ui-kit";
|
|
import {FiUser} from "react-icons/fi";
|
|
import {useForm} from "react-hook-form";
|
|
import {HandleFormReq} from "../../../../lib/HandleFormReq";
|
|
|
|
const EducationalData = () => {
|
|
const {setPage, educationalData, setEducationalData} = useContext(HandleFormReq)
|
|
const [formValues, setFormValues] = useState(educationalData)
|
|
console.log('edd', educationalData)
|
|
let handleChange = (i, e) => {
|
|
let newFormValues = [...formValues];
|
|
newFormValues[i][e.target.name] = e.target.value;
|
|
setFormValues(newFormValues);
|
|
}
|
|
|
|
let addFormFields = () => {
|
|
setFormValues([...formValues, {
|
|
university: '',
|
|
field : '',
|
|
trend: '',
|
|
score: '',
|
|
dateField: '',
|
|
}])
|
|
}
|
|
|
|
let removeFormFields = (i) => {
|
|
let newFormValues = [...formValues];
|
|
newFormValues.splice(i, 1);
|
|
setFormValues(newFormValues)
|
|
}
|
|
|
|
let handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
console.log(formValues);
|
|
setEducationalData(formValues)
|
|
setPage(3)
|
|
}
|
|
return (
|
|
<div>
|
|
<form onSubmit={handleSubmit} id={'persondataform'}>
|
|
<SimpleGrid className={'mt-4'} dir={'rtl'} columns={[1, 1, 1]} spacing={3}>
|
|
{process.browser && formValues.map((element, index) => (
|
|
<>
|
|
<Box className={'d-lg-flex d-md-block justify-content-between'} key={index}>
|
|
<Box>
|
|
<div>
|
|
<MDBInputGroup className='mb-3'>
|
|
<div className={'flex align-items-center'}>
|
|
<MDBInputGroupText className={'rounded-0'}>
|
|
<FiUser />
|
|
</MDBInputGroupText>
|
|
<Input
|
|
required
|
|
id='university'
|
|
name="university"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.university || ""} className={'bk-med rounded-0'}
|
|
style={{ height: 40 }}
|
|
dir={'rtl'}
|
|
type='text'
|
|
placeholder="دانشگاه / موسسه "
|
|
/>
|
|
</div>
|
|
</MDBInputGroup>
|
|
</div>
|
|
</Box>
|
|
<Box>
|
|
<div>
|
|
<MDBInputGroup className='mb-3 flex'>
|
|
<div className={'flex align-items-center'}>
|
|
<MDBInputGroupText className={'rounded-0'}>
|
|
<FiUser />
|
|
</MDBInputGroupText>
|
|
<Input
|
|
id='field'
|
|
name="field"
|
|
required
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.field || ""} className={'bk-med rounded-0'}
|
|
style={{ height: 40 }}
|
|
dir={'rtl'}
|
|
type='text'
|
|
placeholder="رشته تحصیلی "
|
|
/>
|
|
</div>
|
|
</MDBInputGroup>
|
|
</div>
|
|
</Box>
|
|
<Box>
|
|
<MDBInputGroup className='mb-3 flex'>
|
|
<div className={'flex align-items-center'}>
|
|
<MDBInputGroupText className={'rounded-0'}>
|
|
<FiUser />
|
|
</MDBInputGroupText>
|
|
<Input
|
|
id='trend'
|
|
name="trend"
|
|
required
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.trend || ""} className={'bk-med rounded-0'}
|
|
style={{ height: 40 }}
|
|
dir={'rtl'}
|
|
type='text'
|
|
placeholder="گرایش "
|
|
/>
|
|
</div>
|
|
</MDBInputGroup>
|
|
</Box>
|
|
<Box>
|
|
<MDBInputGroup className='mb-3 flex'>
|
|
<div className={'flex align-items-center'}>
|
|
<MDBInputGroupText className={'rounded-0'}>
|
|
<FiUser />
|
|
</MDBInputGroupText>
|
|
<Input
|
|
id='dateField'
|
|
name="dateField"
|
|
required
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.dateField || ""} className={'bk-med rounded-0'}
|
|
style={{ height: 40 }}
|
|
dir={'rtl'}
|
|
type='text'
|
|
placeholder="تاریخ اخذ مدرک "
|
|
/>
|
|
</div>
|
|
</MDBInputGroup>
|
|
</Box>
|
|
<Box>
|
|
<MDBInputGroup className='mb-3 flex'>
|
|
<div className={'flex align-items-center'}>
|
|
<MDBInputGroupText className={'rounded-0'}>
|
|
<FiUser />
|
|
</MDBInputGroupText>
|
|
<Input
|
|
id='score'
|
|
name="score"
|
|
required
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.score || ""} className={'bk-med rounded-0'}
|
|
style={{ height: 40 }}
|
|
dir={'rtl'}
|
|
type='text'
|
|
placeholder="معدل "
|
|
/>
|
|
</div>
|
|
</MDBInputGroup>
|
|
</Box>
|
|
</Box>
|
|
|
|
{
|
|
index ?
|
|
<MDBBtn color={'danger'} outline type="button" className="button remove" onClick={() => removeFormFields(index)}>پاک کردن</MDBBtn>
|
|
: null
|
|
}
|
|
</>
|
|
))}
|
|
</SimpleGrid>
|
|
<div className="flex justify-content-end mt-5">
|
|
<MDBBtn color={'warning'} className="button add" type="button" onClick={() => addFormFields()}>اضافه کردن </MDBBtn>
|
|
</div>
|
|
<MDBBtn type={'submit'} size={'sm'} className={'mt-2 bg-primary-teal'} >مرحله بعد</MDBBtn>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EducationalData; |