diff --git a/i18n/en.pot b/i18n/en.pot index cf5cb555..b47f6b59 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n" -"PO-Revision-Date: 2024-06-27T08:53:15.150Z\n" +"POT-Creation-Date: 2024-06-28T09:08:39.454Z\n" +"PO-Revision-Date: 2024-06-28T09:08:39.454Z\n" msgid "Add new option" msgstr "" @@ -35,24 +35,6 @@ msgstr "" msgid "Last updated: " msgstr "" -msgid "Incident Management Team Builder" -msgstr "" - -msgid "Cholera in NW Province, June 2023" -msgstr "" - -msgid "Incident Action Plan" -msgstr "" - -msgid "Team" -msgstr "" - -msgid "Response Actions" -msgstr "" - -msgid "Create Risk Assessment" -msgstr "" - msgid "Dashboard" msgstr "" @@ -83,12 +65,21 @@ msgstr "" msgid "Risk Assessment" msgstr "" +msgid "Create Risk Assessment" +msgstr "" + msgid "Risk assessment incomplete" msgstr "" msgid "Risks associated with this event have not yet been assessed." msgstr "" +msgid "Incident Action Plan" +msgstr "" + +msgid "Cholera in NW Province, June 2023" +msgstr "" + msgid "Response actions" msgstr "" @@ -101,8 +92,14 @@ msgstr "" msgid "Edit Action Plan" msgstr "" +msgid "Team" +msgstr "" + msgid "Edit Team" msgstr "" +msgid "Incident Management Team Builder" +msgstr "" + msgid "Resources" msgstr "" diff --git a/i18n/es.po b/i18n/es.po index 0a4ba04f..e7da866a 100644 --- a/i18n/es.po +++ b/i18n/es.po @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" -"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n" +"POT-Creation-Date: 2024-06-28T09:08:39.454Z\n" "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -35,24 +35,6 @@ msgstr "" msgid "Last updated: " msgstr "" -msgid "Incident Management Team Builder" -msgstr "" - -msgid "Cholera in NW Province, June 2023" -msgstr "" - -msgid "Incident Action Plan" -msgstr "" - -msgid "Team" -msgstr "" - -msgid "Response Actions" -msgstr "" - -msgid "Create Risk Assessment" -msgstr "" - msgid "Dashboard" msgstr "" @@ -83,12 +65,21 @@ msgstr "" msgid "Risk Assessment" msgstr "" +msgid "Create Risk Assessment" +msgstr "" + msgid "Risk assessment incomplete" msgstr "" msgid "Risks associated with this event have not yet been assessed." msgstr "" +msgid "Incident Action Plan" +msgstr "" + +msgid "Cholera in NW Province, June 2023" +msgstr "" + msgid "Response actions" msgstr "" @@ -101,9 +92,15 @@ msgstr "" msgid "Edit Action Plan" msgstr "" +msgid "Team" +msgstr "" + msgid "Edit Team" msgstr "" +msgid "Incident Management Team Builder" +msgstr "" + msgid "Resources" msgstr "" diff --git a/package.json b/package.json index 258b6c67..a649d7aa 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "d2": "31.10.2", "d2-manifest": "1.0.0", "font-awesome": "4.7.0", - "lodash": "^4.17.21", "purify-ts": "1.2.0", "purify-ts-extra-codec": "0.6.0", "react": "^18.2.0", @@ -50,7 +49,6 @@ "@testing-library/react": "^14.0.0", "@types/classnames": "2.3.1", "@types/isomorphic-fetch": "^0.0.36", - "@types/lodash": "^4.17.5", "@types/material-ui": "^0.21.12", "@types/node": "18", "@types/node-localstorage": "^1.3.0", diff --git a/src/webapp/components/add-new-option/AddNewOption.tsx b/src/webapp/components/add-new-option/AddNewOption.tsx index 26adbd2a..16186c5d 100644 --- a/src/webapp/components/add-new-option/AddNewOption.tsx +++ b/src/webapp/components/add-new-option/AddNewOption.tsx @@ -11,7 +11,7 @@ type AddNewOptionProps = { }; export const AddNewOption: React.FC = React.memo( - ({ id, label = "", onAddNewOption }) => { + ({ id, label, onAddNewOption }) => { return ( diff --git a/src/webapp/components/button/Button.tsx b/src/webapp/components/button/Button.tsx index 00621876..00894a1d 100644 --- a/src/webapp/components/button/Button.tsx +++ b/src/webapp/components/button/Button.tsx @@ -1,11 +1,10 @@ import React from "react"; import { Button as MUIButton } from "@material-ui/core"; -import styled from "styled-components"; type ButtonProps = { children?: React.ReactNode; variant?: "contained" | "outlined"; - color?: "primary" | "secondary" | "dark-secondary"; + color?: "primary" | "secondary"; disabled?: boolean; startIcon?: React.ReactNode; onClick: () => void; @@ -21,22 +20,16 @@ export const Button: React.FC = React.memo( onClick, }) => { return ( - {children} - + ); } ); - -const StyledButton = styled(MUIButton)<{ $darkBorder: boolean }>` - border-color: ${props => - props.$darkBorder ? props.theme.palette.button.borderDarkSecondary : "initial"}; -`; diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx index c46191bf..7942ab72 100644 --- a/src/webapp/components/date-picker/DatePicker.tsx +++ b/src/webapp/components/date-picker/DatePicker.tsx @@ -15,22 +15,28 @@ type DatePickerProps = { errorText?: string; disabled?: boolean; error?: boolean; + required?: boolean; }; export const DatePicker: React.FC = React.memo( ({ - id = "", - label = "", + id, + label, value, onChange, disabled = false, helperText = "", errorText = "", error = false, + required = false, }) => { return ( - {label && } + {label && ( + + )} props.theme.palette.text.primary}; margin-block-end: 8px; + + &.required::after { + content: "*"; + color: ${props => props.theme.palette.common.red}; + margin-inline-start: 4px; + } `; const StyledDatePicker = styled(DatePickerMUI)<{ error?: boolean; disabled?: boolean }>` diff --git a/src/webapp/components/form-page/FormPage.tsx b/src/webapp/components/form/FormLayout.tsx similarity index 83% rename from src/webapp/components/form-page/FormPage.tsx rename to src/webapp/components/form/FormLayout.tsx index 6fa37af9..a01eeba6 100644 --- a/src/webapp/components/form-page/FormPage.tsx +++ b/src/webapp/components/form/FormLayout.tsx @@ -5,7 +5,7 @@ import i18n from "../../../utils/i18n"; import { Button } from "../button/Button"; import { Separator } from "../separator/Separator"; -type FormPageProps = { +type FormLayoutProps = { title?: string; subtitle?: string; saveLabel?: string; @@ -15,14 +15,14 @@ type FormPageProps = { onCancel?: () => void; }; -export const FormPage: React.FC = React.memo( - ({ title, subtitle = "", saveLabel = "", cancelLabel = "", children, onSave, onCancel }) => { +export const FormLayout: React.FC = React.memo( + ({ title, subtitle, saveLabel, cancelLabel, children, onSave, onCancel }) => { return ( - +
- {title ? {title} : null} - {subtitle ? {subtitle} : null} + {title && {title}} + {subtitle && {subtitle}} {i18n.t("Indicates required")}
@@ -38,12 +38,12 @@ export const FormPage: React.FC = React.memo( )} - + ); } ); -const StyledFormPage = styled.div` +const StyledFormLayout = styled.div` width: 100%; `; diff --git a/src/webapp/components/form-section/FormSection.tsx b/src/webapp/components/form/FormSection.tsx similarity index 56% rename from src/webapp/components/form-section/FormSection.tsx rename to src/webapp/components/form/FormSection.tsx index 2d2178f6..cc28e8a0 100644 --- a/src/webapp/components/form-section/FormSection.tsx +++ b/src/webapp/components/form/FormSection.tsx @@ -6,7 +6,8 @@ import { Separator } from "../separator/Separator"; import { IconButton } from "../icon-button/IconButton"; type FormSectionProps = { - title: string; + title?: string; + required?: boolean; children: React.ReactNode; hasSeparator?: boolean; onClickInfo?: () => void; @@ -14,16 +15,29 @@ type FormSectionProps = { }; export const FormSection: React.FC = React.memo( - ({ title, hasSeparator = false, children, onClickInfo, direction = "row" }) => { + ({ + title, + hasSeparator = false, + children, + onClickInfo, + direction = "row", + required = false, + }) => { return ( {hasSeparator && } - - {title} - {onClickInfo && } onClick={onClickInfo} />} - - {children} + {title && ( + + + {title} + + {onClickInfo && ( + } onClick={onClickInfo} /> + )} + + )} + {children} ); @@ -41,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` @@ -58,7 +77,8 @@ const RequiredText = styled.span` font-size: 0.875rem; font-weight: 700; white-space: nowrap; - &::after { + + &.required::after { content: "*"; color: ${props => props.theme.palette.common.red}; margin-inline-start: 4px; diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx index 39f22d7f..9444d017 100644 --- a/src/webapp/components/layout/side-bar/SideBarContent.tsx +++ b/src/webapp/components/layout/side-bar/SideBarContent.tsx @@ -46,11 +46,11 @@ export const SideBarContent: React.FC = React.memo( const history = useHistory(); const goToCreateEvent = useCallback(() => { - history.push(`/create-event`); + history.push(`/create/diseaseOutbreakEvent`); }, [history]); return ( - + {hideOptions ? null : children ? ( children ) : showCreateEvent ? ( @@ -78,19 +78,18 @@ const StyledText = styled(ListItemText)<{ selected?: boolean }>` color: ${props => props.theme.palette.sidebar.text}; font-weight: ${props => (props.selected ? 700 : 400)}; font-size: 0.875rem; + padding-inline-start: 8px; } `; -const SideBarContainer = styled.div` +const SideBarContainer = styled.div<{ hideOptions?: boolean }>` display: flex; max-width: 245px; + width: ${props => (props.hideOptions ? "338px" : "initial")}; background-color: ${props => props.theme.palette.sidebar.background}; .MuiList-root { padding-block: 50px; } - .MuiListItem-root { - margin-inline: 8px; - } .MuiButtonBase-root { padding-inline: 24px; padding-block: 4px; diff --git a/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx b/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx index e0026b50..8670fb7f 100644 --- a/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx +++ b/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx @@ -17,7 +17,7 @@ type NACheckboxProps = { export const NACheckbox: React.FC = React.memo( ({ id, - label = "", + label, checked, onChange, helperText = "", diff --git a/src/webapp/components/search-input/SearchInput.tsx b/src/webapp/components/search-input/SearchInput.tsx index 3e0bac51..1e45691e 100644 --- a/src/webapp/components/search-input/SearchInput.tsx +++ b/src/webapp/components/search-input/SearchInput.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from "react"; import { TextField } from "@material-ui/core"; import { IconSearch24 } from "@dhis2/ui"; import styled from "styled-components"; -import _ from "lodash"; import i18n from "../../../utils/i18n"; @@ -19,14 +18,14 @@ export const SearchInput: React.FC = React.memo( useEffect(() => updateStateValue(value), [value]); - // eslint-disable-next-line react-hooks/exhaustive-deps + // TODO: needs debounce function from Collection const onChangeDebounced = useCallback( - _.debounce((value: string) => { + (value: string) => { if (onChange) { onChange(value); } - }, 400), - [] + }, + [onChange] ); const handleChange = useCallback( diff --git a/src/webapp/components/multiple-selector/MultipleSelector.tsx b/src/webapp/components/selector/MultipleSelector.tsx similarity index 83% rename from src/webapp/components/multiple-selector/MultipleSelector.tsx rename to src/webapp/components/selector/MultipleSelector.tsx index 38d06a4d..95f402a8 100644 --- a/src/webapp/components/multiple-selector/MultipleSelector.tsx +++ b/src/webapp/components/selector/MultipleSelector.tsx @@ -2,30 +2,26 @@ import React, { useCallback } from "react"; import styled from "styled-components"; import { Select, InputLabel, MenuItem, FormHelperText, Chip } from "@material-ui/core"; import { IconChevronDown24, IconCross16 } from "@dhis2/ui"; - -export type MultipleSelectorOption = { - value: T; - label: string; - disabled?: boolean; -}; +import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper"; type MultipleSelectorProps = { id: string; selected: T[]; - onChange: (value: MultipleSelectorOption["value"][]) => void; - options: MultipleSelectorOption[]; + onChange: (value: SelectorOption["value"][]) => void; + options: SelectorOption[]; label?: string; placeholder?: string; disabled?: boolean; helperText?: string; errorText?: string; error?: boolean; + required?: boolean; }; export const MultipleSelector: React.FC = React.memo( ({ id, - label = "", + label, placeholder = "", selected, onChange, @@ -34,14 +30,8 @@ export const MultipleSelector: React.FC = React.memo( helperText = "", errorText = "", error = false, + required = false, }) => { - const getLabelFromValue = useCallback( - (value: MultipleSelectorOption["value"]) => { - return options.find(option => option.value === value)?.label || ""; - }, - [options] - ); - const handleChange = useCallback( ( event: React.ChangeEvent<{ @@ -49,7 +39,7 @@ export const MultipleSelector: React.FC = React.memo( }>, _child: React.ReactNode ) => { - const value = event.target.value as MultipleSelectorOption["value"][]; + const value = event.target.value as SelectorOption["value"][]; onChange(value); }, [onChange] @@ -58,7 +48,7 @@ export const MultipleSelector: React.FC = React.memo( const handleDelete = useCallback( ( event: React.MouseEvent, - value: MultipleSelectorOption["value"] + value: SelectorOption["value"] ) => { event.stopPropagation(); onChange(selected?.filter(selection => selection !== value)); @@ -68,7 +58,11 @@ export const MultipleSelector: React.FC = React.memo( return ( - {label && } + {label && ( + + )} = React.memo( IconComponent={IconChevronDown24} error={error} renderValue={(selected: unknown) => - (selected as MultipleSelectorOption["value"][])?.length ? ( + (selected as SelectorOption["value"][])?.length ? (
- {(selected as MultipleSelectorOption["value"][]).map(value => ( + {(selected as SelectorOption["value"][]).map(value => ( } onDelete={event => handleDelete(event, value)} onMouseDown={event => handleDelete(event, value)} @@ -124,10 +118,16 @@ const Container = styled.div` const Label = styled(InputLabel)` display: inline-block; - font-weight: 400; + font-weight: 700; font-size: 0.875rem; color: ${props => props.theme.palette.text.primary}; margin-block-end: 8px; + + &.required::after { + content: "*"; + color: ${props => props.theme.palette.common.red}; + margin-inline-start: 4px; + } `; const StyledFormHelperText = styled(FormHelperText)<{ error?: boolean }>` diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx index fde41143..e7a88c8d 100644 --- a/src/webapp/components/selector/Selector.tsx +++ b/src/webapp/components/selector/Selector.tsx @@ -2,12 +2,7 @@ import React, { useCallback } from "react"; import styled from "styled-components"; import { Select, InputLabel, MenuItem, FormHelperText } from "@material-ui/core"; import { IconChevronDown24 } from "@dhis2/ui"; - -export type SelectorOption = { - value: T; - label: string; - disabled?: boolean; -}; +import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper"; type SelectorProps = { id: string; @@ -20,12 +15,13 @@ type SelectorProps = { helperText?: string; errorText?: string; error?: boolean; + required?: boolean; }; export const Selector: React.FC = React.memo( ({ id, - label = "", + label, placeholder = "", selected, onChange, @@ -34,14 +30,8 @@ export const Selector: React.FC = React.memo( helperText = "", errorText = "", error = false, + required = false, }) => { - const getLabelFromValue = useCallback( - (value: SelectorOption["value"]) => { - return options.find(option => option.value === value)?.label || ""; - }, - [options] - ); - const handleChange = useCallback( ( event: React.ChangeEvent<{ @@ -57,7 +47,11 @@ export const Selector: React.FC = React.memo( return ( - {label && } + {label && ( + + )} = React.memo( IconComponent={IconChevronDown24} error={error} renderValue={(selected: unknown) => - getLabelFromValue(selected as SelectorOption["value"]) || placeholder + getLabelFromValue(selected as SelectorOption["value"], options) || + placeholder } displayEmpty > @@ -98,10 +93,16 @@ const Container = styled.div` const Label = styled(InputLabel)` display: inline-block; - font-weight: 400; + font-weight: 700; font-size: 0.875rem; color: ${props => props.theme.palette.text.primary}; margin-block-end: 8px; + + &.required::after { + content: "*"; + color: ${props => props.theme.palette.common.red}; + margin-inline-start: 4px; + } `; const StyledFormHelperText = styled(FormHelperText)<{ error?: boolean }>` diff --git a/src/webapp/components/selector/utils/selectorHelper.ts b/src/webapp/components/selector/utils/selectorHelper.ts new file mode 100644 index 00000000..7b23414f --- /dev/null +++ b/src/webapp/components/selector/utils/selectorHelper.ts @@ -0,0 +1,12 @@ +export type SelectorOption = { + value: T; + label: string; + disabled?: boolean; +}; + +export function getLabelFromValue( + value: SelectorOption["value"], + options: SelectorOption[] +) { + return options.find(option => option.value === value)?.label; +} diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx index ad26b993..c8587d6c 100644 --- a/src/webapp/components/table/BasicTable.tsx +++ b/src/webapp/components/table/BasicTable.tsx @@ -3,8 +3,9 @@ import _ from "lodash"; import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core"; import styled from "styled-components"; import { Maybe } from "../../../utils/ts-utils"; -import { Selector, SelectorOption } from "../selector/Selector"; +import { Selector } from "../selector/Selector"; import i18n from "../../../utils/i18n"; +import { SelectorOption } from "../selector/utils/selectorHelper"; interface BaseColumn { value: string; diff --git a/src/webapp/components/text-area/TextArea.tsx b/src/webapp/components/text-input/TextArea.tsx similarity index 87% rename from src/webapp/components/text-area/TextArea.tsx rename to src/webapp/components/text-input/TextArea.tsx index ae779da6..d6f3302b 100644 --- a/src/webapp/components/text-area/TextArea.tsx +++ b/src/webapp/components/text-input/TextArea.tsx @@ -11,18 +11,20 @@ type TextAreaProps = { helperText?: string; errorText?: string; error?: boolean; + required?: boolean; }; export const TextArea: React.FC = React.memo( ({ id, - label = "", + label, value, onChange, disabled = false, helperText = "", errorText = "", error = false, + required = false, }) => { const handleChange = useCallback( (event: React.ChangeEvent) => { @@ -33,7 +35,11 @@ export const TextArea: React.FC = React.memo( return ( - {label && } + {label && ( + + )} props.theme.palette.text.primary}; margin-block-end: 8px; + + &.required::after { + content: "*"; + color: ${props => props.theme.palette.common.red}; + margin-inline-start: 4px; + } `; const StyledTextareaAutosize = styled(TextareaAutosize)<{ diff --git a/src/webapp/components/input-field/InputField.tsx b/src/webapp/components/text-input/TextInput.tsx similarity index 78% rename from src/webapp/components/input-field/InputField.tsx rename to src/webapp/components/text-input/TextInput.tsx index 87f333ca..367244bf 100644 --- a/src/webapp/components/input-field/InputField.tsx +++ b/src/webapp/components/text-input/TextInput.tsx @@ -2,7 +2,7 @@ import React from "react"; import { TextField, InputLabel } from "@material-ui/core"; import styled from "styled-components"; -type InputFieldProps = { +type TextInputProps = { id: string; label?: string; value: string; @@ -14,10 +14,10 @@ type InputFieldProps = { error?: boolean; }; -export const InputField: React.FC = React.memo( +export const TextInput: React.FC = React.memo( ({ id, - label = "", + label, value, onChange, helperText = "", @@ -28,7 +28,11 @@ export const InputField: React.FC = React.memo( }) => { return ( - {label && } + {label && ( + + )} props.theme.palette.text.primary}; margin-block-end: 8px; + + &.required::after { + content: "*"; + color: ${props => props.theme.palette.common.red}; + margin-inline-start: 4px; + } `; const StyledTextField = styled(TextField)<{ error?: boolean }>` diff --git a/src/webapp/components/utils/selectorHelper.ts b/src/webapp/components/utils/selectorHelper.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/webapp/pages/Router.tsx b/src/webapp/pages/Router.tsx index 8665b9db..3ee47f08 100644 --- a/src/webapp/pages/Router.tsx +++ b/src/webapp/pages/Router.tsx @@ -6,35 +6,30 @@ 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 { FormPage } from "./form/FormPage"; export function Router() { return ( - } /> - } /> + } /> } + path="/edit/:formType/:diseaseOutbreakEventId/:id?" + render={() => } /> } + path="/event-tracker/:diseaseOutbreakEvent" + render={() => } /> - } /> } + path="/incident-management-team-builder/:diseaseOutbreakEvent" + render={() => } /> } + path="/:diseaseOutbreakEvent/incident-action-plan/:incidentActionPlan" + render={() => } /> - } /> + } /> {/* Default route */} } /> diff --git a/src/webapp/pages/assign-role/AssignRolePage.tsx b/src/webapp/pages/assign-role/AssignRolePage.tsx deleted file mode 100644 index 0d36ad1d..00000000 --- a/src/webapp/pages/assign-role/AssignRolePage.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -import { Layout } from "../../components/layout/Layout"; -import i18n from "../../../utils/i18n"; - -export const AssignRolePage: React.FC = React.memo(() => { - return ( - - AssignRolePage - - ); -}); diff --git a/src/webapp/pages/create-event/CreateEventPage.tsx b/src/webapp/pages/create-event/CreateEventPage.tsx deleted file mode 100644 index fb08a60f..00000000 --- a/src/webapp/pages/create-event/CreateEventPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; - -import { Layout } from "../../components/layout/Layout"; -import i18n from "../../../utils/i18n"; - -export const CreateEventPage: React.FC = React.memo(() => { - return ; -}); diff --git a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx deleted file mode 100644 index 9ee519db..00000000 --- a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import React from "react"; - -import { Layout } from "../../components/layout/Layout"; -import i18n from "../../../utils/i18n"; -import { BasicTable, TableColumn } from "../../components/table/BasicTable"; -import { Section } from "../../components/section/Section"; - -export const CreateIncidentActionPlanPage: React.FC = React.memo(() => { - const columnsTeam: TableColumn[] = [ - { value: "role", label: "Role" }, - { value: "name", label: "Name", type: "link" }, - { value: "email", label: "Email", type: "link" }, - { value: "phone", label: "Phone" }, - ]; - - const dataTeam = [ - { - role: "Incident Manager", - name: "George Abitbol", - email: "george.abitbol@gmail.com", - phone: "+33 6 12 34 56 78", - }, - { - role: "Manager of Operations", - name: "John Traore", - email: "george.abitbol@gmail.com", - phone: "+33 6 12 34 56 78", - }, - ]; - - const columnsResponseActions: TableColumn[] = [ - { value: "mainTask", label: "Main Task", underline: true }, - { value: "subActivities", label: "Sub Activities" }, - { value: "subPillar", label: "Sub Pillar" }, - { value: "responsibleOfficer", label: "Responsible officer" }, - { - value: "status", - label: "Status", - type: "selector", - options: [ - { value: "Complete", label: "Complete" }, - { value: "Pending", label: "Pending" }, - { value: "In progress", label: "In progress" }, - ], - }, - { - value: "verification", - label: "Verification", - type: "selector", - options: [ - { value: "Unverified", label: "Unverified" }, - { value: "Verified", label: "Verified" }, - ], - }, - { value: "timeline", label: "Timeline" }, - { value: "dueDate", label: "Due date" }, - ]; - - const dataResponseActions = [ - { - mainTask: "Data management", - subActivities: "Configure tablet", - subPillar: "Planning", - responsibleOfficer: "Moses Banda", - status: "Complete", - verification: "Unverified", - timeline: "Qtr 2 June", - dueDate: "8 June", - }, - { - mainTask: "Risk communication", - subActivities: "Develop risk communication plan", - subPillar: "RCCE", - responsibleOfficer: "Mr Zimba", - status: "Pending", - verification: "Verified", - timeline: "Qtr 3 June", - dueDate: "17 June", - }, - { - mainTask: "Vaccine transportation", - subActivities: "Reverse cold storage transport", - subPillar: "Logistics", - responsibleOfficer: "Mr Guissimon", - status: "In progress", - verification: "Unverified", - timeline: "Qtr 3 June", - dueDate: "9 June", - }, - { - mainTask: "Training of RRT", - subActivities: "Train and deploy RRTs", - subPillar: "Operations", - responsibleOfficer: "Dr Chika", - status: "Not done", - verification: "Unverified", - timeline: "Qtr 3 June", - dueDate: "9 June", - }, - { - mainTask: "Supplies", - subActivities: "Procure granular chlorine", - subPillar: "Administration", - responsibleOfficer: "Moses Banda", - status: "Pending", - verification: "Unverified", - timeline: "Qtr 4 June", - dueDate: "20 June", - }, - { - mainTask: "Supplies", - subActivities: "Procure RDTs", - subPillar: "Operations", - responsibleOfficer: "Mpanga Kasonde", - status: "In Progress", - verification: "Unverified", - timeline: "Qtr 3 June", - dueDate: "17 June", - }, - { - mainTask: "Strengthen surveillance", - subActivities: "Active case search", - subPillar: "Surveillance", - responsibleOfficer: "Namonda Mbumwae", - status: "Complete", - verification: "Unverified", - timeline: "Qtr 1 June", - dueDate: "5 June", - }, - ]; - - return ( - - CreateIncidentActionPlanPage -
- console.log(arg)} - /> -
-
- console.log(arg)} - /> -
- - ); -}); diff --git a/src/webapp/pages/create-risk-assessment/CreateRiskAssessmentPage.tsx b/src/webapp/pages/create-risk-assessment/CreateRiskAssessmentPage.tsx deleted file mode 100644 index c4dcbdc3..00000000 --- a/src/webapp/pages/create-risk-assessment/CreateRiskAssessmentPage.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -import { Layout } from "../../components/layout/Layout"; -import i18n from "../../../utils/i18n"; - -export const CreateRiskAssessmentPage: React.FC = React.memo(() => { - return ( - - CreateRiskAssessmentPage - - ); -}); diff --git a/src/webapp/pages/form/FormPage.tsx b/src/webapp/pages/form/FormPage.tsx new file mode 100644 index 00000000..5199b37d --- /dev/null +++ b/src/webapp/pages/form/FormPage.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +import { Layout } from "../../components/layout/Layout"; +import { FormLayout } from "../../components/form/FormLayout"; + +export const FormPage: React.FC = React.memo(() => { + return ( + + {}}> +
FormPage
+ + + ); +}); diff --git a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx index 906ac431..938d73ff 100644 --- a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx +++ b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx @@ -5,8 +5,132 @@ import i18n from "../../../utils/i18n"; import { Layout } from "../../components/layout/Layout"; import { Section } from "../../components/section/Section"; import { Button } from "../../components/button/Button"; +import { BasicTable, TableColumn } from "../../components/table/BasicTable"; export const IncidentActionPlanPage: React.FC = React.memo(() => { + const columnsTeam: TableColumn[] = [ + { value: "role", label: "Role" }, + { value: "name", label: "Name", type: "link" }, + { value: "email", label: "Email", type: "link" }, + { value: "phone", label: "Phone" }, + ]; + + const dataTeam = [ + { + role: "Incident Manager", + name: "George Abitbol", + email: "george.abitbol@gmail.com", + phone: "+33 6 12 34 56 78", + }, + { + role: "Manager of Operations", + name: "John Traore", + email: "george.abitbol@gmail.com", + phone: "+33 6 12 34 56 78", + }, + ]; + + const columnsResponseActions: TableColumn[] = [ + { value: "mainTask", label: "Main Task", underline: true }, + { value: "subActivities", label: "Sub Activities" }, + { value: "subPillar", label: "Sub Pillar" }, + { value: "responsibleOfficer", label: "Responsible officer" }, + { + value: "status", + label: "Status", + type: "selector", + options: [ + { value: "Complete", label: "Complete" }, + { value: "Pending", label: "Pending" }, + { value: "In progress", label: "In progress" }, + ], + }, + { + value: "verification", + label: "Verification", + type: "selector", + options: [ + { value: "Unverified", label: "Unverified" }, + { value: "Verified", label: "Verified" }, + ], + }, + { value: "timeline", label: "Timeline" }, + { value: "dueDate", label: "Due date" }, + ]; + + const dataResponseActions = [ + { + mainTask: "Data management", + subActivities: "Configure tablet", + subPillar: "Planning", + responsibleOfficer: "Moses Banda", + status: "Complete", + verification: "Unverified", + timeline: "Qtr 2 June", + dueDate: "8 June", + }, + { + mainTask: "Risk communication", + subActivities: "Develop risk communication plan", + subPillar: "RCCE", + responsibleOfficer: "Mr Zimba", + status: "Pending", + verification: "Verified", + timeline: "Qtr 3 June", + dueDate: "17 June", + }, + { + mainTask: "Vaccine transportation", + subActivities: "Reverse cold storage transport", + subPillar: "Logistics", + responsibleOfficer: "Mr Guissimon", + status: "In progress", + verification: "Unverified", + timeline: "Qtr 3 June", + dueDate: "9 June", + }, + { + mainTask: "Training of RRT", + subActivities: "Train and deploy RRTs", + subPillar: "Operations", + responsibleOfficer: "Dr Chika", + status: "Not done", + verification: "Unverified", + timeline: "Qtr 3 June", + dueDate: "9 June", + }, + { + mainTask: "Supplies", + subActivities: "Procure granular chlorine", + subPillar: "Administration", + responsibleOfficer: "Moses Banda", + status: "Pending", + verification: "Unverified", + timeline: "Qtr 4 June", + dueDate: "20 June", + }, + { + mainTask: "Supplies", + subActivities: "Procure RDTs", + subPillar: "Operations", + responsibleOfficer: "Mpanga Kasonde", + status: "In Progress", + verification: "Unverified", + timeline: "Qtr 3 June", + dueDate: "17 June", + }, + { + mainTask: "Strengthen surveillance", + subActivities: "Active case search", + subPillar: "Surveillance", + responsibleOfficer: "Namonda Mbumwae", + status: "Complete", + verification: "Unverified", + timeline: "Qtr 1 June", + dueDate: "5 June", + }, + ]; + return ( { } > Response actions content + console.log(arg)} + />
{ } > Team content + console.log(arg)} + />
); diff --git a/yarn.lock b/yarn.lock index 2710f263..61d79c4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4283,11 +4283,6 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== -"@types/lodash@^4.17.5": - version "4.17.5" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.5.tgz#e6c29b58e66995d57cd170ce3e2a61926d55ee04" - integrity sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw== - "@types/material-ui@^0.21.12": version "0.21.12" resolved "https://registry.yarnpkg.com/@types/material-ui/-/material-ui-0.21.12.tgz#208e8b7e49a545bb704fa7e865986afde1b33384"