Added functionality to load programs configs

src/config/patient-chart-widgets.schema.ts → src/config/programs.schema.ts

@@ -1,6 +1,6 @@
 import { validators } from "@openmrs/esm-module-config";
 
-export const esmPatientChartWidgetsSchema = {
+export const programsConfigSchema = {
   programs: {
     arrayElements: {
       programUuid: { validators: [validators.isString] },
@@ -16,3 +16,18 @@ export const esmPatientChartWidgetsSchema = {
     default: []
   }
 };
+
+export type ProgramFormsConfig = {
+  programUuid: string;
+  programName: string;
+  forms: Array<FormSelector>;
+};
+
+export interface ProgramConfig {
+  programs: ProgramFormsConfig[];
+}
+
+export type FormSelector = {
+  encounterTypeUuid: string;
+  formUuid?: string;
+};

src/config/use-widget-config.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { useConfig, validateConfig } from "@openmrs/esm-module-config";
+
+export default function useWidgetConfig<T>(key: string, schema: any): T {
+  const config = useConfig()[key] as T;
+  validateConfig(schema, config);
+  return config;
+}

src/forms/form-grouper.test.ts

@@ -1,10 +1,7 @@
-import {
-  ProgramFormsConfig,
-  ProgramForms,
-  groupFormsByProgram
-} from "./form-grouper";
+import { ProgramForms, groupFormsByProgram } from "./form-grouper";
 import { Form } from "../openmrs-resource/form.resource";
 import { Encounter } from "../openmrs-resource/encounter.resource";
+import { ProgramFormsConfig } from "../config/programs.schema";
 describe("Form Grouper", () => {
   const programFormsConfig: Array<ProgramFormsConfig> = [
     {

src/forms/form-grouper.ts

@@ -1,6 +1,7 @@
 import { Form } from "../openmrs-resource/form.resource";
 import { FormsFilter, areFormsEqual } from "./form-list-filter";
 import { Encounter } from "../openmrs-resource/encounter.resource";
+import { ProgramFormsConfig } from "../config/programs.schema";
 
 export function groupFormsByProgram(
   forms: Array<Form>,
@@ -67,18 +68,3 @@ export type ProgramForms = {
   availableForms?: Array<Form>;
   completedForms?: Array<Encounter>;
 };
-
-export type ProgramFormsConfig = {
-  programUuid: string;
-  programName: string;
-  forms: Array<FormSelector>;
-};
-
-export type ProgramConfig = {
-  programs: ProgramFormsConfig[];
-};
-
-export type FormSelector = {
-  encounterTypeUuid: string;
-  formUuid?: string;
-};

src/forms/forms-list.component.tsx

@@ -13,8 +13,15 @@ import { filterAvailableCompletedForms } from "./form-grouper";
 import Parcel from "single-spa-react/parcel";
 import { Link } from "react-router-dom";
 import { Subscription } from "rxjs";
+import { ProgramConfig, programsConfigSchema } from "../config/programs.schema";
+import useWidgetConfig from "../config/use-widget-config";
 
 export default function FormsList(props: FormsListProps) {
+  const config = useWidgetConfig<ProgramConfig>(
+    "externalPatientChartConfigs",
+    programsConfigSchema
+  );
+  // console.log("config", config);
   // console.log("props", props);
   const baseChartUrl = `${props.match.url.substr(
     0,

src/visit/start-visit.component.tsx

@@ -7,12 +7,8 @@ import { FetchResponse } from "@openmrs/esm-api/dist/openmrs-fetch";
 import styles from "./start-visit.component.css";
 import LocationSelectComponent from "../widgets/location-select.component";
 import { toOmrsDateString } from "../utils/omrs-dates";
-import { ProgramConfig } from "../forms/form-grouper";
-import { useConfig } from "@openmrs/esm-module-config";
 
 export default function StartVisitComponent(props: StartVisitProps) {
-  const config: ProgramConfig = useConfig<ProgramConfig>();
-
   const [patientUuid, setPatientUuid] = React.useState<string>();
 
   const [visitStartDate, setVisitStartDate] = React.useState(

src/visit/visit-summary.component.tsx

@@ -8,14 +8,8 @@ import StartVisitComponent from "./start-visit.component";
 import StartedVisitComponent from "./started-visit.component";
 import useStartedVisit from "./use-started-visit";
 import styles from "../summary-card.css";
-import { esmPatientChartWidgetsSchema } from "../config/patient-chart-widgets.schema";
 
 export default function VisitSummaryComponent(props: any) {
-  defineConfigSchema(
-    "@ampath/esm-patient-chart-widgets",
-    esmPatientChartWidgetsSchema
-  );
-
   const visitToStart: VisitTypeProp = {
     // Intentional: useful for switching between openmrs-spa and ampath environment for testing
     // visitTypeUuid: "7b0f5697-27e3-40c4-8bae-f4049abfb4ed",
@@ -43,72 +37,68 @@ export default function VisitSummaryComponent(props: any) {
   };
 
   return (
-    <ModuleNameContext.Provider value="@ampath/esm-patient-chart-widgets">
+    <div
+      style={{
+        minWidth: "20rem",
+        textAlign: "left"
+      }}
+      className={`omrs-card ${styles.card}`}
+    >
+      <div className={styles.header}>
+        <div className={`${styles.headerTitle}`}>
+          <h2 className="omrs-padding-left-16">
+            {startedVisit
+              ? "Today's Outpatient Visit"
+              : "Start New Clinical Visit"}
+          </h2>
+        </div>
+      </div>
       <div
-        style={{
-          minWidth: "20rem",
-          textAlign: "left"
-        }}
-        className={`omrs-card ${styles.card}`}
+        style={{ maxHeight: "320px", minHeight: "320px", overflow: "scroll" }}
       >
-        <div className={styles.header}>
-          <div className={`${styles.headerTitle}`}>
-            <h2 className="omrs-padding-left-16">
-              {startedVisit
-                ? "Today's Outpatient Visit"
-                : "Start New Clinical Visit"}
-            </h2>
-          </div>
-        </div>
-        <div
-          style={{ maxHeight: "320px", minHeight: "320px", overflow: "scroll" }}
-        >
-          {!startingVisit && startedVisit === undefined && (
-            <div>Loading...</div>
-          )}
-          {startingVisit && (
-            <StartVisitComponent
-              visitType={visitToStart}
-              onVisitStarted={onVisitStarted}
-              onCanceled={onVisitStartingCancelled}
-            />
-          )}
-          {!startingVisit && startedVisit === null && (
+        {!startingVisit && startedVisit === undefined && <div>Loading...</div>}
+        {startingVisit && (
+          <StartVisitComponent
+            visitType={visitToStart}
+            onVisitStarted={onVisitStarted}
+            onCanceled={onVisitStartingCancelled}
+          />
+        )}
+        {!startingVisit && startedVisit === null && (
+          <div
+            className="omrs-padding-top-4 omrs-padding-bottom-4"
+            style={{
+              borderBottom: "1px solid var(--omrs-color-bg-low-contrast)",
+              display: "flex",
+              justifyContent: "flex-start",
+              flexDirection: "row"
+            }}
+          >
+            <div style={{}}>
+              <button
+                className="omrs-btn omrs-text-action"
+                onClick={() => startVisit(null)}
+              >
+                Start {visitToStart.visitDisplay}
+              </button>
+            </div>
             <div
-              className="omrs-padding-top-4 omrs-padding-bottom-4"
-              style={{
-                borderBottom: "1px solid var(--omrs-color-bg-low-contrast)",
-                display: "flex",
-                justifyContent: "flex-start",
-                flexDirection: "row"
-              }}
+              className="omrs-margin-right-4 omrs-padding-top-4"
+              style={{ marginLeft: "auto" }}
             >
-              <div style={{}}>
-                <button
-                  className="omrs-btn omrs-text-action"
-                  onClick={() => startVisit(null)}
-                >
-                  Start {visitToStart.visitDisplay}
-                </button>
-              </div>
-              <div
-                className="omrs-margin-right-4 omrs-padding-top-4"
-                style={{ marginLeft: "auto" }}
+              <svg
+                className="omrs-icon"
+                fill="var(--omrs-color-ink-low-contrast)"
               >
-                <svg
-                  className="omrs-icon"
-                  fill="var(--omrs-color-ink-low-contrast)"
-                >
-                  <use xlinkHref="#omrs-icon-chevron-right"></use>
-                </svg>
-              </div>
+                <use xlinkHref="#omrs-icon-chevron-right"></use>
+              </svg>
             </div>
-          )}
+          </div>
+        )}
 
-          {startedVisit && <StartedVisitComponent visit={startedVisit} />}
-        </div>
+        {startedVisit && <StartedVisitComponent visit={startedVisit} />}
       </div>
-    </ModuleNameContext.Provider>
+    </div>
   );
 }