Inputs can now have serveral nested children

3 files changed, 93 insertions, 79 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
index b205c693652..fd7c9cf418b 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
@@ -3,32 +3,32 @@ import { QueryInputContext } from '../Contexts/QueryInputContext';
 import SimpleButton from './SimpleButton';
 
 export default function AddPropertyButton({ id }) {
-  const { inputs, setInputs } = useContext(QueryInputContext);
+  const { inputs, setInputs, childMap } = useContext(QueryInputContext);
   const [childId, setChildId] = useState(1);
 
   const addChildProperty = () => {
     const newInputs = inputs.slice();
-    //this is needed because substring() is exclusive the last parameter
-    const iterId = id + '.';
-    //TODO: the id can be of type 1.1.2, need to iterate over it to go through the tree of children.
-    let currentId = iterId.substring(0, 1);
+    let currentId = id.substring(0, 1);
     let index = newInputs.findIndex((element) => element.id === currentId); //get the index of the root parent
     let children = newInputs[index].children;
-    for (let i = 3; i < iterId.length; i += 2) {
-      currentId = iterId.substring(0, i);
+    let parentType = newInputs[index].type;
+    for (let i = 3; i < id.length + 1; i += 2) {
+      currentId = id.substring(0, i);
       index = children.findIndex((element) => element.id === currentId);
+      parentType = parentType + '_' + children[index].type;
       children = children[index].children;
     }
+    let type = childMap[parentType];
+    type = type[Object.keys(type)[0]].name;
     children.push({
       id: id + '.' + childId,
-      type: newInputs[index].type,
+      type: type,
       input: '',
       hasChildren: false,
       children: [],
     });
     setInputs(newInputs);
     setChildId((childId) => childId + 1);
-    console.log('BUTTON CLICK');
   };
 
   return (
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index 79e7cf8cfc0..67b00faf242 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -1,5 +1,5 @@
 import { QueryInputContext } from '../Contexts/QueryInputContext';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import SimpleDropDownForm from './SimpleDropDownForm';
 
 export default function QueryDropdownForm({ choices, id, child = false }) {
@@ -12,27 +12,20 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
     const newType = e.target.value;
     const newInputs = inputs.slice();
     if (child) {
-      //this is needed because substring() is exclusive the last parameter
-      let iterId = id + '.';
-      let currentId = iterId.slice(0, 1);
+      let currentId = id.substring(0, 1);
       let index = newInputs.findIndex((element) => element.id === currentId); // get the index of the root parent
       let children = newInputs[index].children;
       let parentTypes = newInputs[index].type;
       let childChoices = childMap[parentTypes];
-      for (let i = 3; i < iterId.length - 2; i += 2) {
-        console.log('GOT HERE');
-        currentId = iterId.slice(0, i);
+      for (let i = 3; i < id.length; i += 2) {
+        currentId = id.substring(0, i);
         index = children.findIndex((element) => element.id === currentId);
         let child = children[index];
-        parentTypes = parentTypes + '_' + child.name;
+        parentTypes = parentTypes + '_' + child.type;
         childChoices = childMap[parentTypes];
-        console.log(parentTypes);
-        console.log(childChoices);
         children = child.children;
       }
-      index = children.findIndex(
-        (element) => element.id === iterId.slice(0, iterId.length - 1)
-      );
+      index = children.findIndex((element) => element.id === id);
       children[index].type = newType;
       children[index].hasChildren = childChoices[newType].hasChildren;
     } else {
@@ -44,32 +37,6 @@ export default function QueryDropdownForm({ choices, id, child = false }) {
     setInputs(newInputs);
   };
 
-  // On start set the type of the first QueryInput to the first in the list of choices
-  useEffect(() => {
-    const newInputs = inputs.slice();
-    const key = Object.keys(choices)[0];
-    if (child) {
-      let iterId = id + '.';
-      let currentId = iterId.slice(0, 1);
-      let index = newInputs.findIndex((element) => element.id === currentId);
-      let children = newInputs[index].children;
-      for (let i = 3; i < iterId.length - 2; i += 2) {
-        currentId = iterId.slice(0, i);
-        console.log(iterId);
-        index = children.findIndex((element) => element.id === currentId);
-        children = children[index].children;
-      }
-      index = children.findIndex(
-        (element) => element.id === iterId.slice(0, iterId.length - 1)
-      );
-      children[index].type = choices[key].name;
-    } else {
-      const index = newInputs.findIndex((element) => element.id === id);
-      newInputs[index].type = choices[key].name;
-    }
-    setInputs(newInputs);
-  }, []);
-
   return (
     <SimpleDropDownForm
       id={id}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
index 2128e6acb7f..c4e5e2bd5ec 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
@@ -7,34 +7,61 @@ import SimpleForm from './SimpleForm';
 export default function QueryInputChild({ id }) {
   const { inputs, setInputs, childMap } = useContext(QueryInputContext);
 
-  let childArray;
-  let parentType;
-  let index;
-  index = inputs.findIndex((element) => element.id === id);
-  parentType = inputs[index].type;
-  childArray = inputs[index].children;
+  let index = inputs.findIndex((element) => element.id === id);
+  let childArray = inputs[index].children;
+  let currentType = inputs[index].type;
 
-  // const updateType = (e) => {
-  //     e.preventDefault();
-  //     const newType = e.target.value;
-  //     const newInputs =inputs.slice();
-  //     const children = newInputs[parentType].children;
-  // }
+  const updateInput = (e) => {
+    e.preventDefault();
+    let newInputs = inputs.slice();
+    let iterId = e.target.id.replace('v', '');
+    let currentId = iterId.substring(0, 1);
+    let index = newInputs.findIndex((element) => element.id === currentId);
+    let children = newInputs[index].children;
+    for (let i = 3; i < iterId.length; i += 2) {
+      currentId = iterId.substring(0, i);
+      index = children.findIndex((element) => element.id === currentId);
+      children = children[index].children;
+    }
+    index = children.findIndex((element) => element.id === iterId);
+    children[index].input = e.target.value;
+    setInputs(newInputs);
+  };
 
-  // const updateInput = (e) => {
-  //     e.preventDefault();
-  //     const fid = parseInt(e.target.id.replace("v", ""));
-  //     const index = childArray.findIndex((element) => element.id === fid)
-  //     childArray[index].input = e.target.value;
-  //     const newInputs = inputs.slice();
-  //     setInputs(newInputs);
-  // }
+  /**
+   * Returns a placeholder text for a SimpleForm component
+   * @param {the id of the SimpleForm component} id
+   * @returns Placeholder text
+   */
+  const setPlaceHolder = (id) => {
+    let currentId = id.substring(0, 1);
+    let index = inputs.findIndex((element) => element.id === currentId);
+    let currentType = inputs[index].type;
+    let children = inputs[index].children;
+    if (id.length > 3) {
+      for (let i = 3; i < id.length; i += 2) {
+        currentId = id.substring(0, i);
+        index = children.findIndex((element) => element.id === currentId);
+        currentType = currentType + '_' + children[index].type;
+        children = children[index].children;
+      }
+      const currentChoice = childMap[currentType];
+      index = children.findIndex((element) => element.id === id);
+      currentType = children[index].type;
+      return currentChoice[currentType].type;
+    } else {
+      const currentChoice = childMap[currentType];
+      index = children.findIndex((element) => element.id === id);
+      currentType = children[index].type;
+      return currentChoice[currentType].type;
+    }
+  };
 
   const inputList = childArray.map((child) => {
     return (
       <div key={child.id} id={child.id}>
         <QueryDropdownForm
-          choices={childMap[parentType]}
+          choices={childMap[currentType]}
           id={child.id}
           child={true}
         />
@@ -43,9 +70,19 @@ export default function QueryInputChild({ id }) {
             <AddPropertyButton id={child.id} />
           </>
         ) : (
-          <SimpleForm id={`v${child.id}`} size="30" />
+          <SimpleForm
+            id={`v${child.id}`}
+            size="30"
+            onChange={updateInput}
+            placeholder={setPlaceHolder(child.id)}
+          />
         )}
-        <Child id={child.id} type={parentType} child={child} />
+        <Child
+          type={currentType + '_' + child.type}
+          child={child}
+          onChange={updateInput}
+          placeholder={setPlaceHolder}
+        />
       </div>
     );
   });
@@ -53,13 +90,12 @@ export default function QueryInputChild({ id }) {
   return <>{inputList}</>;
 }
 
-function Child({ child, id, type }) {
-  const { inputs, setInputs, childMap } = useContext(QueryInputContext);
-  console.log(child);
+function Child({ child, type, onChange, placeholder }) {
+  const { childMap } = useContext(QueryInputContext);
 
   const nestedChildren = (child.children || []).map((child) => {
     return (
-      <>
+      <div key={child.id}>
         <QueryDropdownForm
           choices={childMap[type]}
           id={child.id}
@@ -70,12 +106,23 @@ function Child({ child, id, type }) {
             <AddPropertyButton id={child.id} />
           </>
         ) : (
-          <SimpleForm id={`v${child.id}`} size="30" />
+          <SimpleForm
+            id={`v${child.id}`}
+            size="30"
+            onChange={onChange}
+            placeholder={placeholder(child.id)}
+          />
         )}
-        <Child key={child.id} child={child} id={child.id} type={child.type} />
-      </>
+        <Child
+          child={child}
+          id={child.id}
+          type={type + '_' + child.type}
+          onChange={onChange}
+          placeholder={placeholder}
+        />
+      </div>
     );
   });
 
-  return <div>{nestedChildren}</div>;
+  return <>{nestedChildren}</>;
 }