eionet2-dashboard 1.4.0

package/tabs/src/components/UnderConstruction.jsx

@@ -0,0 +1,24 @@
+import ConstructionIcon from '@mui/icons-material/Construction';
+import { React } from 'react';
+import { Box, Typography } from '@mui/material';
+
+export function UnderConstruction() {
+  return (
+    <Box
+      sx={{
+        boxShadow: '2',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        justifyContent: 'start',
+        padding: '5rem',
+      }}
+    >
+      <ConstructionIcon sx={{ fontSize: '10rem', width: '100%' }}></ConstructionIcon>
+      <Typography sx={{ fontSize: 'larger', textAlign: 'center' }}>
+        Page under construction
+      </Typography>
+    </Box>
+  );
+}

package/tabs/src/components/UserMenu.jsx

@@ -0,0 +1,109 @@
+import { useState, React, useCallback } from 'react';
+import { Badge, Box, Button, Menu, MenuItem, Divider, Typography } from '@mui/material';
+
+import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
+import PortraitIcon from '@mui/icons-material/Portrait';
+import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlined';
+import ReviewsOutlinedIcon from '@mui/icons-material/ReviewsOutlined';
+
+export function UserMenu({
+  userInfo,
+  openSelfService,
+  events2Rate,
+  events2Approve,
+  openRating,
+  openApproval,
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = useCallback(
+      (event) => {
+        setAnchorEl(event.currentTarget);
+      },
+      [anchorEl],
+    ),
+    handleSelfService = () => {
+      openSelfService();
+      handleClose();
+    },
+    handleClose = () => {
+      setAnchorEl(null);
+    };
+
+  return (
+    <Box>
+      <Button
+        className="user-menu-button"
+        aria-controls={open ? 'demo-customized-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        variant="outline"
+        color="secondary"
+        disableElevation
+        endIcon={
+          <Badge
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            badgeContent={events2Rate.length + (userInfo.isNFP ? events2Approve.length : 0)}
+            color="error"
+          >
+            <PortraitIcon color="secondary.main" />
+          </Badge>
+        }
+        onClick={handleClick}
+      >
+        {userInfo.displayName}
+      </Button>
+      <Menu
+        id="demo-customized-menu"
+        MenuListProps={{
+          'aria-labelledby': 'demo-customized-button',
+        }}
+        PaperProps={{
+          style: {
+            width: 300,
+          },
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem className="menu-item" onClick={handleSelfService} disableRipple>
+          <ManageAccountsOutlinedIcon color="primary" className="menu-icon" />
+          Edit my profile
+        </MenuItem>
+        {!!events2Rate?.length && <Divider sx={{ my: 0.5 }} />}
+        {!!events2Rate?.length && (
+          <MenuItem sx={{ pointerEvents: 'none' }} className="menu-item" disableRipple>
+            <ReviewsOutlinedIcon color="primary" className="menu-icon" />
+            Rate Event
+          </MenuItem>
+        )}
+        {events2Rate.map((e) => (
+          <MenuItem key={e.id} onClick={() => openRating(e)} disableRipple>
+            <Typography className="grid-text" variant="inherit" noWrap>
+              {e.Title}
+            </Typography>
+          </MenuItem>
+        ))}
+        {userInfo.isNFP && !!events2Approve?.length && <Divider sx={{ my: 0.5 }} />}
+        {userInfo.isNFP && !!events2Approve?.length && (
+          <MenuItem sx={{ pointerEvents: 'none' }} className="menu-item" disableRipple>
+            <FactCheckOutlinedIcon className="menu-icon" />
+            For NFP Approval
+          </MenuItem>
+        )}
+        {userInfo.isNFP &&
+          events2Approve.map((e) => (
+            <MenuItem key={e.id} onClick={() => openApproval(e)} disableRipple>
+              <Typography className="grid-text" variant="inherit" noWrap>
+                {e.Title}
+              </Typography>
+            </MenuItem>
+          ))}
+      </Menu>
+    </Box>
+  );
+}

package/tabs/src/components/_variables.scss

@@ -0,0 +1,10 @@
+$breakpoints: (
+  sm: 570px,
+  md: 768px,
+  lg: 1279px,
+  xl: 1340px,
+  xxl: 1600px,
+) !default;
+
+$main-color: #004b7f;
+$dark-grey: #e6e7e8;

package/tabs/src/components/activity/Activity.jsx

@@ -0,0 +1,301 @@
+import { React, useState, useEffect } from 'react';
+import {
+  Backdrop,
+  CircularProgress,
+  Box,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListItemButton,
+} from '@mui/material';
+
+import Constants from '../../data/constants.json';
+import LoopIcon from '@mui/icons-material/Loop';
+import FastForwardOutlinedIcon from '@mui/icons-material/FastForwardOutlined';
+import HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined';
+import { ConsultationList } from './ConsultationList';
+import { EventList } from './EventList';
+import { getConsultations, getMeetings } from '../../data/sharepointProvider';
+import CustomDrawer from '../CustomDrawer';
+
+export function Activity({ userInfo, configuration, setData4Menu, openRating, openApproval }) {
+  const [tabsValue, setTabsValue] = useState(0),
+    [pastMeetings, setPastMeetings] = useState([]),
+    [currentMeetings, setCurrentMeetings] = useState([]),
+    [upcomingMeetings, setUpcomingMeetings] = useState([]),
+    [openConsultations, setOpenConsultations] = useState([]),
+    [reviewConsultations, setReviewConsultations] = useState([]),
+    [finalisedConsultations, setFinalisedConsultations] = useState([]),
+    [openSurveys, setOpenSurveys] = useState([]),
+    [reviewSurveys, setReviewSurveys] = useState([]),
+    [finalisedSurveys, setFinalisedSurveys] = useState([]),
+    [loading, setloading] = useState(false);
+
+  const drawerOptions = (
+    <div>
+      <ListItem disablePadding className="list-item" key={0}>
+        <ListItemText
+          className="list-item-text"
+          primary={'EVENTS'}
+          sx={{ color: 'primary.main' }}
+        />
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={1}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 0 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(0)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <LoopIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Ongoing(' + currentMeetings.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={2}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 1 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(1)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <FastForwardOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Upcoming(' + upcomingMeetings.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={3}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 2 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(2)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <HistoryOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Past(' + pastMeetings.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={4}>
+        <ListItemText
+          className="list-item-text"
+          primary={'CONSULTATIONS'}
+          sx={{ color: 'primary.main' }}
+        />
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={5}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 3 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(3)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <LoopIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Open (' + openConsultations.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={6}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 4 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(4)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <FastForwardOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Review(' + reviewConsultations.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={7}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 5 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(5)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <HistoryOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Finalised(' + finalisedConsultations.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={8}>
+        <ListItemText
+          className="list-item-text"
+          primary={'INQUIRIES'}
+          sx={{ color: 'primary.main' }}
+        />
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={9}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 6 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(6)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <LoopIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Open(' + openSurveys.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={10}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 7 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(7)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <FastForwardOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Review(' + reviewSurveys.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={11}>
+        <ListItemButton
+          className={'list-item-button ' + (tabsValue == 8 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(8)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <HistoryOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Finalised(' + finalisedSurveys.length + ')'} />
+        </ListItemButton>
+      </ListItem>
+    </div>
+  );
+
+  //get old data according to configuration. 24 months if no configuration made
+  const monthsBehind = configuration.DashboardNumberOfMonthsData || 24;
+  useEffect(() => {
+    (async () => {
+      setloading(true);
+
+      let fromDate = new Date();
+      fromDate.setMonth(fromDate.getMonth() - monthsBehind);
+
+      const loadedMeetings = await getMeetings(fromDate, userInfo.country, userInfo),
+        loadedConsultations = await getConsultations(undefined, fromDate, userInfo.country);
+
+      if (loadedMeetings) {
+        setCurrentMeetings(
+          loadedMeetings.filter((c) => {
+            return c.IsCurrent;
+          }),
+        );
+        setUpcomingMeetings(
+          loadedMeetings.filter((c) => {
+            return c.IsUpcoming;
+          }),
+        );
+        setPastMeetings(
+          loadedMeetings.filter((c) => {
+            return c.IsPast;
+          }),
+        );
+      }
+
+      setData4Menu(loadedMeetings);
+
+      if (loadedConsultations) {
+        setOpenConsultations(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Consultation &&
+              c.Closed >= new Date()
+            );
+          }),
+        );
+        setReviewConsultations(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Consultation &&
+              c.Closed < new Date() &&
+              c.Deadline >= new Date()
+            );
+          }),
+        );
+        setFinalisedConsultations(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Consultation &&
+              c.Closed <= new Date() &&
+              c.Deadline < new Date()
+            );
+          }),
+        );
+
+        setOpenSurveys(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Survey && c.Closed >= new Date()
+            );
+          }),
+        );
+        setReviewSurveys(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Survey &&
+              c.Closed < new Date() &&
+              c.Deadline >= new Date()
+            );
+          }),
+        );
+        setFinalisedSurveys(
+          loadedConsultations.filter((c) => {
+            return (
+              c.ConsultationType == Constants.ConsultationType.Survey &&
+              c.Closed <= new Date() &&
+              c.Deadline < new Date()
+            );
+          }),
+        );
+      }
+
+      setloading(false);
+    })();
+  }, [monthsBehind, userInfo]);
+
+  return (
+    <div className="main">
+      <Box sx={{ overflowY: 'scroll', display: 'flex', paddingTop: '4rem', height: '100%' }}>
+        <Backdrop
+          sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={loading}
+        >
+          <CircularProgress color="primary" />
+        </Backdrop>
+        <CustomDrawer drawerOptions={drawerOptions}></CustomDrawer>
+        <Box sx={{ width: '100%' }}>
+          {tabsValue >= 0 && tabsValue <= 2 && (
+            <EventList
+              userInfo={userInfo}
+              configuration={configuration}
+              pastMeetings={pastMeetings}
+              currentMeetings={currentMeetings}
+              upcomingMeetings={upcomingMeetings}
+              country={userInfo.country}
+              tabsValue={tabsValue}
+              openRating={openRating}
+              openApproval={openApproval}
+            ></EventList>
+          )}
+          {tabsValue >= 3 && tabsValue <= 5 && (
+            <ConsultationList
+              userInfo={userInfo}
+              configuration={configuration}
+              openConsultations={openConsultations}
+              reviewConsultations={reviewConsultations}
+              finalisedConsultations={finalisedConsultations}
+              type={Constants.ConsultationType.Consultation}
+              tabsValue={tabsValue - 3}
+            ></ConsultationList>
+          )}
+          {tabsValue >= 6 && tabsValue <= 8 && (
+            <ConsultationList
+              userInfo={userInfo}
+              configuration={configuration}
+              openConsultations={openSurveys}
+              reviewConsultations={reviewSurveys}
+              finalisedConsultations={finalisedSurveys}
+              type={Constants.ConsultationType.Survey}
+              tabsValue={tabsValue - 6}
+            ></ConsultationList>
+          )}
+        </Box>
+        {false && <span>{userInfo.toString()}</span>}
+      </Box>
+    </div>
+  );
+}