183 lines
9.9 KiB
JavaScript
183 lines
9.9 KiB
JavaScript
|
import React, {useContext, useState} from 'react';
|
||
|
|
import {Box, Input, Select, 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 CoursesData = () => {
|
||
|
|
const {setPage, coursesData, setCoursesData, langStatus, setLangStatus} = useContext(HandleFormReq)
|
||
|
|
const [formValues, setFormValues] = useState(coursesData)
|
||
|
|
|
||
|
|
let handleChange = (i, e) => {
|
||
|
|
let newFormValues = [...formValues];
|
||
|
|
newFormValues[i][e.target.name] = e.target.value;
|
||
|
|
setFormValues(newFormValues);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let addFormFields = () => {
|
||
|
|
setFormValues([...formValues, {
|
||
|
|
courseName: '',
|
||
|
|
courseEdu: '',
|
||
|
|
courseLocal: '',
|
||
|
|
courseTime: '',
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
|
||
|
|
let removeFormFields = (i) => {
|
||
|
|
let newFormValues = [...formValues];
|
||
|
|
newFormValues.splice(i, 1);
|
||
|
|
setFormValues(newFormValues)
|
||
|
|
}
|
||
|
|
|
||
|
|
let handleSubmit = (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
setCoursesData(formValues)
|
||
|
|
console.log(formValues);
|
||
|
|
console.log('coursesData', coursesData);
|
||
|
|
console.log('langStatus', langStatus.status);
|
||
|
|
setPage(4)
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<SimpleGrid className={'mt-2 flex justify-content-between mt-5'} dir={'rtl'} columns={[1,1,2]} spacingX='390px' spacingY='20px'>
|
||
|
|
<Box>
|
||
|
|
<MDBInputGroup className='flex flex-md-row flex-lg-row flex-sm-column'>
|
||
|
|
<div style={{ flexDirection: 'column' }} className={'flex align-items-center flex-md-row flex-lg-row flex-sm-column'}>
|
||
|
|
<div>
|
||
|
|
<MDBInputGroupText className={'rounded-0 border-0'}>
|
||
|
|
میزان آشنایی با زبان انگلیسی :
|
||
|
|
</MDBInputGroupText>
|
||
|
|
</div>
|
||
|
|
{process.browser && (
|
||
|
|
<div>
|
||
|
|
<select
|
||
|
|
required
|
||
|
|
onChange={(e) => setLangStatus({status: e.target.value})}
|
||
|
|
dir={'ltr'}
|
||
|
|
defaultValue={langStatus.status}
|
||
|
|
style={{ width: 200 }}
|
||
|
|
placeholder={'سطح زبان خود را مشخص کنید '}
|
||
|
|
>
|
||
|
|
<option value='3'> ضعیف </option>
|
||
|
|
<option value='2'> خوب </option>
|
||
|
|
<option value='1'> عالی </option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</MDBInputGroup>
|
||
|
|
</Box>
|
||
|
|
</SimpleGrid>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<p className={'right'}>در صورتی که دوره آموزشی خاصی را گذرانده اید اطلاعات آن را وارد کنید </p>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<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
|
||
|
|
id='courseName'
|
||
|
|
name="courseName"
|
||
|
|
onChange={e => handleChange(index, e)}
|
||
|
|
defaultValue={element.courseName || ""} 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='courseEdu'
|
||
|
|
name="courseEdu"
|
||
|
|
onChange={e => handleChange(index, e)}
|
||
|
|
defaultValue={element.courseEdu || ""} 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='courseLocal'
|
||
|
|
name="courseLocal"
|
||
|
|
onChange={e => handleChange(index, e)}
|
||
|
|
defaultValue={element.courseLocal || ""} 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='courseTime'
|
||
|
|
name="courseTime"
|
||
|
|
onChange={e => handleChange(index, e)}
|
||
|
|
defaultValue={element.courseTime || ""} 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 CoursesData;
|