404 - Page Not Found
} />
-
+ 404 - Page Not Found
}
+ />
+
-
+
navigate("/")}
diff --git a/builder-frontend/src/components/auth/AuthForm.jsx b/builder-frontend/src/components/auth/AuthForm.jsx
index 744537ad..0abd1f0c 100644
--- a/builder-frontend/src/components/auth/AuthForm.jsx
+++ b/builder-frontend/src/components/auth/AuthForm.jsx
@@ -12,10 +12,10 @@ export default function AuthForm() {
const location = useLocation();
const toggleMode = () => {
- if (location.pathname === "/login") {
- navigate("/signup");
+ if (location.pathname === "/signup") {
+ navigate("/");
} else {
- navigate("/login");
+ navigate("/signup");
}
};
@@ -38,10 +38,10 @@ export default function AuthForm() {
diff --git a/builder-frontend/src/components/auth/Login.jsx b/builder-frontend/src/components/auth/Login.jsx index af44fe26..f23b3564 100644 --- a/builder-frontend/src/components/auth/Login.jsx +++ b/builder-frontend/src/components/auth/Login.jsx @@ -50,7 +50,7 @@ export default function Login({ toggleMode }) { Email setIsConfirmationVisible(false)} - className="fixed inset-0 bg-black/10 flex items-center justify-center z-100" - > -
- );
-}
diff --git a/builder-frontend/src/components/homeScreen/DeleteConfirmation.tsx b/builder-frontend/src/components/homeScreen/DeleteConfirmation.tsx
new file mode 100644
index 00000000..2d958230
--- /dev/null
+++ b/builder-frontend/src/components/homeScreen/DeleteConfirmation.tsx
@@ -0,0 +1,37 @@
+import { Button } from "@/components/shared/Button";
+import TrashIcon from "../icon/TrashIcon";
+
+interface Props {
+ screenerName: string;
+ onCancel: () => void;
+ onDelete: () => Promise;
+}
+
+export default function DeleteConfirmation(props: Props) {
+ return (
+ ;
+ handleDeleteScreener: (data: { id: string }) => Promise;
+}
+
+export default function EditScreenerForm(props: Props) {
+ const [isLoading, setIsLoading] = createSignal(false);
+ const [isConfirmationVisible, setIsConfirmationVisible] = createSignal(false);
+ const [error, setError] = createSignal("");
+
+ const handleSubmit: JSX.EventHandler = async (
+ e,
+ ) => {
+ e.preventDefault();
+ setError("");
+ const form = new FormData(e.currentTarget);
+ const screenerName = form.get("screenerName");
+ if (!screenerName) {
+ setError("Please enter a screener name.");
+ } else {
+ try {
+ setIsLoading(true);
+ const data = { screenerName: screenerName.toString() };
+ await props.handleEditScreener(props.modalData.screenerId, data);
+ setIsLoading(false);
+ } catch (e) {
+ if (isLoading()) {
+ setIsLoading(false);
+ }
+ }
+ }
+ };
+
+ const handleDelete = async () => {
+ try {
+ setIsLoading(true);
+ const data = { id: props.modalData.screenerId };
+ await props.handleDeleteScreener(data);
+ setIsLoading(false);
+ } catch (e) {
+ if (isLoading()) {
+ setIsLoading(false);
+ }
+ }
+ };
+
+ return (
+ = () => {
- return {
- tabDefs: [
- {
- key: "screeners",
- label: "Screeners",
- onClick: () => setScreenMode("screeners"),
- },
- {
- key: "checks",
- label: "Eligibility checks",
- onClick: () => setScreenMode("checks"),
- },
- ],
- activeTabKey: () => screenMode(),
- titleDef: null,
- };
- };
-
return (
- = (props) => {
+ return
diff --git a/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx b/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx
index 546929b8..1c30502c 100644
--- a/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx
+++ b/builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/EligibilityCheckDetail.tsx
@@ -84,7 +84,6 @@ const EligibilityCheckDetail = () => {
Benefits Decision Tookit
- {location.pathname === "/login" ? (
- diff --git a/builder-frontend/src/components/auth/Login.jsx b/builder-frontend/src/components/auth/Login.jsx index af44fe26..f23b3564 100644 --- a/builder-frontend/src/components/auth/Login.jsx +++ b/builder-frontend/src/components/auth/Login.jsx @@ -50,7 +50,7 @@ export default function Login({ toggleMode }) { Email setIsConfirmationVisible(false)} - className="fixed inset-0 bg-black/10 flex items-center justify-center z-100" - > -
e.stopPropagation()}
- className="bg-white px-12 py-8 rounded-xl max-w-100 w-1/2 min-w-80 h-80"
- >
-
-
- Are you sure you would like to delete {screenerData.screenerName}?
-
-
- Once deleted, all associated data will be deleted and cant be
- recovered.
-
-
-
-
-
-
+
+ );
+}
diff --git a/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx b/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx
deleted file mode 100644
index 0aa18ca5..00000000
--- a/builder-frontend/src/components/homeScreen/EditScreenerForm.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { createSignal, onCleanup, onMount } from "solid-js";
-import TrashIcon from "../icon/TrashIcon";
-import DeleteConfirmation from "./DeleteConfirmation";
-
-export default function EditScreenerForm({
- setIsEditModalVisible,
- screenerData,
- handleEditScreener,
- handleDeleteScreener,
-}) {
- const [isLoading, setIsLoading] = createSignal(false);
- const [isConfirmationVisible, setIsConfirmationVisible] = createSignal(false);
- const [screenerName, setScreenerName] = createSignal();
- let isActive = true;
-
- onMount(() => {
- if (screenerData?.screenerName) {
- setScreenerName(screenerData.screenerName);
- }
- });
-
- onCleanup(() => {
- isActive = false;
- });
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- try {
- setIsLoading(true);
- const data = {
- screenerName: screenerName(),
- };
- await handleEditScreener(screenerData.id, data);
- if (isActive) setIsLoading(false);
- } catch (e) {
- if (setIsLoading()) {
- setIsLoading(false);
- }
- }
- };
-
- const handleDelete = async () => {
- try {
- setIsLoading(true);
- const data = {
- id: screenerData.id,
- };
- await handleDeleteScreener(data);
- if (isActive) setIsLoading(false);
- } catch (e) {
- if (setIsLoading()) {
- setIsLoading(false);
- }
- }
- };
-
- const handleDeleteClicked = (e) => {
- e.preventDefault();
- setIsConfirmationVisible(true);
- };
-
- return (
- <>
-
+ Are you sure you would like to delete {props.screenerName}?
+
+
+ Once deleted, all associated data will be deleted and cant be recovered.
+
+
+
+
+
+ setIsEditModalVisible(false)}
- className="fixed inset-0 bg-black/10 backdrop-blur-sm flex items-center justify-center z-50"
- >
-
-
- {isConfirmationVisible() && (
-
+
+
+
+ + + setIsConfirmationVisible(false)}
+ >
+ setIsConfirmationVisible(false)}
+ onDelete={handleDelete}
+ />
+
+
+ );
+}
diff --git a/builder-frontend/src/components/homeScreen/HomeScreen.tsx b/builder-frontend/src/components/homeScreen/HomeScreen.tsx
index 86c35384..596e3dac 100644
--- a/builder-frontend/src/components/homeScreen/HomeScreen.tsx
+++ b/builder-frontend/src/components/homeScreen/HomeScreen.tsx
@@ -1,50 +1,10 @@
-import { Accessor, createSignal, Match, Switch } from "solid-js";
-
-import EligibilityChecksList from "./eligibilityCheckList/EligibilityChecksList";
-import ProjectsList from "./ProjectsList";
-import Header from "../Header/Header";
-
-import BdtNavbar, { NavbarProps } from "@/components/shared/BdtNavbar";
-0;
+import ProjectsList from "@/components/homeScreen/ProjectsList";
+import { Accessor, createSignal } from "solid-js";
const HomeScreen = () => {
- const [screenMode, setScreenMode] = createSignal<"screeners" | "checks">(
- "screeners",
- );
-
- const navbarDefs: Accessor+ + +
- = async (
+ e,
+ ) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError("");
+ const form = new FormData(e.currentTarget);
+ const screenerName = form.get("screenerName");
+ if (screenerName) {
+ const data = { screenerName: screenerName.toString() };
+ try {
+ const newScreener = await createNewScreener(data);
+ navigate(`/projects/${newScreener.id}`);
+ } catch (e) {
+ console.log("Error creating screener", e);
+ }
+ } else {
+ setError("Please enter a screener name.");
+ }
+ };
+
+ return (
+ (
+ null,
+ );
const navigate = useNavigate();
const { user } = useAuth();
@@ -30,7 +41,7 @@ export default function ProjectsList() {
});
const navigateToProject = (project) => {
- navigate("/project/" + project.id);
+ navigate("/projects/" + project.id);
};
const handleCreateNewScreener = async (screenerData: {
@@ -39,17 +50,21 @@ export default function ProjectsList() {
}) => {
try {
const newScreener = await createNewScreener(screenerData);
- navigate(`/project/${newScreener.id}`);
+ navigate(`/projects/${newScreener.id}`);
} catch (e) {
console.log("Error creating screener", e);
}
};
- const handleProjectMenuClicked = (e, screenerData) => {
- e.stopPropagation();
- setEditModalData(screenerData);
- setIsEditgModalVisible(true);
- };
+ const handleProjectMenuClicked =
+ (
+ screenerData: EditModalData,
+ ): JSX.EventHandler =>
+ (e) => {
+ e.stopPropagation();
+ setEditModalData(screenerData);
+ setIsEditModalVisible(true);
+ };
const handleUpdateScreener = async (
screenerId: string,
@@ -58,7 +73,7 @@ export default function ProjectsList() {
try {
await updateScreener(screenerId, screenerData);
refetchProjectList();
- setIsEditgModalVisible(false);
+ setIsEditModalVisible(false);
} catch (e) {
console.log("Error editing screener", e);
}
@@ -68,49 +83,60 @@ export default function ProjectsList() {
try {
await deleteScreener(screenerData.id);
refetchProjectList();
- setIsEditgModalVisible(false);
+ setIsEditModalVisible(false);
} catch (e) {
console.log("Error deleting screener", e);
}
};
return (
- <>
-
);
}
diff --git a/builder-frontend/src/components/homeScreen/ViewLayout.tsx b/builder-frontend/src/components/homeScreen/ViewLayout.tsx
new file mode 100644
index 00000000..c5ce91a0
--- /dev/null
+++ b/builder-frontend/src/components/homeScreen/ViewLayout.tsx
@@ -0,0 +1,5 @@
+import { Component, createSignal, JSX, ParentProps } from "solid-js";
+
+export const ViewLayout: Component
-
-
-
-
-
-
-
+
+
);
};
diff --git a/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx b/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx
deleted file mode 100644
index 5cce8c79..00000000
--- a/builder-frontend/src/components/homeScreen/NewScreenerForm.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { createSignal, onCleanup } from "solid-js";
-
-export default function NewScreenerForm({
- setIsModalVisible,
- handleCreateNewScreener,
-}) {
- const [isLoading, setIsLoading] = createSignal(false);
- let nameInput;
- let isActive = true;
-
- onCleanup(() => {
- isActive = false;
- });
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- setIsLoading(true);
- const data = {
- screenerName: nameInput.value,
- };
- await handleCreateNewScreener(data);
- if (isActive) setIsLoading(false);
- };
-
- return (
- setIsModalVisible(false)}
- className="fixed inset-0 bg-black/10 backdrop-blur-sm flex items-center justify-center z-50"
- >
-
- );
-}
diff --git a/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx b/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx
new file mode 100644
index 00000000..15f3794f
--- /dev/null
+++ b/builder-frontend/src/components/homeScreen/NewScreenerForm.tsx
@@ -0,0 +1,54 @@
+import { createNewScreener } from "@/api/screener";
+import { Button } from "@/components/shared/Button";
+import Form from "@/components/shared/Form";
+import { useNavigate } from "@solidjs/router";
+import { createSignal, JSX, onCleanup } from "solid-js";
+
+export default function NewScreenerForm({}) {
+ const navigate = useNavigate();
+ const [error, setError] = createSignal("");
+ const [isLoading, setIsLoading] = createSignal(false);
+
+ const handleSubmit: JSX.EventHandler e.stopPropagation()}
- className="bg-white px-12 py-8 rounded-xl max-w-140 w-1/2 min-w-80 h-96"
- >
-
-
-
- Create a screener
- setIsModalVisible(false)}
- className="text-2xl hover:font-bold hover:cursor-pointer"
- >
- X
-
-
- What is the name of your screener?
-
-
-
+
+
+ );
+}
diff --git a/builder-frontend/src/components/homeScreen/ProjectsList.tsx b/builder-frontend/src/components/homeScreen/ProjectsList.tsx
index c5e25a7b..7ab13922 100644
--- a/builder-frontend/src/components/homeScreen/ProjectsList.tsx
+++ b/builder-frontend/src/components/homeScreen/ProjectsList.tsx
@@ -1,7 +1,14 @@
-import { For, Show, createResource, createSignal, onMount } from "solid-js";
+import {
+ For,
+ JSX,
+ Show,
+ createResource,
+ createSignal,
+ onMount,
+} from "solid-js";
import { useNavigate } from "@solidjs/router";
-import EditScreenerForm from "./EditScreenerForm";
+import EditScreenerForm, { EditModalData } from "./EditScreenerForm";
import NewScreenerForm from "./NewScreenerForm";
import MenuIcon from "../icon/MenuIcon";
@@ -12,14 +19,18 @@ import {
createNewScreener,
} from "@/api/screener";
import { useAuth } from "@/context/AuthContext";
+import { Title } from "@solidjs/meta";
+import { Modal } from "@/components/shared/Modal";
export default function ProjectsList() {
const [projectList, { refetch: refetchProjectList }] =
createResource(fetchProjects);
const [isNewScreenerModalVisible, setIsNewScreenerModalVisible] =
createSignal(false);
- const [isEditModalVisible, setIsEditgModalVisible] = createSignal(false);
- const [editModelData, setEditModalData] = createSignal();
+ const [isEditModalVisible, setIsEditModalVisible] = createSignal(false);
+ const [editModelData, setEditModalData] = createSignal
- setIsEditModalVisible(false)}
+ >
+
+ {(modalData) => (
+
+
+
+
+
-
- {isNewScreenerModalVisible() && (
-
- Welcome to Benefit Decision Toolkit!
-
-
- Benefit Decision Toolkit is an open-source, civic tech project that
- aims to provide an easy and affordable platform for building benefit
- eligibility screening tools.
-
+
+ BDT - Projects List
+ Loading...
}>
+
+ Loading...
}>
-
+ Welcome to Benefit Decision Toolkit!
+
+
+ Benefit Decision Toolkit is an open-source, civic tech project that
+ aims to provide an easy and affordable platform for building benefit
+ eligibility screening tools.
+
-
- Create a new eligibility screener by adding and configuring
- eligibility checks from our library of pre-built eligibility rules.
- Or build custom checks that meet your specific needs.
-
- setIsNewScreenerModalVisible(true)}
- class="
+
-
+ Create a new eligibility screener by adding and configuring
+ eligibility checks from our library of pre-built eligibility rules. Or
+ build custom checks that meet your specific needs.
+
+ setIsNewScreenerModalVisible(true)}
+ class="
mt-2 px-4 py-2 w-fit cursor-pointer bg-blue-500
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
font-bold text-sm text-white"
- >
- Create new screener
-
+ >
+ Create new screener
-
-
-
- {(item) =>
+ setIsNewScreenerModalVisible(false)}
+ >
+
+
+
-
- Loading screeners...
-
+
+
+
+ {(item) => {
+ const screenerData: EditModalData = {
+ screenerId: item.id,
+ screenerName: item.screenerName,
+ };
+ return (
item && (
-
-
-
+
+ Loading screeners...
+
-
)
- }
- handleProjectMenuClicked(e, item)}
+ onClick={handleProjectMenuClicked(screenerData)}
>
+
navigateToProject(item)}
class="h-60 p-4 flex flex-col justify-center items-center"
@@ -132,25 +159,25 @@ export default function ProjectsList() {
{props.children}
;
+};
diff --git a/builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx b/builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx
index 249b430f..57a31ea6 100644
--- a/builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx
+++ b/builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx
@@ -6,8 +6,11 @@ import CheckModal from "./modals/CheckModal";
import eligibilityCheckResource from "./eligibilityCheckResource";
import type { EligibilityCheck } from "@/types";
-import ConfirmationModal from "@/components/shared/ConfirmationModal";
import Tooltip from "@/components/shared/Tooltip";
+import { Title } from "@solidjs/meta";
+import { Modal } from "@/components/shared/Modal";
+import { ArchiveCheck } from "@/components/homeScreen/eligibilityCheckList/modals/ArchiveCheck";
+import { Button } from "@/components/shared/Button";
const EligibilityChecksList = () => {
const { checks, actions, actionInProgress, initialLoadStatus } =
@@ -25,7 +28,8 @@ const EligibilityChecksList = () => {
};
return (
-
+ setAddingNewCheck(false)}>
+ setAddingNewCheck(false)}
+ />
+
{(check) => (
@@ -69,20 +77,19 @@ const EligibilityChecksList = () => {
)}
- {addingNewCheck() && (
- setAddingNewCheck(false)}
- modalAction={actions.addNewCheck}
- />
- )}
- {checkIdToRemove() && (
- actions.removeCheck(checkIdToRemove()!)}
- closeModal={() => setCheckIdToRemove(null)}
- />
- )}
+ setCheckIdToRemove(null)}
+ >
+
+ {(checkId) => (
+ actions.removeCheck(checkId())}
+ onCancel={() => setCheckIdToRemove(null)}
+ />
+ )}
+
+
);
};
@@ -117,22 +124,22 @@ const CheckCard = ({
id={"benefit-card-actions-" + eligibilityCheck.id}
class="p-4 flex justify-end space-x-2"
>
-
+ BDT - Custom Checks
@@ -52,12 +56,16 @@ const EligibilityChecksList = () => {
class="px-4 py-2 w-fit cursor-pointer bg-blue-500
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
font-bold text-sm text-white"
- onClick={() => {
- setAddingNewCheck(true);
- }}
+ onClick={() => setAddingNewCheck(true)}
>
Create New Check
+ {
navigateToCheck(eligibilityCheck);
}}
>
Edit
-
-
+
+
-
);
-}
+};
export default ParameterModal;
diff --git a/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/ArchiveCheck.tsx b/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/ArchiveCheck.tsx
new file mode 100644
index 00000000..a3b533f8
--- /dev/null
+++ b/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/ArchiveCheck.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@/components/shared/Button";
+
+interface Props {
+ onCancel: () => void;
+ onArchive: () => Promise{actionTitle}
-
-
- setNewParam("key", e.currentTarget.value)}
+
- {props.actionTitle}
+
-
- setNewParam("label", e.currentTarget.value)}
+ htmlFor="parameterKey"
+ >
+ {error().key}
+
+
-
-
-
-
-
-
-
-
-
-
- setNewParam("required", true)}
- class="form-radio"
- />
- True
-
-
- setNewParam("required", false)}
- class="form-radio"
- />
- False
-
- {
- newParam.required === undefined &&
- Not set
- }
-
-
{ closeModal(); }}
+ {error().label}
+
+
- Cancel
-
- {
- 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();
- }}
+
+
+ {error().type}
+
+
- {actionTitle}
+ True
+ False
+
+ {error().required}
+
+
+
Required
+
+
+
-
+
+ );
+};
diff --git a/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/CheckModal.tsx b/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/CheckModal.tsx
index 2117c6ef..ba8a448d 100644
--- a/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/CheckModal.tsx
+++ b/builder-frontend/src/components/homeScreen/eligibilityCheckList/modals/CheckModal.tsx
@@ -1,103 +1,71 @@
-import { createStore } from "solid-js/store";
-
import type { CreateCheckRequest } from "@/types";
+import { createSignal, JSX } from "solid-js";
+import Form from "@/components/shared/Form";
+import { Button } from "@/components/shared/Button";
-type CheckValues = {
- name: string;
- module: string;
- description: string;
-};
-const EditCheckModal = ({
- modalAction,
- closeModal,
-}: {
- modalAction: (check: CreateCheckRequest) => PromiseArchive Check
+
+ Are you sure you want to archive this Eligibility Check? This action
+ cannot be undone.
+
+
+
+
+
+
-
-
Create New Check
-
-
- setNewCheck("name", e.currentTarget.value)}
- placeholder="Enter check name"
- />
-
-
-
- setNewCheck("module", e.currentTarget.value)}
- placeholder="Enter check module"
- />
-
-
-
-