eionet2-dashboard 1.4.0

package/tabs/src/components/Tab.jsx

@@ -0,0 +1,477 @@
+import { React, useState, useEffect, useCallback } from 'react';
+
+import { getMe } from '../data/provider';
+import { useConfiguration } from '../data/hooks/useConfiguration';
+import { getCountries, getCurrentParticipant, getParticipants } from '../data/sharepointProvider';
+
+import {
+  Backdrop,
+  CircularProgress,
+  AppBar,
+  Toolbar,
+  MenuItem,
+  Typography,
+  Autocomplete,
+  Box,
+  TextField,
+  BottomNavigation,
+  Paper,
+  Button,
+  Dialog,
+  DialogTitle,
+  IconButton,
+} from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import FeedIcon from '@mui/icons-material/Feed';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import CloseIcon from '@mui/icons-material/Close';
+
+import './Tab.scss';
+
+import { UserMenu } from './UserMenu';
+import { Activity } from './activity/Activity';
+import { MyCountry } from './my_country/MyCountry';
+import { Publications } from './publications/Publications';
+import { UserEdit } from './self_service/UserEdit';
+import { ApprovalDialog } from './event_registration/ApprovalDialog';
+import { EventRatingDialog } from './event_rating/EventRatingDialog';
+import { HtmlBox } from './HtmlBox';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: '#00A390',
+      main: '#004B7F',
+      dark: '#005248',
+    },
+    secondary: {
+      light: '#006BB8',
+      main: '#007B6C',
+      dark: '#003052',
+    },
+    tertiary: {
+      light: '',
+      main: '#747678',
+      dark: '',
+    },
+    error: {
+      main: '#B83230',
+    },
+    warning: {
+      main: '#FF9933',
+    },
+    success: {
+      main: '#007B6C',
+    },
+    info: {
+      main: '#004B7F',
+    },
+    text: {
+      primary: '#3D5265',
+    },
+    suplementary: {
+      main: '#F9F9F9',
+      text: '#3D5265',
+    },
+  },
+  components: {
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          maxWidth: '250px',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+      },
+    },
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          border: 'none',
+        },
+      },
+    },
+  },
+});
+
+export default function Tab() {
+  const configuration = useConfiguration();
+
+  const version = process.env.REACT_APP_VERSION;
+
+  const [userInfo, setUserInfo] = useState({
+      isAdmin: false,
+      isNFP: false,
+      isGuest: true,
+      country: '',
+      isLoaded: false,
+    }),
+    [selfInfo, setSelfInfo] = useState({}),
+    [userMenuData, setUserMenuData] = useState({
+      event2Approve: [],
+      events2Rate: [],
+    }),
+    [isEionetUser, setIsEionetUser] = useState(false),
+    [selectedCountry, setSelectedCountry] = useState(''),
+    [countries, setCountries] = useState([]),
+    [canChangeCountry, setCanChangeCountry] = useState(false),
+    [loading, setLoading] = useState(false),
+    [participant, setParticipant] = useState({}),
+    [selectedEvent, setSelectedEvent] = useState({}),
+    [approvalVisible, setApprovalVisible] = useState(false),
+    [ratingVisible, setRatingVisible] = useState(false),
+    [versionDialogOpen, setVersionDialogOpen] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      let me = await getMe();
+      setUserInfo({
+        isAdmin: me.isAdmin,
+        isNFP: me.isNFP,
+        isGuest: me.isGuest,
+        country: me.country,
+        isEionetUser: me.isEionetUser,
+        isLoaded: true,
+        mail: me.mail,
+        displayName: me.displayName,
+        givenName: me.givenName,
+        surname: me.surname,
+      });
+
+      setSelectedCountry(me.country);
+
+      if (me.isAdmin) {
+        setCanChangeCountry(true);
+        const loadedCountries = await getCountries();
+        loadedCountries && setCountries(loadedCountries);
+      }
+
+      me.isLoaded = true;
+      setSelfInfo(me);
+      setIsEionetUser(me && me.isEionetUser);
+      setLoading(false);
+      !!configuration.DashboardVersion &&
+        setVersionDialogOpen(configuration.DashboardVersion != version);
+    })();
+  }, [getMe, configuration]);
+
+  const [menuId, setMenuId] = useState(1),
+    onMenuClick = (index) => {
+      setMenuId(index);
+    },
+    openSelfService = () => {
+      setMenuId(4);
+    },
+    activityVisible = useCallback(() => {
+      return userInfo.isLoaded && menuId == 1;
+    }, [userInfo, menuId]),
+    myCountryVisible = useCallback(() => {
+      return userInfo.isLoaded && menuId == 2;
+    }, [userInfo, menuId]),
+    publicationsVisible = useCallback(() => {
+      return userInfo.isLoaded && menuId == 3;
+    }, [userInfo, menuId]),
+    selfServiceVisible = useCallback(() => {
+      return selfInfo && selfInfo.isLoaded && menuId == 4 && isEionetUser;
+    }, [selfInfo, menuId, isEionetUser]);
+
+  const setData4Menu = useCallback(
+      (events) => {
+        const event2Approve = events.filter(
+            (e) =>
+              e.IsUpcoming &&
+              e.IsOffline &&
+              e.Participants &&
+              e.Participants.length > 0 &&
+              e.Participants.filter((p) => !p.NFPApproved || p.NFPApproved == 'No value').length >
+                0,
+          ),
+          events2Rate = events.filter((e) => !e.IsUpcoming && !!e.AllowVote);
+
+        setUserMenuData({
+          allEvents: events,
+          event2Approve: event2Approve,
+          events2Rate: events2Rate,
+        });
+      },
+      [userMenuData],
+    ),
+    refreshData4Menu = useCallback(() => {
+      setData4Menu(userMenuData.allEvents);
+    }, [userMenuData]),
+    openRating = useCallback(
+      async (event) => {
+        setLoading(true);
+        const participant = await getCurrentParticipant(event, userInfo);
+        setSelectedEvent(event);
+        setParticipant(participant);
+        setRatingVisible(true);
+        setLoading(false);
+      },
+      [userInfo],
+    ),
+    openApproval = useCallback(
+      async (event) => {
+        setLoading(true);
+        const participant = await getCurrentParticipant(event, userInfo);
+        event.Participants = await getParticipants(event.id, userInfo.country);
+        setSelectedEvent(event);
+        setParticipant(participant);
+        setApprovalVisible(true);
+        setLoading(false);
+      },
+      [userInfo],
+    ),
+    handleApprovalClose = () => {
+      refreshData4Menu();
+      setApprovalVisible(false);
+    },
+    handleRatingClose = (result) => {
+      setRatingVisible(false);
+      selectedEvent.HasVoted = result;
+      selectedEvent.AllowVote = !result;
+      refreshData4Menu();
+    },
+    handleVersionDialogClose = () => {
+      setVersionDialogOpen(false);
+    };
+
+  const nonIsoCountryCodes = {
+      el: 'gr',
+      io: '',
+      uk: 'gb',
+    },
+    preProcessCountryCode = (code) => {
+      return Object.prototype.hasOwnProperty.call(nonIsoCountryCodes, code)
+        ? nonIsoCountryCodes[code]
+        : code;
+    };
+
+  return (
+    <div className="main">
+      <ThemeProvider theme={theme}>
+        <Backdrop
+          sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={loading}
+        >
+          <CircularProgress color="primary" />
+        </Backdrop>
+        <AppBar
+          color="suplementary"
+          position="fixed"
+          sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        >
+          <Toolbar>
+            <MenuItem onClick={() => onMenuClick(1)}>
+              <Typography
+                color="suplementary.text"
+                className={'appbar-item' + (menuId == 1 ? ' appbar-item-selected' : '')}
+              >
+                Activity
+              </Typography>
+            </MenuItem>
+            <MenuItem onClick={() => onMenuClick(2)}>
+              <Typography className={'appbar-item' + (menuId == 2 ? ' appbar-item-selected' : '')}>
+                My country
+              </Typography>
+              {selectedCountry && preProcessCountryCode(selectedCountry.toLowerCase()) && (
+                <img
+                  loading="lazy"
+                  src={`https://flagcdn.com/h20/${preProcessCountryCode(
+                    selectedCountry.toLowerCase(),
+                  )}.png`}
+                  alt=""
+                />
+              )}
+            </MenuItem>
+            {canChangeCountry && (
+              <Autocomplete
+                sx={{
+                  width: '5%',
+                }}
+                disablePortal
+                id="country"
+                defaultValue={userInfo.country}
+                options={countries}
+                onChange={async (_e, value) => {
+                  setSelectedCountry(value);
+                }}
+                renderOption={(props, option) => {
+                  const countryCode = preProcessCountryCode(option.toLowerCase());
+                  return (
+                    <Box component="li" sx={{ '& > img': { ml: 2, flexShrink: 0 } }} {...props}>
+                      {option}
+                      {countryCode && (
+                        <img
+                          loading="lazy"
+                          width="20"
+                          src={`https://flagcdn.com/w20/${countryCode}.png`}
+                          alt=""
+                        />
+                      )}
+                    </Box>
+                  );
+                }}
+                renderInput={(params) => (
+                  <TextField autoComplete="off" {...params} variant="standard" />
+                )}
+              />
+            )}
+            {false && (
+              <MenuItem onClick={() => onMenuClick(3)}>
+                <Typography sx={{ textAlign: 'center', marginRight: '0.5rem' }}>
+                  Publications
+                </Typography>
+                <FeedIcon></FeedIcon>
+              </MenuItem>
+            )}
+            {userInfo.isEionetUser && (
+              <Box sx={{ width: '100%', fontSize: '0.8rem', display: 'flex' }}>
+                <UserMenu
+                  userInfo={userInfo}
+                  openSelfService={openSelfService}
+                  events2Rate={userMenuData.events2Rate}
+                  events2Approve={userMenuData.event2Approve}
+                  openRating={openRating}
+                  openApproval={openApproval}
+                ></UserMenu>
+              </Box>
+            )}
+          </Toolbar>
+        </AppBar>
+        <Dialog open={versionDialogOpen} onClose={handleVersionDialogClose}>
+          <DialogTitle>
+            <IconButton
+              aria-label="close"
+              onClick={handleVersionDialogClose}
+              sx={{
+                position: 'absolute',
+                right: 8,
+                top: 8,
+                color: (theme) => theme.palette.grey[500],
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+            <Typography>Application version</Typography>
+          </DialogTitle>
+          <Box sx={{ margin: '2rem' }}>
+            <HtmlBox html={configuration?.AppVersionMessage}></HtmlBox>
+          </Box>
+        </Dialog>
+        <ApprovalDialog
+          open={approvalVisible}
+          handleClose={handleApprovalClose}
+          event={selectedEvent}
+          userInfo={userInfo}
+        ></ApprovalDialog>
+        <EventRatingDialog
+          open={ratingVisible}
+          handleClose={handleRatingClose}
+          event={selectedEvent}
+          participant={participant}
+        ></EventRatingDialog>
+
+        {activityVisible() && (
+          <Activity
+            userInfo={userInfo}
+            configuration={configuration}
+            setData4Menu={setData4Menu}
+            openRating={openRating}
+            openApproval={openApproval}
+          />
+        )}
+        {myCountryVisible() && (
+          <MyCountry
+            userInfo={userInfo}
+            selectedCountry={selectedCountry}
+            configuration={configuration}
+          />
+        )}
+        {publicationsVisible() && <Publications userInfo={userInfo} />}
+        {selfServiceVisible() && <UserEdit user={selfInfo} />}
+        <Paper
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: (theme) => theme.zIndex.drawer + 1,
+          }}
+          elevation={5}
+        >
+          <BottomNavigation
+            sx={{ display: 'flex', justifyContent: 'flex-start', border: '2px', height: '55px' }}
+          >
+            <Typography
+              style={{
+                paddingLeft: '20px',
+                paddingRight: '10px',
+                alignSelf: 'center',
+                fontSize: '14px',
+              }}
+              color="tertiary"
+            >
+              These links open <br />
+              in separate windows.
+            </Typography>
+            <Box sx={{ display: 'flex', alignSelf: 'center', height: '30px' }}>
+              <Button
+                className="bottom-button"
+                color="tertiary"
+                variant="outlined"
+                endIcon={<OpenInNewIcon color="primary" />}
+                onClick={() => {
+                  window.open(configuration.MeetingListUrl, '_blank');
+                }}
+              >
+                View all meetings
+              </Button>
+              <Button
+                className="bottom-button"
+                color="tertiary"
+                variant="outlined"
+                endIcon={<OpenInNewIcon color="primary" />}
+                onClick={() => {
+                  window.open(configuration.ConsultationListUrl, '_blank');
+                }}
+              >
+                View all consultations
+              </Button>
+              <Button
+                className="bottom-button"
+                color="tertiary"
+                variant="outlined"
+                endIcon={<OpenInNewIcon color="primary" />}
+                onClick={() => {
+                  window.open(configuration.ConsultationListUrl, '_blank');
+                }}
+              >
+                View all inquiries
+              </Button>
+            </Box>
+            <Typography
+              align="center"
+              sx={{
+                position: 'absolute',
+                right: 0,
+                alignSelf: 'center',
+                fontSize: '0.8rem',
+                pr: '0.2rem',
+              }}
+            >
+              v{`${process.env.REACT_APP_VERSION}`}
+            </Typography>
+          </BottomNavigation>
+        </Paper>
+      </ThemeProvider>
+    </div>
+  );
+}

