Merge branch 'refs/heads/master' into feats/2075

# Conflicts: # src/app/custom/translations.tsv
Inist-CNRS · Jul 12, 2024 · 8fa0ab2 · 8fa0ab2
2 parents e39e067 + 6b0382d
commit 8fa0ab2
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 44 deletions.
diff --git a/Makefile b/Makefile
@@ -54,8 +54,8 @@ build:
 ## Deploy =================================================================
 
 publish: build  ## publish version to docker hub
-	docker build -t cnrsinist/lodex:14.0.56 --build-arg http_proxy --build-arg https_proxy .
-	docker push cnrsinist/lodex:14.0.56
+	docker build -t cnrsinist/lodex:14.0.57 --build-arg http_proxy --build-arg https_proxy .
+	docker push cnrsinist/lodex:14.0.57
 
 ## Development =================================================================
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
         "node": ">= 16"
     },
     "name": "lodex",
-    "version": "14.0.56",
+    "version": "14.0.57",
     "description": "",
     "main": "src/api/index.js",
     "browser": {
@@ -74,7 +74,7 @@
         "@emotion/react": "11.7.1",
         "@emotion/styled": "11.6.0",
         "@ezs/analytics": "2.3.2",
-        "@ezs/basics": "2.7.0",
+        "@ezs/basics": "2.7.1",
         "@ezs/conditor": "2.12.1",
         "@ezs/core": "3.10.2",
         "@ezs/istex": "1.5.9",

diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
@@ -1099,5 +1099,8 @@
 "ejs_data"	"Variable containing the routine data"	"Variable contenant les données de la routine"
 "ejs_lodash"	"Variable containing the Lodash function"	"Variable contenant les fonctions de Lodash"
 "routine_args"	"Routine fields"	"Champs de la routine"
+"routine_arg"	"Field N°"	"Champ N°"
+"routine_arg_add"	"Add a new field"	"Ajouter un nouveau champ"
+"routine_arg_delete"	"Delete this field"	"Supprimer ce champ"
 "treemap_hierarchy_data"	"Hierarchy data"	"Données hiérarchiques"
 "treemap_flat_data_type"	"Data structure"	"Structure des données"
diff --git a/src/app/js/fields/sourceValue/SourceValueRoutine.js b/src/app/js/fields/sourceValue/SourceValueRoutine.js
@@ -1,49 +1,58 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { compose } from 'recompose';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import PropTypes from 'prop-types';
 import RoutineCatalog from '../wizard/RoutineCatalog';
 import translate from 'redux-polyglot/translate';
 import { polyglot as polyglotPropTypes } from '../../propTypes';
-import { Box, Button } from '@mui/material';
+import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material';
 import { fromFields } from '../../sharedSelectors';
 import { loadField } from '../index';
 import { connect } from 'react-redux';
 import { getFieldForSpecificScope } from '../../../../common/scope';
 import SearchAutocomplete from '../../admin/Search/SearchAutocomplete';
 import RoutineCatalogAutocomplete from '../wizard/RoutineCatalogAutocomplete';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const SourceValueRoutine = ({
     fields,
     updateDefaultValueTransformers,
     value,
     p: polyglot,
 }) => {
-    const [openRoutineCatalog, setOpenRoutineCatalog] = React.useState(false);
-    const [routine, setRoutine] = React.useState('');
-    const [routineArgs, setRoutineArgs] = React.useState([]);
-    const [routineFields, setRoutineFields] = React.useState([]);
-    const [first, setFirst] = React.useState(true);
+    const [openRoutineCatalog, setOpenRoutineCatalog] = useState(false);
+    const [routine, setRoutine] = useState('');
+    const [routineArgs, setRoutineArgs] = useState([]);
+    const [routineFields, setRoutineFields] = useState([null]);
+    const [first, setFirst] = useState(true);
 
-    const fieldsResource = React.useMemo(
+    const fieldsResource = useMemo(
         () => getFieldForSpecificScope(fields, 'collection'),
         [fields],
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (typeof value === 'string') {
             setRoutine(value.split('/').slice(0, 4).join('/'));
             const args = value.split('/').slice(4);
             setRoutineArgs(args);
-            setRoutineFields(
-                fieldsResource.filter((field) => {
-                    return args.includes(field.name);
-                }),
-            );
+            const filteredRoutineFields = args
+                .map((arg) => {
+                    return fieldsResource.find((field) => {
+                        return field.name === arg;
+                    });
+                })
+                .filter(Boolean);
+            if (filteredRoutineFields.length === 0) {
+                setRoutineFields([null]);
+            } else {
+                setRoutineFields(filteredRoutineFields);
+            }
         }
     }, [value]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (!first) {
             const finalRoutine = [routine, ...routineArgs].join('/');
             const transformers = [
@@ -66,13 +75,41 @@ const SourceValueRoutine = ({
 
     const handleRoutineChange = (event) => {
         setRoutine(event.target.value);
-        setRoutineFields([]);
+        setRoutineFields([null]);
         setRoutineArgs([]);
     };
 
-    const handleRoutineFieldsChange = (event, newValue) => {
-        setRoutineFields(newValue);
-        setRoutineArgs(newValue.map((field) => field.name));
+    const handleRoutineFieldChange = (newIndex, newValue) => {
+        const newField = routineFields.map((field, index) => {
+            if (index === newIndex) {
+                return newValue;
+            }
+            return field;
+        });
+        setRoutineFields(newField);
+        setRoutineArgs(newField.map((field) => field.name));
+    };
+
+    const handleAddField = () => {
+        setRoutineFields([...routineFields, null]);
+    };
+
+    const handleDeleteField = (deleteIndex) => {
+        if (deleteIndex === 0 && routineFields.length === 1) {
+            setRoutineFields([null]);
+            setRoutineArgs([]);
+            return;
+        }
+        const newField = routineFields
+            .map((field, index) => {
+                if (index === deleteIndex) {
+                    return undefined;
+                }
+                return field;
+            })
+            .filter((field) => field !== undefined);
+        setRoutineFields(newField);
+        setRoutineArgs(newField.map((field) => field.name));
     };
 
     return (
@@ -108,21 +145,61 @@ const SourceValueRoutine = ({
                 />
             </Box>
 
-            <Box
-                sx={{ width: '100%' }}
-                mt={1}
-                display="flex"
-                alignItems="center"
-            >
-                <SearchAutocomplete
-                    testId="autocomplete_routine_args"
-                    translation={polyglot.t('routine_args')}
-                    fields={fieldsResource}
-                    onChange={handleRoutineFieldsChange}
-                    value={routineFields}
-                    multiple
-                    clearText={polyglot.t('clear')}
-                />
+            <Box mt={3} sx={{ flexGrow: 1 }}>
+                <Typography variant="subtitle2">
+                    {polyglot.t('routine_args')}
+                </Typography>
+
+                {routineFields.map((field, index) => (
+                    <Box
+                        key={`${field?.name ?? 'default'}_${index}`}
+                        sx={{ width: '100%' }}
+                        mt={1}
+                        display="flex"
+                        alignItems="center"
+                    >
+                        <SearchAutocomplete
+                            testId={`autocomplete_routine_args_${index}`}
+                            translation={`${polyglot.t('routine_arg')}${index + 1}`}
+                            fields={fieldsResource}
+                            onChange={(_, newValue) => {
+                                handleRoutineFieldChange(index, newValue);
+                            }}
+                            value={field}
+                            clearText={polyglot.t('clear')}
+                        />
+                        <Tooltip title={polyglot.t('routine_arg_delete')}>
+                            <IconButton
+                                color="warning"
+                                aria-label="delete field"
+                                sx={{ marginLeft: '10px' }}
+                                onClick={() => handleDeleteField(index)}
+                            >
+                                <DeleteIcon fontSize="medium" />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+                ))}
+
+                <Box
+                    mt={1}
+                    sx={{
+                        width: 'fit-content',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }}
+                >
+                    <Tooltip title={polyglot.t('routine_arg_add')}>
+                        <IconButton
+                            color="primary"
+                            aria-label="add field"
+                            onClick={handleAddField}
+                            sx={{ marginRight: '50px' }}
+                        >
+                            <AddIcon fontSize="medium" />
+                        </IconButton>
+                    </Tooltip>
+                </Box>
             </Box>
         </Box>
     );