(feat) Add support for configurable form sections

packages/esm-patient-forms-app/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@carbon/react": "^1.12.0",
     "@openmrs/esm-patient-common-lib": "^5.1.0",
+    "fuzzy": "^0.1.3",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {

packages/esm-patient-forms-app/src/config-schema.ts

@@ -23,7 +23,8 @@ export const configSchema = {
           'The HTMLFormEntry page to use to show this form. Should be one of "enterHtmlFormWithStandardUi" or "enterHtmlFormWithSimpleUi"',
         _validators: [
           validator(
-            (p) => p === 'enterHtmlFormWithStandardUi' || p === 'enterHtmlFormWithSimpleUi',
+            (v: unknown) =>
+              typeof v === 'string' && (v === 'enterHtmlFormWithStandardUi' || v === 'enterHtmlFormWithSimpleUi'),
             'Must be one of "enterHtmlFormWithStandardUi" or "enterHtmlFormWithSimpleUi"',
           ),
         ],
@@ -72,10 +73,46 @@ export const configSchema = {
     _description: 'Custom forms endpoint to fetch forms using a custom url.',
     _default: '',
   },
-  orderFormsByName: {
-    _type: Type.Boolean,
-    _description: 'Order forms alphabetically.',
-    _default: true,
+  orderBy: {
+    _type: Type.String,
+    _description:
+      'Describes how forms should be ordered. Set to "name" to order forms alphabetically by name or "most-recent" to order forms by the most recently filled-in.',
+    _default: 'name',
+    _validators: [
+      validator(
+        (s: unknown) => typeof s === 'string' && (s === 'name' || s === 'most-recent'),
+        "orderBy must be either 'name' or 'most-recent'",
+      ),
+    ],
+  },
+  formSections: {
+    _type: Type.Array,
+    _elements: {
+      name: {
+        _type: Type.String,
+        _description: 'Name of the section. Also used as a label for translations.',
+        _validators: [
+          validator((v: unknown) => typeof v === 'string' && v.trim() !== '', 'Each form section must have a name.'),
+        ],
+      },
+      forms: {
+        _type: Type.Array,
+        _description:
+          'List of forms to be included in this section. Each form should be specified as a form name or UUID.',
+        _elements: {
+          _type: Type.String,
+          _description: 'Name or UUID of form to be included in the section',
+          _validators: [
+            validator(
+              (v: unknown) => typeof v === 'string' && v.trim() !== '',
+              'Each form must be specified by name or UUID.',
+            ),
+          ],
+        },
+        _default: [],
+      },
+    },
+    _default: [],
   },
 };
 
@@ -86,9 +123,15 @@ export interface HtmlFormEntryForm {
   formUiPage: 'enterHtmlFormWithSimpleUi' | 'enterHtmlFormWithStandardUi';
 }
 
+export interface FormsSection {
+  name: string;
+  forms: Array<string>;
+}
+
 export interface ConfigObject {
   htmlFormEntryForms: Array<HtmlFormEntryForm>;
+  formSections: Array<FormsSection>;
   customFormsUrl: string;
-  orderFormsByName: boolean;
+  orderBy: 'name' | 'most-recent';
   showHtmlFormEntryForms: boolean;
 }

packages/esm-patient-forms-app/src/forms/forms-dashboard.component.tsx

@@ -1,24 +1,61 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useConfig, usePatient } from '@openmrs/esm-framework';
-import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
-import type { HtmlFormEntryForm } from '../config-schema';
+import { closeWorkspace, useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import type { ConfigObject } from '../config-schema';
 import FormsList from './forms-list.component';
 import styles from './forms-dashboard.scss';
+import { launchFormEntryOrHtmlForms } from '../form-entry-interop';
+import { useForms } from '../hooks/use-forms';
 
 const FormsDashboard = () => {
-  const config = useConfig();
-  const htmlFormEntryForms: Array<HtmlFormEntryForm> = config.htmlFormEntryForms;
+  const config = useConfig<ConfigObject>();
+  const htmlFormEntryForms = config.htmlFormEntryForms;
   const { patient, patientUuid } = usePatient();
+  const { data: forms, error, mutateForms } = useForms(patientUuid, undefined, undefined, undefined, config.orderBy);
   const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
 
+  const handleFormOpen = useCallback(
+    (formUuid: string, encounterUuid: string, formName: string) => {
+      closeWorkspace('clinical-forms-workspace', true);
+      launchFormEntryOrHtmlForms(
+        currentVisit,
+        formUuid,
+        patient,
+        htmlFormEntryForms,
+        encounterUuid,
+        formName,
+        mutateForms,
+      );
+    },
+    [currentVisit, htmlFormEntryForms, patient, mutateForms],
+  );
+
+  const sections = useMemo(() => {
+    return config.formSections?.map((formSection) => ({
+      ...formSection,
+      availableForms: forms?.filter((formInfo) =>
+        formSection.forms.some((formConfig) => formInfo.form.uuid === formConfig || formInfo.form.name === formConfig),
+      ),
+    }));
+  }, [config.formSections, forms]);
+
   return (
     <div className={styles.container}>
-      <FormsList
-        currentVisit={currentVisit}
-        htmlFormEntryForms={htmlFormEntryForms}
-        patient={patient}
-        patientUuid={patientUuid}
-      />
+      {!Boolean(sections) ? (
+        <FormsList completedForms={forms} error={error} handleFormOpen={handleFormOpen} />
+      ) : (
+        sections.map((section) => {
+          return (
+            <FormsList
+              key={`form-section-${section.name}`}
+              sectionName={section.name}
+              completedForms={section.availableForms}
+              error={error}
+              handleFormOpen={handleFormOpen}
+            />
+          );
+        })
+      )}
     </div>
   );
 };