package/tabs/src/components/Tab.scss

@@ -0,0 +1,138 @@
+@import './variables.scss';
+
+.main {
+  min-height: 100%;
+  min-width: 100%;
+}
+
+.data-grid {
+  min-height: 100px;
+  height: 100%;
+}
+
+.resizable {
+  cursor: ew-resize;
+}
+
+.MuiDataGrid-root {
+  border-radius: 0 !important;
+}
+
+.MuiDataGrid-columnHeaders {
+  //background-color: #accae5;
+  border-radius: 0 !important;
+}
+
+.MuiLink-button {
+  color: #006bb8 !important;
+
+  &:hover {
+    color: #004b7f !important;
+  }
+
+  &:visited {
+    color: #753aad !important;
+  }
+
+  &:active {
+    color: #003052 !important;
+  }
+}
+
+.appbar-item {
+  text-align: center;
+  margin-right: 0.5rem !important;
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  border-bottom: 0.2rem solid;
+  border-color: $dark-grey;
+  height: 100%;
+}
+
+.appbar-item-selected {
+  border-color: $main-color;
+}
+
+.user-menu-button {
+  position: absolute !important;
+  text-align: center;
+  top: 0.5rem;
+  right: 0.5rem !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  border-bottom: 0.2rem solid !important;
+  border-color: $dark-grey !important;
+}
+
+.country-flag {
+  margin-left: auto;
+  align-self: center;
+  box-shadow: lightblue 1px 1px 2px 4px;
+}
+
+.drawer {
+  position: relative;
+
+  .MuiDrawer-root {
+    position: relative;
+  }
+
+  .MuiDrawer-paper {
+    width: 200px;
+    position: absolute;
+  }
+
+  .list-item {
+    display: block;
+
+    .list-item-text {
+      margin: auto;
+      justify-content: center;
+
+      padding: {
+        top: 0.5rem;
+        bottom: 0.5rem;
+        left: 1rem;
+      }
+
+      .MuiListItemText-primary {
+        font-size: 14px !important;
+        font-weight: 700 !important;
+      }
+    }
+
+    .list-item-button {
+      justify-content: center;
+
+      .MuiListItemText-primary {
+        font-size: 14px !important;
+        font-weight: 500 !important;
+      }
+    }
+
+    .list-item-icon {
+      min-width: 0;
+      padding-right: 10px;
+    }
+  }
+}
+
+.MuiChip-root {
+  background-color: white !important;
+  border-color: $dark-grey !important;
+  margin-right: 10px !important;
+}
+
+.bottom-button {
+  height: 35px;
+  margin-right: 1rem !important;
+}
+
+.menu-icon {
+  margin-right: 0.5rem;
+}
+
+.menu-item {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}

