Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2802 Rev 3432
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from "react";
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from "react-redux";
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from "react-hook-form";
4 
import Datetime from 'react-datetime'
 4 
import Datetime from "react-datetime";
5 
 
 5 
 
6 
import { axios } from '../../utils'
 6 
import { axios } from "../../utils";
7 
import { useFetchHelper } from '@hooks'
 7 
import { useFetchHelper } from "@hooks";
8 
import { addNotification } from 'store/notification/notification.actions'
 8 
import { addNotification } from "store/notification/notification.actions";
Línea 9... Línea 9...
9 
 
 9 
 
10 
import Modal from 'components/UI/modal/Modal'
 10 
import Modal from "components/UI/modal/Modal";
Línea 11... Línea 11...
11 
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
 11 
import FormErrorFeedback from "components/UI/form/FormErrorFeedback";
Línea 12... Línea 12...
12 
 
 12 
 
13 
import 'react-datetime/css/react-datetime.css'
 13 
import "react-datetime/css/react-datetime.css";
14 
 
 14 
 
15 
const ConferenceModal = ({
 15 
const ConferenceModal = ({
16 
  show = false,
 16 
  show = false,
17 
  zoomUrl = '',
 17 
  zoomUrl = "",
18 
  onClose = () => null
 18 
  onClose = () => null,
19 
}) => {
 19 
}) => {
20 
  const dt = new Date()
 20 
  const dt = new Date();
21 
  const [date, setDate] = useState({
 21 
  const [date, setDate] = useState({
22 
    year: dt.toLocaleString('default', { year: 'numeric' }),
 22 
    year: dt.toLocaleString("default", { year: "numeric" }),
23 
    month: dt.toLocaleString('default', { month: '2-digit' }),
 23 
    month: dt.toLocaleString("default", { month: "2-digit" }),
24 
    day: dt.toLocaleString('default', { day: '2-digit' })
 24 
    day: dt.toLocaleString("default", { day: "2-digit" }),
25 
  })
 25 
  });
26 
  const [time, setTime] = useState(
 26 
  const [time, setTime] = useState(
27 
    dt.toLocaleString('es', {
 27 
    dt.toLocaleString("es", {
28 
      hour: 'numeric',
 28 
      hour: "numeric",
29 
      minute: '2-digit',
 29 
      minute: "2-digit",
30 
      second: '2-digit'
 30 
      second: "2-digit",
31 
    })
 31 
    })
32 
  )
 32 
  );
Línea 33... Línea 33...
33 
  const { data: timezones } = useFetchHelper('timezones')
 33 
  const { data: timezones } = useFetchHelper("timezones");
34 
  const labels = useSelector(({ intl }) => intl.labels)
 34 
  const labels = useSelector(({ intl }) => intl.labels);
35 
  const dispatch = useDispatch()
 35 
  const dispatch = useDispatch();
36 
 
 36 
 
37 
  const {
 37 
  const {
38 
    handleSubmit,
 38 
    handleSubmit,
39 
    register,
 39 
    register,
40 
    reset,
 40 
    reset,
41 
    getValues,
 41 
    getValues,
Línea 42... Línea 42...
42 
    formState: { errors }
 42 
    formState: { errors },
43 
  } = useForm({
 43 
  } = useForm({
44 
    mode: 'all'
 44 
    mode: "all",
45 
  })
 45 
  });
46 
 
 46 
 
47 
  const handleDateTime = (value) => {
 47 
  const handleDateTime = (value) => {
48 
    setDate({
 48 
    setDate({
49 
      ...date,
 49 
      ...date,
50 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
 50 
      year: new Intl.DateTimeFormat("es", { year: "numeric" }).format(value),
51 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
 51 
      month: new Intl.DateTimeFormat("es", { month: "2-digit" }).format(value),
52 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
 52 
      day: new Intl.DateTimeFormat("es", { day: "2-digit" }).format(value),
53 
    })
 53 
    });
54 
    setTime(
 54 
    setTime(
55 
      new Intl.DateTimeFormat('es', {
 55 
      new Intl.DateTimeFormat("es", {
56 
        hour: 'numeric',
 56 
        hour: "numeric",
Línea 57... Línea 57...
57 
        minute: '2-digit',
 57 
        minute: "2-digit",
58 
        second: 'numeric'
 58 
        second: "numeric",
59 
      }).format(value)
 59 
      }).format(value)
Línea 60... Línea 60...
60 
    )
 60 
    );
61 
  }
 61 
  };
62 
 
 62 
 
63 
  const onSubmit = handleSubmit(async (data) => {
 63 
  const onSubmit = handleSubmit(async (conference) => {
64 
    try {
 64 
    try {
65 
      const formData = new FormData()
 65 
      const formData = new FormData();
66 
 
 66 
 
- 
 
 67 
      Object.entries(conference).forEach(([key, value]) =>
67 
      Object.entries(data).forEach(([key, value]) =>
 68 
        formData.append(key, value)
68 
        formData.append(key, value)
 69 
      );
69 
      )
 70 
      formData.append("date", `${date.year}-${date.month}-${date.day}`);
70 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
 71 
      formData.append("time", time);
71 
      formData.append('time', time)
 72 
 
Línea 72... Línea 73...
72 
 
 73 
      const response = await axios.post(zoomUrl, formData);
73 
      const { data: response } = await axios.post(zoomUrl, formData)
 74 
      const { data, success } = response.data;
74 
 
 75 
 
75 
      if (!response.success && typeof response.data === 'string') {
 76 
      if (!success && typeof data === "string") {
76 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
 77 
        dispatch(addNotification({ msg: data, style: "danger" }));
77 
        return
 78 
        return;
78 
      }
 79 
      }
79 
 
 80 
 
Línea 80... Línea 81...
80 
      if (!response.success && typeof response.data === 'object') {
 81 
      if (!success && typeof data === "object") {
81 
        Object.entries(response.data).forEach(([key, value]) => {
 82 
        Object.entries(data).forEach(([key, value]) => {
82 
          dispatch(
 83 
          dispatch(
83 
            addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' })
 84 
            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })
84 
          )
 85 
          );
85 
        })
 86 
        });
86 
        return
 87 
        return;
Línea 87... Línea 88...
87 
      }
 88 
      }
88 
 
 89 
 
89 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
 90 
      dispatch(addNotification({ msg: data, style: "success" }));
Línea 90... Línea 91...
90 
      onClose()
 91 
      onClose();
91 
      reset()
 92 
      reset();
92 
    } catch (err) {
 93 
    } catch (err) {
93 
      dispatch(addNotification({ style: 'danger', msg: err.message }))
 94 
      dispatch(addNotification({ style: "danger", msg: err.message }));
94 
    }
 95 
    }
95 
  })
 96 
  });
