From 0453a826a7f6b0897d882a2f49452011ccf6df7a Mon Sep 17 00:00:00 2001 From: Jad Date: Wed, 28 Aug 2024 11:07:39 -0700 Subject: [PATCH 1/8] Remove unnecessary routes --- submit-web/src/routeTree.gen.ts | 62 +------ .../_dashboard/eao-plans/$planId.tsx | 61 ------- .../_dashboard/eao-plans/index.tsx | 78 --------- .../_authenticated/_dashboard/users/index.tsx | 163 ------------------ 4 files changed, 1 insertion(+), 363 deletions(-) delete mode 100644 submit-web/src/routes/_authenticated/_dashboard/eao-plans/$planId.tsx delete mode 100644 submit-web/src/routes/_authenticated/_dashboard/eao-plans/index.tsx delete mode 100644 submit-web/src/routes/_authenticated/_dashboard/users/index.tsx diff --git a/submit-web/src/routeTree.gen.ts b/submit-web/src/routeTree.gen.ts index 505c7a5d..07621fb6 100644 --- a/submit-web/src/routeTree.gen.ts +++ b/submit-web/src/routeTree.gen.ts @@ -24,10 +24,7 @@ import { Route as AuthenticatedRegistrationCreateAccountImport } from './routes/ import { Route as AuthenticatedRegistrationCompleteImport } from './routes/_authenticated/registration/complete' import { Route as AuthenticatedRegistrationAddProjectsImport } from './routes/_authenticated/registration/add-projects' import { Route as AuthenticatedDashboardProfileImport } from './routes/_authenticated/_dashboard/profile' -import { Route as AuthenticatedDashboardUsersIndexImport } from './routes/_authenticated/_dashboard/users/index' import { Route as AuthenticatedDashboardProjectsIndexImport } from './routes/_authenticated/_dashboard/projects/index' -import { Route as AuthenticatedDashboardEaoPlansIndexImport } from './routes/_authenticated/_dashboard/eao-plans/index' -import { Route as AuthenticatedDashboardEaoPlansPlanIdImport } from './routes/_authenticated/_dashboard/eao-plans/$planId' // Create Virtual Routes @@ -106,30 +103,12 @@ const AuthenticatedDashboardProfileRoute = getParentRoute: () => AuthenticatedDashboardRoute, } as any) -const AuthenticatedDashboardUsersIndexRoute = - AuthenticatedDashboardUsersIndexImport.update({ - path: '/users/', - getParentRoute: () => AuthenticatedDashboardRoute, - } as any) - const AuthenticatedDashboardProjectsIndexRoute = AuthenticatedDashboardProjectsIndexImport.update({ path: '/projects/', getParentRoute: () => AuthenticatedDashboardRoute, } as any) -const AuthenticatedDashboardEaoPlansIndexRoute = - AuthenticatedDashboardEaoPlansIndexImport.update({ - path: '/eao-plans/', - getParentRoute: () => AuthenticatedDashboardRoute, - } as any) - -const AuthenticatedDashboardEaoPlansPlanIdRoute = - AuthenticatedDashboardEaoPlansPlanIdImport.update({ - path: '/eao-plans/$planId', - getParentRoute: () => AuthenticatedDashboardRoute, - } as any) - // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { @@ -218,20 +197,6 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthenticatedDashboardAboutpageLazyImport parentRoute: typeof AuthenticatedDashboardImport } - '/_authenticated/_dashboard/eao-plans/$planId': { - id: '/_authenticated/_dashboard/eao-plans/$planId' - path: '/eao-plans/$planId' - fullPath: '/eao-plans/$planId' - preLoaderRoute: typeof AuthenticatedDashboardEaoPlansPlanIdImport - parentRoute: typeof AuthenticatedDashboardImport - } - '/_authenticated/_dashboard/eao-plans/': { - id: '/_authenticated/_dashboard/eao-plans/' - path: '/eao-plans' - fullPath: '/eao-plans' - preLoaderRoute: typeof AuthenticatedDashboardEaoPlansIndexImport - parentRoute: typeof AuthenticatedDashboardImport - } '/_authenticated/_dashboard/projects/': { id: '/_authenticated/_dashboard/projects/' path: '/projects' @@ -239,13 +204,6 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthenticatedDashboardProjectsIndexImport parentRoute: typeof AuthenticatedDashboardImport } - '/_authenticated/_dashboard/users/': { - id: '/_authenticated/_dashboard/users/' - path: '/users' - fullPath: '/users' - preLoaderRoute: typeof AuthenticatedDashboardUsersIndexImport - parentRoute: typeof AuthenticatedDashboardImport - } } } @@ -257,10 +215,7 @@ export const routeTree = rootRoute.addChildren({ AuthenticatedDashboardRoute: AuthenticatedDashboardRoute.addChildren({ AuthenticatedDashboardProfileRoute, AuthenticatedDashboardAboutpageLazyRoute, - AuthenticatedDashboardEaoPlansPlanIdRoute, - AuthenticatedDashboardEaoPlansIndexRoute, AuthenticatedDashboardProjectsIndexRoute, - AuthenticatedDashboardUsersIndexRoute, }), AuthenticatedAdminLoginRoute, AuthenticatedRegistrationAddProjectsRoute, @@ -315,10 +270,7 @@ export const routeTree = rootRoute.addChildren({ "children": [ "/_authenticated/_dashboard/profile", "/_authenticated/_dashboard/aboutpage", - "/_authenticated/_dashboard/eao-plans/$planId", - "/_authenticated/_dashboard/eao-plans/", - "/_authenticated/_dashboard/projects/", - "/_authenticated/_dashboard/users/" + "/_authenticated/_dashboard/projects/" ] }, "/_authenticated/admin-login": { @@ -345,21 +297,9 @@ export const routeTree = rootRoute.addChildren({ "filePath": "_authenticated/_dashboard/aboutpage.lazy.tsx", "parent": "/_authenticated/_dashboard" }, - "/_authenticated/_dashboard/eao-plans/$planId": { - "filePath": "_authenticated/_dashboard/eao-plans/$planId.tsx", - "parent": "/_authenticated/_dashboard" - }, - "/_authenticated/_dashboard/eao-plans/": { - "filePath": "_authenticated/_dashboard/eao-plans/index.tsx", - "parent": "/_authenticated/_dashboard" - }, "/_authenticated/_dashboard/projects/": { "filePath": "_authenticated/_dashboard/projects/index.tsx", "parent": "/_authenticated/_dashboard" - }, - "/_authenticated/_dashboard/users/": { - "filePath": "_authenticated/_dashboard/users/index.tsx", - "parent": "/_authenticated/_dashboard" } } } diff --git a/submit-web/src/routes/_authenticated/_dashboard/eao-plans/$planId.tsx b/submit-web/src/routes/_authenticated/_dashboard/eao-plans/$planId.tsx deleted file mode 100644 index c5b28cb4..00000000 --- a/submit-web/src/routes/_authenticated/_dashboard/eao-plans/$planId.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; -import { usePlanById } from "@/hooks/api/usePlans"; -import { Plan } from "@/models/Plan"; -import { Box, Button, Chip } from "@mui/material"; -import { Link, useParams } from "@tanstack/react-router"; - -export const Route = createFileRoute( - "/_authenticated/_dashboard/eao-plans/$planId", -)({ - component: PlanPage, - meta: () => [{ title: "Plan" }], - notFoundComponent: () => { - return

