@olaboot/esm-form-engine-lib 4.1.0

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

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, TimePicker } from '@carbon/react';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import { formatDateAsDisplayString } from '../../../utils/common-utils';
+import { isEmpty } from '../../../validators/form-validator';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { type FormFieldInputProps } from '../../../types';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './date.scss';
+
+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' || isTrue(field.readonly) ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={dateValue instanceof Date ? formatDateAsDisplayString(field, dateValue) : 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}
+                readOnly={isTrue(field.readonly)}
+                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>
+    )
+  );
+};
+
+export default DateField;

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

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+
+.datePickerWarn {
+  font-size: 0.75rem;
+  color: colors.$black-100;
+}
+
+.datePickerLabel {
+  font-weight: 600;
+  color: colors.$black-100;
+  max-width: 18.5rem;
+}
+
+.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/file-thumbnail.component.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import styles from './file-thumbnail.scss';
+import { CloseFilled, DocumentPdf, DocumentUnknown } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+
+interface FileThumbnailProps {
+  src: string;
+  title: string;
+  bytesContentFamily: string;
+  removeFileCb: () => void;
+}
+
+type ThumbnailProps = Omit<FileThumbnailProps, 'bytesContentFamily' | 'removeFileCb'>;
+
+export function FileThumbnail({ bytesContentFamily, removeFileCb, ...thumbnailProps }: FileThumbnailProps) {
+  const Thumbnail = useMemo(() => {
+    switch (bytesContentFamily) {
+      case 'image':
+        return ImageThumbnail;
+      case 'pdf':
+        return PDFThumbnail;
+      default:
+        return OtherThumbnail;
+    }
+  }, []);
+
+  return (
+    <div className={styles.thumbnail}>
+      <Thumbnail {...thumbnailProps} />
+      <Button kind="ghost" className={styles.removeButton} onClick={removeFileCb}>
+        <CloseFilled size={16} className={styles.closeIcon} />
+      </Button>
+    </div>
+  );
+}
+
+function ImageThumbnail(props: ThumbnailProps) {
+  return <img className={styles.imageThumbnail} src={props.src} alt={props.title} />;
+}
+
+function PDFThumbnail(props: ThumbnailProps) {
+  return (
+    <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
+      <DocumentPdf size={24} />
+    </div>
+  );
+}
+
+function OtherThumbnail(props: ThumbnailProps) {
+  return (
+    <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
+      <DocumentUnknown size={24} />
+    </div>
+  );
+}

package/src/components/inputs/file/file-thumbnail.scss

