Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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