Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 496 Rev 655
Línea 11... Línea 11...
11 
import 'react-datetime/css/react-datetime.css'
 11 
import 'react-datetime/css/react-datetime.css'
Línea 12... Línea 12...
12 
 
 12 
 
13 
const ConferenceModal = ({
 13 
const ConferenceModal = ({
14 
  show = false,
 14 
  show = false,
15 
  zoomUrl = '',
 15 
  zoomUrl = '',
16 
  onClose = () => null,
 16 
  onClose = () => null
17 
}) => {
 17 
}) => {
18 
  const dt = new Date()
 18 
  const dt = new Date()
19 
  const [date, setDate] = useState({
 19 
  const [date, setDate] = useState({
20 
    year: dt.toLocaleString('default', { year: 'numeric' }),
 20 
    year: dt.toLocaleString('default', { year: 'numeric' }),
21 
    month: dt.toLocaleString('default', { month: '2-digit' }),
 21 
    month: dt.toLocaleString('default', { month: '2-digit' }),
22 
    day: dt.toLocaleString('default', { day: '2-digit' }),
 22 
    day: dt.toLocaleString('default', { day: '2-digit' })
23 
  })
 23 
  })
24 
  const [time, setTime] = useState(
 24 
  const [time, setTime] = useState(
25 
    dt.toLocaleString('es', {
 25 
    dt.toLocaleString('es', {
26 
      hour: 'numeric',
 26 
      hour: 'numeric',
27 
      minute: '2-digit',
 27 
      minute: '2-digit',
28 
      second: '2-digit',
 28 
      second: '2-digit'
29 
    })
 29 
    })
30 
  )
 30 
  )
31 
  const { data: timezones } = useFetchHelper('timezones')
 31 
  const { data: timezones } = useFetchHelper('timezones')
32 
  const labels = useSelector(({ intl }) => intl.labels)
 32 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 33... Línea 33...
33 
  const dispatch = useDispatch()
 33 
  const dispatch = useDispatch()
34 
 
 34 
 
35 
  const { handleSubmit, register, errors, reset, getValues } = useForm({
 35 
  const { handleSubmit, register, errors, reset, getValues } = useForm({
Línea 36... Línea 36...
36 
    mode: 'all',
 36 
    mode: 'all'
37 
  })
 37 
  })
38 
 
 38 
 
39 
  const handleDateTime = (value) => {
 39 
  const handleDateTime = (value) => {
40 
    setDate({
 40 
    setDate({
41 
      ...date,
 41 
      ...date,
42 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
 42 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
43 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
 43 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
44 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value),
 44 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
45 
    })
 45 
    })
46 
    setTime(
 46 
    setTime(
47 
      new Intl.DateTimeFormat('es', {
 47 
      new Intl.DateTimeFormat('es', {
48 
        hour: 'numeric',
 48 
        hour: 'numeric',
49 
        minute: '2-digit',
 49 
        minute: '2-digit',
50 
        second: 'numeric',
 50 
        second: 'numeric'
Línea 51... Línea 51...
51 
      }).format(value)
 51 
      }).format(value)
Línea 79... Línea 79...
79 
      }
 79 
      }
Línea 80... Línea 80...
80 
 
 80 
 
81 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
 81 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
82 
      onClose()
 82 
      onClose()
83 
      reset()
 83 
      reset()
84 
    } catch (error) {
 - 
 
85 
      dispatch(
 - 
 
86 
        addNotification({
 - 
 
87 
          msg: 'Ha ocurrido un error',
 84 
    } catch (err) {
88 
          style: 'danger',
 - 
 
89 
        })
 - 
 
90 
      )
 - 
 
91 
      throw new Error(error)
 85 
      dispatch(addNotification({ style: 'danger', msg: err.message }))
92 
    }
 86 
    }
Línea 93... Línea 87...
93 
  })
 87 
  })
94 
 
 88 
 
Línea 101... Línea 95...
101 
      <Modal.Header closeButton>
 95 
      <Modal.Header closeButton>
