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 committed Nov 17, 2023
1 parent d4a4bc3 commit 395d61e
Showing 1 changed file with 72 additions and 14 deletions.
86 changes: 72 additions & 14 deletions src/modules/RA/Scene/components/TreeNodeToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import {
getFlatDataFromTree,
} from 'react-sortable-tree';

import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
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 +128,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 +208,23 @@ 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 || [];

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 +235,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(variable => (
<TextField
key={variable}
label={variable}
style={{ marginTop: 10 }}
value={newLayerProps[variable]}
onChange={event => {
const fieldValue = event?.target?.value;
setNewLayerProps(prevProps => ({ ...prevProps, [variable]: 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

0 comments on commit 395d61e

Please sign in to comment.