96 
 
 97 
 
97 
  const generatePassword = () => {
 98 
  const generatePassword = () => {
98 
    return Math.random().toString(36).slice(-6)
 99 
    return Math.random().toString(36).slice(-6);
99 
  }
 100 
  };
100 
 
 101 
 
101 
  return (
 102 
  return (
102 
    <Modal
 103 
    <Modal
103 
      title={labels.create_conference}
 104 
      title={labels.create_conference}
104 
      show={show}
 105 
      show={show}
105 
      onClose={onClose}
 106 
      onClose={onClose}
106 
      onAccept={onSubmit}
 107 
      onAccept={onSubmit}
107 
    >
 108 
    >
108 
      <div className='form-group'>
 109 
      <div className="form-group">
109 
        <label htmlFor='first_name'>Título</label>
 110 
        <label htmlFor="first_name">Título</label>
Línea 110... Línea 111...
110 
        <input
 111 
        <input
111 
          type='text'
 112 
          type="text"
112 
          name='title'
 113 
          name="title"
113 
          className='form-control'
 114 
          className="form-control"
114 
          maxLength={128}
 115 
          maxLength={128}
115 
          ref={register({ required: 'Por favor ingrese un título' })}
 116 
          ref={register({ required: "Por favor ingrese un título" })}
116 
        />
 117 
        />
117 
        {errors.title && (
 118 
        {errors.title && (
118 
          <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
 119 
          <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
119 
        )}
 120 
        )}
120 
      </div>
 121 
      </div>
121 
 
 122 
 
Línea 122... Línea 123...
122 
      <div className='form-group'>
 123 
      <div className="form-group">
123 
        <label htmlFor='first_name'>Descripción</label>
 124 
        <label htmlFor="first_name">Descripción</label>
124 
        <input
 125 
        <input
125 
          type='text'
 126 
          type="text"
126 
          name='description'
 127 
          name="description"
127 
          className='form-control'
 128 
          className="form-control"
128 
          ref={register({ required: 'Por favor ingrese una descripción' })}
 129 
          ref={register({ required: "Por favor ingrese una descripción" })}
Línea 129... Línea 130...
129 
        />
 130 
        />
130 
        {errors.description && (
 131 
        {errors.description && (
131 
          <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
 132 
          <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
132 
        )}
 133 
        )}
133 
      </div>
 134 
      </div>
134 
 
 135 
 
135 
      <div className='form-group'>
 136 
      <div className="form-group">
136 
        <label htmlFor='timezone'>Tipo de conferencia</label>
 137 
        <label htmlFor="timezone">Tipo de conferencia</label>
137 
        <select name='type' className='form-control' ref={register}>
 138 
        <select name="type" className="form-control" ref={register}>
138 
          <option value='i'>Inmediata</option>
 139 
          <option value="i">Inmediata</option>
139 
          <option value='s'>Programada</option>
 140 
          <option value="s">Programada</option>
140 
        </select>
 141 
        </select>
141 
      </div>
 142 
      </div>
142 
 
 143 
 
143 
      {getValues('type') === 's' && (
 144 
      {getValues("type") === "s" && (
144 
        <div className='form-group'>
 145 
        <div className="form-group">
Línea 145... Línea 146...
145 
          <label htmlFor='timezone'>Horario</label>
 146 
          <label htmlFor="timezone">Horario</label>
146 
          <Datetime
 147 
          <Datetime
147 
            dateFormat='DD-MM-YYYY'
 148 
            dateFormat="DD-MM-YYYY"
148 
            onChange={(e) => {
 149 
            onChange={(e) => {
149 
              if (e.toDate) {
 150 
              if (e.toDate) {
150 
                handleDateTime(e.toDate())
 151 
                handleDateTime(e.toDate());
151 
              }
 152 
              }
152 
            }}
 153 
            }}
153 
            inputProps={{ className: 'form-control' }}
 154 
            inputProps={{ className: "form-control" }}
154 
            initialValue={Date.parse(new Date())}
 155 
            initialValue={Date.parse(new Date())}
155 
            closeOnSelect
 156 
            closeOnSelect
156 
          />
 157 
          />
157 
        </div>
 158 
        </div>
158 
      )}
 159 
      )}
Línea 177... Línea 178...
177 
        {errors.timezone && (
 178 
        {errors.timezone && (
178 
          <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
 179 
          <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
179 
        )}
 180 
        )}
180 
      </div>
 181 
      </div>
Línea 181... Línea 182...
181 
 
 182 
 
182 
      <div className='form-group'>
 183 
      <div className="form-group">
183 
        <label htmlFor='timezone'>Duración</label>
 184 
        <label htmlFor="timezone">Duración</label>
184 
        <select className='form-control' name='duration' ref={register}>
 185 
        <select className="form-control" name="duration" ref={register}>
185 
          <option value={5}>5-min</option>
 186 
          <option value={5}>5-min</option>
186 
          <option value={10}>10-min</option>
 187 
          <option value={10}>10-min</option>
187 
          <option value={15}>15-min</option>
 188 
          <option value={15}>15-min</option>
188 
          <option value={20}>20-min</option>
 189 
          <option value={20}>20-min</option>
Línea 192... Línea 193...
192 
          <option value={40}>40-min</option>
 193 
          <option value={40}>40-min</option>
193 
          <option value={45}>45-min</option>
 194 
          <option value={45}>45-min</option>
194 
        </select>
 195 
        </select>
195 
      </div>
 196 
      </div>
Línea 196... Línea 197...
196 
 
 197 
 
197 
      <div className='form-group'>
 198 
      <div className="form-group">
198 
        <label htmlFor='first_name'>Contraseña de ingreso</label>
 199 
        <label htmlFor="first_name">Contraseña de ingreso</label>
199 
        <input
 200 
        <input
200 
          defaultValue={generatePassword()}
 201 
          defaultValue={generatePassword()}
201 
          type='text'
 202 
          type="text"
202 
          name='password'
 203 
          name="password"
203 
          className='form-control'
 204 
          className="form-control"
204 
          ref={register({
 205 
          ref={register({
205 
            required: 'Por favor ingrese una contraseña',
 206 
            required: "Por favor ingrese una contraseña",
206 
            maxLength: {
 207 
            maxLength: {
207 
              value: 6,
 208 
              value: 6,
208 
              message: 'La contraseña debe tener al menos 6 digitos'
 209 
              message: "La contraseña debe tener al menos 6 digitos",
209 
            }
 210 
            },
210 
          })}
 211 
          })}
211 
        />
 212 
        />
212 
        {errors.password && (
 213 
        {errors.password && (
213 
          <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 214 
          <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
214 
        )}
 215 
        )}
215 
      </div>
 216 
      </div>
216 
    </Modal>
 217 
    </Modal>
217 
  )
 218 
  );
Línea 218... Línea 219...
218 
}
 219 
};