Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3274 Rev 3432
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from "react";
2 
import { axios } from '../../utils'
 2 
import { axios } from "../../utils";
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from "react-redux";
4 
import { addNotification } from 'store/notification/notification.actions'
 4 
import { addNotification } from "store/notification/notification.actions";
5 
import { Grid } from '@mui/material'
 5 
import { Grid } from "@mui/material";
6 
import { Calendar, momentLocalizer } from 'react-big-calendar'
 6 
import { Calendar, momentLocalizer } from "react-big-calendar";
7 
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 7 
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
8 
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 8 
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
9 
import moment from 'moment'
 9 
import moment from "moment";
Línea 10... Línea 10...
10 
 
 10 
 
11 
import EventsList from 'components/calendar/EventsList'
 11 
import EventsList from "components/calendar/EventsList";
Línea 12... Línea 12...
12 
import EventModal from 'components/calendar/EventModal'
 12 
import EventModal from "components/calendar/EventModal";
Línea 13... Línea 13...
13 
 
 13 
 
14 
import 'react-big-calendar/lib/sass/styles.scss'
 14 
import "react-big-calendar/lib/sass/styles.scss";
Línea 15... Línea 15...
15 
 
 15 
 
16 
moment.locale('es')
 16 
moment.locale("es");
17 
const localizer = momentLocalizer(moment)
 17 
const localizer = momentLocalizer(moment);
18 
 
 18 
 
19 
const CalendarPage = () => {
 19 
const CalendarPage = () => {
Línea 20... Línea 20...
20 
  const [events, setEvents] = useState([])
 20 
  const [events, setEvents] = useState([]);
21 
  const [selectedEvent, setSelectedEvent] = useState(null)
 21 
  const [selectedEvent, setSelectedEvent] = useState(null);
22 
  const [modalShow, setModalShow] = useState(false)
 22 
  const [modalShow, setModalShow] = useState(false);
23 
  const dispatch = useDispatch()
 23 
  const dispatch = useDispatch();
Línea 24... Línea 24...
24 
 
 24 
 
25 
  const selectEvent = (event) => {
 25 
  const selectEvent = (event) => {
26 
    setSelectedEvent(event)
 26 
    setSelectedEvent(event);
27 
    setModalShow(true)
 27 
    setModalShow(true);
Línea 28... Línea 28...
28 
  }
 28 
  };
29 
 
 29 
 
30 
  const unselectEvent = () => {
 30 
  const unselectEvent = () => {
31 
    setSelectedEvent(null)
 31 
    setSelectedEvent(null);
32 
    setModalShow(false)
 32 
    setModalShow(false);
Línea 33... Línea 33...
33 
  }
 33 
  };
34 
 
 34 
 
35 
  useEffect(() => {
 35 
  useEffect(() => {
36 
    axios
 36 
    axios
37 
      .get('/calendar/events')
 37 
      .get("/calendar/events")
38 
      .then(({ data: responseData }) => {
 38 
      .then((response) => {
39 
        const { data, success } = responseData
 39 
        const { data, success } = response.data;
Línea 40... Línea 40...
40 
 
 40 
 
41 
        if (!success) {
 41 
        if (!success) {
42 
          const errorMessage =
 42 
          const errorMessage =
43 
            typeof data === 'string'
 43 
            typeof data === "string"
44 
              ? data
 44 
              ? data
45 
              : 'Error interno. Por favor, intente más tarde.'
 45 
              : "Error interno. Por favor, intente más tarde.";
46 
          throw new Error(errorMessage)
 46 
          throw new Error(errorMessage);
47 
        }
 47 
        }
Línea 48... Línea 48...
48 
 
 48 
 
49 
        const formattedEvents = data.map((event) => {
 49 
        const formattedEvents = data.map((event) => {
50 
          if (event.allDay) {
 50 
          if (event.allDay) {
51 
            return {
 51 
            return {
52 
              ...event,
 52 
              ...event,
53 
              start: new Date(event.start.replace('-', '/')),
 53 
              start: new Date(event.start.replace("-", "/")),
Línea 54... Línea 54...
54 
              end: new Date(event.start.replace('-', '/'))
 54 
              end: new Date(event.start.replace("-", "/")),
55 
            }
 55 
            };
56 
          }
 56 
          }
57 
 
 57 
 
58 
          return {
 58 
          return {
59 
            ...event,
 59 
            ...event,
Línea 60... Línea 60...
60 
            start: new Date(event.start),
 60 
            start: new Date(event.start),
61 
            end: new Date(event.end)
 61 
            end: new Date(event.end),
62 
          }
 62 
          };
63 
        })
 63 
        });
64 
 
 64 
 
65 
        setEvents(formattedEvents)
 65 
        setEvents(formattedEvents);
66 
      })
 66 
      })
67 
      .catch((err) => {
 67 
      .catch((err) => {
68 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 68 
        dispatch(addNotification({ style: "danger", msg: err.message }));
69 
      })
 69 
      });
70 
  }, [])
 70 
  }, []);
71 
 
 71 
 
72 
  return (
 72 
  return (
73 
    <>
 73 
    <>
74 
      <Grid container spacing={1}>
 74 
      <Grid container spacing={1}>
75 
        <Grid item xs={12} md={8} spacing={3}>
 75 
        <Grid item xs={12} md={8} spacing={3}>
76 
          <Calendar
 76 
          <Calendar
77 
            localizer={localizer}
 77 
            localizer={localizer}
78 
            events={events}
 78 
            events={events}
79 
            views={['month', 'week', 'day']}
 79 
            views={["month", "week", "day"]}
80 
            popup={false}
 80 
            popup={false}
81 
            defaultDate={new Date()}
 81 
            defaultDate={new Date()}
82 
            defaultView='month'
 82 
            defaultView="month"
83 
            selectable
 83 
            selectable
84 
            onSelectEvent={selectEvent}
 84 
            onSelectEvent={selectEvent}
85 
            onShowMore={(events) => this.setState({ showModal: true, events })}
 85 
            onShowMore={(events) => this.setState({ showModal: true, events })}
86 
            messages={{
 86 
            messages={{
87 
              next: <ArrowForwardIosIcon />,
 87 
              next: <ArrowForwardIosIcon />,
88 
              previous: <ArrowBackIosIcon />,
 88 
              previous: <ArrowBackIosIcon />,
89 
              today: 'Hoy',
 89 
              today: "Hoy",
90 
              month: 'Mes',
 90 
              month: "Mes",
91 
              week: 'Semana',
 91 
              week: "Semana",
92 
              day: 'Día',
 92 
              day: "Día",
93 
              allDay: 'Todo el día',
 93 
              allDay: "Todo el día",
94 
              date: 'Fecha',
 94 
              date: "Fecha",
95 
              time: 'Hora',
 95 
              time: "Hora",
96 
              event: 'Evento',
 96 
              event: "Evento",
97 
              noEventsInRange: 'Sin eventos disponibles'
 97 
              noEventsInRange: "Sin eventos disponibles",
Línea 113... Línea 113...
113 
        show={modalShow}
 113 
        show={modalShow}
114 
        event={selectedEvent}
 114 
        event={selectedEvent}
115 
        onClose={unselectEvent}
 115 
        onClose={unselectEvent}
116 
      />
 116 
      />
117 
    </>
 117 
    </>
118 
  )
 118 
  );
119 
}
 119 
};
Línea 120... Línea 120...
120 
 
 120