Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
9812 stevensc 1 
import React, { useState, useEffect } from 'react'
9759 stevensc 2 
import { useForm } from 'react-hook-form'
9782 stevensc 3 
import Datetime from 'react-datetime'
9814 stevensc 4 
import axios from 'axios'
9791 stevensc 5 
import SearchLocationInput from '../../../shared/SearchLocationInput'
9812 stevensc 6 
import DescriptionInput from '../../../shared/DescriptionInput'
7 
import { useHistory, useParams } from 'react-router-dom'
11156 stevensc 8 
import 'react-datetime/css/react-datetime.css'
9839 stevensc 9 
import { addNotification } from '../../../redux/notification/notification.actions'
10 
import { useDispatch } from 'react-redux'
9469 stevensc 11 
 
9779 stevensc 12 
const FormView = ({ actionLink, googleApiKey }) => {
9759 stevensc 13 
 
11156 stevensc 14 
	const history = useHistory()
15 
	const { action } = useParams()
16 
	const dispatch = useDispatch()
9812 stevensc 17 
 
9839 stevensc 18 
 
11156 stevensc 19 
	const { handleSubmit, register, setValue, errors, watch } = useForm()
9802 stevensc 20 
 
11156 stevensc 21 
	const [inputErrors, setInputErrors] = useState({})
22 
	const [location, setLocation] = useState({})
23 
	const [isActive, setIsActive] = useState(false)
24 
	const [year, setYear] = useState('')
25 
	const [locationLabel, setLocationLabel] = useState('')
26 
	const [jobsDescriptions, setJobsDescriptions] = useState([
27 
		{
28 
			value: '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',
29 
			label: 'Programador Junior'
30 
		}
31 
	])
32 
	const [jobsCategory, setJobsCategory] = useState([
33 
		{
34 
			value: '7bd009b8-bd25-4602-bf85-9496af80afbd',
35 
			label: 'Finanzas'
36 
		}
37 
	])
38 
	const [industry, setIndustry] = useState([
39 
		{
40 
			value: '307c261f-2d27-4b3c-a86a-6f69a596edb8',
41 
			label: 'Bienes raíces'
42 
		}
43 
	])
9759 stevensc 44 
 
9779 stevensc 45 
 
11156 stevensc 46 
	const onSubmit = (data) => {
9838 stevensc 47 
 
11156 stevensc 48 
		const formData = new FormData()
49 
		const submitData = {
50 
			...data,
51 
			...location,
52 
			last_date: year,
53 
			status: isActive ? 'a' : 'i'
54 
		}
9831 stevensc 55 
 
11156 stevensc 56 
		if (!location.formatted_address) {
57 
			return setInputErrors(prev => ({ ...prev, location: 'Es requerida una ubicación' }))
58 
		}
59 
		if (!year) {
60 
			return setInputErrors(prev => ({ ...prev, year: 'Este campo es requerido' }))
61 
		}
9833 stevensc 62 
 
11156 stevensc 63 
		Object.entries(submitData).forEach((entries) => {
64 
			formData.append(entries[0], entries[1])
65 
		})
9838 stevensc 66 
 
11156 stevensc 67 
		axios.post(actionLink, formData)
68 
			.then(({ data }) => {
69 
				if (!data.success) {
70 
					dispatch(addNotification({
71 
						style: 'error',
72 
						msg: 'Ha ocurrido un error'
73 
					}))
74 
					return
75 
				}
76 
				history.goBack()
77 
				dispatch(addNotification({
78 
					style: 'success',
79 
					msg: `Registro ${action === 'edit' ? 'actualizado' : 'guardado'}`
80 
				}))
81 
			})
11160 stevensc 82 
			.catch(() => dispatch(addNotification({
11156 stevensc 83 
				style: 'error',
84 
				msg: 'Ha ocurrido un error'
85 
			})))
9838 stevensc 86 
 
11156 stevensc 87 
	}
9802 stevensc 88 
 
11156 stevensc 89 
	useEffect(() => register('description'), [])
9831 stevensc 90 
 
11156 stevensc 91 
	useEffect(() => {
92 
		if (action === 'edit') {
93 
			axios.get(actionLink)
94 
				.then(({ data }) => {
95 
					const respData = data.data
96 
					if (data.success) {
97 
						setLocationLabel(respData.formatted_address)
98 
						setYear(respData.last_date)
99 
						respData.status === 'a' ? setIsActive(true) : setIsActive(false)
10114 stevensc 100 
 
11156 stevensc 101 
						Object.entries(respData.job_category.category_options).map(([value, label]) => {
102 
							setJobsCategory(prev => [...prev, { value: value, label: label }])
103 
						})
10254 stevensc 104 
 
11156 stevensc 105 
						Object.entries(respData.industry.industry_options).map(([value, label]) => {
106 
							setIndustry(prev => [...prev, { value: value, label: label }])
107 
						})
10254 stevensc 108 
 
11156 stevensc 109 
						Object.entries(respData.job_description.description_options).map(([value, label]) => {
110 
							setJobsDescriptions(prev => [...prev, { value: value, label: label }])
111 
						})
10254 stevensc 112 
 
11163 stevensc 113 
						register('description')
114 
						setValue('name', respData.name)
115 
						setValue('description', respData.description)
116 
 
11156 stevensc 117 
					}
118 
				})
119 
		}
120 
	}, [action])
9812 stevensc 121 
 
11156 stevensc 122 
	return (
123 
		<section className="container">
124 
			<div className="row">
125 
				<div className="col-xs-12 col-md-12">
126 
					<form onSubmit={handleSubmit(onSubmit)}>
127 
						<div className="form-group">
128 
							<label>Nombre</label>
129 
							<input
130 
								type="text"
131 
								name="name"
132 
								className="form-control"
133 
								ref={register({ required: true, maxLength: 120 })}
134 
							/>
135 
							{errors.name && <p>Este campo es requerido</p>}
136 
						</div>
137 
						<div className="form-group">
138 
							<label>Cargo a evaluar</label>
139 
							<select name="job_description_id" className="form-control" ref={register({ required: true })}>
140 
								{
141 
									jobsDescriptions.map(({ label, value }) => (
11160 stevensc 142 
										<option key={value} value={value}>{label}</option>
11156 stevensc 143 
									))
144 
								}
145 
							</select>
146 
						</div>
147 
						<div className="form-group">
148 
							<label>Categoría de Empleo</label>
149 
							<select name="job_category_id" className="form-control" ref={register({ required: true })}>
150 
								{
151 
									jobsCategory.map(({ label, value }) => (
11160 stevensc 152 
										<option key={value} value={value}>{label}</option>
11156 stevensc 153 
									))
154 
								}
155 
							</select>
156 
						</div>
157 
						<div className="form-group">
158 
							<label>Ubicación</label>
159 
							<SearchLocationInput
160 
								value={locationLabel}
161 
								setValue={setLocationLabel}
162 
								googleApiKey={googleApiKey}
163 
								updateData={setLocation}
164 
							/>
165 
							{inputErrors.location && <p>{inputErrors.location}</p>}
166 
						</div>
167 
						<div className="form-group">
168 
							<label>Industria</label>
169 
							<select name="industry_id" className="form-control" ref={register({ required: true })}>
170 
								{
171 
									industry.map(({ label, value }) => (
11160 stevensc 172 
										<option key={value} value={value}>{label}</option>
11156 stevensc 173 
									))
174 
								}
175 
							</select>
176 
						</div>
177 
						<div className="form-group">
178 
							<label>Último día de aplicación</label>
179 
							<Datetime
180 
								dateFormat="DD-MM-YYYY"
181 
								timeFormat={false}
182 
								initialValue={action === 'edit' ? Date.UTC(year) : Date.now()}
183 
								onChange={(e) =>
184 
									setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
185 
								}
186 
								inputProps={{ className: 'form-control' }}
187 
								closeOnSelect
188 
							/>
189 
							{inputErrors.year && <p>{inputErrors.year}</p>}
190 
						</div>
191 
						<div className="form-group">
192 
							<label>Descripción</label>
193 
							<DescriptionInput
194 
								setValue={setValue}
195 
								name="description"
196 
								defaultValue={action === 'edit' ? watch('description') : ''}
197 
							/>
198 
						</div>
199 
						<div className="form-group">
200 
							<label>Estatus</label>
201 
							<div
202 
								className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
203 
								data-toggle="toggle"
204 
								role="button"
205 
								style={{ width: '130px' }}
206 
								onClick={() => setIsActive(!isActive)}
207 
							>
208 
								<input
209 
									type="checkbox"
210 
									checked={isActive}
211 
								/>
212 
								<div className="toggle-group">
213 
									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
214 
									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
215 
									<span className="toggle-handle btn btn-light"></span>
216 
								</div>
217 
							</div>
218 
						</div>
219 
						<div className="form-group">
220 
							<button
221 
								type="submit"
222 
								className="btn btn-primary btn-form-save-close mr-2"
223 
							>
11163 stevensc 224 
								Guardar
11156 stevensc 225 
							</button>
226 
							<button
227 
								type="button"
228 
								className="btn btn-secondary btn-edit-cancel"
229 
								onClick={() => history.goBack()}
230 
							>
11163 stevensc 231 
								Cancelar
11156 stevensc 232 
							</button>
233 
						</div>
234 
					</form>
235 
				</div>
236 
			</div>
237 
		</section>
238 
	)
9469 stevensc 239 
}
240 
export default FormView