package/tabs/src/components/TabConfig.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import * as microsoftTeams from '@microsoft/teams-js';
+
+/**
+ * The 'Config' component is used to display your group tabs
+ * user configuration options.  Here you will allow the user to
+ * make their choices and once they are done you will need to validate
+ * their choices and communicate that to Teams to enable the save button.
+ */
+class TabConfig extends React.Component {
+  render() {
+    // Initialize the Microsoft Teams SDK
+    microsoftTeams.initialize();
+
+    /**
+     * When the user clicks "Save", save the url for your configured tab.
+     * This allows for the addition of query string parameters based on
+     * the settings selected by the user.
+     */
+    microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
+      const baseUrl = `https://${window.location.hostname}:${window.location.port}`;
+      microsoftTeams.settings.setSettings({
+        suggestedDisplayName: 'Eionet2 Dashboard',
+        entityId: 'dashboard',
+        contentUrl: baseUrl + '/index.html#/tab',
+        websiteUrl: baseUrl + '/index.html#/tab',
+      });
+      saveEvent.notifySuccess();
+    });
+
+    /**
+     * After verifying that the settings for your tab are correctly
+     * filled in by the user you need to set the state of the dialog
+     * to be valid.  This will enable the save button in the configuration
+     * dialog.
+     */
+    microsoftTeams.settings.setValidityState(true);
+
+    return (
+      <div>
+        <h1>Tab Configuration</h1>
+        <div>
+          This is where you will add your tab configuration options the user can choose when the tab
+          is added to your team/group chat.
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TabConfig;

package/tabs/src/components/TabPanel.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export default function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 1 }}>
+          <Typography component={'span'}>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};

package/tabs/src/components/TermsOfUse.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * This component is used to display the required
+ * terms of use statement which can be found in a
+ * link in the about tab.
+ */
+class TermsOfUse extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Terms of Use</h1>
+      </div>
+    );
+  }
+}
+
+export default TermsOfUse;