Merge forms in one page for create and another for edit and change pa…

…ths in Router

src/webapp/components/form-page/FormPage.tsx → src/webapp/components/form/FormPage.tsx

@@ -16,13 +16,13 @@ type FormPageProps = {
 };
 
 export const FormPage: React.FC<FormPageProps> = React.memo(
-    ({ title, subtitle = "", saveLabel = "", cancelLabel = "", children, onSave, onCancel }) => {
+    ({ title, subtitle, saveLabel, cancelLabel, children, onSave, onCancel }) => {
         return (
             <StyledFormPage>
                 <Header>
                     <TitleContainer>
-                        {title ? <Title>{title}</Title> : null}
-                        {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+                        {title && <Title>{title}</Title>}
+                        {subtitle && <Subtitle>{subtitle}</Subtitle>}
                     </TitleContainer>
                     <RequiredText>{i18n.t("Indicates required")}</RequiredText>
                 </Header>

src/webapp/components/form-section/FormSection.tsx → src/webapp/components/form/FormSection.tsx

@@ -28,7 +28,7 @@ export const FormSection: React.FC<FormSectionProps> = React.memo(
                 {hasSeparator && <Separator margin="12px" />}
                 <Container direction={direction}>
                     {title && (
-                        <TitleContainer>
+                        <TitleContainer direction={direction}>
                             <RequiredText className={required ? "required" : ""}>
                                 {title}
                             </RequiredText>
@@ -37,7 +37,7 @@ export const FormSection: React.FC<FormSectionProps> = React.memo(
                             )}
                         </TitleContainer>
                     )}
-                    <FormContainer>{children}</FormContainer>
+                    <FormContainer fulWidth={!title}>{children}</FormContainer>
                 </Container>
             </FormSectionContainer>
         );
@@ -55,16 +55,21 @@ const Container = styled.div<{ direction: string }>`
     width: 100%;
     gap: ${props => (props.direction === "row" ? "48px" : "24px")};
     align-items: ${props => (props.direction === "row" ? "center" : "flex-start")};
+    @media (max-width: 600px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 `;
 
-const TitleContainer = styled.div`
+const TitleContainer = styled.div<{ direction: string }>`
     display: flex;
     align-items: center;
     gap: 4px;
+    width: 30%;
 `;
 
-const FormContainer = styled.div`
-    width: 100%;
+const FormContainer = styled.div<{ fulWidth: boolean }>`
+    width: ${props => (props.fulWidth ? "100%" : "70%")};
 `;
 
 const RequiredText = styled.span`

src/webapp/components/layout/side-bar/SideBarContent.tsx

@@ -46,7 +46,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
         const history = useHistory();
 
         const goToCreateEvent = useCallback(() => {
-            history.push(`/create-event`);
+            history.push(`/create/diseaseOutbreakEvent`);
         }, [history]);
 
         return (

src/webapp/pages/Router.tsx

@@ -6,35 +6,31 @@ import { EventTrackerPage } from "./event-tracker/EventTrackerPage";
 import { IncidentActionPlanPage } from "./incident-action-plan/IncidentActionPlanPage";
 import { ResourcesPage } from "./resources/ResourcesPage";
 import { IMTeamBuilderPage } from "./incident-management-team-builder/IMTeamBuilderPage";
-import { CreateEventPage } from "./create-event/CreateEventPage";
-import { CreateRiskAssessmentPage } from "./create-risk-assessment/CreateRiskAssessmentPage";
-import { CreateIncidentActionPlanPage } from "./create-incident-action-plan/CreateIncidentActionPlanPage";
-import { AssignRolePage } from "./assign-role/AssignRolePage";
+import { EditFormPage } from "./edit-form/EditFormPage";
+import { CreateFormPage } from "./create-form/CreateFormPage";
 
 export function Router() {
     return (
         <HashRouter>
             <Switch>
-                <Route path="/create-event" render={() => <CreateEventPage />} />
-                <Route path="/event-tracker/:event" render={() => <EventTrackerPage />} />
+                <Route path="/create/:formType" render={() => <CreateFormPage />} />
                 <Route
-                    path="/create-risk-assessment/:event"
-                    render={() => <CreateRiskAssessmentPage />}
+                    path="/edit/:formType/:diseaseOutbreakEventId/:id?"
+                    render={() => <EditFormPage />}
                 />
                 <Route
-                    path="/incident-management-team-builder/:event"
-                    render={() => <IMTeamBuilderPage />}
+                    path="/event-tracker/:diseaseOutbreakEvent"
+                    render={() => <EventTrackerPage />}
                 />
-                <Route path="/assign-role/:event" render={() => <AssignRolePage />} />
                 <Route
-                    path="/incident-action-plan/:event"
-                    render={() => <IncidentActionPlanPage />}
+                    path="/incident-management-team-builder/:diseaseOutbreakEvent"
+                    render={() => <IMTeamBuilderPage />}
                 />
                 <Route
-                    path="/create-incident-action-plan/:event"
-                    render={() => <CreateIncidentActionPlanPage />}
+                    path="/:diseaseOutbreakEvent/incident-action-plan/:incidentActionPlan"
+                    render={() => <IncidentActionPlanPage />}
                 />
-                <Route path="/resources/:event" render={() => <ResourcesPage />} />
+                <Route path="/resources/:diseaseOutbreakEvent" render={() => <ResourcesPage />} />
                 {/* Default route */}
                 <Route render={() => <DashboardPage />} />
             </Switch>

src/webapp/pages/create-form/CreateFormPage.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { Layout } from "../../components/layout/Layout";
+import { FormPage } from "../../components/form/FormPage";
+
+export const CreateFormPage: React.FC = React.memo(() => {
+    return (
+        <Layout title="Form Title" subtitle="Form Subtitle" hideSideBarOptions>
+            <FormPage title="title" subtitle="subtitle" onSave={() => {}}>
+                <div>CreateFormPage</div>
+            </FormPage>
+        </Layout>
+    );
+});

src/webapp/pages/edit-form/EditFormPage.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { Layout } from "../../components/layout/Layout";
+import { FormPage } from "../../components/form/FormPage";
+
+export const EditFormPage: React.FC = React.memo(() => {
+    return (
+        <Layout title="Form Title" subtitle="Form Subtitle" hideSideBarOptions>
+            <FormPage title="title" subtitle="subtitle" onSave={() => {}}>
+                <div>EditFormPage</div>
+            </FormPage>
+        </Layout>
+    );
+});