102 
        <Modal.Title>{labels.create_conference}</Modal.Title>
 96 
        <Modal.Title>{labels.create_conference}</Modal.Title>
103 
      </Modal.Header>
 97 
      </Modal.Header>
104 
      <Modal.Body>
 98 
      <Modal.Body>
105 
        <form onSubmit={onSubmit}>
 99 
        <form onSubmit={onSubmit}>
106 
          <div className="form-group">
 100 
          <div className='form-group'>
107 
            <label htmlFor="first_name">Título</label>
 101 
            <label htmlFor='first_name'>Título</label>
108 
            <input
 102 
            <input
109 
              type="text"
 103 
              type='text'
110 
              name="title"
 104 
              name='title'
111 
              className="form-control"
 105 
              className='form-control'
112 
              maxLength={128}
 106 
              maxLength={128}
113 
              ref={register({ required: 'Por favor ingrese un título' })}
 107 
              ref={register({ required: 'Por favor ingrese un título' })}
114 
            />
 108 
            />
115 
            {errors.title && (
 109 
            {errors.title && (
116 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
 110 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
117 
            )}
 111 
            )}
118 
          </div>
 112 
          </div>
119 
          <div className="form-group">
 113 
          <div className='form-group'>
120 
            <label htmlFor="first_name">Descripción</label>
 114 
            <label htmlFor='first_name'>Descripción</label>
121 
            <input
 115 
            <input
122 
              type="text"
 116 
              type='text'
123 
              name="description"
 117 
              name='description'
124 
              className="form-control"
 118 
              className='form-control'
125 
              ref={register({ required: 'Por favor ingrese una descripción' })}
 119 
              ref={register({ required: 'Por favor ingrese una descripción' })}
126 
            />
 120 
            />
127 
            {errors.description && (
 121 
            {errors.description && (
128 
              <FormErrorFeedback>
 122 
              <FormErrorFeedback>
129 
                {errors.description.message}
 123 
                {errors.description.message}
130 
              </FormErrorFeedback>
 124 
              </FormErrorFeedback>
131 
            )}
 125 
            )}
132 
          </div>
 126 
          </div>
133 
          <div className="form-group">
 127 
          <div className='form-group'>
134 
            <label htmlFor="timezone">Tipo de conferencia</label>
 128 
            <label htmlFor='timezone'>Tipo de conferencia</label>
135 
            <select name="type" className="form-control" ref={register}>
 129 
            <select name='type' className='form-control' ref={register}>
136 
              <option value="i">Inmediata</option>
 130 
              <option value='i'>Inmediata</option>
137 
              <option value="s">Programada</option>
 131 
              <option value='s'>Programada</option>
138 
            </select>
 132 
            </select>
139 
          </div>
 133 
          </div>
140 
          {getValues('type') === 's' && (
 134 
          {getValues('type') === 's' && (
141 
            <div className="form-group">
 135 
            <div className='form-group'>
142 
              <label htmlFor="timezone">Horario</label>
 136 
              <label htmlFor='timezone'>Horario</label>
143 
              <Datetime
 137 
              <Datetime
144 
                dateFormat="DD-MM-YYYY"
 138 
                dateFormat='DD-MM-YYYY'
145 
                onChange={(e) => {
 139 
                onChange={(e) => {
146 
                  if (e.toDate) {
 140 
                  if (e.toDate) {
147 
                    handleDateTime(e.toDate())
 141 
                    handleDateTime(e.toDate())
148 
                  }
 142 
                  }
149 
                }}
 143 
                }}
Línea 151... Línea 145...
151 
                initialValue={Date.parse(new Date())}
 145 
                initialValue={Date.parse(new Date())}
152 
                closeOnSelect
 146 
                closeOnSelect
153 
              />
 147 
              />
154 
            </div>
 148 
            </div>
155 
          )}
 149 
          )}
156 
          <div className="form-group">
 150 
          <div className='form-group'>
