@openmrs/esm-form-engine-lib 2.1.0-pre.1362

package/src/datasources/concept-data-source.ts

@@ -0,0 +1,42 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+import { isEmpty } from '../validators/form-validator';
+
+export class ConceptDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(`${restBaseUrl}/concept?name=&searchType=fuzzy&v=custom:(uuid,display,conceptClass:(uuid,display))`);
+  }
+
+  fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]> {
+    if (isEmpty(config?.class) && isEmpty(config?.concept) && !config?.useSetMembersByConcept && isEmpty(searchTerm)) {
+      return Promise.resolve([]);
+    }
+
+    let apiUrl = this.url;
+    if (config?.class) {
+      if (typeof config.class == 'string') {
+        const urlParts = apiUrl.split('searchType=fuzzy');
+        apiUrl = `${urlParts[0]}searchType=fuzzy&class=${config.class}&${urlParts[1]}`;
+      } else {
+        return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
+          return data.results.filter(
+            (concept) => concept.conceptClass && config.class.includes(concept.conceptClass.uuid),
+          );
+        });
+      }
+    }
+
+    if (config?.concept && config?.useSetMembersByConcept) {
+      let urlParts = apiUrl.split('?name=&searchType=fuzzy&v=');
+      apiUrl = `${urlParts[0]}/${config.concept}?v=custom:(uuid,setMembers:(uuid,display))`;
+      return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
+        // return the setMembers from the retrieved concept object
+        return data['setMembers'];
+      });
+    }
+
+    return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
+      return data.results;
+    });
+  }
+}

package/src/datasources/data-source.ts

@@ -0,0 +1,23 @@
+import { openmrsFetch, type OpenmrsResource } from '@openmrs/esm-framework';
+import { type DataSource } from '../types';
+
+export class BaseOpenMRSDataSource implements DataSource<OpenmrsResource> {
+  url: string;
+
+  constructor(url: string) {
+    this.url = url;
+  }
+
+  fetchData(searchTerm: string): Promise<any[]> {
+    return openmrsFetch(searchTerm ? `${this.url}&q=${searchTerm}` : this.url).then(({ data }) => {
+      return data.results;
+    });
+  }
+
+  toUuidAndDisplay(data: OpenmrsResource): OpenmrsResource {
+    if (typeof data.uuid === 'undefined' || typeof data.display === 'undefined') {
+      throw new Error("'uuid' or 'display' not found in the OpenMRS object.");
+    }
+    return data;
+  }
+}

package/src/datasources/encounter-role-datasource.ts

@@ -0,0 +1,15 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class EncounterRoleDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(null);
+  }
+
+  async fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
+    const rep = 'v=custom:(uuid,display,name)';
+    const url = `${restBaseUrl}/encounterrole?${rep}`;
+    const { data } = await openmrsFetch(searchTerm ? `${url}&q=${searchTerm}` : url);
+    return data?.results;
+  }
+}

package/src/datasources/historical-data-source.ts

@@ -0,0 +1,11 @@
+export class HistoricalDataSourceService {
+  dataSourceMap: Record<string, any> = {};
+
+  putObject(key: string, value: any) {
+    this.dataSourceMap[key] = value;
+  }
+
+  getObject(key: string) {
+    return this.dataSourceMap[key];
+  }
+}

package/src/datasources/location-data-source.ts

@@ -0,0 +1,27 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class LocationDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(`${restBaseUrl}/location?v=custom:(uuid,display)`);
+  }
+
+  fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]> {
+    let apiUrl = this.url;
+    const urlParts = apiUrl.split('?');
+    if (config?.tag) {
+      apiUrl = `${urlParts[0]}?tag=${config.tag}&${urlParts[1]}`;
+    }
+    //overwrite url if there's a uuid value, meaning we are in edit mode
+    if (uuid) {
+      apiUrl = `${urlParts[0]}/${uuid}?${urlParts[1]}`;
+    }
+
+    return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
+      if (data.results) {
+        return data.results;
+      }
+      return data;
+    });
+  }
+}

package/src/datasources/provider-datasource.ts

@@ -0,0 +1,15 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class ProviderDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(null);
+  }
+
+  async fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
+    const rep = 'v=custom:(uuid,display)';
+    const url = `${restBaseUrl}/provider?${rep}`;
+    const { data } = await openmrsFetch(searchTerm ? `${url}&q=${searchTerm}` : url);
+    return data?.results;
+  }
+}

package/src/datasources/select-concept-answers-datasource.ts

@@ -0,0 +1,15 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class SelectConceptAnswersDatasource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(`${restBaseUrl}/concept/conceptUuid?v=custom:(uuid,setMembers:(uuid,display),answers:(uuid,display))`);
+  }
+
+  fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
+    const apiUrl = this.url.replace('conceptUuid', config.referencedValue || config.concept);
+    return openmrsFetch(apiUrl).then(({ data }) => {
+      return data['setMembers'].length ? data['setMembers'] : data['answers'];
+    });
+  }
+}

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = {};

