Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3585
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/css/react-big-calendar.css';
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);
Línea 32... Línea 32...
32 
    setModalShow(false);
 32 
    setModalShow(false);
33 
  };
 33 
  };
Línea 34... Línea 34...
34 
 
 34 
 
35 
  useEffect(() => {
 35 
  useEffect(() => {
36 
    axios
 36 
    axios
37 
      .get("/calendar/events")
 37 
      .get('/calendar/events')
38 
      .then((response) => {
 38 
      .then((response) => {
Línea 39... Línea 39...
39 
        const { data, success } = response.data;
 39 
        const { data, success } = response.data;
40 
 
 40 
 
41 
        if (!success) {
 - 
 
42 
          const errorMessage =
 - 
 
43 
            typeof data === "string"
 41 
        if (!success) {
44 
              ? data
 42 
          const errorMessage =
45 
              : "Error interno. Por favor, intente más tarde.";
 43 
            typeof data === 'string' ? data : 'Error interno. Por favor, intente más tarde.';
Línea 46... Línea 44...
46 
          throw new Error(errorMessage);
 44 
          throw new Error(errorMessage);
47 
        }
 45 
        }
48 
 
 46 
 
49 
        const formattedEvents = data.map((event) => {
 47 
        const formattedEvents = data.map((event) => {
50 
          if (event.allDay) {
 48 
          if (event.allDay) {
51 
            return {
 49 
            return {
52 
              ...event,
 50 
              ...event,
53 
              start: new Date(event.start.replace("-", "/")),
 51 
              start: new Date(event.start.replace('-', '/')),
Línea 54... Línea 52...
54 
              end: new Date(event.start.replace("-", "/")),
 52 
              end: new Date(event.start.replace('-', '/'))
55 
            };
 53 
            };
56 
          }
 54 
          }
57 
 
 55 
 
58 
          return {
 56 
          return {
59 
            ...event,
 57 
            ...event,
Línea 60... Línea 58...
60 
            start: new Date(event.start),
 58 
            start: new Date(event.start),
61 
            end: new Date(event.end),
 59 
            end: new Date(event.end)
62 
          };
 60 
          };
63 
        });
 61 
        });
64 
 
 62 
 
65 
        setEvents(formattedEvents);
 63 
        setEvents(formattedEvents);
Línea 66... Línea 64...
66 
      })
 64 
      })
67 
      .catch((err) => {
 65 
      .catch((err) => {
68 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 66 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
69 
      });
 67 
      });
70 
  }, []);
 68 
  }, []);
71 
 
 69 
 
72 
  return (
 70 
  return (
73 
    <>
 71 
    <>
74 
      <Grid container spacing={1}>
 72 
      <Grid container spacing={1}>
75 
        <Grid item xs={12} md={8} spacing={3}>
 73 
        <Grid item xs={12} md={8} spacing={3}>
76 
          <Calendar
 74 
          <Calendar
77 
            localizer={localizer}
 75 
            localizer={localizer}
78 
            events={events}
 76 
            events={events}
79 
            views={["month", "week", "day"]}
 77 
            views={['month', 'week', 'day']}
80 
            popup={false}
 78 
            popup={false}
81 
            defaultDate={new Date()}
 79 
            defaultDate={new Date()}
82 
            defaultView="month"
 80 
            defaultView='month'
83 
            selectable
 81 
            selectable
84 
            onSelectEvent={selectEvent}
 82 
            onSelectEvent={selectEvent}
85 
            onShowMore={(events) => this.setState({ showModal: true, events })}
 83 
            onShowMore={(events) => this.setState({ showModal: true, events })}
86 
            messages={{
 84 
            messages={{
87 
              next: <ArrowForwardIosIcon />,
 85 
              next: <ArrowForwardIosIcon />,
88 
              previous: <ArrowBackIosIcon />,
 86 
              previous: <ArrowBackIosIcon />,
89 
              today: "Hoy",
 87 
              today: 'Hoy',
90 
              month: "Mes",
 88 
              month: 'Mes',
91 
              week: "Semana",
 89 
              week: 'Semana',
92 
              day: "Día",
 90 
              day: 'Día',
93 
              allDay: "Todo el día",
 91 
              allDay: 'Todo el día',
94 
              date: "Fecha",
 92 
              date: 'Fecha',
95 
              time: "Hora",
 - 
 
96 
              event: "Evento",
 - 
 
97 
              noEventsInRange: "Sin eventos disponibles",
 93 
              time: 'Hora',
98 
            }}
 94 
              event: 'Evento',
99 
            eventPropGetter={(event) => {
 95 
              noEventsInRange: 'Sin eventos disponibles'
100 
              const backgroundColor = event.backgroundColor
 96 
            }}
101 
                ? event.backgroundColor
 97 
            eventPropGetter={(event) => {
102 
                : "blue";
 98 
              const backgroundColor = event.backgroundColor ? event.backgroundColor : 'blue';
103 
              const color = event.textColor ? event.textColor : "#fff";
 99 
              const color = event.textColor ? event.textColor : '#fff';
104 
              return { style: { backgroundColor, color } };
 100 
              return { style: { backgroundColor, color } };
105 
            }}
 101 
            }}
106 
          />
 - 
 
107 
        </Grid>
 - 
 
108 
        <Grid item xs={12} md={4}>
 - 
 
109 
          <EventsList />
 102 
          />
110 
        </Grid>
 - 
 
111 
      </Grid>
 103 
        </Grid>
112 
      <EventModal
 104 
        <Grid item xs={12} md={4}>
113 
        show={modalShow}
 105 
          <EventsList />
Línea 114... Línea 106...
114 
        event={selectedEvent}
 106 
        </Grid>