Feature/requester (#40)

* Create csvUploader : issue => Pouvoir charger une liste d'idep

* Install ppaparse csv parser & material ui lab for alerting component

* add alert on success - warning - failed, import csv,

* add context value

* modify alert system & setup context

* fix yarn build error

* fix dep array setError

* css delete modal

* fix error with warning message

* fix warning message & add console error

* fix showAlert error.message

* remove inline style & add limit 10 characters in campaignLabel

* add error & setError to context & move useEffect

* fix csvImport div

* add availableSessions & organisationalUnits to context

* remove filter on uppercase

* bump version to 2.2.0

package.json

@@ -1,16 +1,18 @@
 {
   "name": "massive-attack",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "date-fns": "^2.25.0",
     "keycloak-js": "^14.0.0",
+    "papaparse": "^5.4.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/app/App.js

@@ -19,6 +19,14 @@ const App = () => {
   const { authenticated, isAdmin, pending } = useAuth();
   const [organisationalUnit, setOrganisationalUnit] = useState();
   const [pf, setPf] = useState('');
+  const [dateReference, setDateReference] = useState(new Date().getTime());
+  const [campaignLabel, setCampaignLabel] = useState();
+  const [campaignId, setCampaignId] = useState('');
+  const [interviewers, setInterviewers] = useState([{ id: '', index: 0 }]);
+  const [sessionType, setSessionType] = useState(undefined);
+  const [error, setError] = useState(undefined);
+  const [organisationalUnits, setOrganisationalUnits] = useState([]);
+  const [availableSessions, setAvailableSessions] = useState(undefined);
 
   useEffect(() => {
     const fetchUserOrgaUnit = async () => {
@@ -34,7 +42,27 @@ const App = () => {
     if (authenticated) fetchUserOrgaUnit();
   }, [authenticated]);
 
-  const context = { organisationalUnit, isAdmin };
+  const context = {
+    organisationalUnit,
+    setOrganisationalUnit,
+    isAdmin,
+    dateReference,
+    setDateReference,
+    campaignLabel,
+    setCampaignLabel,
+    campaignId,
+    setCampaignId,
+    interviewers,
+    setInterviewers,
+    sessionType,
+    setSessionType,
+    error,
+    setError,
+    organisationalUnits,
+    setOrganisationalUnits,
+    availableSessions,
+    setAvailableSessions,
+  };
 
   return (
     <div>

src/components/orgaUnitsVue/index.js

@@ -20,13 +20,25 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import Preloader from '../common/Preloader';
 import { getConfiguration } from '../../utils/configuration/index';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   row: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     margin: '1em',
   },
+  dialogContent: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: theme.spacing(2),
+  },
+  cancelButton: {
+    marginRight: theme.spacing(2),
+  },
 }));
 
 const OrganisationUnitsVue = () => {
@@ -158,10 +170,16 @@ const OrganisationUnitsVue = () => {
             </Table>
           </TableContainer>
           <Dialog onClose={handleClose} open={openModal}>
-            <Typography variant="h6">{`Suppression des ${sessionToDelete?.campaigns?.length} ${sessionToDelete?.type} ${sessionToDelete?.ouid}`}</Typography>
-            <div className={classes.row}>
-              <Button onClick={handleClose}>Annuler</Button>
-              <Button onClick={confirmDeletion}>Valider</Button>
+            <div className={classes.dialogContent}>
+              <Typography variant="h6">{`Suppression des ${sessionToDelete?.campaigns?.length} ${sessionToDelete?.type} ${sessionToDelete?.ouid}`}</Typography>
+              <div className={classes.buttonContainer}>
+                <Button variant="outlined" className={classes.cancelButton} onClick={handleClose}>
+                  Annuler
+                </Button>
+                <Button variant="contained" color="primary" onClick={confirmDeletion}>
+                  Valider
+                </Button>
+              </div>
             </div>
           </Dialog>
         </>

src/components/requester/CsvUploader.js

@@ -0,0 +1,57 @@
+import Papa from 'papaparse';
+export const handleCSVUpload = async (event, setInterviewers, setInvalidValues, showAlert) => {
+  const file = event.target.files[0];
+  const reader = new FileReader();
+
+  reader.onload = async e => {
+    const contents = e.target.result;
+    const newInvalidValues = []; // Use a temporary array to store invalid values
+
+    // Use Papaparse to parse the CSV file
+    Papa.parse(contents, {
+      delimiter: ',', // Set the appropriate delimiter
+      header: true, // Specify if the first row is a header (containing column names)
+      dynamicTyping: true, // Attempt to automatically detect data types
+      complete: result => {
+        // 'result.data' contains the parsed data from the CSV
+        const allValues = [];
+
+        // Iterate through each row of the CSV
+        result.data.forEach(row => {
+          // Iterate through each column of the row
+          Object.keys(row).forEach(columnName => {
+            const value = row[columnName];
+            if (value !== null && typeof value === 'string' && value.trim().length === 6) {
+              allValues.push(value.trim().toUpperCase());
+            } else {
+              if (value !== null) {
+                newInvalidValues.push(value); // Store invalid values
+              }
+            }
+          });
+        });
+
+        // Update the 'interviewers' state with valid values
+        setInterviewers(allValues.map((value, index) => ({ id: value, index })));
+        // Update the 'invalidValues' state with invalid values
+        setInvalidValues(newInvalidValues);
+
+        // Show the alert with the message including invalidValues
+        if (newInvalidValues.length > 0) {
+          showAlert(
+            `The following elements were not considered (expected: 6 uppercase characters): ${newInvalidValues.join(
+              ', '
+            )}`,
+            'warning'
+          );
+        }
+      },
+      error: error => {
+        showAlert(`Erreur lors de l'analyse du fichier CSV : ${error.message}`, 'error');
+        console.error('Error parsing the CSV file:', error.message);
+      },
+    });
+  };
+
+  reader.readAsText(file);
+};