eionet2-dashboard 1.4.0

package/tabs/src/components/self_service/UserEdit.jsx

@@ -0,0 +1,334 @@
+import { React, useState, useEffect } from 'react';
+import { saveData } from '../../data/selfServiceProvider';
+import { getGenderList } from '../../data/selfServiceSharepointProvider';
+import { validateMandatoryField, validateName, validatePhone } from '../../data/validator';
+import './UserEdit.scss';
+import {
+  Box,
+  TextField,
+  Autocomplete,
+  Button,
+  FormLabel,
+  CircularProgress,
+  Chip,
+  Paper,
+  InputLabel,
+  Link,
+  Typography,
+  Divider,
+} from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import SaveIcon from '@mui/icons-material/Save';
+
+export function UserEdit({ user }) {
+  const [loading, setLoading] = useState(false),
+    [success, setSuccess] = useState(false),
+    [warningVisible, setWarningVisible] = useState(false),
+    [warningText, setWarningText] = useState(''),
+    [genders, setGenders] = useState([]);
+
+  const [errors, setErrors] = useState({});
+
+  const submit = async (e) => {
+      if (!loading) {
+        e.preventDefault();
+        let tempErrors = validateForm();
+        setWarningVisible(false);
+        if (
+          !tempErrors ||
+          !Object.values(tempErrors).some((v) => {
+            return v;
+          })
+        ) {
+          setSuccess(false);
+          setLoading(true);
+          let result = await saveData(user);
+          if (!result.Success) {
+            setWarningText(result.Message + '\n' + result.Error);
+            setWarningVisible(true);
+            setSuccess(false);
+          } else {
+            setWarningText('');
+            setWarningVisible(false);
+          }
+          setSuccess(true);
+          setLoading(false);
+        }
+      }
+    },
+    validateField = (e) => {
+      let id = e.target.id,
+        tempErrors = { ...errors };
+
+      switch (id) {
+        case 'gender':
+          tempErrors.gender = validateName(user.Gender);
+          break;
+        case 'firstName':
+          tempErrors.firstName = validateName(user.FirstName);
+          break;
+        case 'lastName':
+          tempErrors.lastName = validateName(user.LastName);
+          break;
+        case 'phone':
+          tempErrors.phone = validatePhone(user.Phone);
+          break;
+
+        default:
+          console.log('Undefined field for validation');
+          break;
+      }
+
+      setErrors({ ...tempErrors });
+    },
+    validateForm = () => {
+      let tempErrors = { ...errors };
+      tempErrors.gender = validateMandatoryField(user.Gender);
+      tempErrors.firstName = validateName(user.FirstName);
+      tempErrors.lastName = validateName(user.LastName);
+      tempErrors.phone = validatePhone(user.Phone);
+      setErrors({ ...tempErrors });
+      return tempErrors;
+    };
+
+  useEffect(() => {
+    (async () => {
+      let loadedGenders = await getGenderList();
+      loadedGenders && setGenders(loadedGenders);
+    })();
+  });
+
+  return (
+    <div className="">
+      {user && (
+        <Box
+          sx={{
+            overflowY: 'scroll',
+            paddingLeft: '1.5rem',
+            paddingTop: '6rem',
+            height: '100%',
+            backgroundColor: 'suplementary.main',
+          }}
+        >
+          <Box
+            component="form"
+            sx={{
+              '& .MuiTextField-root': { m: 1 },
+            }}
+            autoComplete="off"
+            noValidate
+            onSubmit={(e) => {
+              submit(e);
+            }}
+          >
+            <Typography className="subtitle">Manage personal details</Typography>
+            <FormLabel className="note-label">
+              {user.SelfSeviceHelpdeskPersonalDetailsText}{' '}
+            </FormLabel>
+            <Box className="row-container" sx={{ backgroundColor: 'white', marginTop: '1.5rem' }}>
+              <Box className="row">
+                <Autocomplete
+                  disablePortal
+                  sx={{ width: '20ch', marginRight: '0.75rem' }}
+                  id="combo-box-gender"
+                  defaultValue={user.Gender || ''}
+                  options={genders}
+                  onChange={(e, value) => {
+                    user.Gender = value;
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      autoComplete="off"
+                      className="control"
+                      label="Salutation"
+                      variant="standard"
+                      error={Boolean(errors?.gender)}
+                      helperText={errors?.gender}
+                      onBlur={validateField}
+                    />
+                  )}
+                />
+                <TextField
+                  required
+                  autoComplete="off"
+                  className="control"
+                  id="firstName"
+                  label="First name"
+                  variant="standard"
+                  defaultValue={user.FirstName}
+                  onChange={(e) => {
+                    user.FirstName = e.target.value;
+                    validateField(e);
+                  }}
+                  inputProps={{ style: { textTransform: 'capitalize' } }}
+                  error={Boolean(errors?.firstName)}
+                  helperText={errors?.firstName}
+                  onBlur={validateField}
+                />
+                <TextField
+                  required
+                  autoComplete="off"
+                  className="control"
+                  id="lastName"
+                  label="Last name"
+                  variant="standard"
+                  defaultValue={user.LastName}
+                  onChange={(e) => {
+                    user.LastName = e.target.value;
+                    validateField(e);
+                  }}
+                  inputProps={{ style: { textTransform: 'capitalize' } }}
+                  error={Boolean(errors?.lastName)}
+                  helperText={errors?.lastName}
+                  onBlur={validateField}
+                />
+                <TextField
+                  autoComplete="off"
+                  className="control"
+                  id="phone"
+                  label="Phone"
+                  variant="standard"
+                  defaultValue={user.Phone}
+                  onChange={(e) => {
+                    user.Phone = e.target.value;
+                    validateField(e);
+                  }}
+                  inputProps={{ maxLength: 15 }}
+                  error={Boolean(errors?.phone)}
+                  helperText={errors?.phone}
+                  onBlur={validateField}
+                />
+              </Box>
+              <Box className="row">
+                <TextField
+                  disabled
+                  required
+                  autoComplete="off"
+                  className="control"
+                  id="lastName"
+                  label="Country"
+                  variant="standard"
+                  defaultValue={user.Country}
+                />
+                <TextField
+                  disabled
+                  required
+                  autoComplete="off"
+                  className="control"
+                  id="email"
+                  defaultValue={user.Email}
+                  label="Email"
+                  variant="standard"
+                />
+                <TextField
+                  disabled
+                  required
+                  autoComplete="off"
+                  className="control"
+                  id="lastName"
+                  label="Organisation"
+                  variant="standard"
+                  defaultValue={user.Organisation}
+                />
+              </Box>
+            </Box>
+            <Box className="row">
+              {user.Memberships && (
+                <Paper square className="paper-container" elevation={0}>
+                  <InputLabel className="inputLabel">Memberships</InputLabel>
+                  <Paper className="paper" elevation={0}>
+                    {user.Memberships.map((data) => {
+                      return (
+                        <Chip
+                          variant="outlined"
+                          color="primary"
+                          key={data}
+                          className="chip"
+                          label={data}
+                        />
+                      );
+                    })}
+                  </Paper>
+                </Paper>
+              )}
+              {user.OtherMemberships && (
+                <Paper square className="paper-container" elevation={0}>
+                  <InputLabel className="inputLabel">Other memberships</InputLabel>
+                  <Paper className="paper" elevation={0}>
+                    {user.OtherMemberships.map((data) => {
+                      return (
+                        <Chip
+                          variant="outlined"
+                          color="primary"
+                          key={data}
+                          className="chip"
+                          label={data}
+                        />
+                      );
+                    })}
+                  </Paper>
+                </Paper>
+              )}
+              {user.NFP && (
+                <Paper sx={{ marginRight: '0' }} square className="paper-container" elevation={0}>
+                  <InputLabel className="inputLabel">NFP</InputLabel>
+                  <Paper className="paper" elevation={0}>
+                    <Chip className="chip" variant="outlined" color="primary" label={user.NFP} />
+                  </Paper>
+                </Paper>
+              )}
+            </Box>
+            <div className="row">
+              <FormLabel className="note-label">
+                Note: If the email or other details needs to be changed, kindly contact{' '}
+                <Link sx={{ color: 'secondary.main' }} href="mailto:helpdesk@eea.europa.eu">
+                  EEA Helpdesk
+                </Link>
+                .
+              </FormLabel>
+            </div>
+            <div className="row">
+              <Box sx={{ position: 'relative' }}>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  size="medium"
+                  className="button"
+                  disabled={loading}
+                  endIcon={success ? <CheckIcon /> : <SaveIcon />}
+                >
+                  Save changes
+                </Button>
+                {loading && (
+                  <CircularProgress
+                    color="primary"
+                    size={24}
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      marginTop: '-12px',
+                      marginLeft: '-12px',
+                    }}
+                  />
+                )}
+              </Box>
+              {warningVisible && (
+                <FormLabel className="note-label warning" error>
+                  {warningText}
+                </FormLabel>
+              )}
+            </div>
+          </Box>
+          <Divider sx={{ marginBottom: '1rem' }}></Divider>
+          <Box>
+            <Typography className="subtitle">Manage preferences</Typography>
+            <FormLabel className="note-label">{user.SelfSeviceHelpdeskPreferencesText} </FormLabel>
+          </Box>
+        </Box>
+      )}
+    </div>
+  );
+}

