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

package/src/components/error/error-modal.component.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import { InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { fieldRequiredErrCode, fieldOutOfBoundErrCode } from '../../validators/form-validator';
+import type { ValidationResult } from '../../types';
+import styles from './error.scss';
+
+const ErrorModal: React.FC<{ errors: ValidationResult[] }> = ({ errors }) => {
+  const { t } = useTranslation();
+
+  const errorMessage = useMemo(() => {
+    const errorMessages: { [key: string]: string } = {};
+
+    errors.forEach((error) => {
+      if (error?.errCode === fieldRequiredErrCode && !errorMessages[fieldRequiredErrCode]) {
+        errorMessages[fieldRequiredErrCode] = t('nullMandatoryField', 'Please fill the required fields');
+      } else if (error?.errCode === fieldOutOfBoundErrCode && !errorMessages[fieldOutOfBoundErrCode]) {
+        errorMessages[fieldOutOfBoundErrCode] = t('valuesOutOfBound', 'Some of the values are out of bounds');
+      }
+    });
+
+    return Object.values(errorMessages).map((error: string, index) => <span key={index}>{error}</span>);
+  }, [errors, t]);
+
+  return (
+    <InlineNotification
+      role="alert"
+      className={styles.inlineErrorMessage}
+      kind="error"
+      lowContrast={true}
+      title={t('fieldErrorDescriptionTitle', 'Validation Errors')}
+      subtitle={errorMessage}
+    />
+  );
+};
+
+export default ErrorModal;

package/src/components/error/error.scss

@@ -0,0 +1,4 @@
+
+.inlineErrorMessage {
+    margin: 0.75rem;
+}

package/src/components/extension/extension-parcel.component.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useMemo } from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { attach, ExtensionSlot } from '@openmrs/esm-framework';
+import { type FormFieldInputProps } from '../../types';
+import { useFormProviderContext } from '../../provider/form-provider';
+
+const ExtensionParcel: React.FC<FormFieldInputProps> = ({ field }) => {
+  const submissionNotifier = useMemo(() => new BehaviorSubject<{ isSubmitting: boolean }>({ isSubmitting: false }), []);
+  const { isSubmitting, patient } = useFormProviderContext();
+
+  const state = useMemo(() => ({ patientUuid: patient.id, submissionNotifier }), [patient.id, submissionNotifier]);
+
+  useEffect(() => {
+    if (field.questionOptions.extensionSlotName && field.questionOptions.extensionId) {
+      attach(field.questionOptions.extensionSlotName, field.questionOptions.extensionId);
+    }
+  }, []);
+
+  useEffect(() => {
+    submissionNotifier.next({ isSubmitting: isSubmitting });
+  }, [isSubmitting, submissionNotifier]);
+
+  return (
+    <>
+      {field.questionOptions.extensionSlotName && (
+        <ExtensionSlot name={field.questionOptions.extensionSlotName} state={state} />
+      )}
+    </>
+  );
+};
+
+export default ExtensionParcel;

package/src/components/field-label/field-label.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type FormField } from '../../types';
+import Tooltip from '../inputs/tooltip/tooltip.component';
+
+import styles from './field-label.scss';
+
+interface FieldLabelProps {
+  field: FormField;
+  /**
+   * Custom label text to override the default field label.
+   */
+  customLabel?: string;
+}
+
+const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
+  const { t } = useTranslation();
+  const labelText = customLabel || t(field.label);
+  return (
+    <div className={styles.questionLabel}>
+      <span>{labelText}</span>
+      {field.isRequired && (
+        <span title={t('required', 'Required')} className={styles.required}>
+          *
+        </span>
+      )}
+      {field.questionInfo && <Tooltip field={field} />}
+    </div>
+  );
+};
+
+export default FieldLabel;

package/src/components/field-label/field-label.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+
+.required {
+  color: colors.$red-60;
+  margin-left: 0.25rem;
+}
+
+.questionLabel {
+  display: flex;
+  align-items: center;
+}

