Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 495 Rev 496
Línea 4... Línea 4...
4 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
 5 
import { useDispatch } from 'react-redux'
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 8... Línea 8...
8 
 
 8 
 
9 
import Spinner from '../UI/Spinner'
 9 
import Spinner from 'components/UI/Spinner'
10 
import LoaderContainer from '../UI/LoaderContainer'
 10 
import InputField from 'components/UI/InputField'
Línea 11... Línea 11...
11 
import FormErrorFeedback from '../UI/FormErrorFeedback'
 11 
import SelectField from 'components/UI/SelectField'
12 
 
 12 
 
13 
const AddGroupModal = ({ show, onHide, fetchGroups }) => {
 13 
const AddGroupModal = ({ show, onHide, fetchGroups }) => {
14 
  const [loading, setLoading] = useState(false)
 14 
  const [loading, setLoading] = useState(false)
Línea 53... Línea 53...
53 
  }
 53 
  }
Línea 54... Línea 54...
54 
 
 54 
 
55 
  return (
 55 
  return (
56 
    <Modal show={show} onHide={onHide}>
 56 
    <Modal show={show} onHide={onHide}>
57 
      <Modal.Header closeButton>
 57 
      <Modal.Header closeButton>
58 
        <Modal.Title id="contained-modal-title-vcenter">
 - 
 
59 
          Nuevo Grupo
 - 
 
60 
        </Modal.Title>
 58 
        <Modal.Title>Nuevo Grupo</Modal.Title>
61 
      </Modal.Header>
 - 
 
62 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
 59 
      </Modal.Header>
63 
        <Modal.Body>
 60 
      <Modal.Body>
64 
          <div style={{ position: 'relative' }}>
 - 
 
65 
            <div className="form-group">
 61 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
66 
              <input
 62 
          <InputField
67 
                type="text"
 63 
            type="text"
68 
                name="name"
 - 
 
69 
                id="name"
 - 
 
70 
                placeholder="Nombre del grupo"
 64 
            name="name"
71 
                ref={register({
 65 
            ref={register({
72 
                  required: 'Por favor ingrese el nombre del grupo',
 66 
              required: 'Por favor ingrese el nombre del grupo',
73 
                })}
 - 
 
74 
              />
 67 
            })}
75 
              {errors.name && (
 - 
 
76 
                <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
 - 
 
77 
              )}
 68 
            errors={errors}
78 
            </div>
 - 
 
79 
            <div className="form-group">
 69 
          />
80 
              <select
 70 
          <SelectField
81 
                name="type_id"
 71 
            name="type_id"
82 
                id="type_id"
 72 
            label="Tipo"
83 
                defaultValue=""
 73 
            options={groupTypes}
84 
                ref={register({
 74 
            ref={register({
85 
                  required: 'Por favor eliga un tipo',
 - 
 
86 
                })}
 75 
              required: 'Por favor eliga un tipo',
87 
              >
 - 
 
88 
                <option value="" hidden>
 - 
 
89 
                  Tipo
 - 
 
90 
                </option>
 - 
 
91 
                {groupTypes.map(({ name, value }) => (
 - 
 
92 
                  <option value={value} key={name}>
 - 
 
93 
                    {name}
 - 
 
94 
                  </option>
 - 
 
95 
                ))}
 - 
 
96 
              </select>
 76 
            })}
97 
              {errors.type_id && (
 - 
 
98 
                <FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
 - 
 
99 
              )}
 77 
            errors={errors}
100 
            </div>
 - 
 
101 
            <div className="form-group">
 78 
          />
102 
              <select
 79 
          <SelectField
103 
                name="industry_id"
 80 
            name="industry_id"
104 
                id="industry_id"
 81 
            label="Industria"
105 
                defaultValue=""
 82 
            options={industries}
106 
                ref={register({
 83 
            ref={register({
107 
                  required: 'Por favor eliga una industria',
 - 
 
108 
                })}
 84 
              required: 'Por favor eliga una industria',
109 
              >
 - 
 
110 
                <option value="" hidden>
 - 
 
111 
                  Industria
 - 
 
112 
                </option>
 - 
 
113 
                {industries.map(({ name, value }) => (
 - 
 
114 
                  <option value={value} key={value}>
 - 
 
115 
                    {name}
 - 
 
116 
                  </option>
 - 
 
117 
                ))}
 85 
            })}
118 
              </select>
 - 
 
119 
              {errors.industry_id && (
 - 
 
120 
                <FormErrorFeedback>
 - 
 
121 
                  {errors.industry_id.message}
 - 
 
122 
                </FormErrorFeedback>
 - 
 
123 
              )}
 86 
            errors={errors}
124 
            </div>
 - 
 
125 
 
 - 
 
126 
            {loading && (
 - 
 
127 
              <LoaderContainer>
 87 
          />
128 
                <Spinner />
 - 
 
129 
              </LoaderContainer>
 - 
 
130 
            )}
 - 
 
131 
          </div>
 - 
 
132 
        </Modal.Body>
 - 
 
133 
        <Modal.Footer>
 88 
          {loading && <Spinner />}
134 
          <Button type="submit">Crear</Button>
 89 
          <Button type="submit">Crear</Button>
135 
          <Button onClick={onHide} variant="danger">
 90 
          <Button onClick={onHide} variant="danger">
136 
            Cancelar
 91 
            Cancelar
137 
          </Button>
 92 
          </Button>
138 
        </Modal.Footer>
 93 
        </form>
139 
      </form>
 94 
      </Modal.Body>
140 
    </Modal>
 95 
    </Modal>
141 
  )
 96 
  )
Línea 142... Línea 97...
142 
}
 97 
}