price update
This commit is contained in:
rezakarimi
@@ -0,0 +1,182 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user