Skip to content

Commit

Permalink
Allow to edit layers variables a label from TreeInput
Browse files Browse the repository at this point in the history
  • Loading branch information
@mabhub
mabhub committed Nov 20, 2023
1 parent 42ac7f6 commit dca2722
Showing 1 changed file with 143 additions and 30 deletions.
173 changes: 143 additions & 30 deletions src/modules/RA/Scene/components/TreeNodeToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@ import {
getFlatDataFromTree,
} from 'react-sortable-tree';

import { v4 as uuid } from 'uuid';

import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Chip from '@material-ui/core/Chip';
import AddIcon from '@material-ui/icons/Add';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';
import FormLabel from '@material-ui/core/FormLabel';
Expand Down Expand Up @@ -126,14 +131,26 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
setDisplayLayerModal(true);
};

const openEditLayerModal = editNode => {
closeMenu();
setNewLayerProps(editNode);
setDisplayLayerModal(editNode);
};

/**
* Close modal for new layer node creation
*/
const closeNewLayerModal = (doCreate = false) => () => {
if (doCreate && newLayerProps.geolayer) {
const closeLayerModal = (save = false, edit = false) => () => {
if (save && !edit && newLayerProps.geolayer) {
newSubItem(newLayerProps)();
} else if (save && edit) {
setTreeData(changeNodeAtPath({
treeData,
path,
getNodeKey: ({ treeIndex }) => treeIndex,
newNode: { ...node, ...newLayerProps },
}));
}

/* Close modal */
setDisplayLayerModal(false);

Expand Down Expand Up @@ -194,11 +211,43 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
new Set(),
)).filter(Boolean);

const parentNode = getNodeAtPath({
treeData,
path: path.slice(0, -1),
getNodeKey: ({ treeIndex }) => treeIndex,
})?.node;
const variables = node.variables || parentNode?.variables || [];

const newVariableFieldRef = React.useRef();
const handleVariableAdd = React.useCallback(
() => {
const label = newVariableFieldRef?.current?.value?.trim();
if (!label) {
return;
}

setGroupNewSettings(({ variables: vars = [], ...prevSettings }) => ({
...prevSettings,
variables: [
...vars,
{ id: uuid(), label },
],
}));
newVariableFieldRef.current.value = '';
},
[],
);

return (
<>
{isGroup && <IconButton onClick={openNewLayerModal}><AddIcon /></IconButton>}
{isGroup && <IconButton onClick={handleClick}><MoreVertIcon /></IconButton>}
{!isGroup && <IconButton onClick={deleteItem}><DeleteIcon /></IconButton>}
{!isGroup && (
<IconButton size="small" onClick={() => openEditLayerModal(node)}>
<EditIcon />
</IconButton>
)}
{!isGroup && <IconButton size="small" onClick={deleteItem}><DeleteIcon /></IconButton>}

<Menu anchorEl={anchorEl} onClose={closeMenu} open={!!anchorEl}>
{isGroup && <MenuItem onClick={openNewLayerModal}>Ajouter une couche</MenuItem>}
Expand All @@ -209,21 +258,53 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
<MenuItem onClick={deleteItem}>Supprimer</MenuItem>
</Menu>

<Modal open={displayLayerModal} onClose={closeNewLayerModal()}>
<Modal open={displayLayerModal} onClose={closeLayerModal()}>
<div style={style.modal}>
<div>
<GeolayerSelect
value={newLayerProps.geolayer || ''}
onChange={setNewLayerProps}
excludeIds={excludeIds}
includeIds={includeIds}
{!displayLayerModal.geolayer && (
<div>
<GeolayerSelect
value={newLayerProps.geolayer || ''}
onChange={setNewLayerProps}
excludeIds={excludeIds}
includeIds={includeIds}
fullWidth
/>
</div>
)}

{Boolean(displayLayerModal.geolayer) && (
<TextField
label="Label"
fullWidth
value={newLayerProps.label}
style={{ marginTop: 10 }}
onChange={event => {
const label = event?.target?.value;
setNewLayerProps(prevProps => ({ ...prevProps, label }));
}}
/>
</div>
)}

{(node.byVariable || Boolean(displayLayerModal.geolayer)) && (
<Box style={{ display: 'flex', flexDirection: 'column' }}>
{variables.map(({ id, label }) => (
<TextField
key={id}
label={label}
style={{ marginTop: 10 }}
value={newLayerProps[id]}
onChange={event => {
const fieldValue = event?.target?.value;
setNewLayerProps(prevProps => ({ ...prevProps, [id]: fieldValue }));
}}
/>
))}
</Box>
)}

<div style={style.modalButtons}>
<Button variant="outlined" color="secondary" onClick={closeNewLayerModal(false)}>Annuler</Button>
<Button variant="outlined" color="primary" onClick={closeNewLayerModal(true)}>Valider</Button>
<Button variant="outlined" color="secondary" onClick={closeLayerModal(false)}>Annuler</Button>
<Button variant="outlined" color="primary" onClick={closeLayerModal(true, Boolean(displayLayerModal.geolayer))}>Valider</Button>
</div>
</div>
</Modal>
Expand Down Expand Up @@ -262,22 +343,54 @@ const TreeNodeToolbar = ({ treeData, setTreeData, path, node, includeIds }) => {
</RadioGroup>
</FormControl>

<FormControl fullWidth>
<TextField
disabled={!groupNewSettings.byVariable}
multiline
helperText="Saisir une nom de variable par ligne"
placeholder={['Label 1', 'Label 2'].join('\n')}
variant="outlined"
value={groupNewSettings.variables?.join('\n')}
onChange={event => {
setGroupNewSettings({
...groupNewSettings,
variables: event.target.value.split('\n'),
});
}}
/>
</FormControl>
<Box
style={{
paddingTop: '0.5rem',
maxHeight: radioValue === 'byVariable' ? '100vh' : '0vh',
overflow: 'hidden',
transition: 'max-height 250ms ease',
}}
>
<FormControl>
<TextField
disabled={!groupNewSettings.byVariable}
variant="outlined"
label="Ajouter une variable"
size="small"
inputRef={newVariableFieldRef}
InputProps={{
endAdornment: (
<Button
variant="contained"
color="primary"
style={{ marginRight: '-12px' }}
onClick={handleVariableAdd}
>
Ajouter
</Button>
),
}}
/>
</FormControl>

<Box style={{ marginTop: '1rem' }}>
{groupNewSettings.variables?.map(({ id, label }) => (
<Chip
key={id}
label={label}
// size="small"
color="primary"
style={{ marginRight: '0.25rem' }}
onDelete={() => {
setGroupNewSettings(({ variables: prevVariables = [], ...prevsettings }) => ({
...prevsettings,
variables: prevVariables.filter(({ id: cId }) => cId !== id),
}));
}}
/>
))}
</Box>
</Box>

<div style={style.modalButtons}>
<Button variant="outlined" color="primary" onClick={closeSettingsModal(true)}>Valider</Button>
Expand Down

0 comments on commit dca2722

Please sign in to comment.