Proyectos de Subversion LeadersLinked - Backend

Rev

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