eionet2-dashboard 1.4.0

package/tabs/src/components/event_rating/EventRating.jsx

@@ -0,0 +1,92 @@
+import { React, useState } from 'react';
+import { Box, Button, CircularProgress, Backdrop, Rating, Typography } from '@mui/material';
+
+import CheckIcon from '@mui/icons-material/Check';
+import SaveIcon from '@mui/icons-material/Save';
+import StarIcon from '@mui/icons-material/Star';
+
+import { postRating } from '../../data/sharepointProvider';
+
+const labels = {
+  1: 'Useless',
+  2: 'Poor',
+  3: 'Ok',
+  4: 'Good',
+  5: 'Excellent',
+};
+
+function getLabelText(value) {
+  return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
+}
+
+export function EventRating({ configuration, participant, event, onRate }) {
+  const [loading, setLoading] = useState(false),
+    [ratingValue, setRatingValue] = useState(5),
+    [hover, setHover] = useState(-1),
+    [successUpdate, setSuccessUpdate] = useState(false);
+
+  const handleRating = async () => {
+    setSuccessUpdate(false);
+    setLoading(true);
+    const result = await postRating(event, participant, ratingValue);
+
+    setSuccessUpdate(true);
+    setLoading(false);
+    onRate && onRate(result);
+  };
+
+  return (
+    <div className="">
+      <Box className="popup" sx={{ maxHeight: '900px', marginTop: '0.5rem' }}>
+        <Backdrop
+          sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={loading}
+        >
+          <CircularProgress color="primary" />
+        </Backdrop>
+        {configuration.EventRatingModalText && (
+          <Typography sx={{ width: '100%' }} variant="subtitle2">
+            {configuration.EventRatingModalText}
+          </Typography>
+        )}
+        <Box
+          sx={{
+            width: 200,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Rating
+            name="hover-feedback"
+            value={ratingValue}
+            precision={1}
+            getLabelText={getLabelText}
+            onChange={(_event, newValue) => {
+              setRatingValue(newValue);
+            }}
+            onChangeActive={(_event, newHover) => {
+              setHover(newHover);
+            }}
+            emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
+          />
+          {ratingValue !== null && (
+            <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : ratingValue]}</Box>
+          )}
+        </Box>
+        <Box sx={{ marginTop: '1rem' }}>
+          <Button
+            onClick={handleRating}
+            variant="contained"
+            color="primary"
+            size="medium"
+            className="button"
+            disabled={loading}
+            endIcon={successUpdate ? <CheckIcon /> : <SaveIcon />}
+          >
+            Confirm rating
+          </Button>
+        </Box>
+      </Box>
+    </div>
+  );
+}

package/tabs/src/components/event_rating/EventRatingDialog.jsx

@@ -0,0 +1,46 @@
+import { React } from 'react';
+import { Dialog, DialogTitle, IconButton } from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+
+import { EventRating } from '../event_rating/EventRating';
+import { EventDialogTitle } from '../EventDialogTitle';
+
+import { useConfiguration } from '../../data/hooks/useConfiguration';
+
+export function EventRatingDialog({ open, handleClose, event, participant }) {
+  const configuration = useConfiguration();
+  return (
+    <Dialog
+      className="dialog"
+      open={open}
+      onClose={() => handleClose(false)}
+      maxWidth="md"
+      fullWidth
+    >
+      {event && (
+        <DialogTitle>
+          <IconButton
+            aria-label="close"
+            onClick={() => handleClose(false)}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              color: (theme) => theme.palette.grey[500],
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+          <EventDialogTitle title={'RATING OF THE EVENT'} event={event}></EventDialogTitle>
+        </DialogTitle>
+      )}
+      <EventRating
+        configuration={configuration}
+        event={event}
+        participant={participant}
+        onRate={handleClose}
+      ></EventRating>
+    </Dialog>
+  );
+}

package/tabs/src/components/event_registration/Approval.jsx

