Proyectos de Subversion LeadersLinked - Backend

Rev

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