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

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,201 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormGroup } from '@carbon/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',
+};
+
+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,
+  } = 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) => {
+      function evaluateExpressions(field: FormField) {
+        if (field.hide?.hideWhenExpression) {
+          field.isHidden = evaluateExpression(
+            field.hide.hideWhenExpression,
+            { value: field, type: 'field' },
+            formFields,
+            getValues(),
+            {
+              mode: sessionMode,
+              patient: patient,
+            },
+          );
+        }
+        if (field.questionOptions.calculate?.calculateExpression) {
+          evaluateAsyncExpression(
+            field.questionOptions.calculate?.calculateExpression,
+            { value: field, type: 'field' },
+            formFields,
+            getValues(),
+            {
+              mode: sessionMode,
+              patient: patient,
+            },
+          ).then((result) => {
+            if (!isEmpty(result)) {
+              setValue(field.id, result);
+              formFieldAdapters[field.type]?.transformFieldValue(field, result, context);
+            }
+          });
+        }
+      }
+      const clonedField = cloneRepeatField(field, null, counter);
+      // run necessary expressions
+      if (clonedField.type === 'obsGroup') {
+        clonedField.questions?.forEach((childField) => {
+          evaluateExpressions(childField);
+          addFormField(childField);
+        });
+      } else {
+        evaluateExpressions(clonedField);
+      }
+      addFormField(clonedField);
+      setRows([...rows, clonedField]);
+    },
+    [formFields, field, rows, context],
+  );
+
+  const removeNthRow = (field: FormField) => {
+    if (field.meta.previousValue) {
+      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));
+  };
+
+  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
+          field={field}
+          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>
+      {isGrouped ? (
+        <div className={styles.container}>
+          <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
+            {nodes}
+          </FormGroup>
+        </div>
+      ) : (
+        <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/repeat/repeat.test.ts

@@ -0,0 +1,29 @@
+import { updateFieldIdInExpression } from './helpers';
+
+describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', () => {
+  it('Should handle update of expression with ids in repeat group', () => {
+    const expression =
+      "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
+    const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+    const index = 2;
+
+    const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+    expect(updatedExpression).toEqual(
+      "infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'",
+    );
+  });
+
+  it('Should handle update of expression with ids not in repeat group', () => {
+    const expression =
+      "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
+    const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+    const index = 1;
+
+    const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+    expect(updatedExpression).toEqual(
+      "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')",
+    );
+  });
+});

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

