Proyectos de Subversion LeadersLinked - Backend

Rev

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