From 395d61e0b42835307aeea89a91091893c91960bf Mon Sep 17 00:00:00 2001
From: Benjamin Marguin <benjamin.marguin@makina-corpus.com>
Date: Fri, 17 Nov 2023 16:42:52 +0100
Subject: [PATCH] Allow to edit layers variables a label from TreeInput

---
 .../RA/Scene/components/TreeNodeToolbar.js    | 86 ++++++++++++++++---
 1 file changed, 72 insertions(+), 14 deletions(-)

diff --git a/src/modules/RA/Scene/components/TreeNodeToolbar.js b/src/modules/RA/Scene/components/TreeNodeToolbar.js
index d1a24f0a..bce67ea4 100644
--- a/src/modules/RA/Scene/components/TreeNodeToolbar.js
+++ b/src/modules/RA/Scene/components/TreeNodeToolbar.js
@@ -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';
@@ -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);
 
@@ -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>}
@@ -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>