(feat) Implement the inline date picker with showDate and shownDateOptions

[hadijahkyampeire]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

• This PR implements the conditional appending of an inline date picker to a question when showDate: true is defined in the parent question. The value of this date field is then submitted as the obsDatetime for that question.
• The PR also handles some validations on the date picker which are passed to the showDateOptions object.
• Example

{
  "name": "Hadijah Test form",
  "pages": [
    {
      "label": "page 1",
      "sections": [
        {
          "label": "Section one",
          "isExpanded": "true",
          "questions": [
            {
              "label": "Height",
              "type": "obs",
              "required": false,
              "id": "height",
              "questionOptions": {
                "rendering": "number",
                "concept": "5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
                "showDate": "true",
                "showDateOptions": {
                  "validators": [
                    {
                      "type": "date",
                      "allowFutureDates": "false"
                    }
                  ]
                },
                "conceptMappings": [
                  {
                    "relationship": "SAME-AS",
                    "type": "AMPATH",
                    "value": "5090"
                  },
                  {
                    "relationship": "SAME-AS",
                    "type": "CIEL",
                    "value": "5090"
                  },
                  {
                    "relationship": "SAME-AS",
                    "type": "PIH",
                    "value": "5090"
                  }
                ],
                "disallowDecimals": true
              },
              "validators": []
            },
            {
              "label": "Weight",
              "type": "obs",
              "required": false,
              "id": "weight",
              "questionOptions": {
                "rendering": "number",
                "showDate": "true",
                "showDateOptions": {
                  "validators": [
                    {
                      "type": "date",
                      "allowFutureDates": "false"
                    }
                  ],
                  
                  "hide": {
                    "hideWhenExpression": "isEmpty(weight)"
                  }
                  
                },
                "concept": "5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
                "conceptMappings": [
                  {
                    "relationship": "SAME-AS",
                    "type": "PIH",
                    "value": "5089"
                  },
                  {
                    "relationship": "SAME-AS",
                    "type": "AMPATH",
                    "value": "5089"
                  },
                  {
                    "relationship": "SAME-AS",
                    "type": "CIEL",
                    "value": "5089"
                  }
                ],
                "disallowDecimals": true
              },
              "validators": []
            }
          ]
        }
      ]
    }
  ],
  "processor": "EncounterFormProcessor",
  "encounterType": "ca3aed11-1aa4-42a1-b85c-8332fc8001fc",
  "referencedForms": [],
  "uuid": "f6ad56a8-9f5b-465c-92be-e4ba7368f838",
  "description": "Inline Date test",
  "version": "1.0"
}

Screenshots

inline-date.mov

Related Issue

• https://openmrs.atlassian.net/browse/O3-3052

[github-actions]

Size Change: -242 kB (-18.6%) 👏

Total Size: 1.06 MB

Filename	Size	Change
dist/574.js	0 B	-242 kB (removed)	🏆

ℹ️ View Unchanged

Filename	Size	Change
dist/136.js	242 kB	0 B
dist/184.js	11.2 kB	0 B
dist/225.js	2.56 kB	0 B
dist/29.js	157 kB	0 B
dist/300.js	706 B	0 B
dist/31.js	4.9 kB	0 B
dist/318.js	2.42 kB	0 B
dist/327.js	1.83 kB	0 B
dist/335.js	955 B	0 B
dist/353.js	3.02 kB	0 B
dist/371.js	71.5 kB	0 B
dist/41.js	3.36 kB	0 B
dist/436.js	752 B	0 B
dist/540.js	2.64 kB	0 B
dist/55.js	2.14 kB	0 B
dist/635.js	14.3 kB	0 B
dist/779.js	203 kB	0 B
dist/8.js	3.67 kB	0 B
dist/942.js	482 B	0 B
dist/979.js	6.85 kB	0 B
dist/99.js	690 B	0 B
dist/993.js	3.08 kB	0 B
dist/998.js	15.5 kB	0 B
dist/main.js	299 kB	+1 B (0%)
dist/openmrs-form-engine-lib.js	3.76 kB	+1 B (+0.03%)

_{compressed-size-action}

[samuelmale]

Thanks for the work @hadijahkyampeire!

I'm concerned about how we currently manage expressions vs booleans in general within the schema. Eg.

1. Hide

interface FormField {
  hide?: HideProps;
  isHidden?: boolean;
}

export interface HideProps {
  hideWhenExpression: string;
}

2. Required

interface FormField {
  isRequired?: boolean;
  required?: string | boolean | RequiredFieldProps;
}

interface RequiredFieldProps {
  type: string;
  message?: string;
  referenceQuestionId: string;
  referenceQuestionAnswers: Array<string>;
}

3. Readonly

For the readonly, the engine assumes this to either be an expression (string) or a boolean, so it will attempt to evaluate it directly, see.

I need your thoughts on:

1. The ideal approach for the disable prop. (What is the best place to store the expression)
2. How can we harmonise the above to have a more consistent pattern on how to manage expressions in general?

cc: @ibacher @eudson @denniskigen

[hadijahkyampeire]

@samuelmale I think the PR is ready to go in, please take another look.

[hadijahkyampeire]

@samuelmale moving the evalutions to the formHelpers puts them in a circular import and that's why I have moved them to the expression-runner, check the failing tests.

[samuelmale]

Yes @hadijahkyampeire I'm looking into it.

[samuelmale]

Nice work @hadijahkyampeire

[hadijahkyampeire]

Thanks @samuelmale