@olaboot/esm-form-engine-lib 4.1.0

package/src/components/renderer/section/section-renderer.scss

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+
+.section {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.sectionBody {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.flexFullWidth {
+  flex-basis: 100%;
+}
+
+.questionInfoDefault {
+  display: flex;
+}

package/src/components/repeat/helpers.ts

@@ -0,0 +1,77 @@
+import { cloneDeep } from 'lodash-es';
+import { type FormField } from '../../types';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { isEmpty } from '../../validators/form-validator';
+import { clearSubmission } from '../../utils/common-utils';
+
+export function cloneRepeatField(srcField: FormField, value: OpenmrsResource, idSuffix: number) {
+  const originalGroupMembersIds: string[] = [];
+  const clonedField = cloneDeep(srcField) as FormField;
+  clonedField.questionOptions.repeatOptions = { ...(clonedField.questionOptions.repeatOptions ?? {}) };
+  clonedField.meta = {
+    repeat: { ...(clonedField.meta ?? {}), isClone: true },
+    initialValue: {
+      omrsObject: value,
+    },
+  };
+  clonedField.id = `${clonedField.id}_${idSuffix}`;
+  clonedField.questions?.forEach((childField) => {
+    originalGroupMembersIds.push(childField.id);
+    childField.id = `${childField.id}_${idSuffix}`;
+    childField.meta.groupId = clonedField.id;
+    childField.meta.initialValue = {
+      omrsObject: null,
+      refinedValue: null,
+    };
+    childField.fieldDependents = new Set();
+    clearSubmission(childField);
+
+    // cleanup expressions
+
+    if (childField['hide'] && childField['hide'].hideWhenExpression) {
+      childField['hide'].hideWhenExpression = updateFieldIdInExpression(
+        childField['hide'].hideWhenExpression,
+        idSuffix,
+        originalGroupMembersIds,
+      );
+    }
+
+    if (childField.validators?.length) {
+      childField.validators.forEach((validator) => {
+        if (validator.type === 'js_expression') {
+          validator.failsWhenExpression = updateFieldIdInExpression(
+            validator.failsWhenExpression,
+            idSuffix,
+            originalGroupMembersIds,
+          );
+        }
+      });
+    }
+    if (childField.questionOptions.calculate?.calculateExpression) {
+      childField.questionOptions.calculate.calculateExpression = updateFieldIdInExpression(
+        childField.questionOptions.calculate?.calculateExpression,
+        idSuffix,
+        originalGroupMembersIds,
+      );
+    }
+  });
+  return clonedField;
+}
+
+export function updateFieldIdInExpression(expression: string, index: number, questionIds: string[]) {
+  let uniqueQuestionIds = [...new Set(questionIds)];
+  uniqueQuestionIds.forEach((id) => {
+    if (expression.match(id)) {
+      expression = expression.replace(new RegExp(id, 'g'), `${id}_${index}`);
+    }
+  });
+  return expression;
+}
+
+export function disableRepeatAddButton(limit: string | number, counter: number) {
+  const repeatLimit = Number(limit);
+  if (isEmpty(limit) || isNaN(repeatLimit)) {
+    return false;
+  }
+  return counter >= repeatLimit;
+}

package/src/components/repeat/repeat-controls.component.tsx

@@ -0,0 +1,38 @@
+import { Button } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type FormField } from '../../types';
+import { disableRepeatAddButton } from './helpers';
+import styles from './repeat-controls.scss';
+interface RepeatingControlsProps {
+  rows: FormField[];
+  question: FormField;
+  questionIndex: number;
+  handleDelete: () => void;
+  handleAdd: () => void;
+}
+
+function RepeatControls({ question, rows, handleDelete, handleAdd, questionIndex }: RepeatingControlsProps) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.actionButtons}>
+      {questionIndex > 0 && (
+        <Button className={styles.button} kind="danger" onClick={handleDelete}>
+          <span>{t('remove', 'Remove')}</span>
+        </Button>
+      )}
+      {questionIndex === rows.length - 1 && (
+        <Button
+          className={styles.button}
+          iconDescription={t('add', 'Add')}
+          kind="primary"
+          disabled={disableRepeatAddButton(question.questionOptions.repeatOptions?.limit, rows.length)}
+          onClick={handleAdd}>
+          <span>{question.questionOptions.repeatOptions?.addText || t('add', 'Add')}</span>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export default RepeatControls;

package/src/components/repeat/repeat-controls.scss

@@ -0,0 +1,7 @@
+.actionButtons {
+  margin: 0.5rem 0;
+}
+
+.actionButtons > button {
+  margin-right: 0.5rem;
+}

package/src/components/repeat/repeat.component.tsx

@@ -0,0 +1,206 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { FormField, FormFieldInputProps, RenderType } from '../../types';
+import { evaluateAsyncExpression, evaluateExpression } from '../../utils/expression-runner';
+import { isEmpty } from '../../validators/form-validator';
+import styles from './repeat.scss';
+import { cloneRepeatField } from './helpers';
+import { clearSubmission, isViewMode } from '../../utils/common-utils';
+import RepeatControls from './repeat-controls.component';
+import { createErrorHandler } from '@openmrs/esm-framework';
+import { useFormProviderContext } from '../../provider/form-provider';
+import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
+import { useFormFactory } from '../../provider/form-factory-provider';
+
+const renderingByTypeMap: Record<string, RenderType> = {
+  obsGroup: 'group',
+  testOrder: 'select',
+  diagnosis: 'ui-select-extended',
+};
+
+const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
+  const { t } = useTranslation();
+  const isGrouped = useMemo(() => field.questions?.length > 1, [field]);
+  const [counter, setCounter] = useState(0);
+  const [rows, setRows] = useState([]);
+  const context = useFormProviderContext();
+  const { handleConfirmQuestionDeletion } = useFormFactory();
+  const {
+    patient,
+    sessionMode,
+    formFieldAdapters,
+    formFields,
+    methods: { getValues, setValue },
+    addFormField,
+    removeFormField,
+    deletedFields,
+    setDeletedFields,
+    visit,
+  } = context;
+
+  useEffect(() => {
+    const repeatedFields = formFields.filter(
+      (_field) =>
+        _field.questionOptions.concept === field.questionOptions.concept &&
+        _field.id.startsWith(field.id) &&
+        !_field.meta?.repeat?.wasDeleted,
+    );
+    setCounter(repeatedFields.length - 1);
+    setRows(repeatedFields);
+  }, [formFields, field]);
+
+  const handleAdd = useCallback(
+    (counter: number) => {
+      const clonedFieldsBuffer: FormField[] = [];
+      function evaluateExpressions(field: FormField) {
+        if (field.hide?.hideWhenExpression) {
+          field.isHidden = evaluateExpression(
+            field.hide.hideWhenExpression,
+            { value: field, type: 'field' },
+            [...formFields, ...clonedFieldsBuffer],
+            getValues(),
+            {
+              mode: sessionMode,
+              patient: patient,
+              visit,
+            },
+          );
+        }
+        if (field.questionOptions.calculate?.calculateExpression) {
+          evaluateAsyncExpression(
+            field.questionOptions.calculate?.calculateExpression,
+            { value: field, type: 'field' },
+            [...formFields, ...clonedFieldsBuffer],
+            getValues(),
+            {
+              mode: sessionMode,
+              patient: patient,
+              visit,
+            },
+          ).then((result) => {
+            if (!isEmpty(result)) {
+              setValue(field.id, result);
+              formFieldAdapters[field.type]?.transformFieldValue(field, result, context);
+            }
+          });
+        }
+      }
+
+      const clonedField = cloneRepeatField(field, null, counter);
+      clonedFieldsBuffer.push(clonedField);
+
+      // Handle nested questions
+      if (clonedField.type === 'obsGroup') {
+        clonedField.questions?.forEach((childField) => {
+          clonedFieldsBuffer.push(childField);
+        });
+      }
+
+      clonedFieldsBuffer.forEach((field) => {
+        evaluateExpressions(field);
+        addFormField(field);
+      });
+      setRows([...rows, clonedField]);
+    },
+    [formFields, field, rows, context],
+  );
+
+  const removeNthRow = (field: FormField) => {
+    if (field.meta.initialValue?.omrsObject) {
+      formFieldAdapters[field.type]?.transformFieldValue(field, null, context);
+      field.meta.repeat = { ...(field.meta.repeat || {}), wasDeleted: true };
+      if (field.type === 'obsGroup') {
+        field.questions.forEach((child) => {
+          child.meta.repeat = { ...(field.meta.repeat || {}), wasDeleted: true };
+          formFieldAdapters[child.type]?.transformFieldValue(child, null, context);
+        });
+      }
+    } else {
+      clearSubmission(field);
+    }
+    setRows(rows.filter((q) => q.id !== field.id));
+    setDeletedFields([...deletedFields, field]);
+    removeFormField(field.id);
+  };
+
+  const onClickDeleteQuestion = (field: Readonly<FormField>) => {
+    if (handleConfirmQuestionDeletion && typeof handleConfirmQuestionDeletion === 'function') {
+      const result = handleConfirmQuestionDeletion(field);
+      if (result && typeof result.then === 'function' && typeof result.catch === 'function') {
+        result.then(() => removeNthRow(field)).catch(() => createErrorHandler());
+      } else if (typeof result === 'boolean') {
+        result && removeNthRow(field);
+      } else {
+        removeNthRow(field);
+      }
+    } else {
+      removeNthRow(field);
+    }
+  };
+
+  const nodes = useMemo(() => {
+    return rows.map((field, index) => {
+      const component = (
+        <FormFieldRenderer
+          fieldId={field.id}
+          valueAdapter={formFieldAdapters[field.type]}
+          repeatOptions={{ targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering }}
+        />
+      );
+      return (
+        <div key={field.id + '_wrapper'}>
+          {index !== 0 && (
+            <div>
+              <hr className={styles.divider} />
+            </div>
+          )}
+          <div className={styles.nodeContainer}>{component}</div>
+          {!isViewMode(sessionMode) && (
+            <RepeatControls
+              question={field}
+              rows={rows}
+              questionIndex={index}
+              handleDelete={() => {
+                onClickDeleteQuestion(field);
+              }}
+              handleAdd={() => {
+                const nextCount = counter + 1;
+                handleAdd(nextCount);
+                setCounter(nextCount);
+              }}
+            />
+          )}
+        </div>
+      );
+    });
+  }, [rows]);
+
+  if (field.isHidden || !nodes || !hasVisibleField(field)) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <div>{nodes}</div>
+    </React.Fragment>
+  );
+};
+
+function hasVisibleField(field: FormField) {
+  if (field.questions?.length) {
+    return field.questions?.some((child) => !child.isHidden);
+  }
+  return !field.isHidden;
+}
+
+function getQuestionWithSupportedRendering(field: FormField) {
+  return {
+    ...field,
+    questionOptions: {
+      ...field.questionOptions,
+      rendering: renderingByTypeMap[field.type] || null,
+    },
+  };
+}
+
+export default Repeat;

