Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 16274 Rev 16275
Línea 1... Línea 1...
1 
import React from "react";
 1 
import React, { useState } from "react";
2 
import Modal from "react-bootstrap/Modal";
 2 
import Modal from "react-bootstrap/Modal";
- 
 
 3 
import { useDispatch } from "react-redux";
- 
 
 4 
import Datetime from "react-datetime";
- 
 
 5 
import { axios } from "../../../../utils";
- 
 
 6 
import { addNotification } from "../../../../redux/notification/notification.actions";
Línea 3... Línea 7...
3 
 
 7 
 
4 
const ConferenceModal = ({
 8 
const ConferenceModal = ({
5 
  isShow = false,
 9 
  isShow = false,
6 
  timezones = {},
 10 
  timezones = {},
7 
  zoomUrl = "",
 11 
  zoomUrl = "",
8 
  onClose = () => null,
 12 
  onClose = () => null,
9 
  onCreate = () => null,
 13 
  onCreate = () => null,
- 
 
 14 
}) => {
- 
 
 15 
  const dt = new Date();
- 
 
 16 
  const { handleSubmit, register, errors, reset } = useForm({ mode: "all" });
- 
 
 17 
  const [date, setDate] = useState({
- 
 
 18 
    year: dt.toLocaleString("default", { year: "numeric" }),
- 
 
 19 
    month: dt.toLocaleString("default", { month: "2-digit" }),
- 
 
 20 
    day: dt.toLocaleString("default", { day: "2-digit" }),
- 
 
 21 
  });
- 
 
 22 
  const [time, setTime] = useState(
- 
 
 23 
    dt.toLocaleString("es", {
- 
 
 24 
      hour: "numeric",
- 
 
 25 
      minute: "2-digit",
- 
 
 26 
      second: "2-digit",
- 
 
 27 
    })
- 
 
 28 
  );
- 
 
 29 
  const [coferenceType, setConferenceType] = useState(1);
- 
 
 30 
 
- 
 
 31 
  const dispatch = useDispatch();
- 
 
 32 
 
- 
 
 33 
  const handleChange = (value) => {
- 
 
 34 
    setConferenceType(value);
- 
 
 35 
  };
- 
 
 36 
 
- 
 
 37 
  const handleDateTime = (value) => {
- 
 
 38 
    setDate({
- 
 
 39 
      ...date,
- 
 
 40 
      year: new Intl.DateTimeFormat("es", { year: "numeric" }).format(value),
- 
 
 41 
      month: new Intl.DateTimeFormat("es", { month: "2-digit" }).format(value),
- 
 
 42 
      day: new Intl.DateTimeFormat("es", { day: "2-digit" }).format(value),
- 
 
 43 
    });
- 
 
 44 
    setTime(
- 
 
 45 
      new Intl.DateTimeFormat("es", {
- 
 
 46 
        hour: "numeric",
- 
 
 47 
        minute: "2-digit",
- 
 
 48 
        second: "numeric",
- 
 
 49 
      }).format(value)
- 
 
 50 
    );
- 
 
 51 
  };
- 
 
 52 
 
- 
 
 53 
  const onSubmit = async (data) => {
- 
 
 54 
    try {
- 
 
 55 
      const formData = new FormData();
- 
 
 56 
 
- 
 
 57 
      Object.entries(data).forEach(([key, value]) =>
- 
 
 58 
        formData.append(key, value)
- 
 
 59 
      );
- 
 
 60 
      formData.append("date", `${date.year}-${date.month}-${date.day}`);
- 
 
 61 
      formData.append("time", time);
- 
 
 62 
 
- 
 
 63 
      const { data: response } = await axios.post(zoomUrl, formData);
- 
 
 64 
 
- 
 
 65 
      if (!response.success && typeof response.data === "string") {
- 
 
 66 
        dispatch(addNotification({ msg: response.data, style: "danger" }));
- 
 
 67 
        return;
- 
 
 68 
      }
- 
 
 69 
 
- 
 
 70 
      if (!response.success && typeof response.data === "object") {
- 
 
 71 
        Object.entries(response.data).forEach(([key, value]) => {
- 
 
 72 
          dispatch(
- 
 
 73 
            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })
- 
 
 74 
          );
- 
 
 75 
        });
- 
 
 76 
        return;
- 
 
 77 
      }
- 
 
 78 
 
- 
 
 79 
      dispatch(addNotification({ msg: response.data, style: "success" }));
- 
 
 80 
      onCreate();
- 
 
 81 
      reset();
- 
 
 82 
    } catch (error) {
- 
 
 83 
      console.log(`Error: ${error.message}`);
- 
 
 84 
      dispatch(
- 
 
 85 
        addNotification({ msg: "Ha ocurrido un error", style: "danger" })
- 
 
 86 
      );
- 
 
 87 
    }
- 
 
 88 
  };
10 
}) => {
 89 
 
11 
  return (
 90 
  return (
12 
    <Modal show={isShow} onHide={onClose}>
 91 
    <Modal show={isShow} onHide={onClose}>
13 
      <Modal.Header closeButton>
 92 
      <Modal.Header closeButton>
14 
        <Modal.Title>Crear Conferencia</Modal.Title>
 93 
        <Modal.Title>Crear Conferencia</Modal.Title>
15 
      </Modal.Header>
 94 
      </Modal.Header>
16 
      <Modal.Body>
 95 
      <Modal.Body>
17 
        <form autoComplete="new-password">
 96 
        <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
18 
          <div className="form-group">
 97 
          <div className="form-group">
19 
            <label htmlFor="first_name">Título</label>
 98 
            <label htmlFor="first_name">Título</label>
20 
            <input
 99 
            <input
21 
              type="text"
 100 
              type="text"
22 
              name="title"
 101 
              name="title"
23 
              className="form-control"
 102 
              className="form-control"
- 
 
 103 
              maxLength={128}
24 
              maxLength={128}
 104 
              ref={register({ required: "Por favor ingrese un título" })}
- 
 
 105 
            />
- 
 
 106 
            {errors.title && (
- 
 
 107 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
25 
            />
 108 
            )}
26 
          </div>
 109 
          </div>
27 
          <div className="form-group">
 110 
          <div className="form-group">
- 
 
 111 
            <label htmlFor="first_name">Descripción</label>
- 
 
 112 
            <input
- 
 
 113 
              type="text"
28 
            <label htmlFor="first_name">Descripción</label>
 114 
              name="description"
- 
 
 115 
              className="form-control"
- 
 
 116 
              ref={register({ required: "Por favor ingrese una descripción" })}
- 
 
 117 
            />
- 
 
 118 
            {errors.description && (
- 
 
 119 
              <FormErrorFeedback>
- 
 
 120 
                {errors.description.message}
- 
 
 121 
              </FormErrorFeedback>
29 
            <input type="text" name="description" className="form-control" />
 122 
            )}
30 
          </div>
 123 
          </div>
31 
          <div className="form-group">
 124 
          <div className="form-group">
- 
 
 125 
            <label htmlFor="timezone">Tipo de conferencia</label>
- 
 
 126 
            <select
32 
            <label htmlFor="timezone">Tipo de conferencia</label>
 127 
              name="type"
- 
 
 128 
              className="form-control"
- 
 
 129 
              onChange={({ target }) => handleChange(target.value)}
- 
 
 130 
              ref={register}
33 
            <select name="type" className="form-control">
 131 
            >
34 
              <option value="i">Inmediata</option>
 132 
              <option value="i">Inmediata</option>
35 
              <option value="s">Programada</option>
 133 
              <option value="s">Programada</option>
36 
            </select>
 134 
            </select>
- 
 
 135 
          </div>
- 
 
 136 
          {coferenceType === "s" && (
- 
 
 137 
            <div className="form-group">
- 
 
 138 
              <label htmlFor="timezone">Horario</label>
- 
 
 139 
              <Datetime
- 
 
 140 
                dateFormat="DD-MM-YYYY"
- 
 
 141 
                onChange={(e) => e.toDate && handleDateTime(e.toDate())}
- 
 
 142 
                inputProps={{ className: "form-control" }}
- 
 
 143 
                initialValue={Date.parse(new Date())}
- 
 
 144 
                closeOnSelect
- 
 
 145 
              />
- 
 
 146 
            </div>
37 
          </div>
 147 
          )}
38 
          <div className="form-group">
 148 
          <div className="form-group">
- 
 
 149 
            <label htmlFor="timezone">Zona horaria</label>
39 
            <label htmlFor="timezone">Zona horaria</label>
 150 
            <select
- 
 
 151 
              className="form-control"
- 
 
 152 
              name="timezone"
- 
 
 153 
              ref={register({ required: "Por favor elige una Zona horaria" })}
40 
            <select className="form-control" name="timezone">
 154 
            >
41 
              <option value="" hidden>
 155 
              <option value="" hidden>
42 
                Zona horaria
 156 
                Zona horaria
- 
 
 157 
              </option>
- 
 
 158 
              {Object.entries(timezones).map(([key, value]) => (
- 
 
 159 
                <option value={key} key={key}>
- 
 
 160 
                  {value}
- 
 
 161 
                </option>
43 
              </option>
 162 
              ))}
- 
 
 163 
            </select>
- 
 
 164 
            {errors.timezone && (
- 
 
 165 
              <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
44 
            </select>
 166 
            )}
45 
          </div>
 167 
          </div>
46 
          <div className="form-group">
 168 
          <div className="form-group">
47 
            <label htmlFor="timezone">Duración</label>
 169 
            <label htmlFor="timezone">Duración</label>
48 
            <select className="form-control" name="duration">
 170 
            <select className="form-control" name="duration" ref={register}>
49 
              <option value={5}>5-min</option>
 171 
              <option value={5}>5-min</option>
50 
              <option value={10}>10-min</option>
 172 
              <option value={10}>10-min</option>
51 
              <option value={15}>15-min</option>
 173 
              <option value={15}>15-min</option>
52 
              <option value={20}>20-min</option>
 174 
              <option value={20}>20-min</option>
Línea 57... Línea 179...
57 
              <option value={45}>45-min</option>
 179 
              <option value={45}>45-min</option>
58 
            </select>
 180 
            </select>
59 
          </div>
 181 
          </div>
60 
          <div className="form-group">
 182 
          <div className="form-group">
61 
            <label htmlFor="first_name">Contraseña de ingreso</label>
 183 
            <label htmlFor="first_name">Contraseña de ingreso</label>
- 
 
 184 
            <input
- 
 
 185 
              type="password"
- 
 
 186 
              name="password"
- 
 
 187 
              className="form-control"
- 
 
 188 
              ref={register({
- 
 
 189 
                required: "Por favor ingrese una contraseña",
- 
 
 190 
                maxLength: {
- 
 
 191 
                  value: 6,
- 
 
 192 
                  message: "La contraseña debe tener al menos 6 digitos",
- 
 
 193 
                },
- 
 
 194 
              })}
- 
 
 195 
            />
- 
 
 196 
            {errors.password && (
62 
            <input type="password" name="password" className="form-control" />
 197 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
- 
 
 198 
            )}
63 
          </div>
 199 
          </div>
64 
          <button className="btn btn-primary" type="submit">
 200 
          <button className="btn btn-primary" type="submit">
65 
            Crear
 201 
            Crear
66 
          </button>
 202 
          </button>
67 
        </form>
 203 
        </form>