Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6881 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6770 stevensc 1 
import React, { useEffect, useRef } from 'react'
6769 stevensc 2 
import { axios, CKEDITOR_OPTIONS } from '../../utils'
3 
import { Button, Modal } from 'react-bootstrap'
4 
import { useForm } from 'react-hook-form'
5 
import { CKEditor } from 'ckeditor4-react'
6 
import { useDispatch, useSelector } from 'react-redux'
7 
import { addNotification } from '../../redux/notification/notification.actions'
8 
import { getMonths, getYears } from '../../utils/dates'
6779 stevensc 9 
import useFetchHelper from '../../hooks/useFetchHelper'
6769 stevensc 10 
 
11 
import SwitchInput from '../UI/SwitchInput'
12 
import FormErrorFeedback from '../UI/FormErrorFeedback'
13 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
14 
 
15 
const ExperienceModal = ({
16 
  show = false,
17 
  url = '',
18 
  onClose = () => {},
19 
  onComplete = () => {},
20 
  isEdit = false,
21 
}) => {
22 
  const addressKeys = useRef([
23 
    'address1',
24 
    'address2',
25 
    'country',
26 
    'state',
27 
    'city1',
28 
    'city2',
29 
    'postal_code',
30 
    'latitude',
31 
    'longitude',
32 
  ])
33 
  const labels = useSelector(({ intl }) => intl.labels)
6779 stevensc 34 
  const { data: companySizes } = useFetchHelper('company-sizes')
6880 stevensc 35 
  const { data: industries } = useFetchHelper('industries')
6883 stevensc 36 
  const dispatch = useDispatch()
6769 stevensc 37 
 
38 
  const {
39 
    register,
40 
    errors,
41 
    handleSubmit,
42 
    setValue,
43 
    clearErrors,
44 
    watch,
45 
    setError,
46 
    reset,
47 
  } = useForm()
6883 stevensc 48 
  const isCurrent = watch('is_current', 'y')
6769 stevensc 49 
 
50 
  const handleModalOpen = () => {
51 
    reset()
52 
    onClose()
53 
  }
54 
 
55 
  const getAddressHandler = (addresObject) => {
56 
    addressKeys.current.map((addressKey) => setValue(addressKey, ''))
57 
 
58 
    const { address_components } = addresObject
59 
 
60 
    if (address_components) {
61 
      address_components.map((address_component) => {
62 
        const address_component_name = address_component.long_name
63 
        const address_component_type = address_component.types[0]
64 
        switch (address_component_type) {
65 
          case 'route':
66 
            setValue('address1', address_component_name)
67 
            break
68 
          case 'sublocality':
69 
            setValue('address2', address_component_name)
70 
            break
71 
          case 'locality':
72 
            setValue('city1', address_component_name)
73 
            break
74 
          case 'administrative_area_level_2':
75 
            setValue('city2', address_component_name)
76 
            break
77 
          case 'administrative_area_level_1':
78 
            setValue('state', address_component_name)
79 
            break
80 
          case 'country':
81 
            setValue('country', address_component_name)
82 
            break
83 
          case 'postal_code':
84 
            setValue('postal_code', address_component_name)
85 
            break
86 
          case 'geometry':
87 
            setValue('latitude', address_component.latitude)
88 
            setValue('longitude', address_component.longitude)
89 
            break
90 
          default:
91 
            break
92 
        }
93 
      })
94 
    }
95 
 
96 
    setValue('formatted_address', addresObject.formatted_address)
97 
    clearErrors('formatted_address')
98 
  }
99 
 
100 
  const onSubmit = handleSubmit((data) => {
101 
    const formData = new FormData()
102 
 
103 
    Object.entries(data).map(([key, value]) => {
104 
      if (!value) {
105 
        return
106 
      }
107 
      formData.append(key, value)
108 
    })
109 
 
110 
    axios.post(url, formData).then(({ data: response }) => {
111 
      const { data, success } = response
112 
 
113 
      if (!success) {
114 
        typeof data === 'string'
115 
          ? dispatch(addNotification({ style: 'danger', msg: data }))
116 
          : Object.entries(data).map(([key, value]) =>
117 
              setError(key, { message: value[0] })
118 
            )
119 
        return
120 
      }
121 
 
122 
      onComplete(data)
123 
      handleModalOpen()
124 
    })
125 
  })
126 
 
127 
  useEffect(() => {
128 
    addressKeys.current.map((addressKey) => register(addressKey))
129 
    register('formatted_address', { required: 'Este campo es requerido' })
130 
    register('description', { required: true })
131 
    register('is_current', { required: true })
132 
  }, [])
133 
 
134 
  useEffect(() => {
135 
    if (!isEdit) return
136 
 
137 
    axios.get(url).then(({ data: response }) => {
138 
      const { data, success } = response
139 
 
140 
      if (!success) {
141 
        const errorMessage = typeof data === 'string' ? data : 'Error'
6775 stevensc 142 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
6769 stevensc 143 
        return
144 
      }
145 
 
146 
      Object.entries(data.experience).map(
147 
        ([key, value]) => value && setValue(key, value)
148 
      )
149 
      Object.entries(data.location).map(
150 
        ([key, value]) => value && setValue(key, value)
151 
      )
152 
    })
153 
  }, [isEdit, show])
154 
 
6880 stevensc 155 
  useEffect(() => {
156 
    console.log(errors)
157 
  }, [errors])
158 
 
6769 stevensc 159 
  return (
160 
    <Modal show={show} onHide={handleModalOpen}>
161 
      <Modal.Header>
162 
        <Modal.Title>
163 
          {isEdit ? labels.edit : labels.add} - {labels.experience}
164 
        </Modal.Title>
165 
      </Modal.Header>
166 
      <form onSubmit={onSubmit}>
167 
        <Modal.Body>
168 
          <div className="form-group">
169 
            <input
170 
              type="text"
171 
              name="company"
172 
              placeholder="Empresa"
173 
              ref={register({
174 
                required: 'este campo es requerido',
175 
              })}
176 
            />
177 
            {errors.company && (
178 
              <FormErrorFeedback>{errors.company.message}</FormErrorFeedback>
179 
            )}
180 
          </div>
6880 stevensc 181 
          <div className="form-group">
6769 stevensc 182 
            <select
183 
              name="industry_id"
184 
              id="industry_id"
185 
              ref={register({
186 
                required: 'este campo es requerido',
187 
              })}
188 
              defaultValue=""
189 
            >
190 
              <option value="" hidden>
191 
                Industria
192 
              </option>
6880 stevensc 193 
              {Boolean(industries.length) &&
194 
                industries.map(({ name, value }) => (
195 
                  <option value={value} key={value}>
196 
                    {name}
6769 stevensc 197 
                  </option>
198 
                ))}
199 
            </select>
200 
            {errors.industry_id && (
201 
              <FormErrorFeedback>
202 
                {errors.industry_id.message}
203 
              </FormErrorFeedback>
204 
            )}
6880 stevensc 205 
          </div>
6769 stevensc 206 
          <div className="form-group">
207 
            <select
208 
              name="company_size_id"
209 
              id="company_size_id"
210 
              ref={register({
211 
                required: 'este campo es requerido',
212 
              })}
213 
              defaultValue=""
214 
            >
215 
              <option value="" hidden>
216 
                Tamaño de la Empresa
217 
              </option>
6871 stevensc 218 
              {Boolean(companySizes.length) &&
219 
                companySizes.map(({ name, value }) => (
220 
                  <option value={value} key={value}>
221 
                    {name}
6779 stevensc 222 
                  </option>
223 
                ))}
6769 stevensc 224 
            </select>
225 
            {errors.company_size_id && (
226 
              <FormErrorFeedback>
227 
                {errors.company_size_id.message}
228 
              </FormErrorFeedback>
229 
            )}
230 
          </div>
231 
          <div className="form-group">
232 
            <input
233 
              type="text"
234 
              name="title"
235 
              placeholder="Titulo"
236 
              ref={register({
237 
                required: 'este campo es requerido',
238 
              })}
239 
            />
240 
            {errors.title && (
241 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
242 
            )}
243 
          </div>
244 
          <div className="form-group datefm">
245 
            <UbicationInput
246 
              onGetAddress={getAddressHandler}
247 
              settedQuery={watch('formatted_address')}
248 
            />
249 
            <i className="fa fa-map-marker" />
250 
            {errors.formatted_address && (
251 
              <FormErrorFeedback>
252 
                {errors.formatted_address.message}
253 
              </FormErrorFeedback>
254 
            )}
255 
          </div>
256 
          <div className="row profile-year" style={{ gap: '.5rem' }}>
257 
            <div className="input-c p-0">
258 
              <div className="form-group">
259 
                <select
260 
                  name="from_month"
261 
                  id="from_month"
262 
                  ref={register({ required: 'este campo es requerido' })}
263 
                  defaultValue=""
264 
                >
265 
                  <option value="">Mes desde</option>
266 
                  {getMonths().map((month, id) => (
267 
                    <option key={id} value={id + 1}>
268 
                      {month}
269 
                    </option>
270 
                  ))}
271 
                </select>
272 
                {errors.from_month && (
273 
                  <FormErrorFeedback>
274 
                    {errors.from_month.message}
275 
                  </FormErrorFeedback>
276 
                )}
277 
              </div>
278 
            </div>
279 
            <div className="input-c p-0">
280 
              <div className="form-group">
281 
                <select
282 
                  name="from_year"
283 
                  ref={register({ required: 'este campo es requerido' })}
284 
                  defaultValue=""
285 
                >
286 
                  <option value="">Año desde</option>
287 
                  {getYears().map((year) => (
288 
                    <option key={year} value={year}>
289 
                      {year}
290 
                    </option>
291 
                  ))}
292 
                </select>
293 
                {errors.from_year && (
294 
                  <FormErrorFeedback>
295 
                    {errors.from_year.message}
296 
                  </FormErrorFeedback>
297 
                )}
298 
              </div>
299 
            </div>
300 
          </div>
301 
          <label htmlFor="is_current"> Trabajo Actual</label>
302 
          <div className="form-group">
303 
            <SwitchInput
6881 stevensc 304 
              isChecked={watch('is_current' === 'y')}
6769 stevensc 305 
              setValue={(val) => setValue('is_current', val ? 'y' : 'n')}
306 
            />
307 
          </div>
6883 stevensc 308 
          {isCurrent !== 'y' && (
6769 stevensc 309 
            <div className="row profile-year">
310 
              <div className="input-c p-0">
311 
                <div className="form-group">
312 
                  <select
313 
                    name="to_month"
314 
                    id="to_month"
6881 stevensc 315 
                    ref={register}
6769 stevensc 316 
                    defaultValue=""
317 
                  >
318 
                    <option value="">Mes hasta</option>
319 
                    {getMonths().map((month, id) => (
320 
                      <option key={id} value={id + 1}>
321 
                        {month}
322 
                      </option>
323 
                    ))}
324 
                  </select>
325 
                  {errors.to_month && (
326 
                    <FormErrorFeedback>
327 
                      {errors.to_month.message}
328 
                    </FormErrorFeedback>
329 
                  )}
330 
                </div>
331 
              </div>
332 
              <div className="input-c p-0">
333 
                <div className="form-group">
334 
                  <select
335 
                    name="to_year"
336 
                    id="to_year"
6881 stevensc 337 
                    ref={register}
6769 stevensc 338 
                    defaultValue=""
339 
                  >
340 
                    <option value="">Año hasta</option>
341 
                    {getYears().map((year) => (
342 
                      <option key={year} value={year}>
343 
                        {year}
344 
                      </option>
345 
                    ))}
346 
                  </select>
347 
                  {errors.to_year && (
348 
                    <FormErrorFeedback>
349 
                      {errors.to_year.message}
350 
                    </FormErrorFeedback>
351 
                  )}
352 
                </div>
353 
              </div>
354 
            </div>
355 
          )}
356 
          <div className="form-group">
357 
            <CKEditor
358 
              onChange={(e) => setValue('description', e.editor.getData())}
6875 stevensc 359 
              onInstanceReady={(e) => e.editor.setData(watch('description'))}
6769 stevensc 360 
              config={CKEDITOR_OPTIONS}
361 
            />
362 
            {errors.description && (
363 
              <FormErrorFeedback>Este campo es requerido</FormErrorFeedback>
364 
            )}
365 
          </div>
366 
        </Modal.Body>
367 
        <Modal.Footer>
368 
          <Button size="sm" type="submit">
369 
            {labels.accept}
370 
          </Button>
371 
          <Button size="sm" variant="danger" onClick={handleModalOpen}>
372 
            {labels.cancel}
373 
          </Button>
374 
        </Modal.Footer>
375 
      </form>
376 
    </Modal>
377 
  )
378 
}
379 
 
380 
export default ExperienceModal