Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
14258 kerby 1 
import React, { useState, useEffect, useRef } 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'
11938 stevensc 11 
import parse from 'html-react-parser'
9469 stevensc 12 
 
12319 stevensc 13 
const FormView = ({
14 
	actionLink,
15 
	googleApiKey,
16 
	jobCategories: jsonCategories,
17 
	industries: jsonIndustries,
18 
	jobDescritions: jsonDescriptions
19 
}) => {
9759 stevensc 20 
 
11156 stevensc 21 
	const history = useHistory()
22 
	const { action } = useParams()
23 
	const dispatch = useDispatch()
9812 stevensc 24 
 
14738 stevensc 25 
	const locationRef = useRef()
11156 stevensc 26 
	const { handleSubmit, register, setValue, errors, watch } = useForm()
9802 stevensc 27 
 
11156 stevensc 28 
	const [inputErrors, setInputErrors] = useState({})
29 
	const [location, setLocation] = useState({})
30 
	const [isActive, setIsActive] = useState(false)
14838 stevensc 31 
	const [year, setYear] = useState(Date.now())
11156 stevensc 32 
	const [locationLabel, setLocationLabel] = useState('')
15090 efrain 33 
	const [jobsDescriptions, setJobsDescriptions] = useState([])
34 
	const [jobsCategory, setJobsCategory] = useState([])
35 
	const [industry, setIndustry] = useState([])
9759 stevensc 36 
 
9779 stevensc 37 
 
11156 stevensc 38 
	const onSubmit = (data) => {
9838 stevensc 39 
 
11156 stevensc 40 
		const formData = new FormData()
41 
		const submitData = {
42 
			...data,
43 
			...location,
44 
			last_date: year,
45 
			status: isActive ? 'a' : 'i'
46 
		}
14275 kerby 47 
		if (!location.formatted_address) {
14259 kerby 48 
			// locationRef.current.focus();
14258 kerby 49 
			dispatch(addNotification({
14838 stevensc 50 
				style: 'danger',
14738 stevensc 51 
				msg: 'Es requerida una ubicación'
52 
			}))
11156 stevensc 53 
			return setInputErrors(prev => ({ ...prev, location: 'Es requerida una ubicación' }))
54 
		}
14260 kerby 55 
		if (!submitData.description) {
56 
			// locationRef.current.focus();
57 
			dispatch(addNotification({
14838 stevensc 58 
				style: 'danger',
14738 stevensc 59 
				msg: 'Es requerida una descripcion'
60 
			}))
14260 kerby 61 
			return
62 
		}
11156 stevensc 63 
		if (!year) {
64 
			return setInputErrors(prev => ({ ...prev, year: 'Este campo es requerido' }))
65 
		}
9833 stevensc 66 
 
11156 stevensc 67 
		Object.entries(submitData).forEach((entries) => {
68 
			formData.append(entries[0], entries[1])
69 
		})
9838 stevensc 70 
 
11156 stevensc 71 
		axios.post(actionLink, formData)
72 
			.then(({ data }) => {
73 
				if (!data.success) {
14738 stevensc 74 
					typeof data.data === 'string'
75 
						?
76 
						dispatch(addNotification({
77 
							style: 'danger',
78 
							msg: data.data
79 
						}))
80 
						: Object.entries(data.data).map(([key, value]) =>
81 
							value.map(err =>
82 
								dispatch(addNotification({
83 
									style: 'danger',
84 
									msg: `${key}: ${err}`
85 
								}))
86 
							)
87 
						)
11156 stevensc 88 
					return
89 
				}
90 
				history.goBack()
91 
				dispatch(addNotification({
92 
					style: 'success',
93 
					msg: `Registro ${action === 'edit' ? 'actualizado' : 'guardado'}`
94 
				}))
95 
			})
11160 stevensc 96 
			.catch(() => dispatch(addNotification({
14838 stevensc 97 
				style: 'danger',
11156 stevensc 98 
				msg: 'Ha ocurrido un error'
99 
			})))
9838 stevensc 100 
 
11156 stevensc 101 
	}
9802 stevensc 102 
 
14230 stevensc 103 
	useEffect(() => register('description'), [])
9831 stevensc 104 
 
11156 stevensc 105 
	useEffect(() => {
106 
		if (action === 'edit') {
107 
			axios.get(actionLink)
108 
				.then(({ data }) => {
109 
					const respData = data.data
110 
					if (data.success) {
11947 stevensc 111 
 
11156 stevensc 112 
						setLocationLabel(respData.formatted_address)
14273 kerby 113 
						setLocation({
114 
							formatted_address: respData.formatted_address,
115 
							latitude: respData.latitude,
14738 stevensc 116 
							location_search: respData.location_search,
117 
							longitude: respData.longitude,
118 
							city1: respData.city1,
119 
							city2: respData.city2,
120 
							country: respData.country,
121 
							postal_code: respData.postal_code,
122 
							state: respData.state
14273 kerby 123 
						})
11156 stevensc 124 
						setYear(respData.last_date)
125 
						respData.status === 'a' ? setIsActive(true) : setIsActive(false)
10114 stevensc 126 
 
11156 stevensc 127 
						Object.entries(respData.job_category.category_options).map(([value, label]) => {
128 
							setJobsCategory(prev => [...prev, { value: value, label: label }])
129 
						})
10254 stevensc 130 
 
11156 stevensc 131 
						Object.entries(respData.industry.industry_options).map(([value, label]) => {
132 
							setIndustry(prev => [...prev, { value: value, label: label }])
133 
						})
10254 stevensc 134 
 
11156 stevensc 135 
						Object.entries(respData.job_description.description_options).map(([value, label]) => {
136 
							setJobsDescriptions(prev => [...prev, { value: value, label: label }])
137 
						})
10254 stevensc 138 
 
11163 stevensc 139 
						setValue('name', respData.name)
140 
						setValue('description', respData.description)
15090 efrain 141 
 
142 
						setValue('job_description_id', respData.job_description.current_description.description_id);
143 
						setValue('job_category_id', respData.job_category.current_category.job_category_id);
144 
						setValue('industry_id', respData.industry.current_industry.industry_id);
11163 stevensc 145 
 
15090 efrain 146 
 
147 
 
11156 stevensc 148 
					}
149 
				})
150 
		}
151 
	}, [action])
9812 stevensc 152 
 
12314 stevensc 153 
	useEffect(() => {
12321 stevensc 154 
		if (action === 'add') {
12319 stevensc 155 
			Object.entries(jsonCategories).map(([value, label]) => setJobsCategory(prev => [...prev, { value: value, label: label }]))
156 
			Object.entries(jsonIndustries).map(([value, label]) => setIndustry(prev => [...prev, { value: value, label: label }]))
157 
			Object.entries(jsonDescriptions).map(([value, label]) => setJobsDescriptions(prev => [...prev, { value: value, label: label }]))
12314 stevensc 158 
		}
159 
	}, [action])
160 
 
11156 stevensc 161 
	return (
162 
		<section className="container">
163 
			<div className="row">
164 
				<div className="col-xs-12 col-md-12">
165 
					<form onSubmit={handleSubmit(onSubmit)}>
166 
						<div className="form-group">
167 
							<label>Nombre</label>
168 
							<input
169 
								type="text"
170 
								name="name"
171 
								className="form-control"
172 
								ref={register({ required: true, maxLength: 120 })}
173 
							/>
174 
							{errors.name && <p>Este campo es requerido</p>}
175 
						</div>
176 
						<div className="form-group">
177 
							<label>Cargo a evaluar</label>
178 
							<select name="job_description_id" className="form-control" ref={register({ required: true })}>
179 
								{
180 
									jobsDescriptions.map(({ label, value }) => (
11160 stevensc 181 
										<option key={value} value={value}>{label}</option>
11156 stevensc 182 
									))
183 
								}
184 
							</select>
185 
						</div>
186 
						<div className="form-group">
187 
							<label>Categoría de Empleo</label>
188 
							<select name="job_category_id" className="form-control" ref={register({ required: true })}>
189 
								{
190 
									jobsCategory.map(({ label, value }) => (
11160 stevensc 191 
										<option key={value} value={value}>{label}</option>
11156 stevensc 192 
									))
193 
								}
194 
							</select>
195 
						</div>
196 
						<div className="form-group">
197 
							<label>Ubicación</label>
198 
							<SearchLocationInput
14258 kerby 199 
								ref={locationRef}
11156 stevensc 200 
								value={locationLabel}
201 
								setValue={setLocationLabel}
202 
								googleApiKey={googleApiKey}
203 
								updateData={setLocation}
204 
							/>
205 
							{inputErrors.location && <p>{inputErrors.location}</p>}
206 
						</div>
207 
						<div className="form-group">
208 
							<label>Industria</label>
209 
							<select name="industry_id" className="form-control" ref={register({ required: true })}>
210 
								{
211 
									industry.map(({ label, value }) => (
11160 stevensc 212 
										<option key={value} value={value}>{label}</option>
11156 stevensc 213 
									))
214 
								}
215 
							</select>
216 
						</div>
217 
						<div className="form-group">
218 
							<label>Último día de aplicación</label>
219 
							<Datetime
12164 eleazar 220 
								dateFormat="DD-MM-YYYY"
11156 stevensc 221 
								timeFormat={false}
14838 stevensc 222 
								onChange={(e) => {
223 
									if (Date.now() > new Date(e.toDate()).getTime()) {
224 
										setYear(new Date(new Intl.DateTimeFormat('en-EN', year).format()))
225 
										return dispatch(addNotification({
226 
											style: 'danger',
227 
											msg: 'La fecha no puede ser igual o anterior a la actual'
228 
										}))
229 
									}
11156 stevensc 230 
									setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
14838 stevensc 231 
								}}
232 
								inputProps={{ className: 'form-control' }}
233 
								initialValue={
234 
									new Date(new Intl.DateTimeFormat('en-EN', action === 'edit' ? Date.parse(year) : year).format())
11156 stevensc 235 
								}
236 
								closeOnSelect
237 
							/>
238 
							{inputErrors.year && <p>{inputErrors.year}</p>}
239 
						</div>
240 
						<div className="form-group">
241 
							<label>Descripción</label>
242 
							<DescriptionInput
11166 stevensc 243 
								onChange={setValue}
11156 stevensc 244 
								name="description"
11947 stevensc 245 
								defaultValue={watch('description') ? parse(watch('description')) : ''}
11156 stevensc 246 
							/>
247 
						</div>
248 
						<div className="form-group">
249 
							<label>Estatus</label>
14230 stevensc 250 
							<div
251 
								className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
252 
								data-toggle="toggle"
253 
								role="button"
254 
								style={{ width: '130px' }}
255 
								onClick={() => setIsActive(!isActive)}
256 
							>
257 
								<input
258 
									type="checkbox"
259 
									checked={isActive}
260 
								/>
261 
								<div className="toggle-group">
262 
									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
263 
									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
264 
									<span className="toggle-handle btn btn-light"></span>
265 
								</div>
266 
							</div>
11156 stevensc 267 
						</div>
268 
						<div className="form-group">
269 
							<button
270 
								type="submit"
271 
								className="btn btn-primary btn-form-save-close mr-2"
272 
							>
11163 stevensc 273 
								Guardar
11156 stevensc 274 
							</button>
275 
							<button
276 
								type="button"
277 
								className="btn btn-secondary btn-edit-cancel"
278 
								onClick={() => history.goBack()}
279 
							>
11163 stevensc 280 
								Cancelar
11156 stevensc 281 
							</button>
282 
						</div>
283 
					</form>
284 
				</div>
285 
			</div>
286 
		</section>
287 
	)
9469 stevensc 288 
}
289 
export default FormView