Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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