package/src/external-function-context.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { FormField } from './types';
+
+export type ExternalFunctionContextProps = {
+  handleConfirmQuestionDeletion: (question: Readonly<FormField>) => Promise<void>;
+};
+
+export const ExternalFunctionContext = React.createContext<ExternalFunctionContextProps | undefined>(undefined);

package/src/form-context.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { type LayoutType } from '@openmrs/esm-framework';
+import {
+  type PatientProgram,
+  type FormField,
+  type OpenmrsEncounter,
+  type PatientIdentifier,
+  type SessionMode,
+} from './types';
+
+type FormContextProps = {
+  values: Record<string, any>;
+  setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
+  setEncounterLocation: (value: any) => void;
+  encounterContext: EncounterContext;
+  fields: FormField[];
+  isFieldInitializationComplete: boolean;
+  isSubmitting: boolean;
+  layoutType?: LayoutType;
+  workspaceLayout?: 'minimized' | 'maximized';
+};
+
+export interface EncounterContext {
+  patient: fhir.Patient;
+  encounter: OpenmrsEncounter;
+  previousEncounter?: OpenmrsEncounter;
+  location: any;
+  sessionMode: SessionMode;
+  encounterDate: Date;
+  setEncounterDate(value: Date): void;
+  encounterProvider: string;
+  setEncounterProvider(value: string): void;
+  setEncounterLocation(value: any): void;
+  encounterRole: string;
+  setEncounterRole(value: string): void;
+  initValues?: Record<string, any>;
+  patientIdentifier?: PatientIdentifier;
+  patientPrograms?: Array<PatientProgram>;
+  getFormField?: (id: string) => FormField;
+}
+
+export const FormContext = React.createContext<FormContextProps | undefined>(undefined);

package/src/form-engine.component.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { FormField, SessionMode, FormSchema } from './types';
+import { useSession, type Visit } from '@openmrs/esm-framework';
+import { useFormJson } from '.';
+import FormProcessorFactory from './components/processor-factory/form-processor-factory.component';
+import { Form } from '@carbon/react';
+import Loader from './components/loaders/loader.component';
+import { usePatientData } from './hooks/usePatientData';
+import { useWorkspaceLayout } from './hooks/useWorkspaceLayout';
+import { FormFactoryProvider } from './provider/form-factory-provider';
+import classNames from 'classnames';
+import styles from './form-engine.scss';
+import { ButtonSet, Button, InlineLoading } from '@carbon/react';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import PatientBanner from './components/patient-banner/patient-banner.component';
+import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component';
+import { init, teardown } from './lifecycle';
+import { reportError } from './utils/error-utils';
+import { moduleName } from './globals';
+
+interface FormEngineProps {
+  patientUUID: string;
+  formUUID?: string;
+  formJson?: FormSchema;
+  encounterUUID?: string;
+  visit?: Visit;
+  formSessionIntent?: string;
+  mode?: SessionMode;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+  handleClose?: () => void;
+  handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+}
+
+// TODOs:
+// - Implement sidebar
+// - Conditionally render the button set
+// - Patient banner
+const FormEngine = ({
+  formJson,
+  patientUUID,
+  formUUID,
+  encounterUUID,
+  visit,
+  formSessionIntent,
+  mode,
+  onSubmit,
+  onCancel,
+  handleClose,
+  handleConfirmQuestionDeletion,
+}: FormEngineProps) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const ref = useRef(null);
+  const sessionDate = useMemo(() => {
+    return new Date();
+  }, []);
+  const workspaceLayout = useWorkspaceLayout(ref);
+  const { patient, isLoadingPatient } = usePatientData(patientUUID);
+  const [isLoadingDependencies, setIsLoadingDependencies] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // TODO: Updating this prop triggers a rerender of the entire form. This means whenever we scroll into a new page, the form is rerendered.
+  // Figure out a way to avoid this. Maybe use a ref with an observer instead of a state?
+  const [currentPage, setCurrentPage] = useState('');
+  const [showPatientBanner, setShowPatientBanner] = useState(false);
+  const {
+    formJson: refinedFormJson,
+    isLoading: isLoadingFormJson,
+    formError,
+  } = useFormJson(formUUID, formJson, encounterUUID, formSessionIntent);
+
+  const showButtonSet = useMemo(() => {
+    // if (mode === 'embedded-view') {
+    //   return false;
+    // }
+    // return workspaceLayout === 'minimized' || (workspaceLayout === 'maximized' && scrollablePages.size <= 1);
+    return true;
+  }, [mode, workspaceLayout]);
+
+  useEffect(() => {
+    reportError(formError, t('errorLoadingFormSchema', 'Error loading form schema'));
+  }, [formError]);
+
+  useEffect(() => {
+    init();
+    return () => {
+      teardown();
+    };
+  }, []);
+
+  const handleSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+  }, []);
+
+  return (
+    <Form noValidate ref={ref} className={classNames('cds--form', styles.form)} onSubmit={handleSubmit}>
+      {isLoadingPatient || isLoadingFormJson ? (
+        <Loader />
+      ) : (
+        <FormFactoryProvider
+          patient={patient}
+          sessionMode={mode}
+          sessionDate={sessionDate}
+          formJson={refinedFormJson}
+          workspaceLayout={workspaceLayout}
+          location={session?.sessionLocation}
+          provider={session?.currentProvider}
+          visit={visit}
+          handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
+          formSubmissionProps={{
+            isSubmitting,
+            setIsSubmitting,
+            onSubmit,
+            onError: () => {},
+            handleClose: () => {},
+          }}
+          setCurrentPage={setCurrentPage}>
+          <div className={styles.formContainer}>
+            {isLoadingDependencies && (
+              <div className={styles.linearActivity}>
+                <div className={styles.indeterminate}></div>
+              </div>
+            )}
+            <div className={styles.formContent}>
+              {showSidebar && <div>{/* Side bar goes here */}</div>}
+              <div className={styles.formContentInner}>
+                {showPatientBanner && <PatientBanner patient={patient} hideActionsOverflow />}
+                {refinedFormJson.markdown && (
+                  <div className={styles.markdownContainer}>
+                    <MarkdownWrapper markdown={refinedFormJson.markdown} />
+                  </div>
+                )}
+                <div className={styles.formBody}>
+                  <FormProcessorFactory
+                    formJson={refinedFormJson}
+                    setIsLoadingFormDependencies={setIsLoadingDependencies}
+                  />
+                </div>
+                {showButtonSet && (
+                  <ButtonSet className={styles.minifiedButtons}>
+                    <Button
+                      kind="secondary"
+                      onClick={() => {
+                        onCancel && onCancel();
+                        handleClose && handleClose();
+                        // TODO: hideFormCollapseToggle();
+                      }}>
+                      {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
+                    </Button>
+                    <Button type="submit" disabled={isLoadingDependencies || mode === 'view'}>
+                      {isSubmitting ? (
+                        <InlineLoading description={t('submitting', 'Submitting') + '...'} />
+                      ) : (
+                        <span>{`${t('save', 'Save')}`}</span>
+                      )}
+                    </Button>
+                  </ButtonSet>
+                )}
+              </div>
+            </div>
+          </div>
+        </FormFactoryProvider>
+      )}
+    </Form>
+  );
+};
+
+function I18FormEngine(props: FormEngineProps) {
+  return (
+    <I18nextProvider i18n={window.i18next} defaultNS={moduleName}>
+      <FormEngine {...props} />
+    </I18nextProvider>
+  );
+}
+
+export default I18FormEngine;