@@ -0,0 +1,42 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.thumbnail {
+  height: 7rem;
+  width: 7rem;
+}
+
+.imageThumbnail {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.pdfThumbnail {
+  background-color: vars.$color-gray-30;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.removeButton {
+  position: absolute;
+  top: layout.$spacing-02;
+  right: layout.$spacing-02;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  padding-block-start: 0;
+  --cds-layout-size-height-local: 0;
+}
+
+.removeButton:hover {
+  background-color: transparent;
+}
+
+.closeIcon {
+  fill: white !important;
+}

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

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Add } from '@carbon/react/icons';
+import styles from './file.scss';
+import { type Attachment, 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';
+import { showModal, type UploadedFile, useLayoutType } from '@openmrs/esm-framework';
+import { FileThumbnail } from './file-thumbnail.component';
+import classNames from 'classnames';
+
+const File: React.FC<FormFieldInputProps<Array<Attachment>>> = ({ field, value, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { sessionMode } = useFormProviderContext();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const showImageCaptureModal = useCallback(() => {
+    const close = showModal('capture-photo-modal', {
+      saveFile: (file: UploadedFile) => {
+        if (file.capturedFromWebcam && !file.fileName.includes('.')) {
+          file.fileName = `${file.fileName}.png`;
+        }
+        const currentFiles = value ? value : [];
+        setFieldValue([...currentFiles, file]);
+        close();
+        return Promise.resolve();
+      },
+      closeModal: () => {
+        close();
+      },
+      allowedExtensions: field.questionOptions.allowedFileTypes,
+      multipleFiles: field.questionOptions.allowMultiple,
+      collectDescription: true,
+    });
+  }, [value, field]);
+
+  const handleRemoveFile = useCallback(
+    (index: number) => {
+      const buffer = [...value];
+      const attachment = buffer[index];
+      if (attachment.uuid) {
+        buffer[index] = {
+          ...attachment,
+          voided: true,
+        };
+      } else {
+        buffer.splice(index, 1);
+      }
+      setFieldValue(buffer);
+    },
+    [value],
+  );
+
+  if (isViewMode(sessionMode) && !value) {
+    return (
+      <FieldValueView label={t(field.label)} value={null} conceptName={field.meta.concept?.display} isInline={false} />
+    );
+  }
+
+  return (
+    <div>
+      <div className={classNames(styles.label, 'cds--label')}>
+        <FieldLabel field={field} />
+      </div>
+      {!isViewMode(sessionMode) && (
+        <div>
+          <Button
+            className={styles.uploadButton}
+            kind={isTablet ? 'ghost' : 'tertiary'}
+            onClick={showImageCaptureModal}
+            renderIcon={(props) => <Add size={16} {...props} />}>
+            {field.questionOptions.buttonLabel ? t(field.questionOptions.buttonLabel) : t('addFile', 'Add file')}
+          </Button>
+        </div>
+      )}
+      <div className={styles.thumbnailGrid}>
+        {value &&
+          value
+            .filter((file) => !file.voided)
+            .map((file, index) => (
+              <div className={styles.thumbnailContainer}>
+                <FileThumbnail
+                  title={file.fileName}
+                  src={file.base64Content}
+                  bytesContentFamily={file.fileType}
+                  removeFileCb={() => handleRemoveFile(index)}
+                />
+              </div>
+            ))}
+      </div>
+    </div>
+  );
+};
+
+export default File;

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

@@ -0,0 +1,21 @@
+@use '@carbon/layout';
+
+.label {
+  font-weight: 600;
+  line-height: 30px;
+  color: #000000;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 7rem);
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+}
+
+.thumbnailContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}

package/src/components/inputs/fixed-value/fixed-value.component.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react';
+import { isEmpty } from '../../../validators/form-validator';
+import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+
+const FixedValue: React.FC<FormFieldInputProps> = ({ field, setFieldValue }) => {
+  const context = useFormProviderContext();
+
+  useEffect(() => {
+    if (!field.meta?.initialValue?.omrsObject && !isEmpty(field.meta.fixedValue)) {
+      setFieldValue(field.meta.fixedValue);
+      context.formFieldAdapters[field.type].transformFieldValue(field, field.meta.fixedValue, context);
+    }
+  }, []);
+
+  return <></>;
+};
+
+export default FixedValue;

package/src/components/inputs/markdown/markdown-wrapper.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MarkdownWrapper: React.FC<{ markdown: string }> = ({ markdown }) => {
+  return (
+    <ReactMarkdown
+      children={markdown}
+      unwrapDisallowed={true}
+      allowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'strong', 'em']}
+    />
+  );
+};
+
+export default MarkdownWrapper;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type FormFieldInputProps } from '../../../types';
+import MarkdownWrapper from './markdown-wrapper.component';
+
+const Markdown: React.FC<FormFieldInputProps> = ({ field }) => {
+  const { t } = useTranslation();
+
+  const translateMarkdown = (markdownContent: string | string[]): string => {
+    if (Array.isArray(markdownContent)) {
+      return markdownContent
+        .map((line) => t(line, { defaultValue: line, interpolation: { escapeValue: false } }))
+        .join('\n\n');
+    }
+
+    return typeof markdownContent === 'string'
+      ? t(markdownContent, { defaultValue: markdownContent, interpolation: { escapeValue: false } })
+      : markdownContent;
+  };
+
+  return !field.isHidden && <MarkdownWrapper markdown={translateMarkdown(field.value)} />;
+};
+
+export default Markdown;

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Checkbox, CheckboxGroup, FilterableMultiSelect, Layer, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { ValueEmpty } from '../../value/value.component';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './multi-select.scss';
+
+const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const { layoutType, sessionMode, workspaceLayout, formFieldAdapters } = useFormProviderContext();
+  const [counter, setCounter] = useState(0);
+  const [initiallyCheckedQuestionItems, setInitiallyCheckedQuestionItems] = useState([]);
+  const isFirstRender = useRef(true);
+
+  const selectOptions = field.questionOptions.answers
+    .filter((answer) => !answer.isHidden)
+    .map((answer, index) => ({
+      id: `${field.id}-${answer.concept}`,
+      concept: answer.concept,
+      label: t(answer.label),
+      key: index,
+      disabled: answer.disable?.isDisabled,
+      readonly: isTrue(field.readonly),
+    }));
+
+  const initiallySelectedQuestionItems = useMemo(() => {
+    if (value?.length && counter < 1) {
+      setCounter(counter + 1);
+      return selectOptions.filter((item) => value?.includes(item.concept));
+    }
+    return [];
+  }, [value]);
+
+  const handleSelectItemsChange = ({ selectedItems }) => {
+    const value = selectedItems.map((selectedItem) => {
+      return selectedItem.concept;
+    });
+    setFieldValue(value);
+  };
+
+  const isSearchable = useMemo(
+    () => isTrue(field.questionOptions.isCheckboxSearchable),
+    [field.questionOptions.isCheckboxSearchable],
+  );
+
+  useEffect(() => {
+    if (isFirstRender.current && counter === 1) {
+      setInitiallyCheckedQuestionItems(initiallySelectedQuestionItems.map((item) => item.concept));
+      isFirstRender.current = false;
+    }
+  }, [initiallySelectedQuestionItems, isFirstRender]);
+
+  const handleSelectCheckbox = (val) => {
+    const value = val.concept;
+    const isChecked = initiallyCheckedQuestionItems.some((item) => item === value);
+    let updatedItems;
+    if (isChecked) {
+      updatedItems = initiallyCheckedQuestionItems.filter((item) => item !== value);
+    } else {
+      updatedItems = initiallyCheckedQuestionItems.some((val) => val === value)
+        ? initiallyCheckedQuestionItems.filter((item) => item !== value)
+        : [...initiallyCheckedQuestionItems, value];
+    }
+    setInitiallyCheckedQuestionItems(updatedItems);
+    setFieldValue(updatedItems);
+  };
+
+  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' ? (
+    <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 && (
+      <>
+        <div className={styles.boldedLabel}>
+          <Layer>
+            {isSearchable ? (
+              <FilterableMultiSelect
+                disabled={field.isDisabled}
+                id={field.id}
+                initialSelectedItems={initiallySelectedQuestionItems}
+                invalid={errors.length > 0}
+                invalidText={errors[0]?.message}
+                items={selectOptions}
+                itemToString={(item) => (item ? t(item.label) : ' ')}
+                key={field.id}
+                onChange={handleSelectItemsChange}
+                placeholder={t('search', 'Search') + '...'}
+                readOnly={isTrue(field.readonly)}
+                titleText={<FieldLabel field={field} />}
+                warn={warnings.length > 0}
+                warnText={warnings[0]?.message}
+              />
+            ) : (
+              <CheckboxGroup legendText={<FieldLabel field={field} />} readOnly={isTrue(field.readonly)}>
+                {selectOptions?.map((value, index) => {
+                  return (
+                    <Checkbox
+                      className={styles.checkbox}
+                      checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
+                      disabled={value.disabled}
+                      id={`${field.id}-${value.concept}`}
+                      key={`${field.id}-${value.concept}-${index}`}
+                      labelText={t(value.label)}
+                      name={value.concept}
+                      onChange={() => handleSelectCheckbox(value)}
+                      readOnly={isTrue(field.readonly)}
+                    />
+                  );
+                })}
+              </CheckboxGroup>
+            )}
+          </Layer>
+        </div>
+        {isSearchable && (
+          <div className={styles.selectionDisplay}>
+            {value?.length ? (
+              <div className={styles.tagContainer}>
+                {formFieldAdapters[field.type]?.getDisplayValue(field, value)?.map((displayValue, index) => (
+                  <Tag key={index} type="cool-gray">
+                    {t(displayValue)}
+                  </Tag>
+                ))}
+              </div>
+            ) : (
+              <ValueEmpty />
+            )}
+          </div>
+        )}
+      </>
+    )
+  );
+};
+
+export default MultiSelect;

package/src/components/inputs/multi-select/multi-select.scss

@@ -0,0 +1,25 @@
+@use '@carbon/colors';
+
+.boldedLabel label,
+legend > span {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.selectionDisplay {
+  margin-top: 0.125rem;
+}
+
+.tagContainer {
+  margin: 0.5rem 0;
+}
+
+.checkbox label {
+  color: colors.$black-100 !important;
+  font-weight: 500 !important;
+}