package/src/components/group/obs-group.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import classNames from 'classnames';
+import { type FormFieldInputProps } from '../../types';
+import styles from './obs-group.scss';
+import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
+import { useFormProviderContext } from '../../provider/form-provider';
+
+export const ObsGroup: React.FC<FormFieldInputProps> = ({ field }) => {
+  const { formFieldAdapters } = useFormProviderContext();
+
+  const groupContent = field.questions
+    ?.filter((child) => !child.isHidden)
+    .map((child, index) => {
+      const keyId = child.id + '_' + index;
+      if (formFieldAdapters[child.type]) {
+        return (
+          <div className={classNames(styles.flexColumn)} key={keyId}>
+            <div className={styles.groupContainer}>
+              <FormFieldRenderer field={child} valueAdapter={formFieldAdapters[child.type]} />
+            </div>
+          </div>
+        );
+      }
+    });
+
+  return <div className={styles.flexRow}>{groupContent}</div>;
+};
+
+export default ObsGroup;

package/src/components/group/obs-group.scss

@@ -0,0 +1,12 @@
+.flexColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.flexFullWidth {
+  flex-basis: 100%;
+}
+
+.groupContainer {
+  margin: 0.5rem 0;
+}

package/src/components/inputs/content-switcher/content-switcher.component.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { FormGroup, ContentSwitcher as CdsContentSwitcher, Switch } from '@carbon/react';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { isTrue } from '../../../utils/boolean-utils';
+import { type FormFieldInputProps } from '../../../types';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './content-switcher.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const ContentSwitcher: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+
+  const handleChange = useCallback(
+    (value) => {
+      setFieldValue(value.name);
+    },
+    [setFieldValue],
+  );
+
+  const selectedIndex = useMemo(
+    () => field.questionOptions.answers.findIndex((option) => option.concept == value),
+    [value, field.questionOptions.answers],
+  );
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' || isTrue(field.readonly) ? (
+    <div className={styles.formField}>
+      <FieldValueView
+        label={t(field.label)}
+        value={value ? formFieldAdapters[field.type].getDisplayValue(field, value) : value}
+        conceptName={field.meta?.concept?.display}
+        isInline={isInline}
+      />
+    </div>
+  ) : (
+    !field.isHidden && (
+      <FormGroup
+        legendText={
+          <div className={styles.boldedLegend}>
+            <FieldLabel field={field} />
+          </div>
+        }
+        className={classNames({
+          [styles.errorLegend]: errors.length > 0,
+          [styles.boldedLegend]: errors.length === 0,
+        })}>
+        <CdsContentSwitcher
+          onChange={handleChange}
+          selectedIndex={selectedIndex}
+          className={styles.selectedOption}
+          size="md">
+          {field.questionOptions.answers.map((option, index) => (
+            <Switch name={option.concept || option.value} text={option.label} key={index} disabled={field.isDisabled} />
+          ))}
+        </CdsContentSwitcher>
+      </FormGroup>
+    )
+  );
+};
+
+export default ContentSwitcher;

package/src/components/inputs/content-switcher/content-switcher.scss

@@ -0,0 +1,55 @@
+@use '@carbon/colors';
+
+.formField {
+  margin-top: 0.625rem;
+}
+
+.formField > div > div > label {
+  color: colors.$gray-70;
+}
+
+.textContainer {
+  label {
+    font-size: 0.875rem !important;
+  }
+}
+
+.errorLegend legend,
+.errorLabel label {
+  color: colors.$red-60 !important;
+}
+
+.boldedLegend {
+  font-weight: 600;
+  color: black;
+}
+
+.selectedOption {
+  border-radius: 4px;
+  width: 15rem;
+
+  button {
+    background-color: colors.$gray-10;
+
+    &:before {
+      display: none !important;
+    }
+  }
+}
+
+.switchOverrides {
+  background-color: colors.$blue-10 !important;
+  border: 1px solid colors.$blue-60 !important;
+  color: colors.$blue-60 !important;
+  padding: 0 0 0 1rem;
+
+  button:focus {
+    border: none !important;
+  }
+}
+
+.sansSwitchOverrides {
+  border: solid 1px colors.$blue-30 !important;
+  background-color: colors.$gray-10 !important;
+  padding: 0 0 0 1rem;
+}

