Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15411 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
8452 stevensc 1 
import React, { useState } from 'react'
14167 stevensc 2 
import { useEffect } from 'react'
3 
import { useForm } from 'react-hook-form'
4 
import { getData } from '../../../helpers/fetchHelpers'
8452 stevensc 5 
import SubmitModal from './SubmitModal'
6 
 
7 
const ExperienceModal = ({
14167 stevensc 8 
	closeModal,
9 
	dataLink
8452 stevensc 10 
}) => {
11 
 
14167 stevensc 12 
	const [isActive, setIsActive] = useState(false)
15250 stevensc 13 
	const { register, watch, setValue, errors } = useForm()
8452 stevensc 14 
 
14167 stevensc 15 
	useEffect(() => {
16 
		getData(dataLink)
15250 stevensc 17 
			.then(({ experience_visible, experience_min, experience_max }) => {
14167 stevensc 18 
				setValue('experience_min', experience_min)
15250 stevensc 19 
				setValue('experience_max', experience_max)
14167 stevensc 20 
				experience_visible === 'y' ? setIsActive(true) : setIsActive(false)
21 
			})
22 
	}, [])
8452 stevensc 23 
 
14167 stevensc 24 
	return (
25 
		<SubmitModal
14893 stevensc 26 
			title='Años de experiencia'
14167 stevensc 27 
			closeModal={closeModal}
15410 stevensc 28 
			submitData={{
29 
				experience_visible: isActive ? 'y' : 'n',
15412 stevensc 30 
				experience_min: watch('experience_min'),
31 
				experience_max: watch('experience_max')
15410 stevensc 32 
			}}
14167 stevensc 33 
			postLink={dataLink}
34 
		>
35 
			<div
36 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
37 
				data-toggle="toggle"
38 
				role="button"
39 
				style={{ width: '130px' }}
40 
				onClick={() => setIsActive(!isActive)}
41 
			>
42 
				<input
43 
					type="checkbox"
44 
					checked={isActive}
45 
				/>
46 
				<div className="toggle-group">
47 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
48 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
49 
					<span className="toggle-handle btn btn-light"></span>
50 
				</div>
51 
			</div>
52 
			<div className='form-group'>
14893 stevensc 53 
				<label className="form-label">Minimo de años</label>
14167 stevensc 54 
				<input
14893 stevensc 55 
					type='number'
15412 stevensc 56 
					hidden={!isActive}
14167 stevensc 57 
					className='form-control'
58 
					name='experience_min'
59 
					ref={register({
15250 stevensc 60 
						required: isActive && true,
14167 stevensc 61 
						valueAsNumber: true,
15237 stevensc 62 
						min: 1,
63 
						max: 40
14167 stevensc 64 
					})}
65 
				/>
15250 stevensc 66 
				{errors.experience_min?.type === 'required' && <p>Este campo es requerido</p>}
14167 stevensc 67 
			</div>
15237 stevensc 68 
			<div className='form-group'>
69 
				<label className="form-label">Máximo de años</label>
14167 stevensc 70 
				<input
71 
					type='text'
15412 stevensc 72 
					hidden={!isActive}
14167 stevensc 73 
					className='form-control'
74 
					name='experience_max'
15247 stevensc 75 
					ref={register({
15250 stevensc 76 
						required: isActive && true,
15247 stevensc 77 
						valueAsNumber: true,
78 
						min: 1,
79 
						max: 40,
80 
						validate: value => value > watch('experience_min')
81 
					})}
14167 stevensc 82 
				/>
15250 stevensc 83 
				{errors.experience_max?.type === 'validate' && <p>El máximo de años debe ser mayor que el minimo</p>}
84 
				{errors.experience_max?.type === 'max' && <p>El máximo de años permitidos es de 40</p>}
85 
				{errors.experience_max?.type === 'required' && <p>Este campo es requerido</p>}
15237 stevensc 86 
			</div>
14167 stevensc 87 
		</SubmitModal>
88 
	)
8452 stevensc 89 
}
90 
 
91 
export default ExperienceModal