Added Create Parameter and Create Check functionalities

Author: Justin-MacIntosh

builder-api/src/main/java/org/acme/controller/EligibilityCheckResource.java

@@ -60,7 +60,6 @@ public Response getCheck(@Context SecurityIdentity identity, @PathParam("checkId
             return Response.status(Response.Status.UNAUTHORIZED).build();
         }
         return Response.ok(check, MediaType.APPLICATION_JSON).build();
-
     }
 
     // Utility endpoint to create an Eligibility check
@@ -106,7 +105,6 @@ public Response updateCheck(@Context SecurityIdentity identity,
     @Consumes(MediaType.APPLICATION_JSON)
     @Path("/save-check-dmn")
     public Response updateCheckDmn(@Context SecurityIdentity identity, SaveDmnRequest saveDmnRequest){
-
         String checkId = saveDmnRequest.id;
         String dmnModel = saveDmnRequest.dmnModel;
         if (checkId == null || checkId.isBlank()){
@@ -138,7 +136,7 @@ public Response updateCheckDmn(@Context SecurityIdentity identity, SaveDmnReques
             storageService.writeStringToStorage(filePath, dmnModel, "application/xml");
             Log.info("Saved DMN model of check " + checkId + " to storage");
 
-            //TODO: Need to figure out if we are allowing DMN versions to be mutable. If so, we need to update a
+            // TODO: Need to figure out if we are allowing DMN versions to be mutable. If so, we need to update a
             // last_saved field so that we know the check was updated and needs to be recompiled on evaluation
 
             return Response.ok().build();

builder-frontend/src/App.tsx

@@ -4,7 +4,7 @@ import Project from "./components/project/Project";
 import AuthForm from "./components/auth/AuthForm";
 import { useAuth } from "./context/AuthContext";
 import HomeScreen from "./components/homeScreen/HomeScreen";
-import EligibilityCheckDetail from "./components/eligibilityCheck/EligibilityCheckDetail";
+import EligibilityCheckDetail from "./components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail";
 
 
 function App() {

builder-frontend/src/api/check.ts

@@ -72,6 +72,29 @@ export const addCheck = async (check: EligibilityCheck) => {
   }
 };
 
+export const updateCheck = async (check: EligibilityCheck) => {
+  const url = apiUrl + "/check";
+  try {
+    const response = await authFetch(url, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(check),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Update failed with status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error updating check:", error);
+    throw error; // rethrow so you can handle it in your component if needed
+  }
+};
+
 export const fetchUserDefinedChecks = async (): Promise<EligibilityCheck[]> => {
   // Simulate an API call delay -- TODO: update to greater than 1ms delay
   await new Promise((resolve) => setTimeout(resolve, 1000));

builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx

@@ -2,7 +2,7 @@ import { createSignal, For, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 
 import Loading from "@/components/Loading";
-import AddNewCheckModal from "./modals/AddNewCheckModal";
+import CheckModal from "./modals/CheckModal";
 import eligibilityCheckResource from "./eligibilityCheckResource";
 
 import type { EligibilityCheck } from "@/types";
@@ -19,14 +19,15 @@ const EligibilityChecksList = () => {
   }
 
   return (
-    <div class="p-4">
+    <div class="px-12 py-8">
       <Show when={initialLoadStatus.loading() || actionInProgress()}>
         <Loading/>
       </Show>
       <div class="text-3xl font-bold mb-2 tracking-wide">
         Eligibility Checks
       </div>
-      <div class="text-lg mb-3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      <div class="text-lg mb-3">
+        Manage your eligibility checks here. Click on a check to view or edit its details.
       </div>
       <div
         class="btn-default btn-blue mb-3 mr-1"
@@ -49,9 +50,9 @@ const EligibilityChecksList = () => {
       </div>
       {
         addingNewCheck() &&
-        <AddNewCheckModal
+        <CheckModal
           closeModal={() => setAddingNewCheck(false)}
-          addNewCheck={actions.addNewCheck}
+          modalAction={actions.addNewCheck}
         />
       }
     </div>

…gibilityCheck/EligibilityCheckDetail.tsx …tyCheckDetail/EligibilityCheckDetail.tsxbuilder-frontend/src/components/eligibilityCheck/EligibilityCheckDetail.tsx renamed to builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx builder-frontend/src/components/eligibilityCheck/EligibilityCheckDetail.tsx renamed to builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx

@@ -1,19 +1,22 @@
 import { Accessor, createSignal, For, Match, Show, Switch } from "solid-js";
 import { useParams } from "@solidjs/router";
 
-import Header from "../Header";
-import Loading from "../Loading";
-import eligibilityCheckResource from "./eligibilityCheckResource";
+import Header from "../../../Header";
+import Loading from "../../../Loading";
+import eligibilityCheckDetailResource from "./eligibilityCheckDetailResource";
 
-import type { EligibilityCheck } from "@/types";
+import type { EligibilityCheck, ParameterDefinition } from "@/types";
+import ParameterModal from "./modals/ParameterModal";
 
 
 const EligibilityCheckDetail = () => {
   const { checkId } = useParams();
 
   const [screenMode, setScreenMode] = createSignal<"inputs_params" | "dmn">("inputs_params");
 
-  const { eligibilityCheck, actions, actionInProgress, initialLoadStatus } = eligibilityCheckResource(() => checkId);
+  const { eligibilityCheck, actions, actionInProgress, initialLoadStatus } = (
+    eligibilityCheckDetailResource(() => checkId)
+  );
 
   return (
     <div>
@@ -39,7 +42,7 @@ const EligibilityCheckDetail = () => {
       <Show when={eligibilityCheck().id !== undefined && !initialLoadStatus.loading()}>
         <Switch>
           <Match when={screenMode() === "inputs_params"}>
-            <InputsParams eligibilityCheck={eligibilityCheck}/>
+            <ParametersScreen eligibilityCheck={eligibilityCheck} addParameter={actions.addParameter}/>
           </Match>
           <Match when={screenMode() === "dmn"}>
             <div class="p-2">
@@ -52,31 +55,24 @@ const EligibilityCheckDetail = () => {
   );
 };
 
-const InputsParams = ({eligibilityCheck}: {eligibilityCheck: Accessor<EligibilityCheck>}) => {
+const ParametersScreen = (
+  {eligibilityCheck, addParameter}:
+  {eligibilityCheck: Accessor<EligibilityCheck>; addParameter: (parameter: ParameterDefinition) => Promise<void>}
+) => {
+  const [addingParameter, setAddingParameter] = createSignal<boolean>(false);
+
   return (
     <div class="p-12">
       <div class="text-3xl font-bold tracking-wide mb-2">{eligibilityCheck().name}</div>
       <p class="text-xl mb-4">{eligibilityCheck().description}</p>
       <div class="p-2">
-        <h2 class="text-xl font-semibold mb-2">Inputs</h2>
-        <Show when={eligibilityCheck().inputs.length > 0} fallback={<p>No inputs defined.</p>}>
-          <ul class="list-disc list-inside">
-            <For each={eligibilityCheck().inputs}>
-              {(input) => (
-                <div
-                  class="border-2 border-gray-200 rounded p-4 w-80 hover:shadow-lg hover:bg-gray-200 cursor-pointer"
-                  onClick={() => {}}
-                >
-                  <div class="text-lg font-bold text-gray-800 mb-2">{input.key}</div>
-                  <div><span class="font-bold">Type:</span> {input.type}</div>
-                  <div><span class="font-bold">Prompt:</span> {input.prompt}</div>
-                </div>
-              )}
-            </For>
-          </ul>
-        </Show>
-
         <h2 class="text-xl font-semibold mb-2">Parameters</h2>
+        <div
+          class="btn-default btn-blue mb-3 mr-1"
+          onClick={() => {setAddingParameter(true)}}
+        >
+          Create New Parameter
+        </div>
         <Show when={eligibilityCheck().parameters.length > 0} fallback={<p>No parameters defined.</p>}>
           <ul class="list-disc list-inside">
             <For each={eligibilityCheck().parameters}>
@@ -95,6 +91,14 @@ const InputsParams = ({eligibilityCheck}: {eligibilityCheck: Accessor<Eligibilit
           </ul>
         </Show>
       </div>
+      {
+        addingParameter() &&
+        <ParameterModal
+          actionTitle="Add Parameter"
+          closeModal={() => setAddingParameter(false)}
+          modalAction={addParameter}
+        />
+      }
     </div>
   );
 }

…ibilityCheck/eligibilityCheckResource.ts …Detail/eligibilityCheckDetailResource.tsbuilder-frontend/src/components/eligibilityCheck/eligibilityCheckResource.ts renamed to builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/eligibilityCheckDetailResource.ts builder-frontend/src/components/eligibilityCheck/eligibilityCheckResource.ts renamed to builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/eligibilityCheckDetailResource.ts

@@ -1,15 +1,15 @@
 import { createResource, createEffect, Accessor, createSignal } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import { fetchCheck } from "../../api/check";
+import { fetchCheck, updateCheck } from "@/api/check";
 
 import type { EligibilityCheck, ParameterDefinition } from "@/types";
 
 
-export interface ScreenerBenefitsResource {
+export interface EligibilityCheckDetailResource {
   eligibilityCheck: () => EligibilityCheck;
   actions: {
-    addParameter: (parameterDef: ParameterDefinition) => void;
+    addParameter: (parameterDef: ParameterDefinition) => Promise<void>;
   };
   actionInProgress: Accessor<boolean>;
   initialLoadStatus: {
@@ -18,7 +18,7 @@ export interface ScreenerBenefitsResource {
   };
 }
 
-const createScreenerBenefits = (checkId: Accessor<string>): ScreenerBenefitsResource => {
+const eligibilityCheckDetailResource = (checkId: Accessor<string>): EligibilityCheckDetailResource => {
   const [eligibilityCheckResource, { refetch }] = createResource(() => checkId(), fetchCheck);
   const [actionInProgress, setActionInProgress] = createSignal<boolean>(false);
 
@@ -32,21 +32,21 @@ const createScreenerBenefits = (checkId: Accessor<string>): ScreenerBenefitsReso
     }
   });
 
-  const addParameter = (parameterDef: ParameterDefinition) => {
-    if (!eligibilityCheck) return;
+  const addParameter = async (parameterDef: ParameterDefinition) => {
+    const updatedCheck: EligibilityCheck = { ...eligibilityCheck, parameters: [...eligibilityCheck.parameters, parameterDef] };
     setActionInProgress(true);
-    setTimeout(() => {
-      // Simulate async action
-      setEligibilityCheck("parameters", (params) => [...params, parameterDef]);
-      setActionInProgress(false);
-    }, 500);
+    try {
+      await updateCheck(updatedCheck);
+      await refetch();
+    } catch (e) {
+      console.error("Failed to add parameter", e);
+    }
+    setActionInProgress(false);
   };
 
   return {
     eligibilityCheck: () => eligibilityCheck,
-    actions: {
-      addParameter,
-    },
+    actions: { addParameter },
     actionInProgress,
     initialLoadStatus: {
       loading: () => eligibilityCheckResource.loading,
@@ -55,4 +55,4 @@ const createScreenerBenefits = (checkId: Accessor<string>): ScreenerBenefitsReso
   };
 };
 
-export default createScreenerBenefits;
+export default eligibilityCheckDetailResource;

builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/modals/ParameterModal.tsx

@@ -0,0 +1,124 @@
+import { createStore } from "solid-js/store"
+
+import type { EligibilityCheck, ParameterDefinition } from "@/types";
+import { Accessor } from "solid-js";
+
+
+type ParamValues = {
+  key: string;
+  label: string;
+  required: boolean;
+  type: "string" | "number" | "boolean";
+}
+const ParameterModal = (
+  { actionTitle, modalAction, closeModal }:
+  { actionTitle: string, modalAction: (parameter: ParameterDefinition) => Promise<void>; closeModal: () => void }
+) => {
+  const [newParam, setNewParam] = createStore<ParamValues>({ key: "", type: "string", label: "", required: undefined });
+
+  // Styling for the Add button based on whether fields are filled
+  const isAddDisabled = () => {
+    return (
+      newParam.key.trim() === "" ||
+      newParam.label.trim() === ""
+    );
+  }
+  const addButtonClasses = () => {
+    return isAddDisabled() ? "opacity-50 cursor-not-allowed" : "hover:bg-sky-700";
+  }
+
+  return (
+    <div class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+      <div class="bg-white px-12 py-8 rounded-xl max-w-140 w-1/2 min-w-80 min-h-96">
+        <div class="text-2xl font-bold mb-4">{actionTitle}</div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Key:</label>
+          <input
+            type="text"
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newParam.key}
+            onInput={(e) => setNewParam("key", e.currentTarget.value)}
+            placeholder="Enter parameter key"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Label:</label>
+          <input
+            type="text"
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newParam.label}
+            onInput={(e) => setNewParam("label", e.currentTarget.value)}
+            placeholder="Enter parameter label"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Type:</label>
+          <select
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newParam.type}
+            onChange={(e) => setNewParam("type", e.currentTarget.value as "string" | "number" | "boolean")}
+          >
+            <option value="string">String</option>
+            <option value="number">Number</option>
+            <option value="boolean">Boolean</option>
+          </select>
+        </div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Required:</label>
+          <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
+              <input
+                type="radio"
+                name={`param-required`}
+                checked={newParam.required === true}
+                onInput={() => setNewParam("required", true)}
+              />
+              True
+            </div>
+            <div class="flex items-center gap-2">
+              <input
+                type="radio"
+                name={`param-required`}
+                checked={newParam.required === false}
+                onInput={() => setNewParam("required", false)}
+              />
+              False
+            </div>
+            {
+              newParam.required === undefined &&
+              <span class="ml-2 text-gray-500">Not set</span>
+            }
+          </div>
+        </div>
+        <div class="flex justify-end space-x-2">
+          <div
+            class="btn-default hover:bg-gray-200"
+            onClick={() => { closeModal(); }}
+          >
+            Cancel
+          </div>
+          <div
+            class={"btn-default bg-sky-600 text-white " + addButtonClasses()}
+            onClick={async () => {
+              if (isAddDisabled()) {
+                console.log("Please fill in all fields.");
+                return;
+              }
+              const parameter: ParameterDefinition = {
+                key: newParam.key,
+                label: newParam.label,
+                type: newParam.type,
+                required: newParam.required
+              };
+              await modalAction(parameter);
+              closeModal();
+            }}
+          >
+            {actionTitle}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default ParameterModal;