Add more little component to UI

EyeSeeTea · Jun 17, 2024 · 1a21585 · 1a21585
1 parent c954adf
commit 1a21585
Show file tree

Hide file tree

Showing 26 changed files with 698 additions and 59 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,22 +5,28 @@ 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-07T18:24:28.361Z\n"
-"PO-Revision-Date: 2024-06-07T18:24:28.361Z\n"
+"POT-Creation-Date: 2024-06-17T13:56:47.078Z\n"
+"PO-Revision-Date: 2024-06-17T13:56:47.078Z\n"
 
 msgid "Add new option"
 msgstr ""
 
+msgid "Create Event"
+msgstr ""
+
 msgid "N/A"
 msgstr ""
 
-msgid "Incident Management Team Builder"
+msgid "Close"
 msgstr ""
 
-msgid "Cholera in NW Province, June 2023"
+msgid "Search"
 msgstr ""
 
-msgid "Create Event"
+msgid "Incident Management Team Builder"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
 msgid "Incident Action Plan"

diff --git 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-07T18:24:28.361Z\n"
+"POT-Creation-Date: 2024-06-17T13:56:47.078Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -11,16 +11,22 @@ msgstr ""
 msgid "Add new option"
 msgstr ""
 
+msgid "Create Event"
+msgstr ""
+
 msgid "N/A"
 msgstr ""
 
-msgid "Incident Management Team Builder"
+msgid "Close"
 msgstr ""
 
-msgid "Cholera in NW Province, June 2023"
+msgid "Search"
 msgstr ""
 
-msgid "Create Event"
+msgid "Incident Management Team Builder"
+msgstr ""
+
+msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
 msgid "Incident Action Plan"

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
         "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",
@@ -49,6 +50,7 @@
         "@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/types/d2-ui.d.ts b/src/types/d2-ui.d.ts
@@ -10,4 +10,7 @@ declare module "@dhis2/ui" {
     export function IconCalendar24(props: { color?: string }): React.ReactElement;
     export function IconChevronDown24(props: { color?: string }): React.ReactElement;
     export function IconCross24(props: { color?: string }): React.ReactElement;
+    export function IconCross16(props: { color?: string }): React.ReactElement;
+    export function IconSearch24(props: { color?: string }): React.ReactElement;
+    export function IconInfo24(props: { color?: string }): React.ReactElement;
 }
