eionet2-dashboard 1.4.0

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

@@ -0,0 +1,186 @@
+import { React, useState, useEffect } from 'react';
+import {
+  Backdrop,
+  Box,
+  CircularProgress,
+  ListItem,
+  ListItemText,
+  ListItemButton,
+  ListItemIcon,
+} from '@mui/material';
+import { AtAGlance } from './AtAGlance';
+import { ManagementBoard } from './ManagementBoard';
+import {
+  getMappingsList,
+  getInvitedUsers,
+  getOrganisationList,
+  getAvailableGroups,
+} from '../../data/sharepointProvider';
+import { GroupsBoard } from './GroupsBoard';
+import './my_country.scss';
+import { getConfiguration } from '../../data/apiProvider';
+import { ScientificCommittee } from './ScientificCommittee';
+import { DataReporters } from './DataReporters';
+import TabPanel from '../TabPanel';
+
+import PreviewIcon from '@mui/icons-material/Preview';
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
+import GroupIcon from '@mui/icons-material/Group';
+import GroupWorkIcon from '@mui/icons-material/GroupWork';
+import CustomDrawer from '../CustomDrawer';
+
+export function MyCountry({ userInfo, selectedCountry }) {
+  const [tabsValue, setTabsValue] = useState(0),
+    [users, setUsers] = useState([]),
+    [mappings, setMappings] = useState([]),
+    [loading, setloading] = useState(false),
+    [organisations, setOrganisations] = useState([]),
+    [availableGroups, setAvailableGroups] = useState([]),
+    [configuration, setConfiguration] = useState({});
+
+  const loadData = async (country) => {
+    setloading(true);
+    const loadedUsers = await getInvitedUsers(country),
+      loadedOrganisations = await getOrganisationList(country),
+      loadedGroups = await getAvailableGroups();
+    loadedOrganisations && setOrganisations(loadedOrganisations);
+    setUsers(loadedUsers);
+    setAvailableGroups(loadedGroups);
+    setloading(false);
+  };
+
+  useEffect(() => {
+    (async () => {
+      setloading(true);
+
+      const loadedConfiguration = await getConfiguration();
+      if (loadedConfiguration) {
+        setConfiguration(loadedConfiguration);
+      }
+
+      await loadData(selectedCountry);
+
+      let loadedMappings = await getMappingsList();
+      if (loadedMappings) {
+        setMappings(loadedMappings);
+      }
+
+      setloading(false);
+    })();
+  }, [selectedCountry]);
+
+  const drawerOptions = (
+    <div>
+      {' '}
+      <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">
+            <PreviewIcon />
+          </ListItemIcon>
+          <ListItemText primary={'At a glance'} />
+        </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">
+            <ManageAccountsIcon />
+          </ListItemIcon>
+          <ListItemText primary={'NFPs/MB'} />
+        </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">
+            <GroupIcon />
+          </ListItemIcon>
+          <ListItemText primary={'Eionet groups'} />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding className="list-item" key={4}>
+        <ListItemButton
+          className={'list-item-button' + (tabsValue == 3 ? ' drawer-item-selected' : '')}
+          onClick={() => setTabsValue(3)}
+        >
+          <ListItemIcon className="list-item-icon">
+            <GroupWorkIcon />
+          </ListItemIcon>
+          <ListItemText primary={'ETCs'} />
+        </ListItemButton>
+      </ListItem>
+    </div>
+  );
+
+  return (
+    <div className="main">
+      <Box
+        sx={{
+          overflowY: 'scroll',
+          display: 'flex',
+          paddingTop: '4rem',
+          height: '100%',
+          background: '#F9F9F9',
+        }}
+      >
+        <Backdrop
+          sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={loading}
+        >
+          <CircularProgress color="primary" />
+        </Backdrop>
+
+        <CustomDrawer drawerOptions={drawerOptions}> </CustomDrawer>
+        <Box sx={{ width: '100%' }}>
+          <TabPanel value={tabsValue} index={0}>
+            <AtAGlance
+              users={users}
+              country={selectedCountry}
+              configuration={configuration}
+              userInfo={userInfo}
+              organisations={organisations}
+              availableGroups={availableGroups}
+            ></AtAGlance>
+          </TabPanel>
+          <TabPanel value={tabsValue} index={1}>
+            <ManagementBoard users={users} mappings={mappings}></ManagementBoard>
+          </TabPanel>
+          <TabPanel value={tabsValue} index={2}>
+            <GroupsBoard
+              users={users}
+              mappings={mappings.filter((m) => {
+                return !m.OtherMembership;
+              })}
+            ></GroupsBoard>
+          </TabPanel>
+          <TabPanel value={tabsValue} index={3}>
+            <GroupsBoard
+              users={users}
+              mappings={mappings.filter((m) => {
+                return m.OtherMembership;
+              })}
+            ></GroupsBoard>
+          </TabPanel>
+          {false && (
+            <TabPanel value={tabsValue} index={4}>
+              <ScientificCommittee></ScientificCommittee>
+            </TabPanel>
+          )}
+          {false && (
+            <TabPanel value={tabsValue} index={5}>
+              <DataReporters></DataReporters>
+            </TabPanel>
+          )}
+        </Box>
+        {false && <span>{userInfo.toString()}</span>}
+      </Box>
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+import { React, useState } from 'react';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CircularProgress,
+  Typography,
+  IconButton,
+  Dialog,
+} from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+export function ProgressGauge({ totalCount, responseCount, label, infoText }) {
+  const [infoOpen, setInfoOpen] = useState(false),
+    handleInfoOpen = () => {
+      infoText && setInfoOpen(true);
+    },
+    handleInfoClose = () => {
+      setInfoOpen(false);
+    },
+    originalValue = (responseCount / totalCount) * 100,
+    valueProgress = isNaN(originalValue) ? 0 : originalValue;
+
+  function FullCircularProgress(props) {
+    return (
+      <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+        <CircularProgress
+          sx={{ position: 'relative', zIndex: 2 }}
+          size={150}
+          variant="determinate"
+          value={valueProgress}
+          thickness={6}
+          {...props}
+        />
+        <CircularProgress
+          sx={{
+            position: 'absolute',
+            zIndex: 1,
+            right: 0,
+            color: (theme) => theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
+          }}
+          size={150}
+          variant="determinate"
+          value={100}
+          thickness={6}
+          {...props}
+        />
+      </Box>
+    );
+  }
+
+  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">
+        <IconButton
+          onClick={handleInfoOpen}
+          sx={{
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <HelpOutlineIcon />
+        </IconButton>
+        <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+          <FullCircularProgress></FullCircularProgress>
+          <Box
+            sx={{
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Typography
+              sx={{ fontSize: '28px', fontWeight: '600' }}
+              variant="caption"
+              component="div"
+              color="primary"
+            >
+              {responseCount}
+            </Typography>
+            <Typography
+              sx={{ fontSize: '28px', fontWeight: '400' }}
+              variant="caption"
+              component="div"
+              color="primary"
+            >
+              /{totalCount}
+            </Typography>
+          </Box>
+        </Box>
+        <Typography
+          sx={{
+            textAlign: 'center',
+            marginTop: '1rem',
+            width: '150px',
+            height: '1rem',
+            fontSize: '20px',
+          }}
+        >
+          {label}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

@@ -0,0 +1,41 @@
+import { React } from 'react';
+import { Box, Typography } from '@mui/material';
+import { ProgressGauge } from './ProgressGauge';
+
+export function YearlyProgress({
+  allMeetingsCount,
+  attendedMeetingsCount,
+  allConsultationsCount,
+  responseConsultationsCount,
+  allSurveysCount,
+  responseSurveysCount,
+  configuration,
+}) {
+  return (
+    <div className="">
+      <Typography sx={{ fontSize: '16px', fontWeight: '600' }} color="text.secondary">
+        Participation:
+      </Typography>
+      <Box className="cards-container" sx={{ border: '0px' }}>
+        <ProgressGauge
+          label="Consultations"
+          totalCount={allConsultationsCount}
+          responseCount={responseConsultationsCount}
+          infoText={configuration.YearlyConsultationsCountInfo}
+        ></ProgressGauge>
+        <ProgressGauge
+          label="Inquiries"
+          totalCount={allSurveysCount}
+          responseCount={responseSurveysCount}
+          infoText={configuration.YearlySurveysCountInfo}
+        ></ProgressGauge>
+        <ProgressGauge
+          label="Events"
+          totalCount={allMeetingsCount}
+          responseCount={attendedMeetingsCount}
+          infoText={configuration.YearlyEventsCountInfo}
+        ></ProgressGauge>
+      </Box>
+    </div>
+  );
+}

package/tabs/src/components/my_country/my_country.scss

@@ -0,0 +1,81 @@
+@import '../variables.scss';
+
+.group-accordion {
+  padding-bottom: 0.5rem;
+}
+
+.accordion-summary {
+  background-color: #dae8f4 !important;
+}
+
+.accordion-summary-text {
+  font-weight: bold !important;
+  font-size: larger !important;
+}
+
+.year-tab {
+  font-size: 1.8rem !important;
+}
+
+.indicator-card {
+  margin: 1rem;
+  border: 0 !important;
+}
+
+.box-fill {
+  display: flex;
+  align-items: stretch;
+  height: 85%;
+  width: 100%;
+
+  &-column {
+    @extend .box-fill;
+    flex-direction: column;
+  }
+}
+
+.cards-container {
+  display: inline-flex;
+  text-align: start;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.card-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-value {
+  font-size: 50px !important;
+  font-weight: 600 !important;
+  padding-top: 0.5rem;
+}
+
+.card-second-value {
+  font-size: 50px !important;
+}
+
+.card-label {
+  font-size: 18px !important;
+  width: 10rem;
+  height: 3rem;
+  font-weight: 400;
+}
+
+.card-details {
+  font-size: 15px !important;
+  padding-bottom: 0.5rem !important;
+  padding-left: 15px !important;
+}
+
+.progress-bar {
+  display: flex;
+  padding: 0.3rem;
+  width: 100%;
+}
+
+.country-drawer {
+  width: 15% !important;
+}

package/tabs/src/components/publications/Publications.jsx

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