Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14815 | 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 
 
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)
14817 stevensc 29 
				Object.entries(currencies)
30 
					.map(([value, key]) => {
31 
						const currencys = new Set([...currencyOptions, { label: key, value: value }])
32 
						setCurrencyOptions([...currencys])
33 
					})
14230 stevensc 34 
			})
35 
	}, [])
8437 stevensc 36 
 
14230 stevensc 37 
	return (
38 
		<SubmitModal
39 
			title='Salario'
40 
			closeModal={closeModal}
41 
			submitData={{
42 
				salary_visible: isActive ? 'y' : 'n',
43 
				salary_currency: currency,
44 
				salary_min: watch('salary_min'),
45 
				salary_max: watch('salary_max')
46 
			}}
47 
			postLink={dataLink}
48 
		>
49 
			<div
50 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
51 
				data-toggle="toggle"
52 
				role="button"
53 
				style={{ width: '130px' }}
54 
				onClick={() => setIsActive(!isActive)}
55 
			>
56 
				<input
57 
					type="checkbox"
58 
					checked={isActive}
59 
				/>
60 
				<div className="toggle-group">
61 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
62 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
63 
					<span className="toggle-handle btn btn-light"></span>
64 
				</div>
65 
			</div>
66 
			<div className='form-group'>
67 
				<label className="form-label">Moneda</label>
68 
				<select
69 
					className='form-control'
70 
					name="employment_type"
71 
					onChange={(e) => setCurrency(e.target.value)}
72 
					value={currency}
73 
				>
74 
					{
14815 stevensc 75 
						!!currencyOptions.length &&
14230 stevensc 76 
						currencyOptions.map(({ value, label }) => (
77 
							<option key={value} value={value}>{label}</option>
78 
						))
79 
					}
80 
				</select>
8449 stevensc 81 
 
14230 stevensc 82 
			</div>
83 
			<div className='form-group'>
84 
				<label className="form-label">Minimo</label>
85 
				<input
86 
					type='text'
87 
					className='form-control'
88 
					disabled={!isActive}
89 
					name='salary_min'
90 
					ref={register({
91 
						required: true,
92 
						valueAsNumber: true,
93 
						min: 1
94 
					})}
95 
				/>
96 
			</div>
97 
			<div className='form-group'>
98 
				<label className="form-label">Maximo</label>
99 
				<input
100 
					type='text'
101 
					className='form-control'
102 
					disabled={!isActive}
103 
					name='salary_max'
104 
					ref={register({
105 
						required: true,
106 
						valueAsNumber: true,
107 
						validate: value => value > watch('salary_min')
108 
					})}
109 
				/>
110 
			</div>
111 
		</SubmitModal>
112 
	)
8428 stevensc 113 
}
114 
 
115 
export default SalaryModal