eionet2-dashboard 1.4.0

package/tabs/src/components/my_country/AtAGlance.jsx

@@ -0,0 +1,151 @@
+import { React, useState, useEffect } from 'react';
+import { Box, Typography, Backdrop, CircularProgress } from '@mui/material';
+import { IndicatorCard } from './IndicatorCard';
+import { CountryProgress } from './CountryProgress';
+import { getGroups } from '../../data/sharepointProvider';
+import { HtmlBox } from '../HtmlBox';
+import { getMeetings, getConsultations } from '../../data/sharepointProvider';
+
+export function AtAGlance({
+  users,
+  organisations,
+  country,
+  userInfo,
+  configuration,
+  availableGroups,
+}) {
+  const signedInUsers = users.filter((u) => {
+      return u.SignedIn;
+    }),
+    signedInGroups = getGroups(signedInUsers),
+    pendingSignInUsers = users.filter((u) => {
+      return !u.SignedIn;
+    }),
+    pendingSignInGroups = getGroups(pendingSignInUsers),
+    nominationsGroups = [...new Set(signedInGroups.concat(pendingSignInGroups))],
+    countryFilterSuffix = country ? '?FilterField1=Country&FilterValue1=' + country + '&' : '?';
+
+  const [lastYears, setLastYears] = useState([]),
+    [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+
+      //get meetings from last two years
+      const fromDate = new Date(new Date().getFullYear() - 2, 0, 1);
+      let loadedMeetings = await getMeetings(fromDate, country, userInfo),
+        loadedConsultations = await getConsultations(undefined, fromDate);
+
+      const current = new Date().getFullYear();
+      let years = [];
+      for (let i = current; i >= current - 1; i--) {
+        const allMeetings = loadedMeetings.filter((m) => m.Year == i),
+          allConsultations = loadedConsultations.filter(
+            (c) => c.Year == i && c.ConsultationType == 'Consultation',
+          ),
+          allSurveys = loadedConsultations.filter(
+            (c) => c.Year == i && c.ConsultationType == 'Inquiry',
+          );
+
+        const result = {
+          year: i,
+          meetingsCount: allMeetings.length,
+          consultationsCount: allConsultations.length,
+          surveysCount: allSurveys.length,
+          attendedMeetingsCount: allMeetings.filter((meeting) => {
+            return meeting.Participants.some((participant) => participant.Country == country);
+          }).length,
+          responseConsultationsCount: allConsultations.filter((c) => {
+            return c.Respondants.includes(country);
+          }).length,
+          responseSurveysCount: allSurveys.filter((c) => {
+            return c.Respondants.includes(country);
+          }).length,
+        };
+        years.push(result);
+      }
+      setLastYears(years);
+      setLoading(false);
+    };
+    fetchData();
+  }, [country, userInfo]);
+
+  return (
+    <div className="">
+      <Box
+        sx={{
+          height: '100%',
+          overflowX: 'hidden',
+        }}
+      >
+        <Backdrop
+          sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={loading}
+        >
+          <CircularProgress color="primary" />
+        </Backdrop>
+        <Typography
+          sx={{ fontSize: '16px', fontWeight: '600', pt: '12px', pl: '12px' }}
+          color="text.secondary"
+        >
+          Representation:
+        </Typography>
+        <Box className="cards-container" sx={{ border: '0px' }}>
+          <IndicatorCard
+            labelText="members"
+            valueText={users.length}
+            url={configuration.UserListUrl + countryFilterSuffix}
+            infoText={configuration.NoOfMembersCardInfo}
+          ></IndicatorCard>
+          <IndicatorCard
+            labelText="members pending sign in"
+            valueText={users.length - signedInUsers.length}
+            url={
+              configuration.UserListUrl +
+              countryFilterSuffix +
+              'FilterField2=SignedIn&FilterValue2=0'
+            }
+            infoText={configuration.MembersPendingSingInCardInfo}
+          ></IndicatorCard>
+          <IndicatorCard
+            labelText="organisations"
+            valueText={organisations.length}
+            url={configuration.OrganisationListUrl + countryFilterSuffix}
+            infoText={configuration.NoOfOrganisationsCardInfo}
+          ></IndicatorCard>
+          <IndicatorCard
+            labelText="groups with nominations"
+            valueText={nominationsGroups.length + '/' + availableGroups.length}
+            infoText={configuration.GroupsWithNominationsCardInfo}
+          ></IndicatorCard>
+          <IndicatorCard
+            labelText="groups with signed in users"
+            valueText={signedInGroups.length + '/' + availableGroups.length}
+            infoText={configuration.GroupsWithSignedInUsersCardInfo}
+          ></IndicatorCard>
+        </Box>
+        {country && (
+          <Box sx={{ marginLeft: '1rem' }}>
+            <HtmlBox html={configuration.CountryProgressHtml}></HtmlBox>
+          </Box>
+        )}
+        {country && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              flexGrow: 1,
+              marginLeft: '1rem',
+              borderTop: 1,
+              borderColor: 'divider',
+            }}
+          >
+            <CountryProgress lastYears={lastYears} configuration={configuration}></CountryProgress>
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+}

