Do not show already selected properties

5 files changed, 75 insertions, 81 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
deleted file mode 100644
index 452d32cca67..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddPropertyButton.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  ACTION,
-  dispatch,
-} from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
-
-export default function AddPropertyButton({ id }) {
-  return (
-    <button
-      className="addpropsbutton"
-      onClick={() => dispatch(ACTION.INPUT_ADD, id)}
-    >
-      + Add property
-    </button>
-  );
-}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
index 4fd0f40f468..9b43f9e580f 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
@@ -47,17 +47,14 @@ function parseInput(input, type) {
   return input;
 }
 
-function inputAdd(query, parentId) {
+function inputAdd(query, { id: parentId, type: typeName }) {
   const inputs = cloneDeep(query.children);
   const parent = parentId ? findInput(inputs, parentId) : query;
 
-  const nextId = parseInt(last(parent.children)?.id ?? -1) + 1;
+  const nextId =
+    parseInt(last(last(parent.children)?.id?.split('.')) ?? -1) + 1;
   const id = parentId ? `${parentId}.${nextId}` : nextId.toString();
-
-  const usedTypes = parent.children.map(({ type }) => type.name);
-  const type = Object.values(parent.type.children).find(
-    ({ name }) => !usedTypes.includes(name)
-  );
+  const type = parent.type.children[typeName];
 
   parent.children.push(
     Object.assign(
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index 800e961324d..5f5a9fdbd89 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import SimpleDropDownForm from 'app/pages/querybuilder/Components/Text/SimpleDropDownForm';
-import AddPropertyButton from 'app/pages/querybuilder/Components/Buttons/AddPropertyButton';
 import {
   ACTION,
   dispatch,
@@ -9,66 +8,84 @@ import {
 } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
 
 export default function QueryInput() {
-  const inputs = useQueryBuilderContext((ctx) => ctx.query.children);
-  return <Inputs inputs={inputs} />;
+  const { children, type } = useQueryBuilderContext('query');
+  return <Inputs type={type.children} inputs={children} />;
 }
 
-function Inputs({ inputs }) {
-  return inputs.map(
-    ({
-      id,
-      input,
-      parent: {
-        type: { children: siblingTypes },
-      },
-      type: { name, type, children },
-      children: inputsChildren,
-    }) => (
-      <div key={id} className="queryinput">
-        <SimpleDropDownForm
+function Inputs({ id, type, inputs }) {
+  const usedTypes = inputs.map(({ type }) => type.name);
+  const remainingTypes = Object.fromEntries(
+    Object.entries(type).filter(([name]) => !usedTypes.includes(name))
+  );
+  const firstRemaining = Object.keys(remainingTypes)[0];
+  return (
+    <>
+      {inputs.map(({ id, input, type, children }) => (
+        <Input
+          key={id}
+          types={remainingTypes}
+          {...{ id, input, type, children }}
+        />
+      ))}
+      {firstRemaining && <AddPropertyButton id={id} type={firstRemaining} />}
+    </>
+  );
+}
+
+function Input({ id, input, types, type, children }) {
+  return (
+    <div className="queryinput">
+      <SimpleDropDownForm
+        onChange={({ target }) =>
+          dispatch(ACTION.INPUT_UPDATE, {
+            id,
+            type: types[target.value],
+          })
+        }
+        options={{ [type.name]: type, ...types }}
+        value={type.name}
+      />
+      {children ? (
+        <Inputs id={id} type={type.children} inputs={children} />
+      ) : (
+        <input
+          size="30"
           onChange={({ target }) =>
             dispatch(ACTION.INPUT_UPDATE, {
               id,
-              type: siblingTypes[target.value],
+              input: target.value,
             })
           }
-          options={siblingTypes}
-          value={name}
+          placeholder={type.type}
+          value={input}
         />
-        {children ? (
-          <>
-            {inputsChildren && <Inputs inputs={inputsChildren} />}
-            <AddPropertyButton id={id} />
-          </>
-        ) : (
-          <input
-            size="30"
-            onChange={({ target }) =>
-              dispatch(ACTION.INPUT_UPDATE, {
-                id,
-                input: target.value,
-              })
-            }
-            placeholder={type}
-            value={input}
-          />
-        )}
-        <OverlayTrigger
-          placement="right"
-          delay={{ show: 250, hide: 400 }}
-          overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
-        >
-          <span>
-            <button
-              className="removeRow"
-              onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}
-            >
-              -
-            </button>
-          </span>
-        </OverlayTrigger>
-        <br />
-      </div>
-    )
+      )}
+      <OverlayTrigger
+        placement="right"
+        delay={{ show: 250, hide: 400 }}
+        overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
+      >
+        <span>
+          <button
+            className="removeRow"
+            onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}
+          >
+            -
+          </button>
+        </span>
+      </OverlayTrigger>
+      <br />
+    </div>
+  );
+}
+
+function AddPropertyButton({ id, type }) {
+  return (
+    <button
+      className="addpropsbutton"
+      onClick={() => dispatch(ACTION.INPUT_ADD, { id, type })}
+    >
+      + Add property
+    </button>
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
index 62e6ba5eaf1..99342a5ae81 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -6,7 +6,6 @@ export default function SimpleDropDownForm({
   className = 'input',
   ...props
 }) {
-  // TODO: Filter selected
   return (
     <select className={className} {...props} value={value}>
       {Object.values(options).map(({ name }) => (
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 828299113b9..69d5cb08d40 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -6,7 +6,6 @@ import ShowQueryButton from './Components/Buttons/ShowQueryButton';
 import PasteJSONButton from './Components/Buttons/PasteJSONButton';
 import CopyResponseButton from './Components/Buttons/CopyResponseButton';
 import DownloadJSONButton from './Components/Buttons/DownloadJSONButton';
-import AddPropertyButton from 'app/pages/querybuilder/Components/Buttons/AddPropertyButton';
 import { QueryBuilderProvider } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
 
 import '../../styles/agency.css';
@@ -27,8 +26,6 @@ export function QueryBuilder() {
             <QueryInput />
           </div>
           <br />
-          <AddPropertyButton />
-          <br />
           <PasteJSONButton />
           <ShowQueryButton />
           <p className="response">Response</p>