@@ -0,0 +1,80 @@
+import { React, useState } from 'react';
+import { Box, TextField, Checkbox, Autocomplete, FormControlLabel } from '@mui/material';
+import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
+import AssignmentLateIcon from '@mui/icons-material/AssignmentLate';
+
+export function Approval({ participant }) {
+  const [approvalStatus, setApprovalStatus] = useState(participant.NFPApproved),
+    approvalOptions = ['No value', 'Approved', 'Declined'];
+
+  return (
+    <Box className="row box approval-row">
+      <Box className="row fixed">
+        <TextField
+          disabled
+          className="control w50"
+          id="name"
+          label="Name"
+          variant="standard"
+          defaultValue={participant.ParticipantName}
+        />
+        <TextField
+          disabled
+          className="control w50"
+          id="email"
+          label="Email"
+          variant="standard"
+          defaultValue={participant.Email}
+        />
+      </Box>
+      <Box className="row fixed">
+        <FormControlLabel
+          sx={{ fontSize: '12px' }}
+          className="control"
+          control={<Checkbox disabled checked={participant.PhysicalParticipation} />}
+          label="Physical participation"
+          labelPlacement="end"
+        />
+        <FormControlLabel
+          sx={{ fontSize: '12px' }}
+          className="control"
+          control={<Checkbox disabled checked={participant.EEAReimbursementRequested} />}
+          label="Reimbursement requested"
+          labelPlacement="end"
+        />
+        {approvalStatus == 'Approved' && (
+          <AssignmentTurnedInIcon
+            sx={{ alignSelf: 'center' }}
+            color="primary"
+          ></AssignmentTurnedInIcon>
+        )}
+        {approvalStatus == 'Declined' && (
+          <AssignmentLateIcon sx={{ alignSelf: 'center' }} color="error"></AssignmentLateIcon>
+        )}
+        {approvalStatus != 'Approved' && approvalStatus != 'Declined' && (
+          <AssignmentLateIcon sx={{ alignSelf: 'center' }} color="warning"></AssignmentLateIcon>
+        )}
+        <Autocomplete
+          id="nfp-approval"
+          className="control"
+          defaultValue={participant.NFPApproved || ''}
+          options={approvalOptions}
+          onChange={(_e, value) => {
+            participant.NFPApproved = value;
+            participant.NFPApprovalChanged = true;
+            setApprovalStatus(value);
+          }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              autoComplete="off"
+              className="small-width"
+              label="Approval status"
+              variant="standard"
+            />
+          )}
+        />
+      </Box>
+    </Box>
+  );
+}

package/tabs/src/components/event_registration/ApprovalDialog.jsx

@@ -0,0 +1,30 @@
+import { React } from 'react';
+import { Dialog, DialogTitle, IconButton } from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+
+import { ApprovalList } from './ApprovalList';
+import { EventDialogTitle } from '../EventDialogTitle';
+
+export function ApprovalDialog({ open, handleClose, event, userInfo }) {
+  return (
+    <Dialog className="dialog" open={open} onClose={handleClose} maxWidth="xl" fullWidth>
+      <DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <EventDialogTitle title={'APPROVALS FOR EVENT'} event={event}></EventDialogTitle>
+      </DialogTitle>
+      <ApprovalList event={event} userInfo={userInfo}></ApprovalList>
+    </Dialog>
+  );
+}

package/tabs/src/components/event_registration/ApprovalList.jsx

@@ -0,0 +1,62 @@
+import { React, useRef, useState } from 'react';
+import { Box, Button, CircularProgress, Backdrop } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import SaveIcon from '@mui/icons-material/Save';
+import { patchParticipants } from '../../data/sharepointProvider';
+import { Approval } from './Approval';
+import { HtmlBox } from '../HtmlBox';
+import { useConfiguration } from '../../data/hooks/useConfiguration';
+
+export function ApprovalList({ event }) {
+  const configuration = useConfiguration(),
+    editEvent = useRef(JSON.parse(JSON.stringify(event))),
+    [loading, setLoading] = useState(false),
+    [success, setSuccess] = useState(false),
+    handleUpdate = async () => {
+      const currentEvent = editEvent.current;
+      setSuccess(false);
+      setLoading(true);
+      await patchParticipants(currentEvent.Participants, currentEvent);
+      event.Participants = currentEvent.Participants;
+      setSuccess(true);
+      setLoading(false);
+    };
+
+  return (
+    <Box className="popup">
+      <Box sx={{ minHeight: '150px' }}>
+        {editEvent.current.Participants.map((participant) => {
+          return <Approval key={participant.id} participant={participant}></Approval>;
+        })}
+      </Box>
+      <HtmlBox html={configuration?.EventApprovalInfo}></HtmlBox>
+      <Button
+        sx={{ marginTop: '1rem' }}
+        onClick={handleUpdate}
+        variant="contained"
+        color="secondary"
+        size="medium"
+        className="button"
+        disabled={loading}
+        endIcon={success ? <CheckIcon /> : <SaveIcon />}
+      >
+        Update
+      </Button>
+      <Backdrop
+        sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+      >
+        <CircularProgress
+          color="primary"
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            marginTop: '-12px',
+            marginLeft: '-12px',
+          }}
+        />
+      </Backdrop>
+    </Box>
+  );
+}

package/tabs/src/components/event_registration/EventRegistration.jsx

