Add Check functionality

Author: Justin-MacIntosh

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

@@ -73,6 +73,7 @@ public Response createCheck(@Context SecurityIdentity identity,
 
         //TODO: Add validations for user provided data
         newCheck.setOwnerId(userId);
+        newCheck.setPublic(true); // By default all created checks are public
         try {
             String checkId = eligibilityCheckRepository.saveNewCheck(newCheck);
             newCheck.setId(checkId);

builder-api/src/main/java/org/acme/persistence/EligibilityCheckRepositoryImpl.java

@@ -55,7 +55,7 @@ public List<EligibilityCheck> getChecksInBenefit(Benefit benefit){
     public String saveNewCheck(EligibilityCheck check) throws Exception{
         ObjectMapper mapper = new ObjectMapper().setSerializationInclusion(JsonInclude.Include.NON_NULL);
         Map<String, Object> data = mapper.convertValue(check, Map.class);
-        String checkDocId = check.getModule() + "-" + check.getId();
+        String checkDocId = check.getId();
         return FirestoreUtils.persistDocumentWithId(CollectionNames.ELIGIBILITY_CHECK_COLLECTION, checkDocId, data);
     }
 

builder-frontend/src/api/check.ts

@@ -48,6 +48,30 @@ export const fetchCheck = async (checkId: string): Promise<EligibilityCheck> =>
   }
 };
 
+
+export const addCheck = async (check: EligibilityCheck) => {
+  const url = apiUrl + "/check";
+  try {
+    const response = await authFetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(check),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Post failed with status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error creating new 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/EligibilityChecksList.tsx

@@ -1,5 +1,6 @@
 import { createSignal, Match, Switch } from "solid-js";
-import EligibilityChecksList from "./EligibilityChecksList";
+
+import EligibilityChecksList from "./eligibilityCheckList/EligibilityChecksList";
 import ProjectsList from "./ProjectsList"
 import Header from "../Header";
 

builder-frontend/src/components/homeScreen/HomeScreen.tsx

@@ -0,0 +1,61 @@
+import { createSignal, For, Show } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+
+import Loading from "@/components/Loading";
+import AddNewCheckModal from "./modals/AddNewCheckModal";
+import eligibilityCheckResource from "./eligibilityCheckResource";
+
+import type { EligibilityCheck } from "@/types";
+
+
+const EligibilityChecksList = () => {
+  const { checks, actions, actionInProgress, initialLoadStatus } = eligibilityCheckResource();
+  const navigate = useNavigate();
+
+  const [addingNewCheck, setAddingNewCheck] = createSignal<boolean>(false);
+
+  const navigateToCheck = (check: EligibilityCheck) => {
+    navigate("/check/" + check.id);
+  }
+
+  return (
+    <div class="p-4">
+      <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>
+      <div
+        class="btn-default btn-blue mb-3 mr-1"
+        onClick={() => {setAddingNewCheck(true)}}
+      >
+        Create New Check
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <For each={checks()}>
+          {(check) => (
+            <div
+              class="border-2 border-gray-200 rounded p-4 w-60 hover:shadow-lg hover:bg-gray-200 cursor-pointer"
+              onClick={() => navigateToCheck(check)}
+            >
+              <div class="text-lg font-bold text-gray-800">{check.name}</div>
+              <div class="mt-2 text-gray-700">{check.description || "No description provided."}</div>
+            </div>
+          )}
+        </For>
+      </div>
+      {
+        addingNewCheck() &&
+        <AddNewCheckModal
+          closeModal={() => setAddingNewCheck(false)}
+          addNewCheck={actions.addNewCheck}
+        />
+      }
+    </div>
+  )
+};
+
+export default EligibilityChecksList;

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

@@ -0,0 +1,69 @@
+import { createResource, createEffect, Accessor, createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
+
+import type { EligibilityCheck } from "@/types";
+import { addCheck, fetchPublicChecks } from "@/api/check";
+
+
+export interface EligibilityCheckResource {
+  checks: () => EligibilityCheck[];
+  actions: {
+    addNewCheck: (check: EligibilityCheck) => Promise<void>;
+    removeCheck: (checkIdToRemove: string) => Promise<void>;
+  };
+  actionInProgress: Accessor<boolean>;
+  initialLoadStatus: {
+    loading: Accessor<boolean>;
+    error: Accessor<unknown>;
+  };
+}
+
+const eligibilityCheckResource = (): EligibilityCheckResource => {
+  const [checksResource, { refetch }] = createResource(fetchPublicChecks);
+  const [actionInProgress, setActionInProgress] = createSignal<boolean>(false);
+
+  // Local fine-grained store
+  const [checks, setChecks] = createStore<EligibilityCheck[]>([]);
+
+  // When resource resolves, sync it into the store
+  createEffect(() => {
+    if (checksResource()) {
+      setChecks(checksResource()!);
+    }
+  });
+
+  // Actions
+  const addNewCheck = async (check: EligibilityCheck) => {
+    setActionInProgress(true);
+    try {
+      await addCheck(check);
+      await refetch();
+    } catch (e) {
+      console.error("Failed to add new check", e);
+    }
+    setActionInProgress(false);
+  }
+
+  const removeCheck = async (checkIdToRemove: string) => {
+    setActionInProgress(true);
+    try {
+      // await removeCustomBenefit(screenerId(), benefitIdToRemove); TODO
+      await refetch();
+    } catch (e) {
+      console.error("Failed to delete check", e);
+    }
+    setActionInProgress(false);
+  };
+
+  return {
+    checks: () => checks,
+    actions: { addNewCheck, removeCheck },
+    actionInProgress,
+    initialLoadStatus: {
+      loading: () => checksResource.loading,
+      error: () => checksResource.error,
+    },
+  };
+};
+
+export default eligibilityCheckResource;

builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckResource.ts

@@ -0,0 +1,96 @@
+import { createStore } from "solid-js/store"
+
+import type { EligibilityCheck } from "@/types";
+
+
+type NewCheckValues = {
+  name: string;
+  module: string;
+  description: string;
+}
+const AddNewCheckModal = (
+  { addNewCheck, closeModal }:
+  { addNewCheck: (check: EligibilityCheck) => Promise<void>; closeModal: () => void }
+) => {
+  const [newCheck, setNewCheck] = createStore<NewCheckValues>({ name: "", module: "", description: "" });
+
+  // Styling for the Add button based on whether fields are filled
+  const isAddDisabled = () => {
+    return (
+      newCheck.name.trim() === "" ||
+      newCheck.description.trim() === "" ||
+      newCheck.module.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">Create New Check</div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Name:</label>
+          <input
+            type="text"
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newCheck.name}
+            onInput={(e) => setNewCheck("name", e.currentTarget.value)}
+            placeholder="Enter check name"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Module:</label>
+          <input
+            type="text"
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newCheck.module}
+            onInput={(e) => setNewCheck("module", e.currentTarget.value)}
+            placeholder="Enter check module"
+          />
+        </div>
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Description:</label>
+          <textarea
+            class="w-full border border-gray-300 rounded px-3 py-2"
+            value={newCheck.description}
+            onInput={(e) => setNewCheck("description", e.currentTarget.value)}
+            placeholder="Enter check description"
+            rows={4}
+          />
+        </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 check: EligibilityCheck = {
+                id: newCheck.module.toLowerCase() + "-" + newCheck.name.toLowerCase(),
+                name: newCheck.name,
+                module: newCheck.module,
+                description: newCheck.description,
+                inputs: [],
+                parameters: [],
+              };
+              await addNewCheck(check);
+              closeModal();
+            }}
+          >
+            Add Check
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default AddNewCheckModal;