package/tabs/src/components/self_service/UserEdit.scss

@@ -0,0 +1,107 @@
+@import '../variables.scss';
+
+.error {
+  color: red;
+}
+
+.row-container {
+  background-color: white;
+  width: 65%;
+
+  @media (max-width: map-get($breakpoints, lg)) {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .row {
+    width: 100%;
+  }
+}
+
+.row {
+  padding: 0.2rem;
+  display: flex;
+  flex-direction: row;
+  width: 65%;
+  margin-bottom: 0.5rem;
+
+  @media (max-width: map-get($breakpoints, lg)) {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+.control {
+  margin-left: 0.75rem !important;
+  margin-right: 0.75rem !important;
+
+  @media (max-width: map-get($breakpoints, lg)) {
+    width: 100% !important;
+  }
+}
+
+.inputLabel {
+  margin: 0.5rem;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
+
+.paper-container {
+  background-color: white;
+  width: 33%;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  @media (max-width: map-get($breakpoints, lg)) {
+    width: 100% !important;
+  }
+}
+
+.paper {
+  margin: 8px !important;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  background-color: white;
+}
+
+.chip {
+  margin: 5px;
+  display: flex;
+  width: fit-content;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.success {
+  color: green;
+  font-weight: bold;
+  padding: 0.35rem;
+}
+
+.user-list {
+  width: 100%;
+  height: 50%;
+}
+
+.button {
+  margin: 1rem 0 0 0.5rem;
+  position: relative;
+}
+
+.small-width {
+  width: 25% !important;
+  min-width: 150px !important;
+}
+
+.subtitle {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+}
+
+.note-label {
+  margin-left: 0;
+  font-size: 16px !important;
+}

package/tabs/src/data/apiProvider.js

@@ -0,0 +1,153 @@
+import { TeamsUserCredential, getResourceConfiguration, ResourceType } from '@microsoft/teamsfx';
+import * as axios from 'axios';
+
+async function callApiFunction(command, method, options, params) {
+  let message = [];
+
+  const credential = new TeamsUserCredential();
+  const accessToken = await credential.getToken('');
+  const apiConfig = getResourceConfiguration(ResourceType.API);
+  const response = await axios.default.request({
+    method: method,
+    url: apiConfig.endpoint + '/api/' + command,
+    headers: {
+      authorization: 'Bearer ' + accessToken.token,
+    },
+    data: options,
+    params,
+  });
+  message = response.data;
+
+  return message;
+}
+
+export async function apiGet(path, credentialType = 'app') {
+  try {
+    return await callApiFunction('graphData', 'get', undefined, {
+      path: path,
+      credentialType: credentialType,
+    });
+  } catch (err) {
+    logError(err, path, null);
+    throw err;
+  }
+}
+
+export async function apiPost(path, data, credentialType = 'app') {
+  try {
+    return await callApiFunction('graphData', 'post', {
+      credentialType: credentialType,
+      data: data,
+      path: path,
+    });
+  } catch (err) {
+    logError(err, path, data);
+    throw err;
+  }
+}
+
+export async function apiPatch(path, data, eTag = undefined, credentialType = 'app') {
+  try {
+    return await callApiFunction('graphData', 'patch', {
+      credentialType: credentialType,
+      data: data,
+      path: path,
+      ...(eTag && { eTag: eTag }),
+    });
+  } catch (err) {
+    logError(err, path, data);
+    throw err;
+  }
+}
+
+export async function apiDelete(path, credentialType = 'app') {
+  try {
+    return await callApiFunction('graphData', 'delete', {
+      credentialType: credentialType,
+      path: path,
+    });
+  } catch (err) {
+    logError(err, path, null);
+    throw err;
+  }
+}
+
+let _userMail = undefined;
+export async function getUserMail() {
+  if (!_userMail) {
+    const response = await apiGet('me?$select=id,displayName,mail,mobilePhone,country', 'user');
+
+    if (response.graphClientMessage) {
+      _userMail = response.graphClientMessage.mail;
+    }
+  }
+  return _userMail;
+}
+
+const sharepointSiteId = process.env.REACT_APP_SHAREPOINT_SITE_ID,
+  configurationListId = process.env.REACT_APP_CONFIGURATION_LIST_ID;
+
+let _configuration = undefined;
+export async function getConfiguration() {
+  try {
+    if (!_configuration) {
+      const response = await apiGet(
+        '/sites/' + sharepointSiteId + '/lists/' + configurationListId + '/items?$expand=fields',
+      );
+      _configuration = {};
+      response.graphClientMessage.value.forEach(function (item) {
+        _configuration[item.fields.Title] = item.fields.Value;
+      });
+      _configuration.SharepointSiteId = sharepointSiteId;
+    }
+    return _configuration;
+  } catch (err) {
+    console.log(err);
+    return undefined;
+  }
+}
+
+export async function logError(err, apiPath, data) {
+  const spConfig = await getConfiguration(),
+    userMail = await getUserMail();
+
+  const title = err.response?.data?.error?.body;
+
+  let fields = {
+    fields: {
+      ApplicationName: 'Eionet2-Dashboard',
+      ApiPath: apiPath,
+      ApiData: JSON.stringify(data),
+      Title: title ? title : err,
+      UserMail: userMail,
+      Timestamp: new Date(),
+      Logtype: 'Error',
+    },
+  };
+
+  let graphURL =
+    '/sites/' + spConfig.SharepointSiteId + '/lists/' + spConfig.LoggingListId + '/items';
+  await apiPost(graphURL, fields);
+}
+
+export async function logInfo(message, apiPath, data, action) {
+  const spConfig = await getConfiguration(),
+    userMail = await getUserMail();
+
+  let fields = {
+    fields: {
+      ApplicationName: 'Eionet2-Dashboard',
+      ApiPath: apiPath,
+      ApiData: JSON.stringify(data),
+      Title: message,
+      UserMail: userMail,
+      Timestamp: new Date(),
+      Logtype: 'Info',
+      Action: action,
+    },
+  };
+
+  let graphURL =
+    '/sites/' + spConfig.SharepointSiteId + '/lists/' + spConfig.LoggingListId + '/items';
+  await apiPost(graphURL, fields);
+}

package/tabs/src/data/constants.json

@@ -0,0 +1,7 @@
+{
+  "GridRowHeight": 40,
+  "ConsultationType": {
+    "Consultation": "Consultation",
+    "Survey": "Inquiry"
+  }
+}

package/tabs/src/data/hooks/useConfiguration.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { getConfiguration } from '../apiProvider';
+
+export function useConfiguration() {
+  const [configuration, setConfiguration] = useState({});
+
+  useEffect(() => {
+    async function fetchData() {
+      let loadedConfiguration = await getConfiguration();
+      if (loadedConfiguration) {
+        setConfiguration(loadedConfiguration);
+      }
+    }
+    fetchData();
+  }, [getConfiguration]);
+
+  return configuration;
+}

package/tabs/src/data/icsHelper.js

@@ -0,0 +1,38 @@
+import { createEvent } from 'ics';
+import { differenceInMinutes } from 'date-fns';
+
+export function createIcs(meeting) {
+  let result = undefined,
+    duration = undefined;
+  const meetingStart = new Date(meeting.MeetingStart);
+  const durationInMinutes = differenceInMinutes(new Date(meeting.MeetingEnd), meetingStart);
+  if (durationInMinutes >= 60) {
+    duration = {
+      hours: Math.floor(durationInMinutes / 60),
+      minutes: durationInMinutes % 60,
+    };
+  } else {
+    duration = {
+      minutes: durationInMinutes,
+    };
+  }
+  const event = {
+    start: [
+      meetingStart.getFullYear(),
+      meetingStart.getMonth(),
+      meetingStart.getDate(),
+      meetingStart.getHours(),
+      meetingStart.getMinutes(),
+    ],
+    duration: duration,
+    title: meeting.Title,
+    ...(meeting.MeetingLink && { url: meeting.MeetingLink }),
+  };
+
+  createEvent(event, (error, value) => {
+    const blob = new Blob([value], { type: 'text/plain;charset=utf-8' });
+    result = blob;
+  });
+
+  return result;
+}

package/tabs/src/data/messages.json

@@ -0,0 +1,39 @@
+{
+  "UserInvite": {
+    "UserAlreadyRegistered": "User with this email already registered.",
+    "InvalidEmail": "Invalid email. Please correct the email address!",
+    "EEAUserError": "Users with EEA email address cannot be invited as guests.",
+    "Errors": {
+      "Invitation": "Could not create the user invitation.",
+      "ADUserCreation": "Could not update the user contact data.",
+      "JoiningTeam": "The user could not be added to the Eionet teams. Please use the Manage user tab to update the user Membership(s)",
+      "TagsCreation": "The tags could not be updated. Please use the Manage user tab to update the user Membership(s)",
+      "SharepointUser": "User details could not be updated in the SharePoint Users list.",
+      "Mail": "An error has occured during the sending invitation email.",
+      "Error": "An error has occured during the invitation process."
+    }
+  },
+  "UserList": {
+    "MissingADUser": "The user account cannot be updated (account is not present in the Azure tenant).",
+    "DeleteUser": "Are you sure you want to remove the user #name# from the Eionet directory?",
+    "DeleteUserMemberships": "The user is also a member of the following groups at EEA:"
+  },
+  "UserEdit": {
+    "MissingMembership": "At least one the following fields must be selected Eionet groups, Other memberships or NFP.",
+    "Errors": {
+      "ADUserCreation": "Could not update the user contact data.",
+      "Mail": "An error has occured during the sending inviation email.",
+      "Invitation": "Could not create the user invitation.",
+      "ADUser": "Could not update the user contact data.",
+      "JoiningTeam": "The user could not be added to the Eionet teams. Please use the Manage user tab to update the user Membership(s)",
+      "TagsCreation": "The tags could not be updated. Please use the Manage user tab to update the user Membership(s)",
+      "SharepointUser": "User details could not be updated in the SharePoint Users list.",
+      "Error": "An error has occured when saving user information."
+    }
+  },
+  "UserDelete": {
+    "Errors": {
+      "ADUser": "Could not update the user information."
+    }
+  }
+}