feat: Edit existing event tracker + summary form with visualisations

EyeSeeTea · Aug 21, 2024 · 789e2d8 · 789e2d8
1 parent a813888
commit 789e2d8
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 43 deletions.
diff --git a/src/data/repositories/utils/DateTimeHelper.ts b/src/data/repositories/utils/DateTimeHelper.ts
@@ -5,5 +5,10 @@ export function getCurrentTimeString(): string {
 }
 
 export function getDateAsIsoString(date: Maybe<Date>): string {
-    return date ? date.toISOString() : "";
+    try {
+        return date ? date.toISOString() : "";
+    } catch (e) {
+        console.debug(e);
+        return "";
+    }
 }
diff --git a/src/data/repositories/utils/DiseaseOutbreakMapper.ts b/src/data/repositories/utils/DiseaseOutbreakMapper.ts
@@ -76,23 +76,31 @@ export function mapTrackedEntityAttributesToDiseaseOutbreak(
                 getValueFromMap("conductEpidemiologicalAnalysis", trackedEntity)
             ),
             laboratoryConfirmation: {
-                date: new Date(getValueFromMap("laboratoryConfirmationDate", trackedEntity)),
+                date: getValueFromMap("laboratoryConfirmationDate", trackedEntity)
+                    ? new Date(getValueFromMap("laboratoryConfirmationDate", trackedEntity))
+                    : undefined,
                 na: getValueFromMap("laboratoryConfirmationNA", trackedEntity) === "true",
             },
             appropriateCaseManagement: {
-                date: new Date(getValueFromMap("appropriateCaseManagementDate", trackedEntity)),
+                date: getValueFromMap("appropriateCaseManagementDate", trackedEntity)
+                    ? new Date(getValueFromMap("appropriateCaseManagementDate", trackedEntity))
+                    : undefined,
                 na: getValueFromMap("appropriateCaseManagementNA", trackedEntity) === "true",
             },
             initiatePublicHealthCounterMeasures: {
-                date: new Date(
-                    getValueFromMap("initiatePublicHealthCounterMeasuresDate", trackedEntity)
-                ),
+                date: getValueFromMap("initiatePublicHealthCounterMeasuresDate", trackedEntity)
+                    ? new Date(
+                          getValueFromMap("initiatePublicHealthCounterMeasuresDate", trackedEntity)
+                      )
+                    : undefined,
                 na:
                     getValueFromMap("initiatePublicHealthCounterMeasuresNA", trackedEntity) ===
                     "true",
             },
             initiateRiskCommunication: {
-                date: new Date(getValueFromMap("initiateRiskCommunicationDate", trackedEntity)),
+                date: getValueFromMap("initiateRiskCommunicationDate", trackedEntity)
+                    ? new Date(getValueFromMap("initiateRiskCommunicationDate", trackedEntity))
+                    : undefined,
                 na: getValueFromMap("initiateRiskCommunicationNA", trackedEntity) === "true",
             },
             establishCoordination: new Date(
@@ -130,38 +138,51 @@ export function mapDiseaseOutbreakEventToTrackedEntityAttributes(
         return populatedAttribute;
     });
 
