MAT-7694: Add parameter apply button

MeasureAuthoringTool · Oct 14, 2024 · 35dc7ef · 35dc7ef
1 parent a0123db
commit 35dc7ef
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/src/AceEditor/madie-ace-editor.tsx b/src/AceEditor/madie-ace-editor.tsx
@@ -20,6 +20,7 @@ import "./madie-custom.css";
 import { ParsedCql, Statement } from "../model/ParsedCql";
 import {
   CqlMetaData,
+  Parameter,
   ValueSetForSearch,
 } from "../api/useTerminologyServiceApi";
 import { Definition } from "../CqlBuilderPanel/definitionsSection/definitionBuilder/DefinitionBuilder";
@@ -29,6 +30,7 @@ export interface EditorPropsType {
   value: string;
   onChange?: (value: string) => void;
   handleApplyCode?: (code: string) => void;
+  handleApplyParameter?: (parameter: Parameter) => void;
   handleApplyValueSet?: (vs: ValueSetForSearch) => void;
   handleApplyDefinition?: (def: Definition) => void;
   handleDefinitionEdit?: (lib: SelectedLibrary, def: Definition) => void;

diff --git a/src/CqlBuilderPanel/CqlBuilderPanel.tsx b/src/CqlBuilderPanel/CqlBuilderPanel.tsx
@@ -27,6 +27,7 @@ export default function CqlBuilderPanel({
   handleDeleteLibrary,
   handleEditLibrary,
   handleApplyCode,
+  handleApplyParameter,
   handleApplyValueSet,
   handleApplyDefinition,
   handleDefinitionEdit,
@@ -219,7 +220,9 @@ export default function CqlBuilderPanel({
             handleApplyCode={handleApplyCode}
           />
         )}
-        {activeTab === "parameters" && <Parameters />}
+        {activeTab === "parameters" && (
+          <Parameters handleApplyParameter={handleApplyParameter} />
+        )}
 
         {activeTab === "definitions" && (
           <DefinitionsSection

diff --git a/src/CqlBuilderPanel/Parameters/ParameterPane.tsx b/src/CqlBuilderPanel/Parameters/ParameterPane.tsx
@@ -12,21 +12,26 @@ const validationSchema = Yup.object({
       "Only alphanumeric characters are allowed, no spaces."
     )
     .required("Parameter Name is required"),
-  expressionEditorValue: Yup.string(),
+  parameterExpression: Yup.string(),
 });
 
-export default function ParameterPane() {
+export default function ParameterPane({ handleApplyParameter }) {
   const textAreaRef = useRef(null);
   const [editorHeight, setEditorHeight] = useState("100px");
   const [showEditor, setShowEditor] = useState(false);
   const formik = useFormik({
     initialValues: {
       parameterName: "",
-      expressionEditorValue: "",
+      expression: "",
     },
     validationSchema,
     enableReinitialize: true,
-    onSubmit: (values) => {},
+    onSubmit: async (values) => {
+      const result = handleApplyParameter(values);
+      if (result === "success") {
+        formik.resetForm();
+      }
+    },
   });
   const { resetForm } = formik;
   // adjusting the height of the editor based on the inserted text
@@ -36,7 +41,7 @@ export default function ParameterPane() {
       const newHeight = Math.max(lineCount * 20, 100) + "px";
       setEditorHeight(newHeight);
     }
-  }, [formik.values.expressionEditorValue]);
+  }, [formik.values.expression]);
   return (
     <>
       <div className="row">
@@ -65,9 +70,9 @@ export default function ParameterPane() {
           mode="sql"
           ref={textAreaRef}
           theme="monokai"
-          value={formik.values.expressionEditorValue}
+          value={formik.values.expression}
           onChange={(value) => {
-            formik.setFieldValue("expressionEditorValue", value);
+            formik.setFieldValue("expression", value);
           }}
           onLoad={(aceEditor) => {
             // On load we want to tell the ace editor that it's inside of a scrollabel page
@@ -95,6 +100,7 @@ export default function ParameterPane() {
         <Button
           data-testId="apply-parameter"
           disabled={!formik.dirty || !formik.isValid}
+          onClick={formik.handleSubmit}
         >
           Apply
         </Button>

diff --git a/src/CqlBuilderPanel/Parameters/Parameters.tsx b/src/CqlBuilderPanel/Parameters/Parameters.tsx
@@ -3,14 +3,16 @@ import ParametersNavTabs from "./ParamatersNavTabs";
 import ParameterPane from "./ParameterPane";
 import "./Parameters.scss";
 
-export default function Parameters() {
+export default function Parameters({ handleApplyParameter }) {
   const [activeTab, setActiveTab] = useState("parameters");
 
   return (
     <form id="cql-editor-parameters" data-testId="cql-editor-parameters">
       <ParametersNavTabs activeTab={activeTab} setActiveTab={setActiveTab} />
 
-      {activeTab === "parameters" && <ParameterPane />}
+      {activeTab === "parameters" && (
+        <ParameterPane handleApplyParameter={handleApplyParameter} />
+      )}
       {activeTab === "savedParameters" && (
         <div data-testId="saved-parameters" />
       )}

diff --git a/src/api/useTerminologyServiceApi.ts b/src/api/useTerminologyServiceApi.ts
@@ -24,6 +24,11 @@ export type ValueSet = {
   errorMsg: string;
 };
 
+export type Parameter = {
+  parameterName?: string;
+  expression?: string;
+};
+
 export interface CodeSystem {
   id: string;
   lastUpdated: string;

diff --git a/src/cqlEditorWithTerminology/CqlEditorWithTerminology.tsx b/src/cqlEditorWithTerminology/CqlEditorWithTerminology.tsx
@@ -14,6 +14,7 @@ const CqlEditorWithTerminology = ({
   handleCodeDelete,
   handleDefinitionDelete,
   handleApplyCode,
+  handleApplyParameter,
   handleApplyValueSet,
   handleApplyDefinition,
   handleApplyLibrary,
@@ -106,6 +107,7 @@ const CqlEditorWithTerminology = ({
               setIsCQLUnchanged={setIsCQLUnchanged}
               isCQLUnchanged={isCQLUnchanged}
               handleApplyCode={handleApplyCode}
+              handleApplyParameter={handleApplyParameter}
               handleApplyValueSet={handleApplyValueSet}
               handleApplyDefinition={handleApplyDefinition}
               handleDefinitionEdit={handleDefinitionEdit}