Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8457 | Rev 14814 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
8428 stevensc 1 
import React, { useState } from 'react'
14230 stevensc 2 
import { useEffect } from 'react'
3 
import { useForm } from 'react-hook-form'
4 
import { getData } from '../../../helpers/fetchHelpers'
8428 stevensc 5 
import SubmitModal from './SubmitModal'
6 
 
7 
const SalaryModal = ({
14230 stevensc 8 
	closeModal,
9 
	dataLink
8428 stevensc 10 
}) => {
11 
 
14230 stevensc 12 
	const currencyOptions = [
13 
		{ label: 'Pesos mexicanos', value: 'MXN' }
14 
	]
15 
	const [isActive, setIsActive] = useState(false)
16 
	const [currency, setCurrency] = useState(currencyOptions[0].value)
17 
	const { register, watch, setValue } = useForm()
8428 stevensc 18 
 
14230 stevensc 19 
	useEffect(() => {
20 
		getData(dataLink)
21 
			.then(({
22 
				salary_visible,
23 
				salary_currency,
24 
				salary_min,
25 
				salary_max }) => {
26 
				setCurrency(salary_currency)
27 
				setValue('salary_min', salary_min)
28 
				setValue('salary_max', salary_max)
29 
				salary_visible === 'y' ? setIsActive(true) : setIsActive(false)
8452 stevensc 30 
 
14230 stevensc 31 
			})
32 
	}, [])
8437 stevensc 33 
 
14230 stevensc 34 
	return (
35 
		<SubmitModal
36 
			title='Salario'
37 
			closeModal={closeModal}
38 
			submitData={{
39 
				salary_visible: isActive ? 'y' : 'n',
40 
				salary_currency: currency,
41 
				salary_min: watch('salary_min'),
42 
				salary_max: watch('salary_max')
43 
			}}
44 
			postLink={dataLink}
45 
		>
46 
			<div
47 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
48 
				data-toggle="toggle"
49 
				role="button"
50 
				style={{ width: '130px' }}
51 
				onClick={() => setIsActive(!isActive)}
52 
			>
53 
				<input
54 
					type="checkbox"
55 
					checked={isActive}
56 
				/>
57 
				<div className="toggle-group">
58 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
59 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
60 
					<span className="toggle-handle btn btn-light"></span>
61 
				</div>
62 
			</div>
63 
			<div className='form-group'>
64 
				<label className="form-label">Moneda</label>
65 
				<select
66 
					className='form-control'
67 
					name="employment_type"
68 
					onChange={(e) => setCurrency(e.target.value)}
69 
					value={currency}
70 
				>
71 
					{
72 
						currencyOptions.map(({ value, label }) => (
73 
							<option key={value} value={value}>{label}</option>
74 
						))
75 
					}
76 
				</select>
8449 stevensc 77 
 
14230 stevensc 78 
			</div>
79 
			<div className='form-group'>
80 
				<label className="form-label">Minimo</label>
81 
				<input
82 
					type='text'
83 
					className='form-control'
84 
					disabled={!isActive}
85 
					name='salary_min'
86 
					ref={register({
87 
						required: true,
88 
						valueAsNumber: true,
89 
						min: 1
90 
					})}
91 
				/>
92 
			</div>
93 
			<div className='form-group'>
94 
				<label className="form-label">Maximo</label>
95 
				<input
96 
					type='text'
97 
					className='form-control'
98 
					disabled={!isActive}
99 
					name='salary_max'
100 
					ref={register({
101 
						required: true,
102 
						valueAsNumber: true,
103 
						validate: value => value > watch('salary_min')
104 
					})}
105 
				/>
106 
			</div>
107 
		</SubmitModal>
108 
	)
8428 stevensc 109 
}
110 
 
111 
export default SalaryModal