Plan not found!

; - }, -}); - -function PlanPage() { - const { planId: planIdParam } = useParams({ strict: false }); - const planId = Number(planIdParam); - const { status, data, isError, error, isFetching, isLoading } = - usePlanById(planId); - - const plan: Plan = data as Plan; - - if (isLoading) { - return

Loading...

; - } - - if (isError) { - return

{error.message}

; - } - - return ( -
- {!planId || status === "pending" ? ( - "Loading..." - ) : ( - <> - -

{plan.name}

- {plan.isCompleted ? ( - - ) : ( - - )} - -
-

Submitted by: {plan.submittedBy}

-

On {plan.submittedDate}

-
-
{isFetching ? "Background Updating..." : " "}
- - - - - )} -
- ); -} diff --git a/submit-web/src/routes/_authenticated/_dashboard/eao-plans/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/eao-plans/index.tsx deleted file mode 100644 index 012cc7da..00000000 --- a/submit-web/src/routes/_authenticated/_dashboard/eao-plans/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; -import { - Chip, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from "@mui/material"; -import { usePlansData } from "@/hooks/api/usePlans"; -import { Plan } from "@/models/Plan"; -import { Link } from "@tanstack/react-router"; -import { OpenInNew } from "@mui/icons-material"; - -export const Route = createFileRoute("/_authenticated/_dashboard/eao-plans/")({ - component: PlanListPage, - meta: () => [{ title: "Plans" }], -}); - -function PlanListPage() { - const { isLoading, data, isError, error } = usePlansData(); - - const plans: Array = data as Array; - - if (isLoading) { - return

Loading...

; - } - - if (isError) { - return

{error.message}

; - } - - return ( - <> - - - - - Plan - Submitted date - Submitted by - Status - - - - {plans?.map((row: Plan) => ( - - - - {row.name} - - - - {row.submittedDate} - {row.submittedBy} - - {row.isCompleted ? ( - - ) : ( - - )} - - - ))} - -
- - - ); -} diff --git a/submit-web/src/routes/_authenticated/_dashboard/users/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/users/index.tsx deleted file mode 100644 index 3c89b9f7..00000000 --- a/submit-web/src/routes/_authenticated/_dashboard/users/index.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; - -import { - Box, - Button, - IconButton, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, -} from "@mui/material"; -import { Delete, Edit } from "@mui/icons-material"; -import { AxiosError, AxiosResponse } from "axios"; -import { User } from "@/models/User"; -import { useDeleteUser, useUsersData } from "@/hooks/api/useUsers"; -import { useState } from "react"; -import { useQueryClient } from "@tanstack/react-query"; -import UserModal from "@/components/App/Users/UserModal"; -import { useModal } from "@/components/Shared/Modals/modalStore"; -import { notify } from "@/components/Shared/Snackbar/snackbarStore"; -import ConfirmationModal from "@/components/Shared/Modals/ConfirmationModal"; - -export const Route = createFileRoute("/_authenticated/_dashboard/users/")({ - component: UsersPage, - meta: () => [{ title: "Users" }], -}); - -function UsersPage() { - const queryClient = useQueryClient(); - const { setOpen } = useModal(); - const [selectedUser, setSelectedUser] = useState(null); - const [userIdToDelete, setUserIdToDelete] = useState(null); - const { isLoading, data, isError, error } = useUsersData(); - - const handleOnSubmit = () => { - queryClient.invalidateQueries({ queryKey: ["users"] }); - if (selectedUser) { - notify.success("User updated successfully!"); - } else { - notify.success("User created successfully!"); - } - }; - - const handleOpenModal = (user?: User) => { - setOpen(); - setSelectedUser(user || null); - }; - - /** Delete user START */ - - const onDeleteSuccess = () => { - notify.success("User deleted successfully!"); - queryClient.invalidateQueries({ - queryKey: ["users"], - }); - }; - - const onDeleteError = (error: AxiosError) => { - notify.error(`User deletion failed! ${error.message}`); - }; - - const { mutate: deleteUser } = useDeleteUser(onDeleteSuccess, onDeleteError); - - const handleDeleteUser = () => { - notify.success("User deleted successfully!"); - if (userIdToDelete !== null) { - deleteUser(userIdToDelete); - setUserIdToDelete(null); - } - }; - - const handleOpenConfirmationModal = (userId: number) => { - setUserIdToDelete(userId); - setOpen( - , - ); - }; - - /** Delete user END */ - - const users: Array = (data as AxiosResponse)?.data; - - if (isLoading) { - return

Loading...

; - } - - if (isError) { - return

{error.message}

; - } - - return ( - <> - -

Users List

- - - - - - - First name - Last name - Username - Email - - Actions - - - - - {users.map((row: User) => ( - - - {row.first_name} - - {row.last_name} - {row.username} - {row.email_address} - - handleOpenModal(row)} - > - - - handleOpenConfirmationModal(row.id)} - > - - - - - ))} - -
- - - ); -} From a37bc759c69a9d5d09f80a04dd8f4999fbaccd98 Mon Sep 17 00:00:00 2001 From: Jad Date: Wed, 28 Aug 2024 11:53:55 -0700 Subject: [PATCH 2/8] Add page and new management plan component --- .../src/components/Projects/Project.tsx | 2 +- .../src/components/Shared/ContentBox.tsx | 44 ++++++++++++ submit-web/src/components/Shared/PageGrid.tsx | 9 ++- .../addProjects/ProjectStatus.tsx | 7 +- submit-web/src/routeTree.gen.ts | 24 ++++++- .../new-management-plan/index.tsx | 71 +++++++++++++++++++ 6 files changed, 150 insertions(+), 7 deletions(-) create mode 100644 submit-web/src/components/Shared/ContentBox.tsx create mode 100644 submit-web/src/routes/_authenticated/_dashboard/projects/submission-packages/new-management-plan/index.tsx diff --git a/submit-web/src/components/Projects/Project.tsx b/submit-web/src/components/Projects/Project.tsx index 919e4f89..8c8190e1 100644 --- a/submit-web/src/components/Projects/Project.tsx +++ b/submit-web/src/components/Projects/Project.tsx @@ -95,7 +95,7 @@ export const Project = ({ accountProject }: ProjectParam) => { Management Plans - + + + + + + + + + + + + + + + + + + ); }; diff --git a/submit-web/src/routes/_authenticated/_dashboard/projects/submission-packages/new-management-plan/index.tsx b/submit-web/src/routes/_authenticated/_dashboard/projects/submission-packages/new-management-plan/index.tsx index dd65b9d9..e5d302db 100644 --- a/submit-web/src/routes/_authenticated/_dashboard/projects/submission-packages/new-management-plan/index.tsx +++ b/submit-web/src/routes/_authenticated/_dashboard/projects/submission-packages/new-management-plan/index.tsx @@ -46,7 +46,7 @@ export function NewManagementPlan() { > New Submission - + {}} /> From a9edccf3da069c5e6b95084a33a87ed5c05d57a2 Mon Sep 17 00:00:00 2001 From: Jad Date: Wed, 28 Aug 2024 16:53:45 -0700 Subject: [PATCH 5/8] Add conditions input --- .../NewManagementPlan/Conditions.tsx | 77 +++++++++++++++---- .../src/components/NewManagementPlan/Form.tsx | 62 +-------------- .../components/NewManagementPlan/TabPanel.tsx | 5 +- .../components/NewManagementPlan/constants.ts | 23 ++++++ 4 files changed, 93 insertions(+), 74 deletions(-) diff --git a/submit-web/src/components/NewManagementPlan/Conditions.tsx b/submit-web/src/components/NewManagementPlan/Conditions.tsx index 8815242d..4efb04b7 100644 --- a/submit-web/src/components/NewManagementPlan/Conditions.tsx +++ b/submit-web/src/components/NewManagementPlan/Conditions.tsx @@ -1,7 +1,27 @@ -import { Box, Divider, Typography } from "@mui/material"; +import { + Box, + Button, + Divider, + Grid, + MenuItem, + TextField, + Typography, +} from "@mui/material"; import { BCDesignTokens } from "epic.theme"; +import { useManagementPlanForm } from "./formStore"; +import { dummyConditions, stepLabels } from "./constants"; export const Conditions = () => { + const { step, setStep, reset } = useManagementPlanForm(); + + const handleNext = () => { + setStep(Math.min(step + 1, stepLabels.length - 1)); + }; + + const handleCancel = () => { + reset(); + }; + return ( { Condition(s) - - - What condition is this management plan for? - - - Please note: you can only submit one Management Plan per submission - - + + + What condition is this management plan for? + + + + + Please note: you can only submit one Management Plan per submission + + + + + {dummyConditions.map((condition) => ( + + {condition.name} + + ))} + + + + + + + + + + + ); }; diff --git a/submit-web/src/components/NewManagementPlan/Form.tsx b/submit-web/src/components/NewManagementPlan/Form.tsx index c9c8831f..9cf3f073 100644 --- a/submit-web/src/components/NewManagementPlan/Form.tsx +++ b/submit-web/src/components/NewManagementPlan/Form.tsx @@ -1,34 +1,13 @@ -import { Button, Grid } from "@mui/material"; +import { Grid } from "@mui/material"; import TabStepper from "./TabStepper"; import { TabPanel } from "./TabPanel"; -import { Unless, When } from "react-if"; -import { useManagementPlanForm } from "./formStore"; -import { stepLabels } from "./constants"; type FormProps = { - handleSubmit: () => void; + handleSubmit?: () => void; }; -export const Form = ({ handleSubmit }: FormProps) => { - const { step, setStep, reset } = useManagementPlanForm(); - - const handleNext = () => { - setStep(Math.min(step + 1, stepLabels.length - 1)); - }; - const handleBack = () => { - setStep(Math.max(step - 1, 0)); - }; - - const handleCancel = () => { - reset(); - }; - - const handleComplete = () => { - handleSubmit(); - reset(); - }; - +export const Form: React.FC = () => { return ( - + { - - - - - - - - - - - - - - - - - - - - - ); }; diff --git a/submit-web/src/components/NewManagementPlan/TabPanel.tsx b/submit-web/src/components/NewManagementPlan/TabPanel.tsx index 6b46b310..00493816 100644 --- a/submit-web/src/components/NewManagementPlan/TabPanel.tsx +++ b/submit-web/src/components/NewManagementPlan/TabPanel.tsx @@ -4,7 +4,10 @@ import { MANAGEMENT_PLAN_FORM_STEPS } from "./constants"; import { Box } from "@mui/material"; import { Conditions } from "./Conditions"; -export const TabPanel = () => { +type TabPanelProps = { + handleSubmit?: () => void; +}; +export const TabPanel: React.FC = () => { const { step } = useManagementPlanForm(); return ( diff --git a/submit-web/src/components/NewManagementPlan/constants.ts b/submit-web/src/components/NewManagementPlan/constants.ts index 63971702..c09d2ef1 100644 --- a/submit-web/src/components/NewManagementPlan/constants.ts +++ b/submit-web/src/components/NewManagementPlan/constants.ts @@ -11,3 +11,26 @@ export const stepLabels = [ "Requirements", "Contact Information", ]; + +export const dummyConditions = [ + { + id: 1, + name: "Condition 1", + }, + { + id: 2, + name: "Condition 2", + }, + { + id: 3, + name: "Condition 3", + }, + { + id: 4, + name: "Condition 4", + }, + { + id: 5, + name: "Condition 5", + }, +]; From 59243bafcffcb7bb14244633e1f6580cff88aea9 Mon Sep 17 00:00:00 2001 From: Jad Date: Thu, 29 Aug 2024 14:40:41 -0700 Subject: [PATCH 6/8] handle input management for conditions page --- submit-web/index.html | 2 +- .../NewManagementPlan/Conditions.tsx | 107 +++++++++++++++--- .../components/NewManagementPlan/constants.ts | 7 +- .../components/NewManagementPlan/formStore.ts | 12 +- 4 files changed, 110 insertions(+), 18 deletions(-) diff --git a/submit-web/index.html b/submit-web/index.html index f9858283..01cddf2f 100644 --- a/submit-web/index.html +++ b/submit-web/index.html @@ -5,7 +5,7 @@ - Epic.Submit + EPIC.submit
diff --git a/submit-web/src/components/NewManagementPlan/Conditions.tsx b/submit-web/src/components/NewManagementPlan/Conditions.tsx index 4efb04b7..205a5fdf 100644 --- a/submit-web/src/components/NewManagementPlan/Conditions.tsx +++ b/submit-web/src/components/NewManagementPlan/Conditions.tsx @@ -1,20 +1,43 @@ +import { useState } from "react"; import { Box, Button, Divider, Grid, + Link as MuiLink, MenuItem, TextField, Typography, + IconButton, } from "@mui/material"; import { BCDesignTokens } from "epic.theme"; import { useManagementPlanForm } from "./formStore"; import { dummyConditions, stepLabels } from "./constants"; +import CloseIcon from "@mui/icons-material/Close"; +const MAX_CONDITIONS = 5; export const Conditions = () => { - const { step, setStep, reset } = useManagementPlanForm(); + const { step, setStep, reset, setFormData, formData } = + useManagementPlanForm(); + + const [conditionInputes, setConditionInputs] = useState([0]); + const [conditions, setConditions] = useState< + { key: number; value: number }[] + >([]); + const [errorText, setErrorText] = useState(null); const handleNext = () => { + if (conditions.length !== conditionInputes.length) { + setErrorText("Please select a condition for each input"); + return; + } + const data = { + conditions: { + label: "Conditions", + value: conditions.map((c) => c.value), + }, + }; + setFormData({ ...formData, ...data }); setStep(Math.min(step + 1, stepLabels.length - 1)); }; @@ -22,6 +45,16 @@ export const Conditions = () => { reset(); }; + const handleAnotherCondition = () => { + if (conditionInputes.length === MAX_CONDITIONS) { + return; + } + setConditionInputs([ + ...conditionInputes, + Math.max(...conditionInputes) + 1, + ]); + }; + return ( { Please note: you can only submit one Management Plan per submission - - ( + + + { + const prev = conditions.filter((c) => c.key !== input); + setConditions([ + ...prev, + { key: input, value: parseInt(e.target.value) }, + ]); + if (errorText) { + setErrorText(null); + } + }} + value={conditions.find((c) => c.key === input)?.value || ""} + > + {dummyConditions.map((condition) => ( + c.value === condition.id)} + > + {condition.name} + + ))} + + + {input > 0 && ( + + { + setConditionInputs( + conditionInputes.filter((c) => c !== input), + ); + setConditions(conditions.filter((c) => c.key !== input)); + }} + > + + + + )} + + ))} + + - {dummyConditions.map((condition) => ( - - {condition.name} - - ))} - + + Add another condition + + {errorText && ( + + + {errorText} + + + )}