package/src/components/repeat/repeat.scss

@@ -0,0 +1,30 @@
+.boldLegend > legend {
+  font-weight: bolder;
+}
+
+.flexColumn {
+  display: flex;
+  flex-direction: column;
+  margin-right: 2.5rem;
+  flex: 1;
+}
+
+.removeButton {
+  @extend .flexColumn;
+  margin-left: 0.5rem;
+}
+
+.nodeContainer {
+  margin: 1rem 0rem;
+}
+
+.container {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.divider {
+  border: 1.5px solid #e0e0e0;
+  border-bottom: none;
+  margin: 2rem 0;
+}

package/src/components/sidebar/page-observer.ts

@@ -0,0 +1,58 @@
+import { BehaviorSubject } from 'rxjs';
+import { type FormPage } from '../../types';
+
+class PageObserver {
+  private scrollablePagesSubject = new BehaviorSubject<Array<FormPage>>([]);
+  private pagesWithErrorsSubject = new BehaviorSubject<Set<string>>(new Set());
+  private activePagesSubject = new BehaviorSubject<Set<string>>(new Set());
+  private evaluatedPagesVisibilitySubject = new BehaviorSubject<boolean>(null);
+
+  setEvaluatedPagesVisibility(evaluatedPagesVisibility: boolean) {
+    this.evaluatedPagesVisibilitySubject.next(evaluatedPagesVisibility);
+  }
+
+  updateScrollablePages(newPages: Array<FormPage>) {
+    this.scrollablePagesSubject.next(newPages);
+  }
+
+  updatePagesWithErrors(newErrors: string[]) {
+    this.pagesWithErrorsSubject.next(new Set(newErrors));
+  }
+
+  addActivePage(pageId: string) {
+    const currentActivePages = this.activePagesSubject.value;
+    currentActivePages.add(pageId);
+    this.activePagesSubject.next(currentActivePages);
+  }
+
+  removeInactivePage(pageId: string) {
+    const currentActivePages = this.activePagesSubject.value;
+    currentActivePages.delete(pageId);
+    this.activePagesSubject.next(currentActivePages);
+  }
+
+  getActivePagesObservable() {
+    return this.activePagesSubject.asObservable();
+  }
+
+  getScrollablePagesObservable() {
+    return this.scrollablePagesSubject.asObservable();
+  }
+
+  getPagesWithErrorsObservable() {
+    return this.pagesWithErrorsSubject.asObservable();
+  }
+
+  getEvaluatedPagesVisibilityObservable() {
+    return this.evaluatedPagesVisibilitySubject.asObservable();
+  }
+
+  clear() {
+    this.scrollablePagesSubject.next([]);
+    this.pagesWithErrorsSubject.next(new Set());
+    this.activePagesSubject.next(new Set());
+    this.evaluatedPagesVisibilitySubject.next(false);
+  }
+}
+
+export const pageObserver = new PageObserver();

package/src/components/sidebar/sidebar.component.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { isPageContentVisible } from '../../utils/form-helper';
+import { useCurrentActivePage } from './useCurrentActivePage';
+import { usePageObserver } from './usePageObserver';
+import type { FormPage, SessionMode } from '../../types';
+import styles from './sidebar.scss';
+
+interface SidebarProps {
+  defaultPage: string;
+  isFormSubmitting: boolean;
+  sessionMode: SessionMode;
+  onCancel: () => void;
+  handleClose: () => void;
+  hideFormCollapseToggle: () => void;
+  hideControls?: boolean;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  defaultPage,
+  isFormSubmitting,
+  sessionMode,
+  onCancel,
+  handleClose,
+  hideFormCollapseToggle,
+  hideControls,
+}) => {
+  const { t } = useTranslation();
+  const { pages, pagesWithErrors, activePages, evaluatedPagesVisibility } = usePageObserver();
+  const { currentActivePage, requestPage } = useCurrentActivePage({
+    pages,
+    defaultPage,
+    activePages,
+    evaluatedPagesVisibility,
+  });
+  const layout = useLayoutType();
+  const responsiveSize = useMemo(() => {
+    const isTablet = layout === 'tablet';
+    return isTablet ? 'lg' : 'sm';
+  }, [layout]);
+
+  return (
+    <div className={styles.sidebar}>
+      {pages
+        .filter((page) => isPageContentVisible(page))
+        .map((page) => (
+          <PageLink
+            key={page.id}
+            page={page}
+            currentActivePage={currentActivePage}
+            pagesWithErrors={pagesWithErrors}
+            requestPage={requestPage}
+          />
+        ))}
+      {sessionMode !== 'view' && !hideControls && <hr className={styles.divider} />}
+
+      {!hideControls && (
+        <div className={styles.sideNavActions}>
+          {sessionMode !== 'view' && (
+            <Button className={styles.saveButton} disabled={isFormSubmitting} type="submit" size={responsiveSize}>
+              {isFormSubmitting ? (
+                <InlineLoading description={t('submitting', 'Submitting') + '...'} />
+              ) : (
+                <span>{`${t('save', 'Save')}`}</span>
+              )}
+            </Button>
+          )}
+          <Button
+            className={classNames(styles.closeButton, {
+              [styles.topMargin]: sessionMode === 'view',
+            })}
+            kind="tertiary"
+            onClick={() => {
+              onCancel?.();
+              handleClose?.();
+              hideFormCollapseToggle();
+            }}
+            size={responsiveSize}>
+            {sessionMode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface PageLinkProps {
+  page: FormPage;
+  currentActivePage: string;
+  pagesWithErrors: string[];
+  requestPage: (page: string) => void;
+}
+
+function PageLink({ page, currentActivePage, pagesWithErrors, requestPage }: PageLinkProps) {
+  const { t } = useTranslation();
+  const isActive = page.id === currentActivePage;
+  const hasError = pagesWithErrors.includes(page.id);
+  const isTablet = useLayoutType() === 'tablet';
+  return (
+    <div
+      className={classNames(styles.pageLink, {
+        [styles.activePage]: isActive && !hasError,
+        [styles.errorPage]: hasError && !isActive,
+        [styles.activeErrorPage]: hasError && isActive,
+        [styles.pageLinkTablet]: isTablet,
+      })}>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          requestPage(page.id);
+        }}>
+        <span>{t(page.label)}</span>
+      </button>
+    </div>
+  );
+}
+
+export default Sidebar;

package/src/components/sidebar/sidebar.scss

@@ -0,0 +1,114 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.pageLink {
+  border-left: 0.5rem solid colors.$teal-20;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  background-color: colors.$white;
+  margin: 0 0 0.063rem;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.pageLinkTablet {
+  height: layout.$spacing-09;
+}
+
+.pageLink button {
+  @include type.type-style('body-01');
+  font-family: inherit;
+  display: block;
+  background-color: inherit;
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: left;
+  min-height: 2rem;
+  white-space: normal;
+  word-wrap: break-word;
+  margin: 0 0 0.063rem;
+  color: colors.$gray-100;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.activePage {
+  border-left: 0.5rem solid colors.$teal-50;
+  background-color: #ededed;
+
+  button {
+    font-weight: 600;
+  }
+}
+
+.errorPage {
+  border-left: 0.5rem solid colors.$red-40;
+  background-color: colors.$red-10;
+
+  button {
+    color: colors.$red-60 !important;
+  }
+}
+
+.activeErrorPage {
+  @extend .errorPage;
+  background-color: colors.$red-30;
+  border-left: 0.5rem solid colors.$red-60;
+
+  button {
+    font-weight: 600;
+  }
+}
+
+.sidebar {
+  width: 11.25rem;
+  min-height: 8rem;
+  overscroll-behavior: contain;
+}
+
+.sideNavActions {
+  margin-left: 0.6rem;
+}
+
+@media all and (device-width: 600px) and (device-height: 1024px) and (orientation: portrait) {
+  .sidebar {
+    width: 11rem;
+    max-height: 500px;
+    margin-right: 20px;
+    position: fixed;
+  }
+}
+
+.divider {
+  border: 0;
+  border-top: 1px solid colors.$gray-40;
+  margin: 1rem 0.5rem;
+}
+
+.button {
+  width: 10rem;
+}
+
+.topMargin {
+  margin-top: 1.5rem;
+}
+
+.saveButton {
+  @extend .button;
+  margin-bottom: 0.625rem;
+
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+}
+
+.closeButton {
+  @extend .button;
+}