package/tabs/src/components/my_country/CountryProgress.jsx

@@ -0,0 +1,92 @@
+import { React, useState } from 'react';
+import { Box, Typography, Tab, Tabs } from '@mui/material';
+import PropTypes from 'prop-types';
+import { YearlyProgress } from './YearlyProgress';
+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={{ pt: 1, borderTop: 1, borderColor: 'secondary.main' }}>
+          <Typography component={'span'}>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export function CountryProgress({ lastYears, configuration }) {
+  const [tabsValue, setTabsValue] = useState(0),
+    handleChange = (_event, newValue) => {
+      setTabsValue(newValue);
+    };
+
+  return (
+    <div className="">
+      {lastYears.length > 0 && (
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography
+            sx={{ fontSize: '16px', fontWeight: '600', paddingTop: '12px' }}
+            color="text.secondary"
+          >
+            Yearly overview:
+          </Typography>
+          <Tabs
+            TabIndicatorProps={{
+              sx: {
+                bottom: 0,
+                height: 10,
+                backgroundColor: 'secondary.main',
+                clipPath: 'polygon(50% 0, 0 100%, 100% 100%)',
+              },
+            }}
+            value={tabsValue}
+            onChange={handleChange}
+          >
+            {lastYears.map((year, index) => {
+              return (
+                <Tab className="year-tab" key={index} label={year.year} {...a11yProps(index)} />
+              );
+            })}
+          </Tabs>
+          {lastYears.map((year, index) => {
+            return (
+              <TabPanel className="year-panel" key={index} value={tabsValue} index={index}>
+                <YearlyProgress
+                  allMeetingsCount={year.meetingsCount}
+                  allConsultationsCount={year.consultationsCount}
+                  allSurveysCount={year.surveysCount}
+                  attendedMeetingsCount={year.attendedMeetingsCount}
+                  responseConsultationsCount={year.responseConsultationsCount}
+                  responseSurveysCount={year.responseSurveysCount}
+                  year={year.year}
+                  configuration={configuration}
+                ></YearlyProgress>
+              </TabPanel>
+            );
+          })}
+        </Box>
+      )}
+    </div>
+  );
+}

package/tabs/src/components/my_country/DataReporters.jsx

@@ -0,0 +1,13 @@
+import { React } from 'react';
+import { Box } from '@mui/material';
+import { UnderConstruction } from '../UnderConstruction';
+
+export function DataReporters() {
+  return (
+    <div className="">
+      <Box className="box-fill">
+        <UnderConstruction></UnderConstruction>
+      </Box>
+    </div>
+  );
+}

package/tabs/src/components/my_country/GroupView.jsx

@@ -0,0 +1,54 @@
+import { React } from 'react';
+import './my_country.scss';
+import ResizableGrid from '../ResizableGrid';
+import { Box } from '@mui/material';
+
+export function GroupView({ group }) {
+  const columns = [
+    {
+      field: 'Organisation',
+      headerName: 'Organisation',
+      flex: 1.5,
+    },
+    {
+      field: 'Title',
+      headerName: 'Name',
+      flex: 0.75,
+    },
+    {
+      field: 'Email',
+      headerName: 'Email',
+      flex: 0.75,
+    },
+  ];
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        height: '98%',
+        width: '100%',
+      }}
+    >
+      {group && (
+        <ResizableGrid
+          id={group.GroupName}
+          rows={group.Users}
+          columns={columns}
+          hideFooterSelectedRowCount
+          pageSizeOptions={[25, 50, 100]}
+          initialState={{
+            pagination: { paginationModel: { pageSize: 25 } },
+            sorting: {
+              sortModel: [
+                {
+                  field: 'Organisation',
+                  sort: 'asc',
+                },
+              ],
+            },
+          }}
+        />
+      )}
+    </Box>
+  );
+}

package/tabs/src/components/my_country/GroupsBoard.jsx

