170 lines
9.5 KiB
JavaScript
170 lines
9.5 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 JobData = () => {
|
|
const {setPage, jobData, setJob} = useContext(HandleFormReq)
|
|
const [formValues, setFormValues] = useState(jobData)
|
|
|
|
let handleChange = (i, e) => {
|
|
let newFormValues = [...formValues];
|
|
newFormValues[i][e.target.name] = e.target.value;
|
|
setFormValues(newFormValues);
|
|
}
|
|
|
|
let addFormFields = () => {
|
|
setFormValues([...formValues, {
|
|
companyName: '',
|
|
position: '',
|
|
workTime: '',
|
|
exitReason: '',
|
|
lastIncome: ''
|
|
}])
|
|
console.log('add nf', formValues);
|
|
}
|
|
|
|
let removeFormFields = (i) => {
|
|
let newFormValues = [...formValues];
|
|
newFormValues.splice(i, 1);
|
|
setFormValues(newFormValues)
|
|
}
|
|
|
|
let handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
setJob(formValues)
|
|
setPage(5)
|
|
}
|
|
return (
|
|
<div>
|
|
<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='companyName'
|
|
name="companyName"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.companyName || ""} 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='position'
|
|
name="position"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.position || ""} 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='workTime'
|
|
name="workTime"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.workTime || ""} 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='exitReason'
|
|
name="exitReason"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.exitReason || ""} 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='lastIncome'
|
|
name="lastIncome"
|
|
onChange={e => handleChange(index, e)}
|
|
defaultValue={element.lastIncome || ""} 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 JobData; |