@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Toggle } from '@carbon/react';
+import { isEmpty } from '../../validators/form-validator';
+import { type FormPage } from '../../types';
+import styles from './sidebar.scss';
+import { scrollIntoView } from '../../utils/form-helper';
+
+interface SidebarProps {
+  allowUnspecifiedAll: boolean;
+  defaultPage: string;
+  handleClose: () => void;
+  hideFormCollapseToggle: () => void;
+  isFormSubmitting: boolean;
+  mode: string;
+  onCancel: () => void;
+  pagesWithErrors: string[];
+  scrollablePages: Set<FormPage>;
+  selectedPage: string;
+  setValues: (values: unknown) => void;
+  values: object;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  allowUnspecifiedAll,
+  defaultPage,
+  handleClose,
+  hideFormCollapseToggle,
+  isFormSubmitting,
+  mode,
+  onCancel,
+  pagesWithErrors,
+  scrollablePages,
+  selectedPage,
+  setValues,
+  values,
+}) => {
+  const { t } = useTranslation();
+  const pages: Array<FormPage> = Array.from(scrollablePages);
+
+  useEffect(() => {
+    if (defaultPage && pages.some(({ label, isHidden }) => label === defaultPage && !isHidden)) {
+      scrollIntoView(joinWord(defaultPage));
+    }
+  }, [defaultPage, scrollablePages]);
+
+  const unspecifiedFields = useMemo(
+    () =>
+      Object.keys(values).filter(
+        (key) => key.endsWith('-unspecified') && isEmpty(values[key.split('-unspecified')[0]]),
+      ),
+    [values],
+  );
+
+  const handleClick = (selected) => {
+    const activeId = joinWord(selected);
+    scrollIntoView(activeId);
+  };
+
+  const markAllAsUnspecified = useCallback(
+    (toggled) => {
+      const updatedValues = { ...values };
+      unspecifiedFields.forEach((field) => {
+        updatedValues[field] = toggled;
+      });
+      setValues(updatedValues);
+    },
+    [unspecifiedFields, values, setValues],
+  );
+
+  return (
+    <div className={styles.sidebar}>
+      {pages.map((page, index) => {
+        if (page.isHidden) return null;
+
+        const isCurrentlySelected = joinWord(page.label) === selectedPage;
+        const hasError = pagesWithErrors.includes(page.label);
+
+        return (
+          <div
+            aria-hidden="true"
+            className={classNames({
+              [styles.erroredSection]: isCurrentlySelected && hasError,
+              [styles.activeSection]: isCurrentlySelected && !hasError,
+              [styles.activeErroredSection]: !isCurrentlySelected && hasError,
+              [styles.section]: !isCurrentlySelected && !hasError,
+            })}
+            key={index}
+            onClick={() => handleClick(page.label)}>
+            <div className={styles.sectionLink}>{page.label}</div>
+          </div>
+        );
+      })}
+      {mode !== 'view' && <hr className={styles.divider} />}
+      <div className={styles.sidenavActions}>
+        {allowUnspecifiedAll && mode !== 'view' && (
+          <div className={styles.toggleContainer}>
+            <Toggle
+              id="auto-unspecifier"
+              labelA={t('unspecifyAll', 'Unspecify All')}
+              labelB={t('revert', 'Revert')}
+              labelText=""
+              onToggle={markAllAsUnspecified}
+            />
+          </div>
+        )}
+        {mode !== 'view' && (
+          <Button className={styles.saveButton} disabled={isFormSubmitting} type="submit">
+            {t('save', 'Save')}
+          </Button>
+        )}
+        <Button
+          className={classNames(styles.saveButton, {
+            [styles.topMargin]: mode === 'view',
+          })}
+          kind="tertiary"
+          onClick={() => {
+            onCancel?.();
+            handleClose?.();
+            hideFormCollapseToggle();
+          }}>
+          {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+function joinWord(value) {
+  return value.replace(/\s/g, '');
+}
+
+export default Sidebar;

package/src/components/sidebar/sidebar.scss

@@ -0,0 +1,121 @@
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.sidebar {
+  width: 12rem;
+  min-height: 8rem;
+  overscroll-behavior: contain;
+  margin-right: 1rem;
+}
+
+.sidebarList {
+  max-height: 100%;
+}
+
+.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;
+  }
+
+  .sidebarList {
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+}
+
+.link {
+  margin: 0.375rem 0 0.375rem 0.5rem;
+  font-size: 1rem;
+  line-height: 1.43;
+  letter-spacing: 0.16px;
+  color: colors.$gray-100;
+  cursor: pointer;
+
+  :hover {
+    outline: none;
+  }
+}
+
+.section {
+  border-left: 0.5rem solid colors.$teal-20;
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  padding: 0.25rem 0.5rem;
+  background-color: colors.$white;
+  cursor: pointer;
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .section {
+    height: 3rem;
+  }
+}
+
+.sectionLink {
+  @include type.type-style('body-01');
+  color: colors.$gray-100;
+}
+
+.activeSection {
+  @extend .section;
+  border-left: 0.5rem solid colors.$teal-50;
+  background-color: #ededed;
+
+  .sectionLink {
+    font-weight: 600;
+  }
+}
+
+.sectionDone {
+  @extend .section;
+  border-left: 0.5rem solid colors.$teal-80;
+  background-color: colors.$green-10;
+}
+
+.erroredSection {
+  @extend .section;
+  border-left: 0.5rem solid colors.$red-60;
+  color: colors.$red-70 !important;
+  background-color: colors.$red-20;
+}
+
+.activeErroredSection {
+  @extend .erroredSection;
+  font-weight: 600;
+}
+
+.divider {
+  border: 0;
+  border-top: 1px solid colors.$gray-40;
+  margin: 2.5rem 0.5rem 1rem;
+}
+
+.button {
+  width: 11rem;
+}
+
+.topMargin {
+  margin-top: 1.5rem;
+}
+
+.saveButton {
+  @extend .button;
+  margin-bottom: 0.625rem;
+}
+
+.closeButton {
+  @extend .button;
+}
+
+.toggleContainer {
+  margin-bottom: 0.5rem;
+}

package/src/components/value/value.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './value.scss';
+
+export const ValueEmpty = () => {
+  return (
+    <div>
+      <span className={styles.empty}>(Blank)</span>
+    </div>
+  );
+};
+
+export const ValueDisplay = ({ value }) => {
+  if (Array.isArray(value)) {
+    return <ListDisplay valueArray={value} />;
+  }
+  return <div className={styles.value}>{value}</div>;
+};
+
+const ListDisplay = ({ valueArray }) => {
+  return (
+    <ul>
+      {valueArray.map((item) => (
+        <li className={styles.item}>{item}</li>
+      ))}
+    </ul>
+  );
+};

package/src/components/value/value.scss

@@ -0,0 +1,17 @@
+@use '@carbon/colors';
+
+.value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: colors.$gray-60;
+}
+
+.empty {
+  @extend .value;
+  color: colors.$gray-30;
+}
+
+.item {
+  @extend .value;
+  margin-bottom: 0.5rem;
+}

package/src/components/value/view/field-value-view.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import LabelField from '../../label/label.component';
+import { ValueDisplay, ValueEmpty } from '../value.component';
+import styles from './field-value-view.scss';
+
+interface FieldValueViewProps {
+  isInline: boolean;
+  label: string;
+  value: any;
+  conceptName: string;
+}
+
+const FieldValueView: React.FC<FieldValueViewProps> = ({ label, conceptName, value, isInline }) => (
+  <>
+    {isInline ? (
+      <div className={styles.inlineFlexRow}>
+        <div className={styles.inlineFlexColumn}>
+          <LabelField value={label} tooltipText={conceptName} />
+        </div>
+        <div className={styles.inlineFlexColumn}>{value ? <ValueDisplay value={value} /> : <ValueEmpty />}</div>
+      </div>
+    ) : (
+      <div className={styles.readonly}>
+        <div className={styles.formField}>
+          <LabelField value={label} tooltipText={conceptName} />
+          <div className={styles.value}>{value ? <ValueDisplay value={value} /> : <ValueEmpty />}</div>
+        </div>
+      </div>
+    )}
+  </>
+);
+
+export default FieldValueView;

package/src/components/value/view/field-value-view.scss

@@ -0,0 +1,31 @@
+@use '@carbon/colors';
+
+.formField {
+  margin-top: 10px;
+}
+
+.formField > div > div > label {
+  color: colors.$gray-70;
+}
+
+.readonly {
+  border-bottom: 0.5px colors.$gray-30;
+  border-style: solid;
+}
+
+.readonly > div {
+  padding-bottom: 7px !important;
+}
+
+.value {
+  color: colors.$gray-70;
+}
+
+.inlineFlexRow {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inlineFlexColumn {
+  width: 300px;
+}

package/src/constants.ts

@@ -0,0 +1,12 @@
+export const ConceptTrue = 'cf82933b-3f3f-45e7-a5ab-5d31aaee3da3';
+export const ConceptFalse = '488b58ff-64f5-4f8a-8979-fa79940b1594';
+export const UnspecifiedValue = 'VALUE_UNSPECIFIED';
+export const encounterRepresentation =
+  'custom:(uuid,encounterDatetime,encounterType:(uuid,name,description),location:(uuid,name),' +
+  'patient:(uuid,display),encounterProviders:(uuid,provider:(uuid,name),encounterRole:(uuid,name)),' +
+  'orders:(uuid,display,concept:(uuid,display),voided),' +
+  'obs:(uuid,obsDatetime,comment,voided,groupMembers,formFieldNamespace,formFieldPath,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name),' +
+  'names:(uuid,conceptNameType,name))))';
+export const FormsStore = 'forms-engine-store';
+export const PatientChartWorkspaceHeaderSlot = 'patient-chart-workspace-header-slot';
+export const codedTypes = ['radio', 'checkbox', 'select', 'content-switcher'];