Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16261 | Rev 16266 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16255 stevensc 1 
import React, { useState, useEffect } from "react";
16253 stevensc 2 
import { axios } from "../../../../utils";
3 
import { useDispatch } from "react-redux";
16254 stevensc 4 
import { useForm } from "react-hook-form";
16256 stevensc 5 
import { Modal } from "@mui/material";
6 
import Datetime from "react-datetime";
16253 stevensc 7 
 
16256 stevensc 8 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
9 
 
16253 stevensc 10 
const ConferenceModal = ({
11 
  show = false,
12 
  timezones = {},
13 
  zoomUrl = "",
14 
  onCreate = () => null,
15 
}) => {
16264 stevensc 16 
  const { handleSubmit, register, errors } = useForm({ mode: "all" });
16253 stevensc 17 
  const [coferenceType, setConferenceType] = useState(1);
18 
  const [isShow, setIsShow] = useState(show);
19 
 
16261 stevensc 20 
  const closeModal = () => {
21 
    setIsShow(false);
22 
  };
16253 stevensc 23 
 
16261 stevensc 24 
  const handleChange = (value) => {
25 
    setConferenceType(value);
26 
  };
16253 stevensc 27 
 
16261 stevensc 28 
  useEffect(() => {
29 
    setIsShow(show);
30 
  }, [show]);
31 
 
16253 stevensc 32 
  return (
33 
    <Modal show={isShow} onHide={closeModal}>
34 
      <Modal.Header closeButton>
35 
        <Modal.Title>Crear Conferencia</Modal.Title>
36 
      </Modal.Header>
16264 stevensc 37 
      <Modal.Body>
38 
        <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
39 
          <div className="form-group">
40 
            <label htmlFor="first_name">Título</label>
41 
            <input
42 
              type="text"
43 
              name="title"
44 
              className="form-control"
45 
              maxLength={128}
46 
              ref={register({ required: "Por favor ingrese un título" })}
47 
            />
48 
            {errors.title && (
49 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
50 
            )}
51 
          </div>
52 
          <div className="form-group">
53 
            <label htmlFor="first_name">Descripción</label>
54 
            <input
55 
              type="text"
56 
              name="description"
57 
              className="form-control"
58 
              ref={register({ required: "Por favor ingrese una descripción" })}
59 
            />
60 
            {errors.description && (
61 
              <FormErrorFeedback>
62 
                {errors.description.message}
63 
              </FormErrorFeedback>
64 
            )}
65 
          </div>
66 
          <div className="form-group">
67 
            <label htmlFor="timezone">Tipo de conferencia</label>
68 
            <select
69 
              name="type"
70 
              className="form-control"
71 
              onChange={({ target }) => handleChange(target.value)}
72 
              ref={register}
73 
            >
74 
              <option value="i">Inmediata</option>
75 
              <option value="s">Programada</option>
76 
            </select>
77 
          </div>
78 
          <div className="form-group">
79 
            <label htmlFor="timezone">Zona horaria</label>
80 
            <select
81 
              className="form-control"
82 
              name="timezone"
83 
              ref={register({ required: "Por favor elige una Zona horaria" })}
84 
            >
85 
              <option value="" hidden>
86 
                Zona horaria
87 
              </option>
88 
              {Object.entries(timezones).map(([key, value]) => (
89 
                <option value={key} key={key}>
90 
                  {value}
91 
                </option>
92 
              ))}
93 
            </select>
94 
            {errors.timezone && (
95 
              <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
96 
            )}
97 
          </div>
98 
          <div className="form-group">
99 
            <label htmlFor="timezone">Duración</label>
100 
            <select className="form-control" name="duration" ref={register}>
101 
              <option value={5}>5-min</option>
102 
              <option value={10}>10-min</option>
103 
              <option value={15}>15-min</option>
104 
              <option value={20}>20-min</option>
105 
              <option value={25}>25-min</option>
106 
              <option value={30}>30-min</option>
107 
              <option value={35}>35-min</option>
108 
              <option value={40}>40-min</option>
109 
              <option value={45}>45-min</option>
110 
            </select>
111 
          </div>
112 
          <div className="form-group">
113 
            <label htmlFor="first_name">Contraseña de ingreso</label>
114 
            <input
115 
              type="password"
116 
              name="password"
117 
              className="form-control"
118 
              ref={register({
119 
                required: "Por favor ingrese una contraseña",
120 
                maxLength: {
121 
                  value: 6,
122 
                  message: "La contraseña debe tener al menos 6 digitos",
123 
                },
124 
              })}
125 
            />
126 
            {errors.password && (
127 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
128 
            )}
129 
          </div>
130 
          <button className="btn btn-primary" type="submit">
131 
            Crear
132 
          </button>
133 
        </form>
134 
      </Modal.Body>
16253 stevensc 135 
    </Modal>
136 
  );
137 
};
138 
 
139 
export default ConferenceModal;