package/src/form-engine.scss

@@ -0,0 +1,140 @@
+// replaces .formEngine
+.form {
+  height: 100%;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+// replaces .container
+.formContainer {
+  display: flex;
+  height: 100%;
+  overflow-y: hidden;
+  flex-direction: column;
+}
+
+// replaces .body
+.formContent {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+// replaces .content
+.formContentInner {
+  height: var(--desktop-workspace-window-height);
+  margin: 0;
+  flex-basis: 65%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+// replaces .contentBody
+.formBody {
+  overflow-y: auto;
+  width: inherit;
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.minifiedButtons {
+  button {
+    height: 4rem;
+    display: flex;
+    align-content: flex-start;
+    align-items: baseline;
+    min-width: 50%;
+  }
+}
+
+.markdownContainer {
+  padding: 1rem;
+}
+
+.loader {
+  @extend .formContent;
+  height: 1rem;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .formContentInner {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .minifiedButtons {
+    border-top: 1px solid #ededed;
+    padding: 1.5rem 1rem;
+    background-color: white;
+  }
+}
+
+.linearActivity {
+  overflow: hidden;
+  width: 100%;
+  height: 4px;
+  background-color: var(--brand-03);
+  margin-top: 0px;
+}
+
+.determinate {
+  position: relative;
+  max-width: 100%;
+  height: 100%;
+  -webkit-transition: width 500ms ease-out 1s;
+  -moz-transition: width 500ms ease-out 1s;
+  -o-transition: width 500ms ease-out 1s;
+  transition: width 500ms ease-out 1s;
+  background-color: var(--brand-02);
+}
+
+.indeterminate {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.indeterminate:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  background-color: var(--brand-02);
+  animation: indeterminate_first 2.5s infinite ease-out;
+}
+
+.indeterminate:after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  background-color: var(--brand-01);
+  animation: indeterminate_second 2.5s infinite ease-in;
+}
+
+@keyframes indeterminate_first {
+  0% {
+    left: -100%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+
+@keyframes indeterminate_second {
+  0% {
+    left: -150%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}