feat: DHIS2-9654 DHIS2-9655 can submit enrollments and see rule indic…

…ators (#1334) * feat: adds tetselector on the new page * feat: trackedEntityTypeId on url for new and search page * refactor: cleans up the older func * chore: removes debugger * chore: order * fix: one trackedEntityTypeId * chore: one line * feat: adds the enrollment and profile sections * chore: tetype once * chore: better id * chore: reverts * chore: reverts * chore: reverts * chore: linting * chore: styles the forms * chore: rebasing * chore: reverts * chore: reverts ;) * chore: styles the max width * refactor: exports consts and moves the files around * chore: remove line * refactor: the registration entries are self initialised and ready to use * chore: rebasing * fix: infinite loading state * feat: adds the buttons * refactor: tei registration data entry * refactor: enrollment regisration data entry * refactor: using the components * chore: moves the info text on the component level * chore: lint * chore: rest needs to be here * chore: removes unused flow * chore: creates TEI * chore: rebasing * chore: styles * chore: removes dispatch * chore: lints * chore: reverts * chore: no {} chore: * chore: creates containers * chore: fixes the paths * chore: loading indicator * chore: no need for startDataEntryInitialisationEpic * feat: with buttons * chore: rebase * chore: org unit * chore: "better" text * chore: flow fixes me * chore: saves * chore: adds the button and its actions * chore: adds the epics * chore: having the component render and moving the files * chore: removes the new page root * chore: new root in place * Merge remote-tracking branch 'origin/master' into cp/registration/13-DHIS2-9653-submiting * feat: submits with enrollment * chore: reverts * chore: adds rollback action * chore: fixes the linter * chore: removes the todo * refactor: moves the files to the component DataEntries directory * chore: adds component alone * chore: moves and renames the component * chore: copy of index.js * chore: commits only the class refactoring * chore: finishes moving the component * chore: completes * chore: finishes * chore: cleans up * chore: adds tests for the buttons * chore: swaps the tests * chore: newEvent is now new * chore: fixes the loading states * chore: no flow errors * chore: fixes the partner selection * chore: adds e2e in the registration page * chore: adds back button * chore: removes '' * chore: moves to container * chore: works perjaps chore * chore: todo * chore: rebase * chore: solves the new page bug * chore: removes dataentry on setOrgUnitId * chore: passes the tests * chore: update the " * chore: flow errors * chore: reverts * chore: lints * chore: renames type to instance * chore: rebases * chore: cleans up * chore: tracker program * chore: lints * feat: adds error state with feedback * chore: lints * feat: [part 02] adds loading indicator for the whole component (#1335) * feat: adds loading for the whole registration entry * chore: flow * chore: reverts * chore: lints * feat: [part 03] DHIS2-9655 adds rules indicators component (#1355) * feat: adds general output component into the enrollment pages * chore: styles the warning buttons * chore: styles * chore: reorders * chore: typo * chore: wording
dhis2 · Jan 15, 2021 · 7a2b2df · 7a2b2df
1 parent 83f836a
commit 7a2b2df
Show file tree

Hide file tree

Showing 23 changed files with 341 additions and 147 deletions.
diff --git 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: 2021-01-12T10:53:21.230Z\n"
-"PO-Revision-Date: 2021-01-12T10:53:21.230Z\n"
+"POT-Creation-Date: 2021-01-12T13:01:48.740Z\n"
+"PO-Revision-Date: 2021-01-12T13:01:48.740Z\n"
 
 msgid "Choose one or more dates..."
 msgstr ""
@@ -122,6 +122,12 @@ msgstr ""
 msgid "A future date is not allowed"
 msgstr ""
 
+msgid "Saving a {{trackedEntityName}} in"
+msgstr ""
+
+msgid "in"
+msgstr ""
+
 msgid "Metadata error. see log for details"
 msgstr ""
 
@@ -149,9 +155,6 @@ msgstr ""
 msgid "Saving to"
 msgstr ""
 
-msgid "in"
-msgstr ""
-
 msgid ""
 "This is not an event program or the metadata is corrupt. See log for "
 "details."
@@ -236,6 +239,18 @@ msgstr ""
 msgid "Leaving this page will discard the changes you made to this event."
 msgstr ""
 
+msgid "Saving a {{trackedEntityName}}"
+msgstr ""
+
+msgid "without"
+msgstr ""
+
+msgid "enrollment"
+msgstr ""
+
+msgid "Enroll in a program by selecting a program from the top bar."
+msgstr ""
+
 msgid "An error has occurred. See log for details"
 msgstr ""
 
@@ -593,21 +608,6 @@ msgstr ""
 msgid "Choose the {{missingCategories}} to start reporting"
 msgstr ""
 
-msgid "Saving a {{trackedEntityName}} in"
-msgstr ""
-
-msgid "Saving a {{trackedEntityName}}"
-msgstr ""
-
-msgid "without"
-msgstr ""
-
-msgid "enrollment"
-msgstr ""
-
-msgid "Enroll in a program by selecting a program from the top bar."
-msgstr ""
-
 msgid "A duplicate exists (but there were some errors, see log for details"
 msgstr ""
 

diff --git a/src/core_modules/capture-core/components/DataEntries/Enrollment/actions/open.actionBatchs.js b/src/core_modules/capture-core/components/DataEntries/Enrollment/actions/open.actionBatchs.js
@@ -34,7 +34,7 @@ const dataEntryPropsToInclude: DataEntryPropsToInclude = [
 ];
 
 export const batchActionTypes = {
-    OPEN_DATA_ENYRY_FOR_NEW_ENROLLMENT_BATCH: 'OpenDataEntryForNewEnrollmentBatch',
+    OPEN_DATA_ENTRY_FOR_NEW_ENROLLMENT_BATCH: 'OpenDataEntryForNewEnrollmentBatch',
 };
 
 export const openDataEntryForNewEnrollmentBatchAsync = async (
@@ -89,5 +89,5 @@ export const openDataEntryForNewEnrollmentBatchAsync = async (
         ...dataEntryActions,
         ...rulesActions,
         ...extraActions,
-    ], batchActionTypes.OPEN_DATA_ENYRY_FOR_NEW_ENROLLMENT_BATCH);
+    ], batchActionTypes.OPEN_DATA_ENTRY_FOR_NEW_ENROLLMENT_BATCH);
 };