diff --git a/src/webapp/components/add-new-option/AddNewOption.tsx b/src/webapp/components/add-new-option/AddNewOption.tsx
@@ -13,8 +13,8 @@ interface AddNewOptionProps {
 export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
     ({ id, label = "", onAddNewOption }) => {
         return (
-            <Container>
-                <StyledAddIcon id={id} aria-label="Add new option" onClick={onAddNewOption} />
+            <Container onClick={onAddNewOption}>
+                <StyledAddIcon id={id} aria-label="Add new option" />
                 <Label htmlFor={id}>{label || i18n.t("Add new option")}</Label>
             </Container>
         );
@@ -24,10 +24,14 @@ export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
 const Container = styled.div`
     display: flex;
     align-items: center;
+    cursor: pointer;
 `;
 
 const StyledAddIcon = styled(AddCircleOutline)`
     color: ${props => props.theme.palette.icon.color};
+    &:hover {
+        color: ${props => props.theme.palette.icon.hover};
+    }
 `;
 
 const Label = styled.label`
@@ -36,4 +40,5 @@ const Label = styled.label`
     font-size: 0.875rem;
     color: ${props => props.theme.palette.common.black};
     margin-inline-start: 8px;
+    cursor: pointer;
 `;
diff --git a/src/webapp/components/avatar-card/AvatarCard.tsx b/src/webapp/components/avatar-card/AvatarCard.tsx
@@ -23,6 +23,7 @@ export const AvatarCard: React.FC<AvatarCardProps> = React.memo(
 );
 
 const StyledCard = styled(Card)`
+    width: 100%;
     display: flex;
     @media (max-width: 600px) {
         flex-direction: column;

diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
@@ -9,7 +9,7 @@ import { IconCalendar24 } from "@dhis2/ui";
 interface DatePickerProps {
     id: string;
     label?: string;
-    value?: Date;
+    value: Date | null;
     onChange: (value: Date | null) => void;
     helperText?: string;
     errorText?: string;
@@ -56,6 +56,7 @@ export const DatePicker: React.FC<DatePickerProps> = React.memo(
 const Container = styled.div`
     display: flex;
     flex-direction: column;
+    width: 100%;
 `;
 
 const Label = styled(InputLabel)`

diff --git a/src/webapp/components/input-field/InputField.tsx b/src/webapp/components/input-field/InputField.tsx
@@ -47,6 +47,7 @@ export const InputField: React.FC<InputFieldProps> = React.memo(
 const Container = styled.div`
     display: flex;
     flex-direction: column;
+    width: 100%;
 `;
 
 const Label = styled(InputLabel)`

diff --git a/src/webapp/components/layout/Layout.tsx b/src/webapp/components/layout/Layout.tsx
@@ -1,32 +1,42 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useMediaQuery, useTheme } from "@material-ui/core";
+import { Menu } from "@material-ui/icons";
 
 import { MainContent } from "./main-content/MainContent";
 import { Button } from "../button/Button";
-
 interface LayoutProps {
     children?: React.ReactNode;
     title?: string;
     subtitle?: string;
     hideSideBarOptions?: boolean;
+    showCreateEvent?: boolean;
 }
 
 export const Layout: React.FC<LayoutProps> = React.memo(
-    ({ children, title = "", subtitle = "", hideSideBarOptions = false }) => {
+    ({
+        children,
+        title = "",
+        subtitle = "",
+        hideSideBarOptions = false,
+        showCreateEvent = false,
+    }) => {
         const theme = useTheme();
         const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
 
         const [sideBarOpen, setSideBarOpen] = useState(false);
         return (
             <Container>
                 {isSmallScreen && !hideSideBarOptions ? (
-                    <Button onClick={() => setSideBarOpen(!sideBarOpen)}>Open sidebar</Button>
+                    <OpenMenuContainer>
+                        <Button onClick={() => setSideBarOpen(!sideBarOpen)} startIcon={<Menu />} />
+                    </OpenMenuContainer>
                 ) : null}
                 <MainContent
                     sideBarOpen={sideBarOpen}
                     toggleSideBar={setSideBarOpen}
                     hideSideBarOptions={hideSideBarOptions}
+                    showCreateEvent={showCreateEvent}
                     title={title}
                     subtitle={subtitle}
                 >
@@ -41,3 +51,11 @@ const Container = styled.div`
     display: flex;
     flex-direction: column;
 `;
+
+const OpenMenuContainer = styled.div`
+    width: 100%;
+    background-color: ${props => props.theme.palette.background.default};
+    .MuiButton-startIcon {
+        margin: 0;
+    }
+`;
diff --git a/src/webapp/components/layout/header-bar/HeaderBar.tsx b/src/webapp/components/layout/header-bar/HeaderBar.tsx
@@ -26,6 +26,7 @@ const FlagBar = styled.div<{ color: string }>`
     background-color: ${props => props.theme.palette.flag[props.color]};
     height: 48px;
     width: 16.56px;
+    min-width: 16.56px;
 `;
 
 const AppName = styled.span`
@@ -36,6 +37,7 @@ const AppName = styled.span`
     color: ${props => props.theme.palette.common.white};
     height: 48px;
     width: 94px;
+    min-width: 94px;
     padding-inline: 16px;
 `;
 

diff --git a/src/webapp/components/layout/main-content/MainContent.tsx b/src/webapp/components/layout/main-content/MainContent.tsx
@@ -10,6 +10,7 @@ interface MainContentProps {
     hideSideBarOptions?: boolean;
     sideBarOpen: boolean;
     toggleSideBar: (isOpen: boolean) => void;
+    showCreateEvent?: boolean;
 }
 
 export const MainContent: React.FC<MainContentProps> = React.memo(
@@ -18,6 +19,7 @@ export const MainContent: React.FC<MainContentProps> = React.memo(
         title = "",
         subtitle = "",
         hideSideBarOptions = false,
+        showCreateEvent = false,
         toggleSideBar,
         sideBarOpen,
     }) => {
@@ -27,6 +29,7 @@ export const MainContent: React.FC<MainContentProps> = React.memo(
                     hideOptions={hideSideBarOptions}
                     open={sideBarOpen}
                     toggleSideBar={toggleSideBar}
+                    showCreateEvent={showCreateEvent}
                 />
                 <Main>
                     {title && <Title>{title}</Title>}

diff --git a/src/webapp/components/layout/side-bar/SideBar.tsx b/src/webapp/components/layout/side-bar/SideBar.tsx
@@ -9,20 +9,25 @@ interface SideBarProps {
     hideOptions?: boolean;
     open: boolean;
     toggleSideBar: (isOpen: boolean) => void;
+    showCreateEvent?: boolean;
 }
 
 export const SideBar: React.FC<SideBarProps> = React.memo(
-    ({ children, hideOptions = false, toggleSideBar, open = false }) => {
+    ({ children, hideOptions = false, toggleSideBar, open = false, showCreateEvent = false }) => {
         const theme = useTheme();
         const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
         return (
             <React.Fragment>
                 {isSmallScreen ? (
                     <StyledDrawer open={open} onClose={() => toggleSideBar(false)}>
-                        <SideBarContent hideOptions={hideOptions}>{children}</SideBarContent>
+                        <SideBarContent hideOptions={hideOptions} showCreateEvent={showCreateEvent}>
+                            {children}
+                        </SideBarContent>
                     </StyledDrawer>
                 ) : (
-                    <SideBarContent hideOptions={hideOptions}>{children}</SideBarContent>
+                    <SideBarContent hideOptions={hideOptions} showCreateEvent={showCreateEvent}>
+                        {children}
+                    </SideBarContent>
                 )}
             </React.Fragment>
         );

diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -1,13 +1,16 @@
 import { List, ListItem, ListItemText } from "@material-ui/core";
-import React from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
-import { NavLink } from "react-router-dom";
+import { NavLink, useHistory } from "react-router-dom";
+import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../../utils/i18n";
+import { Button } from "../../button/Button";
 
 interface SideBarContentProps {
     children?: React.ReactNode;
     hideOptions?: boolean;
+    showCreateEvent?: boolean;
 }
 
 type SideBarOption = {
@@ -39,19 +42,31 @@ const DEFAULT_SIDEBAR_OPTIONS: SideBarOption[] = [
 ];
 
 export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
-    ({ children, hideOptions = false }) => {
+    ({ children, hideOptions = false, showCreateEvent = false }) => {
+        const history = useHistory();
+
+        const goToCreateEvent = useCallback(() => {
+            history.push(`/create-event`);
+        }, [history]);
+
         return (
             <SideBarContainer>
                 {hideOptions ? null : children ? (
                     children
+                ) : showCreateEvent ? (
+                    <CreateEventContainer>
+                        <Button onClick={goToCreateEvent} startIcon={<AddCircleOutline />}>
+                            {i18n.t("Create Event")}
+                        </Button>
+                    </CreateEventContainer>
                 ) : (
-                    <List>
+                    <StyledList>
                         {DEFAULT_SIDEBAR_OPTIONS.map(({ text, value }) => (
                             <ListItem button key={text} component={NavLink} to={value}>
                                 <StyledText primary={i18n.t(text)} selected={false} />
                             </ListItem>
                         ))}
-                    </List>
+                    </StyledList>
                 )}
             </SideBarContainer>
         );
@@ -68,7 +83,7 @@ const StyledText = styled(ListItemText)<{ selected?: boolean }>`
 
 const SideBarContainer = styled.div`
     display: flex;
-    width: 240px;
+    max-width: 245px;
     background-color: ${props => props.theme.palette.sidebar.background};
     .MuiList-root {
         padding-block: 50px;
@@ -81,3 +96,13 @@ const SideBarContainer = styled.div`
         padding-block: 4px;
     }
 `;
+
+const StyledList = styled(List)`
+    width: 245px;
+`;
+
+const CreateEventContainer = styled.div`
+    margin-block-start: 50px;
+    margin-inline-start: 30px;
+    width: 245px;
+`;