From bd99103821b201d800cf4cc732737658a264adbb Mon Sep 17 00:00:00 2001 From: anthony-pertsel <76824702+Anthonyp0329@users.noreply.github.com> Date: Sun, 29 Sep 2024 17:08:49 -0700 Subject: [PATCH] adding pricniples + emergencies --- .../app/add-emergency/EmergencyFlowStyles.tsx | 109 ----- .../src/app/add-emergency/page.tsx | 452 +++++++++++------- .../src/app/add-principle/page.tsx | 230 +++++++++ .../src/app/api/emergencies.ts | 68 +-- .../src/app/api/principles.ts | 89 ++++ .../src/app/category/page.tsx | 21 +- .../src/app/components/PageContainer.tsx | 37 +- .../src/app/components/PublishPopup.tsx | 45 ++ .../src/app/emergencies/page.tsx | 12 +- .../src/app/general-principles/page.tsx | 14 - backend/controllers/issueController.js | 12 +- backend/routes/issueRoutes.js | 10 +- 12 files changed, 722 insertions(+), 377 deletions(-) delete mode 100644 admin-portal-frontend/src/app/add-emergency/EmergencyFlowStyles.tsx create mode 100644 admin-portal-frontend/src/app/add-principle/page.tsx create mode 100644 admin-portal-frontend/src/app/api/principles.ts create mode 100644 admin-portal-frontend/src/app/components/PublishPopup.tsx diff --git a/admin-portal-frontend/src/app/add-emergency/EmergencyFlowStyles.tsx b/admin-portal-frontend/src/app/add-emergency/EmergencyFlowStyles.tsx deleted file mode 100644 index d8677b5..0000000 --- a/admin-portal-frontend/src/app/add-emergency/EmergencyFlowStyles.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { CSSProperties } from "react"; - -type Styles = { - page: CSSProperties; - container: CSSProperties; - header: CSSProperties; - subtitle: CSSProperties; - subheader: CSSProperties; - information: CSSProperties; - textbox: CSSProperties; - buttonContainer: CSSProperties; - cancelButton: CSSProperties; - publishButton: CSSProperties; -}; - -const styles: Styles = { - page: { - backgroundColor: "#E5EFF5", - display: "flex", - justifyContent: "center", - alignItems: "center", - height: "1400px", - overflowY: "auto", - flexDirection: "column", - }, - container: { - width: "944px", - height: "1050px", - backgroundColor: "white", - marginLeft: "350px", - marginTop: "0px", - borderRadius: "15px", - }, - header: { - color: "#182B49", - fontSize: "24px", - marginTop: "-47px", - fontFamily: "Roboto, sans-serif", - fontWeight: "700", - }, - subtitle: { - marginTop: "30px", - marginLeft: "30px", - color: "#182B49", - fontSize: "24px", - fontWeight: "500", - fontFamily: "Roboto, sans-serif", - }, - subheader: { - color: "#182B49", - fontSize: "20px", - fontWeight: "500", - marginLeft: "30px", - marginTop: "30px", - marginBottom: "5px", - fontFamily: "Roboto, sans-serif", - }, - information: { - color: "#6c6c6c", - fontSize: "16px", - fontFamily: "Roboto, sans-serif", - fontWeight: "400", - marginLeft: "30px", - }, - textbox: { - width: "884px", - height: "40px", - padding: "10px", - border: "1px solid #ccc", - borderRadius: "5px", - fontSize: "16px", - fontFamily: "Roboto, sans-serif", - color: "#333", - marginLeft: "30px", - marginTop: "-10px", - marginBottom: "10px", - zIndex: 3, - position: "relative", - }, - buttonContainer: { - width: "944px", - marginLeft: "350px", - marginTop: "50px", - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - }, - cancelButton: { - marginLeft: "1px", - textDecoration: "underline", - fontSize: "17px", - fontFamily: "Roboto, sans-serif", - }, - publishButton: { - width: "153px", - height: "46px", - backgroundColor: "#00629b", - color: "White", - borderRadius: "5px", - marginRight: "1px", - fontSize: "17px", - fontFamily: "Roboto, sans-serif", - fontWeight: "590", - zIndex: 3, - position: "relative", - }, -}; - -export default styles; diff --git a/admin-portal-frontend/src/app/add-emergency/page.tsx b/admin-portal-frontend/src/app/add-emergency/page.tsx index af45c17..a80c4a5 100644 --- a/admin-portal-frontend/src/app/add-emergency/page.tsx +++ b/admin-portal-frontend/src/app/add-emergency/page.tsx @@ -1,199 +1,303 @@ "use client"; -import React from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import React, { ChangeEvent, useEffect, useState } from "react"; -import { CreateEmergencyRequest, createEmergency } from "../api/emergencies"; +import { Category, addPage } from "../api/Categories"; +import { createEmergency, getEmergency, updateEmergency } from "../api/emergencies"; +import PublishPopup from "../components/PublishPopup"; +import CloseIcon from "../icons/close.svg"; -import styles from "./EmergencyFlowStyles"; - -export type EmergencyFlowProps = { - onSubmit?: () => void; -}; - -type InputBlockProps = { - label: string; - value: string; - onChange: (value: string) => void; +type IconProps = { + "content-type": string; + src: string; }; -const InputBlock: React.FC = ({ label, value, onChange }) => ( - <> -

{label}

- { - onChange(event.target.value); - }} - /> - -); - -type Overview = { - Importance?: string; - "Mechanism of Injury"?: string[]; - Diagnosis?: string[]; - "Physical Exam"?: string[]; -}; +export default function AddEmergency() { + const searchParams = useSearchParams(); + const router = useRouter(); + const categoryString = searchParams.get("category"); + const titleString = searchParams.get("title"); + const [category, setCategory] = useState( + JSON.parse(categoryString ? categoryString : "") as Category, + ); + const [title, setTitle] = useState(titleString ? titleString : ""); + const [overviewHeaders, setOverviewHeaders] = useState([""]); + const [overviewDetails, setOverviewDetails] = useState([""]); + const [treatHeaders, setTreatHeaders] = useState([""]); + const [treatDetails, setTreatDetails] = useState([""]); + const [popupVisible, setPopupVisible] = useState(false); + const [prevEmergency, setPrevEmergency] = useState({ _id: "" }); -type Treatment = { - "Acute Management"?: string[]; - Dispo?: string[]; - Considerations?: string; -}; + const [page, setPage] = useState({ + title: "", + subtitle: "", + overview: {}, + treatment: {}, + }); -const EmergencyFlow: React.FC = () => { - const [emergencyTitle, setEmergencyTitle] = React.useState(""); - const [emergencySubtitle, setEmergencySubtitle] = React.useState(""); - const [importance, setImportance] = React.useState(""); - const [riskFactors, setRiskFactors] = React.useState(""); - const [mechanismOfInjury, setMechanismOfInjury] = React.useState(""); - const [diagnosis, setDiagnosis] = React.useState(""); - const [physicalExam, setPhysicalExam] = React.useState(""); - const [acuteManagement, setAcuteManagement] = React.useState(""); - const [dispo, setDispo] = React.useState(""); - const [considerations, setConsiderations] = React.useState(""); + useEffect(() => { + if (categoryString) { + // Update the state when the query changes + setCategory(JSON.parse(categoryString ? categoryString : "") as Category); + } + }, [categoryString]); - const handlePublish = () => { - //make an object of type CreateEmergencyRequest - //use createEmergency to make the emergency in DB - //redirect back to main page - // const emergency: CreateEmergencyRequest = { - // title: emergencyTitle, - // overview: { - // Importance: importance, - // "Mechanism of Injury": mechanismOfInjury.split(","), - // Diagnosis: diagnosis.split(","), - // "Physical Exam": physicalExam.split(","), - // }, - // treatment: { - // "Acute Management": acuteManagement.split(","), - // Dispo: dispo.split(","), - // Considerations: considerations, - // }, - // content: {}, - // }; + useEffect(() => { + if (titleString) { + setTitle(titleString ? titleString : ""); + } + }, [titleString]); - const addPropertyIfNotEmpty = (obj: Record, key: string, value: string) => { - if (value && value.trim() !== "") { - obj[key] = value.includes(",") ? value.split(",") : value; + useEffect(() => { + const fetchEmergency = async () => { + if (title) { + const emergency = await getEmergency(title); + setPrevEmergency(emergency); + setPage({ + title: emergency.title, + subtitle: emergency.subtitle, + overview: {}, + treatment: {}, + }); + setOverviewHeaders(Object.keys(emergency.overview ? emergency.overview : {})); + setOverviewDetails(Object.values(emergency.overview ? emergency.overview : {})); + setTreatHeaders(Object.keys(emergency.treatment ? emergency.treatment : {})); + setTreatDetails(Object.values(emergency.treatment ? emergency.treatment : {})); } }; + void fetchEmergency(); + }, [title]); - const overview: Overview = {}; - addPropertyIfNotEmpty(overview, "Importance", importance); - addPropertyIfNotEmpty(overview, "Mechanism of Injury", mechanismOfInjury); - addPropertyIfNotEmpty(overview, "Diagnosis", diagnosis); - addPropertyIfNotEmpty(overview, "Physical Exam", physicalExam); - - const treatment: Treatment = {}; - addPropertyIfNotEmpty(treatment, "Acute Management", acuteManagement); - addPropertyIfNotEmpty(treatment, "Dispo", dispo); - addPropertyIfNotEmpty(treatment, "Considerations", considerations); + const publishEmergency = async () => { + try { + setPopupVisible(false); + const newPage = { ...page }; + newPage.overview = Object.fromEntries( + overviewHeaders.map((key, i) => [key, overviewDetails[i]]), + ); + newPage.treatment = Object.fromEntries(treatHeaders.map((key, i) => [key, treatDetails[i]])); - const emergency: CreateEmergencyRequest = { - title: emergencyTitle, - subtitle: emergencySubtitle, - ...(Object.keys(overview).length > 0 && { overview }), - ...(Object.keys(treatment).length > 0 && { treatment }), - content: {}, - }; + if (title) { + const toAdd = { ...newPage, _id: prevEmergency._id }; + await updateEmergency(toAdd); + } else { + await createEmergency(newPage); + await addPage(category._id, newPage.title); + } + const encodedCategory = encodeURIComponent(JSON.stringify(category)); + router.push(`/category?category=${encodedCategory}`); + } catch (error) { + console.error("Error deleting category:", error); + } + }; - createEmergency(emergency) - .then((result) => { - if (result.success) { - // clear the form - setEmergencyTitle(""); - setEmergencySubtitle(""); - setImportance(""); - setRiskFactors(""); - setMechanismOfInjury(""); - setDiagnosis(""); - setPhysicalExam(""); - setAcuteManagement(""); - setDispo(""); - setConsiderations(""); - //redirect to homepage/main page - } else { - // You should always clearly inform the user when something goes wrong. - // In this case, we're just doing an `alert()` for brevity, but you'd - // generally want to show some kind of error state or notification - // within your UI. If the problem is with the user's input, then use - // the error states of your smaller components (like the `TextField`s). - // If the problem is something we don't really control, such as network - // issues or an unexpected exception on the server side, then use a - // banner, modal, popup, or similar. - if ( - !emergencyTitle || - emergencyTitle === "" || - !emergencySubtitle || - emergencyTitle === "" - ) { - alert("Missing required title or subtitle fields. Please resubmit the form."); - } else { - alert(result.error); - } - console.log(result); - } - }) - .catch((error: unknown) => { - // Handle any errors that occur during the request - console.error("An error occurred while creating emergency:", error); - }); + const handleCancel = () => { + setPopupVisible(false); }; return ( -
-
-

Global Search > Medical > Add an injury

-

Injury details

- - - - -

Overview

- - - - - - +
+

+ {title ? "Editing Emergency: " : "Add an Emergency to: "}{" "} + {title ? title : category.title} +

+
+
+

Page Details

+

Page Title*

+ ) => { + setPage((prevPage) => { + return { ...prevPage, title: e.target.value }; + }); + }} /> - - - - - -

How to Treat

- - + Page Description* +

+