diff --git a/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.component.js b/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.component.js
@@ -1,22 +1,32 @@
 // @flow
 import React, { type ComponentType } from 'react';
 import { Button } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
 import { compose } from 'redux';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { scopeTypes } from '../../../metaData';
 import { EnrollmentDataEntry } from '../Enrollment';
 import { useCurrentOrgUnitInfo } from '../../../hooks/useCurrentOrgUnitInfo';
 import { useRegistrationFormInfoForSelectedScope } from '../common/useRegistrationFormInfoForSelectedScope';
-import type { OwnProps } from './EnrollmentRegistrationEntry.types';
+import type { Props } from './EnrollmentRegistrationEntry.types';
 import { withSaveHandler } from '../../DataEntry';
+import { withLoadingIndicator } from '../../../HOC';
+import { InfoIconText } from '../../InfoIconText';
 
 const styles = ({ typography }) => ({
     marginTop: {
         marginTop: typography.pxToRem(2),
     },
 });
 
+const translatedTextWithStylesForProgram = (trackedEntityName: string, programName: string, orgUnitName: string) =>
+    (<>
+        {i18n.t('Saving a {{trackedEntityName}} in', { trackedEntityName })} <b>{programName}</b>
+        {orgUnitName && <>{' '}{i18n.t('in')} <b>{orgUnitName}</b></>}.
+    </>);
+
+
 const EnrollmentRegistrationEntryPlain =
   ({
       id,
@@ -26,8 +36,8 @@ const EnrollmentRegistrationEntryPlain =
       classes,
       onSave,
       ...rest
-  }: {...OwnProps, ...CssClasses}) => {
-      const { scopeType } = useScopeInfo(selectedScopeId);
+  }: Props) => {
+      const { scopeType, trackedEntityName, programName } = useScopeInfo(selectedScopeId);
       const { formId, formFoundation } = useRegistrationFormInfoForSelectedScope(selectedScopeId);
       const orgUnit = useCurrentOrgUnitInfo();
 
@@ -36,7 +46,6 @@ const EnrollmentRegistrationEntryPlain =
               {
                   scopeType === scopeTypes.TRACKER_PROGRAM && formId &&
                   <>
-                      {/* $FlowFixMe */}
                       <EnrollmentDataEntry
                           orgUnit={orgUnit}
                           programId={selectedScopeId}
@@ -57,14 +66,18 @@ const EnrollmentRegistrationEntryPlain =
                           </Button>
                       }
 
+                      <InfoIconText>
+                          {translatedTextWithStylesForProgram(trackedEntityName.toLowerCase(), programName, orgUnit.name)}
+                      </InfoIconText>
                   </>
               }
           </>
       );
   };
 