@@ -0,0 +1,52 @@
+import { React, useState } from 'react';
+import { Box, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import { GroupView } from './GroupView';
+import CustomDrawer from '../CustomDrawer';
+
+export function GroupsBoard({ users, mappings }) {
+  const [groupIndex, setGroupIndex] = useState(0),
+    groups = mappings
+      .map((m) => {
+        const filteredUsers = users.filter((user) => {
+          return user.AllMemberships.includes(m.Membership);
+        });
+        return {
+          GroupName: m.Membership,
+          Users: filteredUsers,
+        };
+      })
+      .filter((group) => group.Users.length > 0),
+    drawerOptions = (
+      <div>
+        {groups.map((currentGroup, index) => {
+          return (
+            <ListItem disablePadding className="list-item" key={index}>
+              <ListItemButton
+                className={
+                  'list-item-button ' + (groupIndex == index ? ' drawer-item-selected' : '')
+                }
+                onClick={() => setGroupIndex(index)}
+              >
+                <ListItemText primary={currentGroup.GroupName} />
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
+      </div>
+    );
+
+  return (
+    <Box
+      sx={{
+        overflowY: 'scroll',
+        display: 'flex',
+        width: '100%',
+        height: '98%',
+        background: 'white',
+      }}
+    >
+      <CustomDrawer drawerOptions={drawerOptions}></CustomDrawer>
+      <GroupView group={groups[groupIndex]}></GroupView>
+    </Box>
+  );
+}

package/tabs/src/components/my_country/IndicatorCard.jsx

@@ -0,0 +1,60 @@
+import { React, useState } from 'react';
+import { Typography, Card, CardContent, Dialog, Link, Button, IconButton } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+export function IndicatorCard({ labelText, valueText, url, infoText }) {
+  const [infoOpen, setInfoOpen] = useState(false),
+    handleInfoOpen = () => {
+      infoText && setInfoOpen(true);
+    },
+    handleInfoClose = () => {
+      setInfoOpen(false);
+    };
+
+  return (
+    <Card variant="outlined" className="indicator-card">
+      <Dialog open={infoOpen} onClose={handleInfoClose} maxWidth="xl">
+        <Typography sx={{ padding: '1rem' }} color="secondary">
+          {infoText}
+        </Typography>
+        <Button
+          onClick={handleInfoClose}
+          sx={{ alignSelf: 'end', marginRight: '0.5rem', marginBottom: '0.5rem' }}
+        >
+          Close
+        </Button>
+      </Dialog>
+      <CardContent className="card-content">
+        <Typography className="card-value" color="primary" variant="h1" component="div">
+          {valueText}
+        </Typography>
+        <Typography className="card-label">{labelText}</Typography>
+        <IconButton
+          onClick={handleInfoOpen}
+          sx={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <HelpOutlineIcon />
+        </IconButton>
+      </CardContent>
+      {url && (
+        <Link
+          sx={{ color: 'text.main' }}
+          className="card-details"
+          color="secondary"
+          component="button"
+          variant="body1"
+          onClick={() => {
+            window.open(url, '_blank');
+          }}
+        >
+          {'Details'}
+        </Link>
+      )}
+    </Card>
+  );
+}

package/tabs/src/components/my_country/ManagementBoard.jsx

@@ -0,0 +1,109 @@
+import { React } from 'react';
+import { Box, Chip, Tooltip } from '@mui/material';
+import ResizableGrid from '../ResizableGrid';
+
+export function ManagementBoard({ users, mappings }) {
+  const boardMappings = mappings.filter((mp) => {
+      return mp.ManagementBoard;
+    }),
+    currentUsers = users
+      .filter((u) => {
+        return (
+          u.NFP ||
+          (u.Membership &&
+            u.Membership.some((m) => boardMappings.some((mapping) => mapping.Membership == m)))
+        );
+      })
+      .map((user) => {
+        const boardMembership =
+          user.NFP ||
+          (user.Membership &&
+            user.Membership.find((m) => boardMappings.some((mapping) => mapping.Membership == m)));
+        return {
+          id: user.id,
+          Organisation: user.Organisation,
+          Name: user.Title,
+          Email: user.Email,
+          BoardMembership: boardMembership,
+          OtherMemberships: user.OtherMemberships,
+          Membership: user.Membership,
+        };
+      }),
+    renderOtherMemberships = (params) => {
+      let index = 0,
+        allMemberships = [];
+
+      params.row.Membership && params.row.Membership.forEach((m) => allMemberships.push(m));
+      params.row.OtherMemberships &&
+        params.row.OtherMemberships.forEach((m) => allMemberships.push(m));
+      params.row.NFP && allMemberships.push(params.row.NFP);
+
+      allMemberships = allMemberships.filter((m) => m != params.row.BoardMembership);
+
+      return (
+        <Tooltip title={allMemberships.join(', ') || ''} arrow>
+          <div id="test">
+            {allMemberships.map((m) => (
+              <Chip variant="outlined" color="primary" key={index++} label={m} />
+            ))}
+          </div>
+        </Tooltip>
+      );
+    };
+
+  const columns = [
+    {
+      field: 'Organisation',
+      headerName: 'Organisation',
+      flex: 1.5,
+    },
+    {
+      field: 'BoardMembership',
+      headerName: 'Membership',
+      flex: 0.75,
+    },
+    {
+      field: 'Name',
+      headerName: 'Name',
+      flex: 0.75,
+    },
+    {
+      field: 'Email',
+      headerName: 'Email',
+      flex: 0.75,
+    },
+    {
+      field: 'OtherMemberships',
+      headerName: 'Other Memberships',
+      flex: 0.75,
+      renderCell: renderOtherMemberships,
+    },
+  ];
+  return (
+    <Box
+      sx={{
+        background: 'white',
+        height: '97%',
+        width: '100%',
+      }}
+    >
+      <ResizableGrid
+        rows={currentUsers}
+        columns={columns}
+        pageSize={25}
+        rowsPerPageOptions={[25]}
+        hideFooterSelectedRowCount={true}
+        initialState={{
+          sorting: {
+            sortModel: [
+              {
+                field: 'BoardMembership',
+                sort: 'asc',
+              },
+            ],
+          },
+        }}
+      ></ResizableGrid>
+    </Box>
+  );
+}