Skip to content

Commit 66d949b

Browse files
eirikhaugstuleneirikhaugstulen
authored
feat: [DHIS2-8087] Add empty launch page (#3940)
* feat: add NoSelectionsInfoBox * fix: improve styles
1 parent 5c4ab37 commit 66d949b

File tree

4 files changed

+128
-2
lines changed

4 files changed

+128
-2
lines changed

‎i18n/en.pot

+21-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ msgstr ""
55
"Content-Type: text/plain; charset=utf-8\n"
66
"Content-Transfer-Encoding: 8bit\n"
77
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
8-
"POT-Creation-Date: 2025-01-24T15:26:19.128Z\n"
9-
"PO-Revision-Date: 2025-01-24T15:26:19.128Z\n"
8+
"POT-Creation-Date: 2025-01-27T10:03:03.122Z\n"
9+
"PO-Revision-Date: 2025-01-27T10:03:03.122Z\n"
1010

1111
msgid "Choose one or more dates..."
1212
msgstr "Choose one or more dates..."
@@ -746,6 +746,25 @@ msgstr ""
746746
"The category option is not valid for the selected organisation unit. Please "
747747
"select a valid combination."
748748

749+
msgid "Get started with Capture app"
750+
msgstr "Get started with Capture app"
751+
752+
msgid "Report data"
753+
msgstr "Report data"
754+
755+
msgid ""
756+
"Choose a program and organisation unit to see existing data and create new "
757+
"records."
758+
msgstr ""
759+
"Choose a program and organisation unit to see existing data and create new "
760+
"records."
761+
762+
msgid "Click 'Search'. For program-specific results, choose a program first."
763+
msgstr "Click 'Search'. For program-specific results, choose a program first."
764+
765+
msgid "Learn more about Capture app"
766+
msgstr "Learn more about Capture app"
767+
749768
msgid "Please select {{category}}."
750769
msgstr "Please select {{category}}."
751770

‎src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { TemplateSelector } from '../../TemplateSelector';
1515
import {
1616
InvalidCategoryCombinationForOrgUnitMessage,
1717
} from './InvalidCategoryCombinationForOrgUnitMessage/InvalidCategoryCombinationForOrgUnitMessage';
18+
import { NoSelectionsInfoBox } from './NoSelectionsInfoBox';
1819

1920
const getStyles = () => ({
2021
listContainer: {
@@ -63,6 +64,9 @@ const MainPagePlain = ({
6364
<>
6465
{showMainPage ? (
6566
<>
67+
{MainPageStatus === MainPageStatuses.DEFAULT && (
68+
<NoSelectionsInfoBox />
69+
)}
6670
{MainPageStatus === MainPageStatuses.WITHOUT_ORG_UNIT_SELECTED && (
6771
<WithoutOrgUnitSelectedMessage programId={programId} setShowAccessible={setShowAccessible} />
6872
)}

‎src/core_modules/capture-core/components/Pages/MainPage/NoSelectionsInfoBox/NoSelectionsInfoBox.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
// @flow
2+
import React from 'react';
3+
import i18n from '@dhis2/d2-i18n';
4+
import { colors } from '@dhis2/ui';
5+
import { withStyles } from '@material-ui/core';
6+
7+
const styles = {
8+
container: {
9+
display: 'flex',
10+
justifyContent: 'center',
11+
alignItems: 'center',
12+
height: 'calc(100vh - 200px)',
13+
},
14+
innerBox: {
15+
display: 'flex',
16+
flexDirection: 'column',
17+
textAlign: 'center',
18+
},
19+
iconContainer: {
20+
display: 'flex',
21+
justifyContent: 'center',
22+
alignItems: 'center',
23+
},
24+
headingText: {
25+
marginTop: '24px',
26+
display: 'inline-block',
27+
fontSize: '20px',
28+
lineHeight: '24px',
29+
fontWeight: '500',
30+
color: colors.grey900,
31+
},
32+
content: {
33+
margin: '12px 0',
34+
display: 'flex',
35+
flexDirection: 'column',
36+
gap: '8px',
37+
fontSize: '14px',
38+
color: colors.grey800,
39+
textAlign: 'left',
40+
},
41+
link: {
42+
display: 'inline-block',
43+
color: colors.grey800,
44+
fontSize: '14px',
45+
lineHeight: '24px',
46+
},
47+
};
48+
49+
type Props = {|
50+
...CssClasses,
51+
|};
52+
53+
const EmptyStateIcon = () => (
54+
<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
55+
<path fill="#F3F5F7" d="M0 0h64v64H0z" />
56+
<path fill="#F3F5F7" stroke="#A0ADBA" strokeWidth="2" d="M4 13h36v48H4z" />
57+
<path fill="#F3F5F7" stroke="#A0ADBA" strokeWidth="2" d="M10 8h40v53H10z" />
58+
<path fill="#F3F5F7" stroke="#404B5A" strokeWidth="2" d="M16 3h44v58H16z" />
59+
<path fill="#F3F5F7" stroke="#404B5A" strokeWidth="2" d="M22 9h32v16H22z" />
60+
<path d="M26 14h21M26 19h11" stroke="#404B5A" strokeWidth="2" />
61+
<path fill="#F3F5F7" stroke="#A0ADBA" strokeWidth="2" d="M22 33h32v16H22z" />
62+
<path d="M26 38h21M26 43h11" stroke="#A0ADBA" strokeWidth="2" />
63+
</svg>
64+
);
65+
66+
const documentationLink = 'https://docs.dhis2.org/en/use/user-guides/dhis-core-version-master/tracking-individual-level-data/capture.html';
67+
68+
const NoSelectionsInfoBoxPlain = ({ classes }: Props) => (
69+
<div className={classes.container}>
70+
<div className={classes.innerBox}>
71+
<div className={classes.iconContainer}>
72+
<EmptyStateIcon />
73+
</div>
74+
<h1 className={classes.headingText}>
75+
{i18n.t('Get started with Capture app')}
76+
</h1>
77+
<div className={classes.content}>
78+
<span>
79+
<strong>{i18n.t('Report data')}</strong>:{' '}
80+
{i18n.t('Choose a program and organisation unit to see existing data and create new records.')}
81+
</span>
82+
<span>
83+
<strong>{i18n.t('Search')}</strong>:{' '}
84+
{i18n.t('Click \'Search\'. For program-specific results, choose a program first.')}
85+
</span>
86+
</div>
87+
88+
<a
89+
className={classes.link}
90+
href={documentationLink}
91+
target="_blank"
92+
rel="noopener noreferrer"
93+
>
94+
{i18n.t('Learn more about Capture app')}
95+
</a>
96+
</div>
97+
</div>
98+
);
99+
100+
export const NoSelectionsInfoBox = withStyles(styles)(NoSelectionsInfoBoxPlain);

‎src/core_modules/capture-core/components/Pages/MainPage/NoSelectionsInfoBox/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// @flow
2+
3+
export { NoSelectionsInfoBox } from './NoSelectionsInfoBox';

0 commit comments

Comments
 (0)