package/src/components/inputs/date/date.component.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TimePicker } from '@carbon/react';
+import classNames from 'classnames';
+import { type FormFieldInputProps } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { isEmpty } from '../../../validators/form-validator';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './date.scss';
+import { OpenmrsDatePicker, formatDate, formatTime } from '@openmrs/esm-framework';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+
+const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [time, setTime] = useState('');
+  const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  const onDateChange = useCallback(
+    (date: Date) => {
+      setTimeIfPresent(date, time);
+      setFieldValue(date);
+    },
+    [setFieldValue, time],
+  );
+
+  const setTimeIfPresent = useCallback((date: Date, time: string) => {
+    if (!isEmpty(time)) {
+      const [hours, minutes] = time.split(':').map(Number);
+      date.setHours(hours ?? 0, minutes ?? 0);
+    }
+  }, []);
+
+  const onTimeChange = useCallback(
+    (event) => {
+      const time = event.target.value;
+      setTime(time);
+      // TODO: Confirm if a new date should be instantiated when the date picker format is 'timer'
+      // If the underlying concept's datatype is 'Time', then the backend expects a time string
+      const date = field.datePickerFormat === 'timer' ? new Date() : new Date(dateValue);
+      setTimeIfPresent(date, time);
+      setFieldValue(date);
+    },
+    [setFieldValue, setTimeIfPresent, dateValue],
+  );
+
+  useEffect(() => {
+    if (dateValue) {
+      if (dateValue instanceof Date) {
+        const hours = dateValue.getHours() < 10 ? `0${dateValue.getHours()}` : `${dateValue.getHours()}`;
+        const minutes = dateValue.getMinutes() < 10 ? `0${dateValue.getMinutes()}` : `${dateValue.getMinutes()}`;
+        setTime([hours, minutes].join(':'));
+      }
+    }
+  }, [dateValue]);
+
+  const timePickerLabel = useMemo(
+    () =>
+      field.datePickerFormat === 'timer' ? (
+        <FieldLabel field={field} />
+      ) : (
+        <FieldLabel field={field} customLabel={t('time', 'Time')} />
+      ),
+    [field.datePickerFormat, field.label, t],
+  );
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={dateValue instanceof Date ? getDisplay(dateValue, field.datePickerFormat) : dateValue}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <>
+        <div className={styles.datetime}>
+          {(field.datePickerFormat === 'calendar' || field.datePickerFormat === 'both') && (
+            <div className={styles.datePickerSpacing}>
+              <Layer>
+                <OpenmrsDatePicker
+                  id={field.id}
+                  onChange={onDateChange}
+                  labelText={
+                    <span className={styles.datePickerLabel}>
+                      <FieldLabel field={field} />
+                    </span>
+                  }
+                  isDisabled={field.isDisabled}
+                  isReadOnly={isTrue(field.readonly)}
+                  isRequired={field.isRequired ?? false}
+                  isInvalid={errors.length > 0}
+                  invalidText={errors[0]?.message}
+                  value={dateValue}
+                />
+              </Layer>
+              {warnings.length > 0 ? <div className={styles.datePickerWarn}>{warnings[0]?.message}</div> : null}
+            </div>
+          )}
+
+          {field.datePickerFormat === 'both' || field.datePickerFormat === 'timer' ? (
+            <div>
+              <Layer>
+                <TimePicker
+                  className={classNames(styles.boldedLabel, styles.timeInput)}
+                  id={field.id}
+                  labelText={timePickerLabel}
+                  placeholder="HH:MM"
+                  pattern="(1[012]|[1-9]):[0-5][0-9])$"
+                  type="time"
+                  disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
+                  invalid={errors.length > 0}
+                  invalidText={errors[0]?.message}
+                  warning={warnings.length > 0}
+                  warningText={warnings[0]?.message}
+                  value={
+                    time
+                      ? time
+                      : dateValue instanceof Date
+                      ? dateValue.toLocaleDateString(window.navigator.language)
+                      : dateValue
+                  }
+                  onChange={onTimeChange}
+                />
+              </Layer>
+            </div>
+          ) : null}
+        </div>
+      </>
+    )
+  );
+};
+
+function getDisplay(date: Date, rendering: string) {
+  const dateString = formatDate(date);
+  if (rendering == 'both') {
+    return `${dateString} ${formatTime(date)}`;
+  }
+  return dateString;
+}
+
+export default DateField;