-export const EnrollmentRegistrationEntryComponent: ComponentType<OwnProps> =
+export const EnrollmentRegistrationEntryComponent: ComponentType<$Diff<Props, CssClasses>> =
   compose(
+      withLoadingIndicator(() => ({ height: '350px' })),
       withSaveHandler({ onGetFormFoundation: ({ enrollmentMetadata }) => enrollmentMetadata && enrollmentMetadata.enrollmentForm }),
       withStyles(styles),
   )(EnrollmentRegistrationEntryPlain);
diff --git a/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js b/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js
@@ -1,5 +1,5 @@
 // @flow
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import React, { useEffect } from 'react';
 import type { ComponentType } from 'react';
 import { EnrollmentRegistrationEntryComponent } from './EnrollmentRegistrationEntry.component';
@@ -38,11 +38,13 @@ const useInitialiseEnrollmentRegistration = (selectedScopeId, dataEntryId) => {
 
 export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({ selectedScopeId, id, ...rest }) => {
     useInitialiseEnrollmentRegistration(selectedScopeId, id);
+    const ready = useSelector(({ dataEntries }) => (!!dataEntries[id]));
 
     return (
         <EnrollmentRegistrationEntryComponent
             selectedScopeId={selectedScopeId}
             id={id}
+            ready={ready}
             {...rest}
         />);
 };
diff --git a/...e/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js b/...e/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js
@@ -14,3 +14,13 @@ export type OwnProps = $ReadOnly<{|
   onUpdateField: Function,
   onStartAsyncUpdateField: Function,
 |}>
+
+type ContainerProps = {|
+  ready: boolean,
+|}
+
+export type Props = $ReadOnly<{|
+  ...OwnProps,
+  ...CssClasses,
+  ...ContainerProps
+|}>
diff --git a/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.component.js b/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.component.js
@@ -2,21 +2,30 @@
 import React, { type ComponentType } from 'react';
 import { compose } from 'redux';
 import { Button } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { scopeTypes } from '../../../metaData';
 import { TrackedEntityInstanceDataEntry } from '../TrackedEntityInstance';
 import { useCurrentOrgUnitInfo } from '../../../hooks/useCurrentOrgUnitInfo';
-import type { OwnProps } from './TeiRegistrationEntry.types';
+import type { Props } from './TeiRegistrationEntry.types';
 import { useRegistrationFormInfoForSelectedScope } from '../common/useRegistrationFormInfoForSelectedScope';
 import { withSaveHandler } from '../../DataEntry';
+import { InfoIconText } from '../../InfoIconText';
 
+const translatedTextWithStylesForTei = (trackedEntityName, orgUnitName) =>
+    (<>
+        {i18n.t('Saving a {{trackedEntityName}}', { trackedEntityName })} <b>{i18n.t('without')}</b> {i18n.t('enrollment')}
+        {orgUnitName && <>{' '}{i18n.t('in')} <b>{orgUnitName}</b></>}.{' '}
+        {i18n.t('Enroll in a program by selecting a program from the top bar.')}
+    </>);
 
 const styles = ({ typography }) => ({
     marginTop: {
         marginTop: typography.pxToRem(2),
     },
 });
+
 const TeiRegistrationEntryPlain =
   ({
       id,
@@ -29,8 +38,8 @@ const TeiRegistrationEntryPlain =
       onPostProcessErrorMessage,
       onGetUnsavedAttributeValues,
       ...rest
-  }: { ...OwnProps, ...CssClasses }) => {
-      const { scopeType } = useScopeInfo(selectedScopeId);
+  }: Props) => {
+      const { scopeType, trackedEntityName } = useScopeInfo(selectedScopeId);
       const { formId, formFoundation } = useRegistrationFormInfoForSelectedScope(selectedScopeId);
       const orgUnit = useCurrentOrgUnitInfo();
 
@@ -62,13 +71,18 @@ const TeiRegistrationEntryPlain =
                               {saveButtonText}
                           </Button>
                       }
