Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15408 | Rev 15410 | Ir a la última revisión | | 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}
15408 stevensc 28 
			submitData={isActive
29 
				? {
30 
					experience_visible: isActive ? 'y' : 'n',
15409 stevensc 31 
					experience_min: isActive ? watch('experience_min') : null,
32 
					experience_max: isActive ? watch('experience_max') : null
15408 stevensc 33 
				}
34 
				: { experience_visible: isActive ? 'y' : 'n' }
35 
			}
14167 stevensc 36 
			postLink={dataLink}
37 
		>
38 
			<div
39 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
40 
				data-toggle="toggle"
41 
				role="button"
42 
				style={{ width: '130px' }}
43 
				onClick={() => setIsActive(!isActive)}
44 
			>
45 
				<input
46 
					type="checkbox"
47 
					checked={isActive}
48 
				/>
49 
				<div className="toggle-group">
50 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
51 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
52 
					<span className="toggle-handle btn btn-light"></span>
53 
				</div>
54 
			</div>
55 
			<div className='form-group'>
14893 stevensc 56 
				<label className="form-label">Minimo de años</label>
14167 stevensc 57 
				<input
14893 stevensc 58 
					type='number'
14167 stevensc 59 
					className='form-control'
60 
					disabled={!isActive}
61 
					name='experience_min'
62 
					ref={register({
15250 stevensc 63 
						required: isActive && true,
14167 stevensc 64 
						valueAsNumber: true,
15237 stevensc 65 
						min: 1,
66 
						max: 40
14167 stevensc 67 
					})}
68 
				/>
15250 stevensc 69 
				{errors.experience_min?.type === 'required' && <p>Este campo es requerido</p>}
14167 stevensc 70 
			</div>
15237 stevensc 71 
			<div className='form-group'>
72 
				<label className="form-label">Máximo de años</label>
14167 stevensc 73 
				<input
74 
					type='text'
75 
					className='form-control'
15248 stevensc 76 
					disabled={!isActive}
14167 stevensc 77 
					name='experience_max'
15247 stevensc 78 
					ref={register({
15250 stevensc 79 
						required: isActive && true,
15247 stevensc 80 
						valueAsNumber: true,
81 
						min: 1,
82 
						max: 40,
83 
						validate: value => value > watch('experience_min')
84 
					})}
14167 stevensc 85 
				/>
15250 stevensc 86 
				{errors.experience_max?.type === 'validate' && <p>El máximo de años debe ser mayor que el minimo</p>}
87 
				{errors.experience_max?.type === 'max' && <p>El máximo de años permitidos es de 40</p>}
88 
				{errors.experience_max?.type === 'required' && <p>Este campo es requerido</p>}
15237 stevensc 89 
			</div>
14167 stevensc 90 
		</SubmitModal>
91 
	)
8452 stevensc 92 
}
93 
 
94 
export default ExperienceModal