@@ -0,0 +1,214 @@
+import { React, useState } from 'react';
+import {
+  Box,
+  Checkbox,
+  TextField,
+  Button,
+  FormControlLabel,
+  CircularProgress,
+  Backdrop,
+  Typography,
+} from '@mui/material';
+
+import CheckIcon from '@mui/icons-material/Check';
+import SaveIcon from '@mui/icons-material/Save';
+
+import {
+  postParticipant,
+  patchParticipant,
+  deleteParticipant,
+} from '../../data/sharepointProvider';
+import { useConfiguration } from '../../data/hooks/useConfiguration';
+import { HtmlBox } from '../HtmlBox';
+
+export function EventRegistration({ participant, event }) {
+  const configuration = useConfiguration();
+
+  const [loading, setLoading] = useState(false),
+    [successRegister, setSuccessRegister] = useState(false),
+    [successUpdate, setSuccessUpdate] = useState(false),
+    [successUnregister, setSuccessUnregister] = useState(false),
+    [physical, setPhysical] = useState(participant.PhysicalParticipation),
+    [reimbursement, setReimbursement] = useState(participant.EEAReimbursementRequested);
+
+  const handleRegister = async () => {
+      setSuccessRegister(false);
+      setLoading(true);
+      participant.Registered = true;
+      participant.RegistrationDate = new Date();
+      const response = await postParticipant(participant, event);
+      if (response) {
+        participant.id = response.id;
+        event.Participants.push(participant);
+        setEventProperties(true);
+      }
+      setSuccessRegister(true);
+      setLoading(false);
+    },
+    handleUpdateRegistration = async () => {
+      setSuccessUpdate(false);
+      setLoading(true);
+      participant.NFPApproved = 'No value';
+      participant.Registered = true;
+      await patchParticipant(participant, event);
+      setEventProperties(true);
+      setSuccessUpdate(true);
+      setLoading(false);
+    },
+    handleUnregister = async () => {
+      setSuccessUnregister(false);
+      setLoading(true);
+      participant.Registered = false;
+      await deleteParticipant(participant, event);
+      setEventProperties(false);
+      setSuccessUnregister(true);
+      setLoading(false);
+    },
+    setEventProperties = (hasRegistered) => {
+      event.HasRegistered = hasRegistered;
+      event.NoOfRegistered = event.Participants.filter((p) => {
+        return p.Registered;
+      }).length;
+    };
+
+  return (
+    <Box className="popup" sx={{ maxHeight: '900px' }}>
+      <Backdrop
+        sx={{ color: '#6b32a8', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+      >
+        <CircularProgress color="primary" />
+      </Backdrop>
+      <Box className="row">
+        <TextField
+          variant="standard"
+          className="control"
+          disabled
+          label="Name"
+          defaultValue={participant.ParticipantName}
+        ></TextField>
+        <TextField
+          variant="standard"
+          className="control"
+          disabled
+          label="Email"
+          defaultValue={participant.Email}
+        ></TextField>
+        <TextField
+          variant="standard"
+          className="control"
+          disabled
+          label="Country"
+          defaultValue={participant.Country}
+        ></TextField>
+      </Box>
+      {event.IsOffline && (
+        <Box>
+          <FormControlLabel
+            sx={{ marginLeft: '0.5rem' }}
+            control={
+              <Checkbox
+                checked={physical}
+                color="secondary"
+                onChange={(_e, value) => {
+                  setPhysical(value);
+                  participant.PhysicalParticipation = value;
+                  if (!value) {
+                    setReimbursement(false);
+                    participant.EEAReimbursementRequested = false;
+                  }
+                }}
+              />
+            }
+            label="Physical participation"
+            labelPlacement="end"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={reimbursement}
+                disabled={!physical}
+                color="secondary"
+                onChange={(_e, value) => {
+                  setReimbursement(value);
+                  participant.EEAReimbursementRequested = value;
+                }}
+              />
+            }
+            label="Reimbursement requested"
+            labelPlacement="end"
+          />
+        </Box>
+      )}
+      {event.IsOffline && (
+        <Box className="row">
+          {event.CustomMeetingRequest && (
+            <Typography
+              style={{ whiteSpace: 'pre-line' }}
+              id="eventCustomInfo"
+              label="Meeting requests info"
+              className="control w100"
+            >
+              {event.CustomMeetingRequest}
+            </Typography>
+          )}
+          <TextField
+            multiline
+            label="Custom meeting request"
+            className="control w100"
+            variant="standard"
+            minRows={3}
+            defaultValue={participant.CustomMeetingRequest}
+            onChange={(event) => {
+              const { value } = event.target;
+              participant.CustomMeetingRequest = value;
+            }}
+          />
+        </Box>
+      )}
+      <HtmlBox html={configuration?.EventRegistrationInfo}></HtmlBox>
+
+      <Box sx={{ marginTop: '1rem' }}>
+        {!participant.Registered && (
+          <Button
+            onClick={handleRegister}
+            variant="contained"
+            color="primary"
+            size="medium"
+            className="button"
+            disabled={loading}
+            endIcon={successRegister ? <CheckIcon /> : <SaveIcon />}
+          >
+            Register
+          </Button>
+        )}
+        {participant.Registered && event.IsOffline && (
+          <Button
+            onClick={handleUpdateRegistration}
+            variant="contained"
+            color="primary"
+            size="medium"
+            className="button"
+            disabled={loading}
+            endIcon={successUpdate ? <CheckIcon /> : <SaveIcon />}
+          >
+            Update registration
+          </Button>
+        )}
+        {participant.Registered && (
+          <Button
+            onClick={handleUnregister}
+            variant="contained"
+            color="error"
+            size="medium"
+            className="button"
+            disabled={loading || !participant.Registered}
+            endIcon={successUnregister ? <CheckIcon /> : <SaveIcon />}
+          >
+            Unregister
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/tabs/src/components/lib/useData.js

@@ -0,0 +1,33 @@
+import { useEffect, useReducer } from 'react';
+
+export function useData(asyncFn, options) {
+  const { auto } = { auto: true, ...options };
+  const [{ data, loading, error }, dispatch] = useReducer(
+    ({ data: oldData }, { type, data, error }) => {
+      switch (type) {
+        case 'loading':
+          return { data: oldData, loading: true, error: null };
+        case 'result':
+          return { data, loading: false, error: null };
+        case 'error':
+          return { data: null, loading: false, error };
+        default:
+          return {};
+      }
+    },
+    { data: null, loading: !!auto, error: null },
+  );
+  function reload() {
+    if (!loading) dispatch({ type: 'loading' });
+    if (typeof asyncFn != 'function') {
+      throw new Error('invalid argument to useData, a function is required');
+    }
+    asyncFn()
+      .then((data) => dispatch({ type: 'result', data }))
+      .catch((error) => dispatch({ type: 'error', error }));
+  }
+  useEffect(() => {
+    if (auto) reload();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  return { data, loading, error, reload };
+}

package/tabs/src/components/lib/useGraph.js

@@ -0,0 +1,39 @@
+import { useData } from './useData';
+import { TeamsUserCredential, createMicrosoftGraphClient } from '@microsoft/teamsfx';
+
+export function useGraph(asyncFunc, options) {
+  const { scope } = { scope: ['User.Read'], ...options };
+  const initial = useData(async () => {
+    try {
+      const credential = new TeamsUserCredential();
+      const graph = createMicrosoftGraphClient(credential, scope);
+      return await asyncFunc(graph);
+    } catch (err) {
+      if (err.code.includes('UiRequiredError')) {
+        // Silently fail for user didn't login error
+      } else {
+        throw err;
+      }
+    }
+  });
+
+  const { data, error, loading, reload } = useData(
+    async () => {
+      const credential = new TeamsUserCredential();
+      await credential.login(scope);
+      // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
+      const graph = createMicrosoftGraphClient(credential, scope);
+      return await asyncFunc(graph);
+    },
+    { auto: false },
+  );
+
+  return data || error || loading
+    ? { data, error, loading, reload }
+    : {
+        data: initial.data,
+        error: initial.error,
+        loading: initial.loading,
+        reload,
+      };
+}

package/tabs/src/components/lib/useTeamsFx.js

@@ -0,0 +1,55 @@
+import {
+  loadConfiguration,
+  ResourceType,
+  LogLevel,
+  setLogLevel,
+  setLogFunction,
+  TeamsUserCredential,
+} from '@microsoft/teamsfx';
+import { useData } from './useData';
+import { useTeams } from 'msteams-react-base-component';
+
+const teamsfxEndpoint = process.env.REACT_APP_TEAMSFX_ENDPOINT;
+const startLoginPageUrl = process.env.REACT_APP_START_LOGIN_PAGE_URL;
+const functionEndpoint = process.env.REACT_APP_FUNC_ENDPOINT;
+const clientId = process.env.REACT_APP_CLIENT_ID;
+
+// TODO fix this when the SDK stops hiding global state!
+let initialized = false;
+
+export function useTeamsFx() {
+  const [result] = useTeams({});
+  const { error, loading } = useData(async () => {
+    if (!initialized) {
+      if (process.env.NODE_ENV === 'development') {
+        setLogLevel(LogLevel.Verbose);
+        setLogFunction((level, message) => {
+          console.log(message);
+        });
+      }
+      loadConfiguration({
+        authentication: {
+          initiateLoginEndpoint: startLoginPageUrl,
+          simpleAuthEndpoint: teamsfxEndpoint,
+          clientId: clientId,
+        },
+        resources: [
+          {
+            type: ResourceType.API,
+            name: 'default',
+            properties: {
+              endpoint: functionEndpoint,
+            },
+          },
+        ],
+      });
+
+      initialized = true;
+      const credential = new TeamsUserCredential();
+      // Get the user info from access token
+      await credential.getUserInfo();
+    }
+  });
+  const isInTeams = true;
+  return { error, loading, isInTeams, ...result };
+}