157 
            <label htmlFor="timezone">Zona horaria</label>
 151 
            <label htmlFor='timezone'>Zona horaria</label>
158 
            <select
 152 
            <select
159 
              className="form-control"
 153 
              className='form-control'
160 
              name="timezone"
 154 
              name='timezone'
161 
              ref={register({ required: 'Por favor elige una Zona horaria' })}
 155 
              ref={register({ required: 'Por favor elige una Zona horaria' })}
162 
              defaultValue="America/Montevideo"
 156 
              defaultValue='America/Montevideo'
163 
            >
 157 
            >
164 
              <option value="" hidden>
 158 
              <option value='' hidden>
165 
                Zona horaria
 159 
                Zona horaria
166 
              </option>
 160 
              </option>
167 
              {timezones.map(({ name, value }) => (
 161 
              {timezones.map(({ name, value }) => (
168 
                <option value={value} key={value}>
 162 
                <option value={value} key={value}>
169 
                  {name}
 163 
                  {name}
Línea 172... Línea 166...
172 
            </select>
 166 
            </select>
173 
            {errors.timezone && (
 167 
            {errors.timezone && (
174 
              <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
 168 
              <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
175 
            )}
 169 
            )}
176 
          </div>
 170 
          </div>
177 
          <div className="form-group">
 171 
          <div className='form-group'>
178 
            <label htmlFor="timezone">Duración</label>
 172 
            <label htmlFor='timezone'>Duración</label>
179 
            <select className="form-control" name="duration" ref={register}>
 173 
            <select className='form-control' name='duration' ref={register}>
180 
              <option value={5}>5-min</option>
 174 
              <option value={5}>5-min</option>
181 
              <option value={10}>10-min</option>
 175 
              <option value={10}>10-min</option>
182 
              <option value={15}>15-min</option>
 176 
              <option value={15}>15-min</option>
183 
              <option value={20}>20-min</option>
 177 
              <option value={20}>20-min</option>
184 
              <option value={25}>25-min</option>
 178 
              <option value={25}>25-min</option>
Línea 186... Línea 180...
186 
              <option value={35}>35-min</option>
 180 
              <option value={35}>35-min</option>
187 
              <option value={40}>40-min</option>
 181 
              <option value={40}>40-min</option>
188 
              <option value={45}>45-min</option>
 182 
              <option value={45}>45-min</option>
189 
            </select>
 183 
            </select>
190 
          </div>
 184 
          </div>
191 
          <div className="form-group">
 185 
          <div className='form-group'>
192 
            <label htmlFor="first_name">Contraseña de ingreso</label>
 186 
            <label htmlFor='first_name'>Contraseña de ingreso</label>
193 
            <input
 187 
            <input
194 
              defaultValue={generatePassword()}
 188 
              defaultValue={generatePassword()}
195 
              type="text"
 189 
              type='text'
196 
              name="password"
 190 
              name='password'
197 
              className="form-control"
 191 
              className='form-control'
198 
              ref={register({
 192 
              ref={register({
199 
                required: 'Por favor ingrese una contraseña',
 193 
                required: 'Por favor ingrese una contraseña',
200 
                maxLength: {
 194 
                maxLength: {
201 
                  value: 6,
 195 
                  value: 6,
202 
                  message: 'La contraseña debe tener al menos 6 digitos',
 196 
                  message: 'La contraseña debe tener al menos 6 digitos'
203 
                },
 197 
                }
204 
              })}
 198 
              })}
205 
            />
 199 
            />
206 
            {errors.password && (
 200 
            {errors.password && (
207 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 201 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
208 
            )}
 202 
            )}
209 
          </div>
 203 
          </div>
210 
          <button className="btn btn-primary" type="submit">
 204 
          <button className='btn btn-primary' type='submit'>
211 
            Crear
 205 
            Crear
212 
          </button>
 206 
          </button>
213 
        </form>
 207 
        </form>
214 
      </Modal.Body>
 208 
      </Modal.Body>
215 
    </Modal>
 209 
    </Modal>