package/src/components/inputs/date/date.scss

@@ -0,0 +1,36 @@
+@use '@carbon/colors';
+
+.datePickerWarn {
+  font-size: 0.75rem;
+  color: colors.$black-100;
+}
+
+.datePickerLabel {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.boldedLabel label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.datetime {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  > .datePickerSpacing {
+    margin-right: 1rem;
+  }
+}
+
+.timeInput {
+  width: auto;
+  :hover {
+    cursor: text;
+  }
+  :focus {
+    cursor: text;
+  }
+}

package/src/components/inputs/file/camera/camera.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Webcam from 'react-webcam';
+import { Button } from '@carbon/react';
+import { Camera as CameraIcon } from '@carbon/react/icons';
+
+import styles from './camera.scss';
+
+interface CameraProps {
+  handleImages: (state: any) => void;
+}
+
+const Camera: React.FC<CameraProps> = ({ handleImages }) => {
+  const webcamRef = React.useRef(null);
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot();
+    handleImages(imageSrc);
+  }, [webcamRef]);
+
+  const videoConstraints = {
+    facingMode: 'user',
+  };
+
+  return (
+    <div>
+      <Webcam audio={false} ref={webcamRef} screenshotFormat="image/png" videoConstraints={videoConstraints} />
+      <div className={styles.captureButton}>
+        <Button onClick={capture} type="button" hasIconOnly renderIcon={() => <CameraIcon size={24} />}></Button>
+      </div>
+    </div>
+  );
+};
+
+export default Camera;

package/src/components/inputs/file/camera/camera.scss

@@ -0,0 +1,3 @@
+.captureButton {
+  margin: 0.5rem 0;
+}

package/src/components/inputs/file/file.component.tsx

