Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8457 | Rev 14814 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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