+
+                      <InfoIconText>
+                          {translatedTextWithStylesForTei(trackedEntityName.toLowerCase(), orgUnit.name)}
+                      </InfoIconText>
+
                   </>
               }
           </>
       );
   };
 
-export const TeiRegistrationEntryComponent: ComponentType<OwnProps> =
+export const TeiRegistrationEntryComponent: ComponentType<$Diff<Props, CssClasses>> =
   compose(
       withSaveHandler({ onGetFormFoundation: ({ teiRegistrationMetadata }) => {
           const form = teiRegistrationMetadata && teiRegistrationMetadata.form;

diff --git a/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js b/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js
@@ -1,5 +1,5 @@
 // @flow
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import React, { useEffect } from 'react';
 import type { ComponentType } from 'react';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
@@ -37,11 +37,13 @@ const useInitialiseTeiRegistration = (selectedScopeId, dataEntryId) => {
 
 export const TeiRegistrationEntry: ComponentType<OwnProps> = ({ selectedScopeId, id, ...rest }) => {
     useInitialiseTeiRegistration(selectedScopeId, id);
+    const ready = useSelector(({ dataEntries }) => (!!dataEntries[id]));
 
     return (
         <TeiRegistrationEntryComponent
             selectedScopeId={selectedScopeId}
             id={id}
+            ready={ready}
             {...rest}
         />);
 };
diff --git a/...es/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js b/...es/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js
@@ -12,3 +12,14 @@ export type OwnProps = $ReadOnly<{|
   onGetUnsavedAttributeValues: Function,
   onPostProcessErrorMessage: Function,
 |}>
+
+type ContainerProps = {|
+  ready: boolean,
+|}
+
+export type Props = $ReadOnly<{|
+  ...OwnProps,
+  ...CssClasses,
+  ...ContainerProps
+|}>
+
diff --git a/src/core_modules/capture-core/components/DataEntry/DataEntry.container.js b/src/core_modules/capture-core/components/DataEntry/DataEntry.container.js
@@ -43,5 +43,5 @@ const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
 export default compose(
     // $FlowFixMe
     connect(mapStateToProps, mapDispatchToProps, null),
-    withLoadingIndicator(() => ({ height: '350px' }), null),
+    withLoadingIndicator(() => ({ height: '350px' })),
 )(DataEntry);
diff --git a/...nents/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js b/...nents/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
@@ -6,7 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import Button from '../../../Buttons/Button.component';
+import { Button } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     errors: {
@@ -22,6 +22,9 @@ const getStyles = (theme: Theme) => ({
         borderRadius: theme.typography.pxToRem(4),
         padding: 5,
     },
+    marginLeft: {
+        marginLeft: 8,
+    },
 });
 
 type Props = {
@@ -107,19 +110,24 @@ class ErrorAndWarningDialog extends React.Component<Props> {
     }
 
     getButtons() {
-        const { onAbort, onSave, saveEnabled } = this.props;
+        const { onAbort, onSave, saveEnabled, classes } = this.props;
 
         return (
-            <React.Fragment>
+            <div style={{ margin: '0 20px 12px 20px' }}>
                 <Button onClick={onAbort} color="primary">
                     {i18n.t('Back to form')}
                 </Button>
                 {saveEnabled ? (
-                    <Button onClick={onSave} color="primary" autoFocus>
+                    <Button
+                        onClick={onSave}
+                        primary
+                        initialFocus
+                        className={classes.marginLeft}
+                    >
                         {i18n.t('Save anyway')}
                     </Button>) : null
                 }
-            </React.Fragment>
+            </div>
         );
     }