Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1437 | Rev 1929 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1437 Rev 1456
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { axios } from '../../utils'
 - 
 
3 
import { Modal } from 'react-bootstrap'
 - 
 
4 
import { useForm } from 'react-hook-form'
 - 
 
5 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
6 
import { addNotification } from '../../redux/notification/notification.actions'
 3 
import { useForm } from 'react-hook-form'
Línea 7... Línea 4...
7 
 
 4 
 
8 
import Spinner from '../UI/Spinner'
 5 
import { axios } from 'utils/index'
9 
import FormErrorFeedback from '../UI/form/FormErrorFeedback'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
Línea -... Línea 7...
- 
 
 7 
import useFetchHelper from '../../hooks/useFetchHelper'
- 
 
 8 
 
- 
 
 9 
import Modal from 'components/UI/modal/Modal'
- 
 
 10 
import Spinner from 'components/UI/Spinner'
10 
import useFetchHelper from '../../hooks/useFetchHelper'
 11 
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
11 
 
 12 
 
12 
const AddCompanyModal = ({
 13 
const AddCompanyModal = ({
13 
  show = false,
 14 
  show = false,
14 
  onHide = () => null,
 15 
  onHide = () => null,
15 
  fetchCompanies = () => []
 - 
 
16 
}) => {
 16 
  fetchCompanies = () => []
17 
  const [loading, setLoading] = useState(false)
 17 
}) => {
- 
 
 18 
  const { data: companySizes } = useFetchHelper('company-sizes')
18 
  const { data: companySizes } = useFetchHelper('company-sizes')
 19 
  const { data: industries } = useFetchHelper('industries')
19 
  const { data: industries } = useFetchHelper('industries')
 20 
  const [loading, setLoading] = useState(false)
Línea 20... Línea 21...
20 
  const labels = useSelector(({ intl }) => intl.labels)
 21 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 21... Línea 22...
21 
  const dispatch = useDispatch()
 22 
  const dispatch = useDispatch()
22 
 
 23 
 
23 
  const { register, handleSubmit, errors } = useForm()
 24 
  const { register, handleSubmit, errors } = useForm()
Línea 24... Línea 25...
24 
 
 25 
 
Línea 48... Línea 49...
48 
      })
 49 
      })
49 
      .catch((err) => {
 50 
      .catch((err) => {
50 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 51 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
51 
      })
 52 
      })
52 
      .finally(() => setLoading(false))
 53 
      .finally(() => setLoading(false))
53 
  }
 54 
  })
Línea 54... Línea 55...
54 
 
 55 
 
55 
  return (
 - 
 
56 
    <Modal show={show} onHide={onHide}>
 56 
  return (
57 
      <Modal.Header closeButton>
 57 
    <Modal
58 
        <Modal.Title>{labels.new_company}</Modal.Title>
 58 
      title={labels.new_company}
59 
      </Modal.Header>
 59 
      show={show}
60 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 60 
      onClose={onHide}
- 
 
 61 
      onAccept={onSubmit}
61 
        <Modal.Body className='position-relative'>
 62 
    >
62 
          <div className='form-group'>
 63 
      <div className='form-group'>
63 
            <input
 64 
        <input
64 
              type='text'
 65 
          type='text'
65 
              name='name'
 66 
          name='name'
66 
              placeholder={labels.name_of_company}
 67 
          placeholder={labels.name_of_company}
67 
              ref={register({
 68 
          ref={register({
68 
                required: 'Por favor ingrese el nombre de la Empresa'
 69 
            required: 'Por favor ingrese el nombre de la Empresa'
69 
              })}
 70 
          })}
70 
            />
 71 
        />
71 
            {errors.name && (
 72 
        {errors.name && (
72 
              <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
 73 
          <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
73 
            )}
 74 
        )}
74 
          </div>
 75 
      </div>
75 
 
 76 
 
76 
          <div className='form-group'>
 77 
      <div className='form-group'>
77 
            <select
 78 
        <select
78 
              name='industry_id'
 79 
          name='industry_id'
79 
              ref={register({
 80 
          ref={register({
80 
                required: labels.select_industry
 81 
            required: labels.select_industry
81 
              })}
 82 
          })}
82 
            >
 83 
        >
83 
              <option value='' hidden>
 84 
          <option value='' hidden>
84 
                {labels.industry}
 85 
            {labels.industry}
85 
              </option>
 86 
          </option>
86 
              {industries.map(({ name, value }) => (
 87 
          {industries.map(({ name, value }) => (
87 
                <option value={value} key={value}>
 88 
            <option value={value} key={value}>
88 
                  {name}
 89 
              {name}
89 
                </option>
 90 
            </option>
90 
              ))}
 91 
          ))}
91 
            </select>
 92 
        </select>
92 
            {errors.industry_id && (
 - 
 
93 
              <FormErrorFeedback>
 93 
        {errors.industry_id && (
94 
                {errors.industry_id.message}
 - 
 
95 
              </FormErrorFeedback>
 94 
          <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>
96 
            )}
 95 
        )}
97 
          </div>
 96 
      </div>
98 
 
 97 
 
99 
          <div className='form-group'>
 98 
      <div className='form-group'>
100 
            <select
 99 
        <select
101 
              name='company_size_id'
 100 
          name='company_size_id'
102 
              ref={register({
 101 
          ref={register({
103 
                required: labels.select_company_size
 102 
            required: labels.select_company_size
104 
              })}
 103 
          })}
105 
            >
 104 
        >
106 
              <option value='' hidden>
 105 
          <option value='' hidden>
107 
                {labels.company_size}
 106 
            {labels.company_size}
108 
              </option>
 107 
          </option>
109 
              {companySizes.map(({ name, value }) => (
 108 
          {companySizes.map(({ name, value }) => (
110 
                <option value={value} key={value}>
 109 
            <option value={value} key={value}>
111 
                  {name}
 110 
              {name}
112 
                </option>
 111 
            </option>
113 
              ))}
 112 
          ))}
114 
            </select>
 113 
        </select>
115 
            {errors.company_size_id && (
 114 
        {errors.company_size_id && (
116 
              <FormErrorFeedback>
 115 
          <FormErrorFeedback>
117 
                {errors.company_size_id.message}
 116 
            {errors.company_size_id.message}
118 
              </FormErrorFeedback>
 117 
          </FormErrorFeedback>
119 
            )}
 118 
        )}
120 
          </div>
 119 
      </div>
121 
 
 120 
 
122 
          {loading && <Spinner />}
 - 
 
123 
        </Modal.Body>
 - 
 
124 
        <Modal.Footer>
 - 
 
125 
          <button type='submit' className='btn btn-primary'>
 - 
 
126 
            {labels.accept}
 - 
 
127 
          </button>
 - 
 
128 
          <button type='button' className='btn btn-secondary' onClick={onHide}>
 - 
 
129 
            {labels.cancel}
 - 
 
130 
          </button>
 - 
 
131 
        </Modal.Footer>
 - 
 
132 
      </form>
 121 
      {loading && <Spinner />}
133 
    </Modal>
 122 
    </Modal>
134 
  )
 123 
  )
Línea 135... Línea 124...
135 
}
 124 
}