@@ -0,0 +1,159 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { FileUploader, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { isTrue } from '../../../utils/boolean-utils';
+import Camera from './camera/camera.component';
+import { Close, DocumentPdf } from '@carbon/react/icons';
+import styles from './file.scss';
+import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { isViewMode } from '../../../utils/common-utils';
+import FieldValueView from '../../value/view/field-value-view.component';
+import FieldLabel from '../../field-label/field-label.component';
+
+type DataSourceType = 'filePicker' | 'camera' | null;
+
+const File: React.FC<FormFieldInputProps> = ({ field, value, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [cameraWidgetVisible, setCameraWidgetVisible] = useState(false);
+  const [imagePreview, setImagePreview] = useState(null);
+  const [dataSource, setDataSource] = useState<DataSourceType>(null);
+  const { sessionMode } = useFormProviderContext();
+
+  const labelDescription = useMemo(() => {
+    return field.questionOptions.allowedFileTypes
+      ? t(
+          'fileUploadDescription',
+          `Upload one of the following file types: ${field.questionOptions.allowedFileTypes.map(
+            (eachItem) => ` ${eachItem}`,
+          )}`,
+        )
+      : t('fileUploadDescriptionAny', 'Upload any file type');
+  }, [field.questionOptions.allowedFileTypes, t]);
+
+  const handleFilePickerChange = useCallback(
+    (event) => {
+      // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
+      const [selectedFile]: File[] = Array.from(event.target.files);
+      setImagePreview(null);
+      setFieldValue(selectedFile);
+    },
+    [setFieldValue],
+  );
+
+  const handleCameraImageChange = useCallback(
+    (newImage) => {
+      setImagePreview(newImage);
+      setCameraWidgetVisible(false);
+      setFieldValue(newImage);
+    },
+    [setFieldValue],
+  );
+
+  if (isViewMode(sessionMode) && !value) {
+    return (
+      <FieldValueView label={t(field.label)} value={null} conceptName={field.meta.concept?.display} isInline={false} />
+    );
+  }
+
+  return isViewMode(sessionMode) ? (
+    <div>
+      <div className={styles.label}>{t(field.label)}</div>
+      <div className={styles.editModeImage}>
+        <div className={styles.imageContent}>
+          {value.bytesContentFamily === 'PDF' ? (
+            <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
+              <DocumentPdf size={24} />
+            </div>
+          ) : (
+            <img src={value.src} alt={t('preview', 'Preview')} width="200px" />
+          )}
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div>
+      <div className={styles.label}>
+        <FieldLabel field={field} />
+      </div>
+      <div className={styles.uploadSelector}>
+        <div className={styles.selectorButton}>
+          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('filePicker')}>
+            {t('uploadImage', 'Upload image')}
+          </Button>
+        </div>
+        <div className={styles.selectorButton}>
+          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('camera')}>
+            {t('cameraCapture', 'Camera capture')}
+          </Button>
+        </div>
+      </div>
+      {!dataSource && value && (
+        <div className={styles.editModeImage}>
+          <div className={styles.imageContent}>
+            {value.bytesContentFamily === 'PDF' ? (
+              <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
+                <DocumentPdf size={24} />
+              </div>
+            ) : (
+              <img src={value.src} alt="Preview" width="200px" />
+            )}
+          </div>
+        </div>
+      )}
+      {dataSource === 'filePicker' && (
+        <div className={styles.fileUploader}>
+          <FileUploader
+            accept={field.questionOptions.allowedFileTypes ?? []}
+            buttonKind="primary"
+            buttonLabel={t('addFile', 'Add files')}
+            filenameStatus="edit"
+            iconDescription={t('clearFile', 'Clear file')}
+            labelDescription={labelDescription}
+            labelTitle={t('upload', 'Upload')}
+            // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
+            // multiple={field.questionOptions.allowMultiple}
+            onChange={handleFilePickerChange}
+          />
+        </div>
+      )}
+      {dataSource === 'camera' && (
+        <div className={styles.cameraUploader}>
+          <div className={styles.camButton}>
+            <p className={styles.titleStyles}>Camera</p>
+            <p className={styles.descriptionStyles}>Capture image via camera</p>
+            <Button onClick={() => setCameraWidgetVisible((prevState) => !prevState)} size="md">
+              {cameraWidgetVisible ? t('closeCamera', 'Close camera') : t('addCameraImage', 'Add camera image')}
+            </Button>
+          </div>
+          {cameraWidgetVisible && (
+            <div className={styles.cameraPreview}>
+              <Camera handleImages={handleCameraImageChange} />
+            </div>
+          )}
+          {imagePreview && (
+            <div className={styles.capturedImage}>
+              <div className={styles.imageContent}>
+                <img src={imagePreview} alt={t('preview', 'Preview')} width="200px" />
+                <div className={styles.caption}>
+                  <p>{t('uploadedPhoto', 'Uploaded photo')}</p>
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    onClick={() => {
+                      setImagePreview(null);
+                    }}
+                    className={styles.closeIcon}>
+                    <Close />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default File;