feat: [DHIS2-16262] Support Custom Layout for Enrollment Pages

[eirikhaugstulen]

Support building a custom enrollment dashboard layout, using a custom config stored in the data store.
The system administrator should be able to design, reorder, hide and lock a dashboard for a program.

Overview

Each enrollment page has a separate key and config in the data store:

ENROLLMENT_OVERVIEW: 'enrollmentOverviewLayout',
ENROLLMENT_EVENT_NEW: 'enrollmentEventNewLayout',
ENROLLMENT_EVENT_EDIT: 'enrollmentEventEditLayout',

We will check this key for a custom page layout, or fallback to the default one stored under DefaultPageLayout in each page.

Some components will also have additional settings that can be overridden by the config.

// ProfileWidget
settings = {
    readOnlyMode: boolean
}

// EnrollmentWidget
settings = {
    readOnlyMode: boolean
}

Supported components

type DefaultComponents = 'QuickActions'
    | 'StagesAndEvents'
    | 'AssigneeWidget'
    | 'NewEventWorkspace'
    | 'EditEventWorkspace'
    | 'EnrollmentComment'
    | 'EventComment'
    | 'TrackedEntityRelationship'
    | 'ErrorWidget'
    | 'WarningWidget'
    | 'FeedbackWidget'
    | 'IndicatorWidget'
    | 'ProfileWidget'
    | 'EnrollmentWidget';

Examples

Custom config to build the default enrollment dashboard (Child Programme):

{
  "IpHINAT79UW": {
    "title": "Child Programme dashboard"
    "leftColumn": [
      {
        "type": "component",
        "name": "QuickActions"
      },
      {
        "type": "component",
        "name": "StagesAndEvents"
      }
    ],
    "rightColumn": [
      {
        "type": "component",
        "name": "TrackedEntityRelationship"
      },
      {
        "type": "component",
        "name": "ErrorWidget"
      },
      {
        "type": "component",
        "name": "WarningWidget"
      },
      {
        "type": "component",
        "name": "FeedbackWidget"
      },
      {
        "type": "component",
        "name": "IndicatorWidget"
      },
      {
        "type": "component",
        "name": "Notes"
      },
      {
        "type": "component",
        "name": "ProfileWidget",
        "settings": {
             "readOnlyMode": true
        }
      },
      {
        "type": "component",
        "name": "EnrollmentWidget",
         "settings": {
             "readOnlyMode": true
        }
      }
    ]
  }
}

Optional parameters

All parts of the config is optional. You can choose to:

• Not have a title above the page
• Only have one column for the full page
• Place any component in any column (Given it's supported by the page)

Images

Example:

[simonadomnisoru]

Great job on this feature 👏 ! The code is very well structured and easy to follow

[simonadomnisoru]

Are we going to support other types of widgets in the future?

[eirikhaugstulen]

Thanks for the review! Yes, we will extend this config to also support Enrollment Dashboard plugins. 😊
https://dhis2.atlassian.net/browse/DHIS2-16305

[github-actions]

🚀 Deployed on https://deploy-preview-3481--dhis2-capture.netlify.app

[geethaalwan]

Tested successfully on 2.41,2.40.3,2.39.5,2.38.7 versions

[dhis2-bot]

🎉 This PR is included in version 100.54.0 🎉

The release is available on:

• AppHub release
• v100.54.0
• GitHub release

Your semantic-release bot 📦🚀