feat: added used/unused groupings on the dropdown

EAVFW · Feb 14, 2024 · 4f6f086 · 4f6f086
1 parent 68e0869
commit 4f6f086
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -153,7 +153,7 @@ export const QuickFormQuestionsView: React.FC<{
                 </Field>
 
                 {question.inputType &&
-                    <Form key={currentQuestion + question.inputType}
+                    <Form tagName="div" key={currentQuestion + question.inputType}
                         templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                         validator={validator}
                         {...schemas[question.inputType]}

diff --git a/packages/designer/src/Designer/QuestionCraftNode.settings.tsx b/packages/designer/src/Designer/QuestionCraftNode.settings.tsx
@@ -1,19 +1,59 @@
 import { useEditor, useNode } from "@craftjs/core";
 import { useQuickFormDefinition } from "../Contexts/QuickFormDefContext";
-import { Dropdown, Field, Option } from "@fluentui/react-components";
+import { Dropdown, Field, Option, OptionGroup } from "@fluentui/react-components";
+import { useMemo } from "react";
 
 
+function findQuestionRefs(object:any) : string[] {
+
+    if (Array.isArray(object)) {
+        const childs = object.map(child => findQuestionRefs(child)).flat();
+
+        return childs;
+    }
+
+    if (typeof object === "object" && object !== null) {
+
+        if ("type" in object && object["type"] === "question") {
+            return [object["ref"]];
+        }
+
+        const childs = Object.values(object).map(child => findQuestionRefs(child)).flat();
+
+        return childs;
+    }
+
+    return [];
+
+}
+
 export const QuestionCraftNodeSettings = () => {
-    const { quickformpayload: { questions } } = useQuickFormDefinition();
+    const { quickformpayload: { questions, layout } } = useQuickFormDefinition();
+
     const { setProp, questionid, actions: { } } = useNode(x => ({ questionid: x.data.props.questionid }));
     const { actions: { selectNode } } = useEditor();
+
+    const selected = useMemo(() => findQuestionRefs(layout), [layout]);
+
+    const unused = useMemo(() => Object.entries(questions).filter(([key, question]) => selected.indexOf(question.logicalName ?? key) === -1), []);
+    const used = useMemo(() => Object.entries(questions).filter(([key, question]) => selected.indexOf(question.logicalName ?? key) !== -1), []);
+
+    console.log("QuickForm Question used", [selected, unused, used]);
     return (
         <Field label="Question">
             <Dropdown selectedOptions={questionid ? [questionid] : []} value={questions[questionid]?.text} onOptionSelect={(e, d) => {
                 setProp((p) => p.questionid = d.optionValue);
                 selectNode();
             }}>
-                {Object.entries(questions).map(([key, question]) => <Option text={question.text} value={key}>{question.text}</Option>)}
+                {unused.length > 0 && <OptionGroup label="Unused">
+                    {unused.map(([key, question]) => <Option key={key} text={question.text} value={key}>{question.text}</Option>)}
+                </OptionGroup>
+                }
+                {used.length > 0 && <OptionGroup label="Used">
+                    {used.map(([key, question]) => <Option key={key} disabled={selected.indexOf(question.logicalName ?? key) !== -1} text={question.text} value={key}>{question.text}</Option>)}
+                </OptionGroup>
+                }
+
             </Dropdown>
         </Field>
     )