Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1437 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1437 Rev 1460
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
 - 
 
3 
import { axios } from '../../utils'
 - 
 
4 
import { useForm } from 'react-hook-form'
 - 
 
5 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
- 
 
 3 
import { useForm } from 'react-hook-form'
- 
 
 4 
 
- 
 
 5 
import { axios } from '../../utils'
6 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
7 
import useFetchHelper from '../../hooks/useFetchHelper'
 7 
import useFetchHelper from '../../hooks/useFetchHelper'
Línea -... Línea 8...
- 
 
 8 
 
8 
 
 9 
import Modal from 'components/UI/modal/Modal'
9 
import Spinner from 'components/UI/Spinner'
 10 
import Spinner from 'components/UI/Spinner'
Línea 10... Línea 11...
10 
import FormErrorFeedback from '../UI/form/FormErrorFeedback'
 11 
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
11 
 
 12 
 
12 
const AddGroupModal = ({ show, onHide, fetchGroups }) => {
 13 
const AddGroupModal = ({ show, onHide, fetchGroups }) => {
13 
  const [loading, setLoading] = useState(false)
 14 
  const [loading, setLoading] = useState(false)
14 
  const { data: groupTypes } = useFetchHelper('group-types')
 15 
  const { data: groupTypes } = useFetchHelper('group-types')
Línea 15... Línea 16...
15 
  const { data: industries } = useFetchHelper('industries')
 16 
  const { data: industries } = useFetchHelper('industries')
Línea 16... Línea 17...
16 
  const dispatch = useDispatch()
 17 
  const dispatch = useDispatch()
17 
 
 18 
 
18 
  const { register, handleSubmit, errors, setError } = useForm()
 19 
  const { register, handleSubmit, errors, setError } = useForm()
19 
 
 20 
 
Línea 20... Línea 21...
20 
  const onSubmitHandler = (data) => {
 21 
  const onSubmit = handleSubmit((data) => {
Línea 49... Línea 50...
49 
      })
 50 
      })
50 
      .catch((err) => {
 51 
      .catch((err) => {
51 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 52 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
52 
      })
 53 
      })
53 
      .finally(() => setLoading(false))
 54 
      .finally(() => setLoading(false))
54 
  }
 55 
  })
Línea 55... Línea 56...
55 
 
 56 
 
56 
  return (
 57 
  return (
57 
    <Modal show={show} onHide={onHide}>
 - 
 
58 
      <Modal.Header closeButton>
 - 
 
59 
        <Modal.Title>Nuevo Grupo</Modal.Title>
 - 
 
60 
      </Modal.Header>
 - 
 
61 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 - 
 
62 
        <Modal.Body>
 58 
    <Modal title='Nuevo Grupo' show={show} onClose={onHide} onAccept={onSubmit}>
63 
          <div className='form-group'>
 59 
      <div className='form-group'>
64 
            <input
 60 
        <input
65 
              type='text'
 61 
          type='text'
66 
              name='name'
 62 
          name='name'
67 
              id='name'
 63 
          id='name'
68 
              placeholder='Nombre del grupo'
 64 
          placeholder='Nombre del grupo'
69 
              ref={register({
 65 
          ref={register({
70 
                required: 'Por favor ingrese el nombre del grupo'
 66 
            required: 'Por favor ingrese el nombre del grupo'
71 
              })}
 67 
          })}
72 
            />
 68 
        />
73 
            {errors.name && (
 69 
        {errors.name && (
74 
              <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
 70 
          <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
75 
            )}
 71 
        )}
76 
          </div>
 72 
      </div>
77 
 
 73 
 
78 
          <div className='form-group'>
 74 
      <div className='form-group'>
79 
            <select
 75 
        <select
80 
              name='type_id'
 76 
          name='type_id'
81 
              id='type_id'
 77 
          id='type_id'
82 
              defaultValue=''
 78 
          defaultValue=''
83 
              ref={register({
 79 
          ref={register({
84 
                required: 'Por favor eliga un tipo'
 80 
            required: 'Por favor eliga un tipo'
85 
              })}
 81 
          })}
86 
            >
 82 
        >
87 
              <option value='' hidden>
 83 
          <option value='' hidden>
88 
                Tipo
 84 
            Tipo
89 
              </option>
 85 
          </option>
90 
              {groupTypes.map(({ name, value }) => (
 86 
          {groupTypes.map(({ name, value }) => (
91 
                <option value={value} key={name}>
 87 
            <option value={value} key={name}>
92 
                  {name}
 88 
              {name}
93 
                </option>
 89 
            </option>
94 
              ))}
 90 
          ))}
95 
            </select>
 91 
        </select>
96 
            {errors.type_id && (
 92 
        {errors.type_id && (
97 
              <FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
 93 
          <FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
98 
            )}
 94 
        )}
99 
          </div>
 95 
      </div>
100 
 
 96 
 
101 
          <div className='form-group'>
 97 
      <div className='form-group'>
102 
            <select
 98 
        <select
103 
              name='industry_id'
 99 
          name='industry_id'
104 
              id='industry_id'
 100 
          id='industry_id'
105 
              defaultValue=''
 101 
          defaultValue=''
106 
              ref={register({
 102 
          ref={register({
107 
                required: 'Por favor eliga una industria'
 103 
            required: 'Por favor eliga una industria'
108 
              })}
 104 
          })}
109 
            >
 105 
        >
110 
              <option value='' hidden>
 106 
          <option value='' hidden>
111 
                Industria
 107 
            Industria
112 
              </option>
 108 
          </option>
113 
              {industries.map(({ name, value }) => (
 109 
          {industries.map(({ name, value }) => (
114 
                <option value={value} key={value}>
 110 
            <option value={value} key={value}>
115 
                  {name}
 111 
              {name}
116 
                </option>
 112 
            </option>
117 
              ))}
 113 
          ))}
118 
            </select>
 114 
        </select>
119 
            {errors.industry_id && (
 - 
 
120 
              <FormErrorFeedback>
 115 
        {errors.industry_id && (
121 
                {errors.industry_id.message}
 - 
 
122 
              </FormErrorFeedback>
 116 
          <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>
123 
            )}
 117 
        )}
124 
          </div>
 118 
      </div>
125 
 
 119 
 
126 
          {loading && <Spinner />}
 - 
 
127 
        </Modal.Body>
 - 
 
128 
        <Modal.Footer>
 - 
 
129 
          <Button type='submit'>Crear</Button>
 - 
 
130 
          <Button onClick={onHide}>Cancelar</Button>
 - 
 
131 
        </Modal.Footer>
 - 
 
132 
      </form>
 120 
      {loading && <Spinner />}
133 
    </Modal>
 121 
    </Modal>
134 
  )
 122 
  )
Línea 135... Línea 123...
135 
}
 123 
}