Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14817 | | 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 
 
14817 stevensc 12 
	const [currencyOptions, setCurrencyOptions] = useState([{ label: 'Pesos mexicanos', value: 'MXN' }])
14230 stevensc 13 
	const [isActive, setIsActive] = useState(false)
14 
	const [currency, setCurrency] = useState(currencyOptions[0].value)
15 
	const { register, watch, setValue } = useForm()
8428 stevensc 16 
 
14230 stevensc 17 
	useEffect(() => {
18 
		getData(dataLink)
19 
			.then(({
20 
				salary_visible,
21 
				salary_currency,
22 
				salary_min,
14814 stevensc 23 
				salary_max,
24 
				currencies }) => {
14230 stevensc 25 
				setCurrency(salary_currency)
26 
				setValue('salary_min', salary_min)
27 
				setValue('salary_max', salary_max)
28 
				salary_visible === 'y' ? setIsActive(true) : setIsActive(false)
14818 stevensc 29 
				setCurrencyOptions(Object.entries(currencies).map(([value, key]) => ({ label: key, value: value })))
14230 stevensc 30 
			})
31 
	}, [])
8437 stevensc 32 
 
14230 stevensc 33 
	return (
34 
		<SubmitModal
35 
			title='Salario'
36 
			closeModal={closeModal}
37 
			submitData={{
38 
				salary_visible: isActive ? 'y' : 'n',
39 
				salary_currency: currency,
40 
				salary_min: watch('salary_min'),
41 
				salary_max: watch('salary_max')
42 
			}}
43 
			postLink={dataLink}
44 
		>
45 
			<div
46 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
47 
				data-toggle="toggle"
48 
				role="button"
49 
				style={{ width: '130px' }}
50 
				onClick={() => setIsActive(!isActive)}
51 
			>
52 
				<input
53 
					type="checkbox"
54 
					checked={isActive}
55 
				/>
56 
				<div className="toggle-group">
57 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
58 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
59 
					<span className="toggle-handle btn btn-light"></span>
60 
				</div>
61 
			</div>
62 
			<div className='form-group'>
63 
				<label className="form-label">Moneda</label>
64 
				<select
65 
					className='form-control'
66 
					name="employment_type"
67 
					onChange={(e) => setCurrency(e.target.value)}
68 
					value={currency}
69 
				>
70 
					{
14815 stevensc 71 
						!!currencyOptions.length &&
14230 stevensc 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