-    const enrollment: D2TrackerEnrollment = {
-        orgUnit: RTSL_ZEBRA_ORG_UNIT_ID,
-        program: RTSL_ZEBRA_PROGRAM_ID,
-        enrollment: "",
-        trackedEntityType: RTSL_ZEBRA_TRACKED_ENTITY_TYPE_ID,
-        notes: [],
-        relationships: [],
-        attributes: attributes,
-        events: [],
-        enrolledAt: diseaseOutbreak.created.toISOString(),
-        occurredAt: diseaseOutbreak.lastUpdated.toISOString(),
-        createdAt: getCurrentTimeString(),
-        createdAtClient: getCurrentTimeString(),
-        updatedAt: getCurrentTimeString(),
-        updatedAtClient: getCurrentTimeString(),
-        status: "ACTIVE",
-        orgUnitName: "",
-        followUp: false,
-        deleted: false,
-        storedBy: "",
-    };
-    const trackedEntity: D2TrackerTrackedEntity = {
-        trackedEntity: diseaseOutbreak.id,
-        orgUnit: RTSL_ZEBRA_ORG_UNIT_ID,
-        trackedEntityType: RTSL_ZEBRA_TRACKED_ENTITY_TYPE_ID,
-        createdAt: diseaseOutbreak.created.toISOString(),
-        updatedAt: diseaseOutbreak.lastUpdated.toISOString(),
-        attributes: attributes,
-        enrollments: [enrollment],
-    };
+    const isExistingTEI = diseaseOutbreak.id !== "";
+
+    if (isExistingTEI) {
+        const trackedEntity: D2TrackerTrackedEntity = {
+            orgUnit: RTSL_ZEBRA_ORG_UNIT_ID,
+            trackedEntityType: RTSL_ZEBRA_TRACKED_ENTITY_TYPE_ID,
+            trackedEntity: diseaseOutbreak.id,
+            attributes: attributes,
+        };
+
+        return trackedEntity;
+    } else {
+        const enrollment: D2TrackerEnrollment = {
+            orgUnit: RTSL_ZEBRA_ORG_UNIT_ID,
+            program: RTSL_ZEBRA_PROGRAM_ID,
+            enrollment: "",
+            trackedEntityType: RTSL_ZEBRA_TRACKED_ENTITY_TYPE_ID,
+            notes: [],
+            relationships: [],
+            attributes: attributes,
+            events: [],
+            enrolledAt: getCurrentTimeString(),
+            occurredAt: getCurrentTimeString(),
+            createdAt: getCurrentTimeString(),
+            createdAtClient: getCurrentTimeString(),
+            updatedAt: getCurrentTimeString(),
+            updatedAtClient: getCurrentTimeString(),
+            status: "ACTIVE",
+            orgUnitName: "",
+            followUp: false,
+            deleted: false,
+            storedBy: "",
+        };
+        const trackedEntity: D2TrackerTrackedEntity = {
+            trackedEntity: diseaseOutbreak.id,
+            orgUnit: RTSL_ZEBRA_ORG_UNIT_ID,
+            trackedEntityType: RTSL_ZEBRA_TRACKED_ENTITY_TYPE_ID,
+            attributes: attributes,
+            createdAt: getCurrentTimeString(),
+            updatedAt: getCurrentTimeString(),
+            enrollments: [enrollment],
+        };
 
-    return trackedEntity;
+        return trackedEntity;
+    }
 }
 
 function getValueFromMap(

diff --git a/src/webapp/components/form/form-summary/FormSummary.tsx b/src/webapp/components/form/form-summary/FormSummary.tsx
@@ -50,7 +50,7 @@ export const FormSummary: React.FC<FormSummaryProps> = React.memo(props => {
             <Section
                 title={formSummary.subTitle}
                 hasSeparator={true}
-                headerButtom={editButton}
+                headerButton={editButton}
                 titleVariant="secondary"
             >
                 <SummaryContainer>
@@ -98,6 +98,7 @@ const SummaryContainer = styled.div`
 
 const SummaryColumn = styled.div`
     flex: 1;
-    padding-right: 1rem;
+    padding-right: 2rem;
     color: ${props => props.theme.palette.text.hint};
+    min-width: fit-content;
 `;
diff --git a/src/webapp/components/section/Section.tsx b/src/webapp/components/section/Section.tsx
@@ -8,7 +8,7 @@ type SectionProps = {
     title?: string;
     lastUpdated?: string;
     children: React.ReactNode;
-    headerButtom?: React.ReactNode;
+    headerButton?: React.ReactNode;
     hasSeparator?: boolean;
     titleVariant?: "primary" | "secondary";
 };
@@ -17,7 +17,7 @@ export const Section: React.FC<SectionProps> = React.memo(
     ({
         title = "",
         lastUpdated = "",
-        headerButtom,
+        headerButton,
         hasSeparator = false,
         children,
         titleVariant = "primary",
@@ -40,7 +40,7 @@ export const Section: React.FC<SectionProps> = React.memo(
                         ) : null}
                     </TitleContainer>
 
-                    {headerButtom ? <div>{headerButtom}</div> : null}
+                    {headerButton ? <div>{headerButton}</div> : null}
                 </Header>
 
                 <Content>{children}</Content>

diff --git a/src/webapp/components/visualisation/Visualisation.tsx b/src/webapp/components/visualisation/Visualisation.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { VisualizationTypes } from "../../pages/event-tracker/EventTrackerPage";
+import styled from "styled-components";
+import { Section } from "../section/Section";
+
+type VisualisationProps = {
+    type: VisualizationTypes;
+    title: string;
+    hasSeparator?: boolean;
+    lastUpdated?: string;
+};
+export const Visualisation: React.FC<VisualisationProps> = React.memo(props => {
+    const { title, hasSeparator, lastUpdated } = props;
+    return (
+        <Section
+            title={title}
+            hasSeparator={hasSeparator}
+            titleVariant="secondary"
+            lastUpdated={lastUpdated}
+        >
+            <VisualisationContainer>{`Coming soon!`}</VisualisationContainer>
+        </Section>
+    );
+});
+
+const VisualisationContainer = styled.div`
+    width: 100%;
+    height: 25rem;
+    border: 0.1rem solid black;
+    background: ${props => props.theme.palette.primary.contrastText};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+`;
diff --git a/src/webapp/pages/event-tracker/EventTrackerPage.tsx b/src/webapp/pages/event-tracker/EventTrackerPage.tsx
@@ -3,16 +3,75 @@ import i18n from "../../../utils/i18n";
 import { Layout } from "../../components/layout/Layout";
 import { useParams } from "react-router-dom";
 import { FormSummary } from "../../components/form/form-summary/FormSummary";
+import { Visualisation } from "../../components/visualisation/Visualisation";
+import { Section } from "../../components/section/Section";
+import { Box, Button } from "@material-ui/core";
+import { AddCircleOutline } from "@material-ui/icons";
+import { BasicTable, TableColumn } from "../../components/table/BasicTable";
 
 // TODO: Add every section here
+export type VisualizationTypes =
+    | "ALL_EVENTS_MAP"
+    | "EVENT_TRACKER_AREAS_AFFECTED_MAP"
+    | "RISK_ASSESSMENT_HISTORY_LINE_CHART"
+    | "EVENT_TRACKER_CASES_BAR_CHART"
+    | "EVENT_TRACKER_DEATHS_BAR_CHART"
+    | "EVENT_TRACKER_OVERVIEW_CARDS"
+    | "EVENT_TRACKER_717_CARDS";
+
+const riskAssessmentColumns: TableColumn[] = [
+    { value: "grade", label: "Grade", type: "text" },
+    { value: "populationRisk", label: "Population at risk", type: "text" },
+    { value: "attackRate", label: "Attack rate", type: "text" },
+    { value: "geographical", label: "Geographical spread", type: "text" },
+    { value: "complexity", label: "Complexity", type: "text" },
+    { value: "capacity", label: "Capacity", type: "text" },
+    { value: "capability", label: "Capability", type: "text" },
+    { value: "reputationRisk", label: "Reputation Risk", type: "text" },
+    { value: "severity", label: "Severity", type: "text" },
+];
 
 export const EventTrackerPage: React.FC = React.memo(() => {
     const { id } = useParams<{
         id: string;
     }>();
+
+    const lastUpdated = `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`; //TO DO : Fetch sync time from datastore once implemented
     return (
         <Layout title={i18n.t("Event Tracker")}>
             <FormSummary id={id} />
+            <Visualisation type="EVENT_TRACKER_AREAS_AFFECTED_MAP" title="Districts Affected" />
+            <Section
+                title="Risk Assessment"
+                hasSeparator={true}
+                headerButton={
+                    <Button variant="outlined" color="secondary" startIcon={<AddCircleOutline />}>
+                        {i18n.t("Add new Assessment")}
+                    </Button>
+                }
+                titleVariant="secondary"
+                lastUpdated={lastUpdated}
+            >
+                <BasicTable columns={riskAssessmentColumns} rows={[{ grade: "Coming soon!" }]} />
+                <Box sx={{ m: 5 }} />
+            </Section>
+            <Visualisation
+                type="RISK_ASSESSMENT_HISTORY_LINE_CHART"
+                title="Risk Assessment History"
+            />
+            <Visualisation
+                type="EVENT_TRACKER_OVERVIEW_CARDS"
+                title="Overview"
+                hasSeparator={true}
+                lastUpdated={lastUpdated}
+            />
+            <Visualisation type="EVENT_TRACKER_CASES_BAR_CHART" title="Cases" hasSeparator={true} />
+            <Visualisation type="EVENT_TRACKER_CASES_BAR_CHART" title="Deaths" />
+            <Visualisation
+                type="EVENT_TRACKER_717_CARDS"
+                title="7-1-7 performance"
+                hasSeparator={true}
+            />
         </Layout>
     );
 });