[GridDyna] Using expert filter for mapping

gridsuite · Jun 19, 2024 · 0508453 · 0508453
1 parent 72fdd9f
commit 0508453
Show file tree

Hide file tree

Showing 21 changed files with 910 additions and 733 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@gridsuite/commons-ui": "0.60.0",
+        "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",

diff --git a/src/components/1-atoms/Autocomplete.jsx b/src/components/1-atoms/Autocomplete.jsx
@@ -150,6 +150,7 @@ const Autocomplete = (props) => {
 
     return (
         <MuiAutocomplete
+            size="small"
             freeSolo={isFree}
             onClose={onPopupClose}
             multiple={isMultiple}

diff --git a/src/components/1-atoms/Select.jsx b/src/components/1-atoms/Select.jsx
@@ -63,6 +63,7 @@ const Select = (props) => {
         >
             {label !== undefined && <InputLabel>{label}</InputLabel>}
             <MuiSelect
+                size="small"
                 label={label}
                 value={value}
                 onChange={onChange}

diff --git a/src/components/2-molecules/Header.jsx b/src/components/2-molecules/Header.jsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Tooltip, Typography } from '@mui/material';
+import { Grid, Tooltip, Typography } from '@mui/material';
 import {
     AddIconButton,
     AttachButton,
@@ -58,48 +58,45 @@ const Header = (props) => {
         return titleStyle;
     };
     return (
-        <Box sx={getHeaderBoxStyle()}>
-            <Box width="100%" display="flex">
-                <Box sx={styles.titleBox} display="flex" alignItems="baseline">
-                    <Tooltip title={isCurrent ? '' : outdatedLabel}>
-                        <Typography variant="h2" sx={getTitleStyle()}>
-                            {`${name}${isModified ? '*' : ''} :`}
-                        </Typography>
-                    </Tooltip>
-                    <Typography variant="h3" sx={getTitleStyle()}>
-                        {`${currentNetwork?.networkName ?? ''}`}
+        <Grid container sx={getHeaderBoxStyle()}>
+            <Grid container item xs sx={styles.gridTitle}>
+                <Tooltip title={isCurrent ? '' : outdatedLabel}>
+                    <Typography variant="h4" sx={getTitleStyle()}>
+                        {`${name}${isModified ? '*' : ''} :`}
                     </Typography>
-                </Box>
-                <Box sx={styles.buttonBox}>
-                    {convert !== undefined && (
-                        <ConvertButton
-                            onClick={convert}
-                            tooltip={convertTooltip}
-                            disabled={!isValid || isModified}
-                        />
-                    )}
-                    {save !== undefined && (
-                        <SaveButton
-                            onClick={save}
-                            tooltip={saveTooltip}
-                            disabled={!isValid}
-                        />
-                    )}
-                    {attach !== undefined && (
-                        <AttachButton
-                            onClick={attach}
-                            tooltip={attachTooltip}
-                        />
-                    )}
-                    {addElement !== undefined && (
-                        <AddIconButton
-                            onClick={addElement}
-                            tooltip={addTooltip}
-                        />
-                    )}
-                </Box>
-            </Box>
-        </Box>
+                </Tooltip>
+                <Typography variant="h3" sx={getTitleStyle()}>
+                    {`${currentNetwork?.networkName ?? ''}`}
+                </Typography>
+            </Grid>
+            <Grid
+                item
+                container
+                xs={2}
+                sx={mergeSx(styles.gridButton, styles.buttonIcon)}
+            >
+                {convert !== undefined && (
+                    <ConvertButton
+                        onClick={convert}
+                        tooltip={convertTooltip}
+                        disabled={!isValid || isModified}
+                    />
+                )}
+                {save !== undefined && (
+                    <SaveButton
+                        onClick={save}
+                        tooltip={saveTooltip}
+                        disabled={!isValid}
+                    />
+                )}
+                {attach !== undefined && (
+                    <AttachButton onClick={attach} tooltip={attachTooltip} />
+                )}
+                {addElement !== undefined && (
+                    <AddIconButton onClick={addElement} tooltip={addTooltip} />
+                )}
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/2-molecules/HeaderStyles.js b/src/components/2-molecules/HeaderStyles.js
@@ -9,8 +9,8 @@ const ICON_SIZE = '2em';
 
 export const styles = {
     headerBox: {
-        border: '5px solid',
-        borderRadius: '10px',
+        border: '2px solid',
+        borderRadius: '5px',
         marginBottom: '5px',
     },
     errorBorderColor: {
@@ -28,17 +28,7 @@ export const styles = {
     warningTitle: {
         color: 'orange',
     },
-    titleBox: {
-        position: 'relative',
-        width: '75%',
-    },
-    buttonBox: {
-        marginRight: '10px',
-        marginTop: '1em',
-        position: 'relative',
-        width: '25%',
-        display: 'flex',
-        justifyContent: 'space-evenly',
+    buttonIcon: {
         '& .MuiIconButton-root': {
             width: ICON_SIZE,
             height: ICON_SIZE,
@@ -47,4 +37,16 @@ export const styles = {
             },
         },
     },
+    gridTitle: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingLeft: 1,
+    },
+    gridButton: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingRight: 1,
+    },
 };
diff --git a/src/components/2-molecules/ModelSelect.jsx b/src/components/2-molecules/ModelSelect.jsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import Select from '../1-atoms/Select';
 import { getModelsOptions } from '../../utils/optionsBuilders';
 import { styles } from './ModelSelectStyle';
@@ -18,25 +18,19 @@ const ModelSelect = (props) => {
     const { model, models, changeModel } = props;
 
     return (
-        <Box>
-            <Grid container justify={'center'}>
-                <Grid item xs={6}>
-                    <Grid container justify={'center'}>
-                        <Grid item xs="auto">
-                            <Typography variant="h4">{`${modelLabel} :`}</Typography>
-                        </Grid>
-                        <Grid item xs sx={styles.titleSelect}>
-                            <Select
-                                options={getModelsOptions(models)}
-                                value={model}
-                                setValue={changeModel}
-                                error={model === ''}
-                            />
-                        </Grid>
-                    </Grid>
-                </Grid>
+        <Grid container justify={'center'}>
+            <Grid container item xs="auto" sx={styles.gridItem}>
+                <Typography variant="subtitle1">{`${modelLabel} :`}</Typography>
             </Grid>
-        </Box>
+            <Grid item xs sx={styles.titleSelect}>
+                <Select
+                    options={getModelsOptions(models)}
+                    value={model}
+                    setValue={changeModel}
+                    error={model === ''}
+                />
+            </Grid>
+        </Grid>
     );
 };
 

diff --git a/src/components/2-molecules/ModelSelectStyle.js b/src/components/2-molecules/ModelSelectStyle.js
@@ -9,4 +9,10 @@ export const styles = {
     titleSelect: {
         textAlign: 'right',
     },
+    gridItem: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingLeft: 1,
+    },
 };
diff --git a/src/components/2-molecules/SetGroupSelect.tsx b/src/components/2-molecules/SetGroupSelect.tsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, Checkbox, Grid, Typography } from '@mui/material';
+import { Checkbox, Grid, Typography } from '@mui/material';
 import Select from '../1-atoms/Select';
 import { styles } from './SetGroupSelectStyle';
 import React, { useEffect, useState } from 'react';
@@ -94,43 +94,32 @@ const SetGroupSelect = (props: SetGroupSelectProps) => {
         (foundGroup === undefined || foundGroup.setsNumber === 0);
 
     return (
-        <Box>
-            <Grid container justifyContent={'flex-start'}>
-                <Grid item xs={6}>
-                    <Grid container justifyContent={'flex-start'}>
-                        <Grid item xs="auto">
-                            <Typography variant="h4">{`${isAbsoluteLabel} :`}</Typography>
-                        </Grid>
-                        <Grid item container xs justifyContent={'flex-end'}>
-                            <Checkbox
-                                checked={isAbsolute}
-                                onChange={onAbsoluteChange}
-                                disabled={!isNetworkAttached}
-                            />
-                        </Grid>
-                    </Grid>
-                    <Grid container justifyContent={'flex-start'}>
-                        <Grid item xs="auto">
-                            <Typography variant="h4">{`${setLabel} :`}</Typography>
-                        </Grid>
-                        <Grid item xs sx={styles.titleSelect}>
-                            <Select
-                                options={groupOptions}
-                                value={foundGroup ?? newEmptyGroup}
-                                setValue={changeGroup}
-                                error={foundGroup === undefined}
-                            />
-                        </Grid>
-                    </Grid>
+        <Grid container justifyContent={'flex-start'}>
+            <Grid item container justifyContent={'flex-start'}>
+                <Grid container item xs="auto" sx={styles.gridItem}>
+                    <Typography variant="subtitle1">{`${isAbsoluteLabel} :`}</Typography>
+                </Grid>
+                <Grid item container xs justifyContent={'flex-end'}>
+                    <Checkbox
+                        checked={isAbsolute}
+                        onChange={onAbsoluteChange}
+                        disabled={!isNetworkAttached}
+                    />
+                </Grid>
+            </Grid>
+            <Grid item container justifyContent={'flex-start'}>
+                <Grid container item xs sx={styles.gridItem}>
+                    <Typography variant="subtitle1">{`${setLabel} :`}</Typography>
                 </Grid>
                 <Grid
                     item
-                    xs={1}
+                    container
+                    xs="auto"
                     sx={mergeSx(
                         styles.button,
+                        styles.gridItem,
                         errorInParams && styles.errorButton
                     )}
-                    alignItems={'flex-end'}
                 >
                     <EditButton
                         onClick={editGroup(isAbsolute)}
@@ -142,11 +131,18 @@ const SetGroupSelect = (props: SetGroupSelectProps) => {
                                 ? simpledEditLabel
                                 : editGroupLabel
                         }
-                        sx={{ marginBottom: 1 }}
+                    />
+                </Grid>
+                <Grid item xs="auto" sx={styles.titleSelect}>
+                    <Select
+                        options={groupOptions}
+                        value={foundGroup ?? newEmptyGroup}
+                        setValue={changeGroup}
+                        error={foundGroup === undefined}
                     />
                 </Grid>
             </Grid>
-        </Box>
+        </Grid>
     );
 };
 

diff --git a/src/components/2-molecules/SetGroupSelectStyle.ts b/src/components/2-molecules/SetGroupSelectStyle.ts
@@ -10,8 +10,6 @@ export const styles = {
         textAlign: 'right',
     },
     button: {
-        justifyContent: 'center',
-        display: 'flex',
         '& .MuiIconButton-root .MuiIconButton-label .MuiSvgIcon-root': {
             fontSize: '2em',
             pointerEvents: 'auto',
@@ -22,4 +20,10 @@ export const styles = {
             color: 'red',
         },
     },
+    gridItem: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingLeft: 1,
+    },
 };