@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/components/registration/start-visit-form/start-visit-workspace/location-selector.component.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash-es/isEmpty';
+import { ComboBox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type Control, Controller } from 'react-hook-form';
+import {
+  type Location,
+  type OpenmrsResource,
+  useConfig,
+  useFeatureFlag,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
+import { type VisitFormData } from './visit-form.resource';
+import { useDefaultFacilityLocation } from '../hooks/useDefaultFacilityLocation';
+import { useDefaultVisitLocation } from '../hooks/useDefaultVisitLocation';
+import styles from './visit-form.scss';
+import { ExpressWorkflowConfig } from '../../../../config-schema';
+
+interface LocationSelectorProps {
+  control: Control<VisitFormData>;
+}
+
+const LocationSelector: React.FC<LocationSelectorProps> = ({ control }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ExpressWorkflowConfig>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const sessionLocation = useSession().sessionLocation;
+  const isEmrApiModuleInstalled = useFeatureFlag('emrapi-module');
+  const defaultVisitLocation = useDefaultVisitLocation(
+    sessionLocation,
+    config.restrictByVisitLocationTag && isEmrApiModuleInstalled,
+  );
+  const locations = useLocations(
+    config.restrictByVisitLocationTag && isEmrApiModuleInstalled ? 'Visit Location' : null,
+    searchTerm,
+  );
+  const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultFacilityLocation();
+  const disableChangingVisitLocation = config?.disableChangingVisitLocation;
+  const locationsToShow: Array<OpenmrsResource> =
+    !loadingDefaultFacility && !isEmpty(defaultFacility) ? [defaultFacility] : locations ? locations : [];
+
+  const handleSearch = (searchString: string) => {
+    setSearchTerm(searchString);
+  };
+
+  useEffect(() => {
+    if (config.restrictByVisitLocationTag && !isEmrApiModuleInstalled) {
+      console.warn('EMR API module is not installed. Visit location will not be restricted by location tag.');
+    }
+  }, [config.restrictByVisitLocationTag, isEmrApiModuleInstalled]);
+
+  return (
+    <section data-testid="combo">
+      <div className={styles.sectionTitle}>{t('visitLocation', 'Visit Location')}</div>
+      <div className={classNames(styles.selectContainer, styles.sectionField)}>
+        {!disableChangingVisitLocation ? (
+          <Controller
+            control={control}
+            name="visitLocation"
+            render={({ field: { onBlur, onChange, value } }) => (
+              <ComboBox
+                aria-label={t('selectLocation', 'Select a location')}
+                id="location"
+                invalidText={t('required', 'Required')}
+                items={locationsToShow as Array<Location>}
+                itemToString={(location: Location | null) => location?.display ?? ''}
+                onBlur={onBlur}
+                onChange={({ selectedItem }) => onChange(selectedItem)}
+                onInputChange={(searchTerm) => handleSearch(searchTerm)}
+                readOnly={disableChangingVisitLocation}
+                selectedItem={value as Location | null}
+                titleText={t('selectLocation', 'Select a location')}
+              />
+            )}
+          />
+        ) : (
+          <p className={styles.bodyShort02}>{defaultVisitLocation?.display}</p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default LocationSelector;

package/src/components/registration/start-visit-form/start-visit-workspace/recommended-visit-type.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StructuredListSkeleton } from '@carbon/react';
+import { type PatientProgram } from '@openmrs/esm-patient-common-lib';
+import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
+import BaseVisitType from './base-visit-type.component';
+
+interface RecommendedVisitTypeProp {
+  patientUuid: string;
+  patientProgramEnrollment: PatientProgram;
+  locationUuid: string;
+}
+
+const RecommendedVisitType: React.FC<RecommendedVisitTypeProp> = ({
+  patientUuid,
+  patientProgramEnrollment,
+  locationUuid,
+}) => {
+  const { recommendedVisitTypes, isLoading } = useRecommendedVisitTypes(
+    patientUuid,
+    patientProgramEnrollment?.uuid,
+    patientProgramEnrollment?.program?.uuid,
+    locationUuid,
+  );
+
+  return (
+    <div style={{ marginTop: '0.625rem' }}>
+      {isLoading ? <StructuredListSkeleton /> : <BaseVisitType visitTypes={recommendedVisitTypes} />}
+    </div>
+  );
+};
+
+export const MemoizedRecommendedVisitType = React.memo(RecommendedVisitType);

package/src/components/registration/start-visit-form/start-visit-workspace/visit-attribute-type.component.tsx

@@ -0,0 +1,257 @@
+import React, { useEffect, useId, useMemo } from 'react';
+import {
+  Checkbox,
+  NumberInput,
+  Select,
+  SelectItem,
+  SelectSkeleton,
+  TextArea,
+  TextInput,
+  TextInputSkeleton,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Controller, type ControllerFieldState, type ControllerRenderProps, useFormContext } from 'react-hook-form';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from '../hooks/useVisitAttributeType';
+import { type VisitFormData } from './visit-form.resource';
+import styles from './visit-attribute-type.scss';
+import { ExpressWorkflowConfig } from '../../../../config-schema';
+
+interface VisitAttributes {
+  [uuid: string]: string;
+}
+
+interface VisitAttributeTypeFieldsProps {
+  setErrorFetchingResources: React.Dispatch<
+    React.SetStateAction<{
+      blockSavingForm: boolean;
+    }>
+  >;
+}
+
+/**
+ * Evaluates a given expression using the provided visitAttributes.
+ *
+ * @param {string} expression - The expression to be evaluated. This should be a string of JavaScript code.
+ * @param {VisitAttributes} visitAttributes - An object containing visit attributes which will be used in the evaluation of the expression.
+ *
+ * @returns {boolean} - The boolean value of the result of the evaluated expression.
+ *
+ */
+function evaluateExpression(expression: string, visitAttributes: VisitAttributes) {
+  const func = new Function('visitAttributes', `return ${expression};`);
+
+  const result = func(visitAttributes);
+
+  return Boolean(result);
+}
+
+const VisitAttributeTypeFields: React.FC<VisitAttributeTypeFieldsProps> = ({ setErrorFetchingResources }) => {
+  const { visitAttributeTypes } = useConfig<ExpressWorkflowConfig>();
+  const { control, getValues } = useFormContext<VisitFormData>();
+
+  if (visitAttributeTypes?.length) {
+    return (
+      <>
+        {visitAttributeTypes.map((attributeType) => {
+          const { visitAttributes } = getValues();
+
+          const showAttributeType = attributeType?.showWhenExpression
+            ? evaluateExpression(attributeType?.showWhenExpression, visitAttributes)
+            : true;
+
+          return (
+            showAttributeType && (
+              <Controller
+                key={attributeType.uuid}
+                name={`visitAttributes.${attributeType.uuid}`}
+                control={control}
+                render={({ field, fieldState }) => (
+                  <AttributeTypeField
+                    key={attributeType.uuid}
+                    attributeType={attributeType}
+                    setErrorFetchingResources={setErrorFetchingResources}
+                    fieldProps={field}
+                    fieldState={fieldState}
+                  />
+                )}
+              />
+            )
+          );
+        })}
+      </>
+    );
+  }
+
+  return null;
+};
+
+interface AttributeTypeFieldProps {
+  fieldProps: ControllerRenderProps<VisitFormData, `visitAttributes.${string}`>;
+  fieldState: ControllerFieldState;
+  attributeType: {
+    uuid: string;
+    required: boolean;
+  };
+  setErrorFetchingResources: React.Dispatch<
+    React.SetStateAction<{
+      blockSavingForm: boolean;
+    }>
+  >;
+}
+
+const AttributeTypeField: React.FC<AttributeTypeFieldProps> = ({
+  attributeType,
+  setErrorFetchingResources,
+  fieldProps,
+  fieldState,
+}) => {
+  const { uuid, required } = attributeType;
+  const { data, isLoading, error: errorFetchingVisitAttributeType } = useVisitAttributeType(uuid);
+  const {
+    answers,
+    isLoading: isLoadingAnswers,
+    error: errorFetchingVisitAttributeAnswers,
+  } = useConceptAnswersForVisitAttributeType(data?.datatypeConfig ?? null);
+  const { t } = useTranslation();
+  const baseId = useId();
+  const displayText = data?.display?.trim() || data?.name?.trim() || '--';
+  const labelText = !required ? `${displayText} (${t('optional', 'optional')})` : displayText;
+
+  const {
+    formState: { errors },
+  } = useFormContext<VisitFormData>();
+
+  useEffect(() => {
+    if (errorFetchingVisitAttributeType || errorFetchingVisitAttributeAnswers) {
+      setErrorFetchingResources((prev) => ({
+        blockSavingForm: prev?.blockSavingForm || required,
+      }));
+    }
+  }, [errorFetchingVisitAttributeAnswers, errorFetchingVisitAttributeType, required, setErrorFetchingResources]);
+
+  const fieldToRender = useMemo(() => {
+    if (isLoading) {
+      return <></>;
+    }
+
+    if (errorFetchingVisitAttributeType) {
+      return null;
+    }
+
+    switch (data?.datatypeClassname) {
+      case 'org.openmrs.customdatatype.datatype.ConceptDatatype':
+        if (isLoadingAnswers) {
+          return <SelectSkeleton />;
+        }
+
+        if (errorFetchingVisitAttributeAnswers) {
+          return null;
+        }
+
+        return (
+          <Select
+            id={`select-${baseId}`}
+            {...fieldProps}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}>
+            <SelectItem text={t('selectAnOption', 'Select an option')} value={''} />
+            {(answers ?? []).map((ans, indx) => (
+              <SelectItem key={indx} text={ans.display} value={ans.uuid} />
+            ))}
+          </Select>
+        );
+      case 'org.openmrs.customdatatype.datatype.FloatDatatype':
+        return (
+          <NumberInput
+            {...fieldProps}
+            id={`number-${baseId}`}
+            label={labelText}
+            hideSteppers
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.FreeTextDatatype':
+        return (
+          <TextInput
+            {...fieldProps}
+            id={`text-${baseId}`}
+            labelText={labelText}
+            placeholder={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype':
+        return (
+          <TextArea
+            {...fieldProps}
+            id={`textarea-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.BooleanDatatype':
+        return (
+          <Checkbox
+            {...fieldProps}
+            id={`checkbox-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      case 'org.openmrs.customdatatype.datatype.DateDatatype':
+        return (
+          <OpenmrsDatePicker
+            {...fieldProps}
+            id={`date-${baseId}`}
+            labelText={labelText}
+            aria-invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+      default:
+        return (
+          <TextInput
+            {...fieldProps}
+            id={`text-${baseId}`}
+            labelText={labelText}
+            invalid={!!fieldState?.error?.message}
+            invalidText={fieldState?.error?.message}
+          />
+        );
+    }
+  }, [
+    isLoading,
+    errorFetchingVisitAttributeType,
+    data?.datatypeClassname,
+    isLoadingAnswers,
+    errorFetchingVisitAttributeAnswers,
+    baseId,
+    fieldProps,
+    labelText,
+    fieldState?.error?.message,
+    t,
+    answers,
+  ]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.visitAttributeField}>
+        <TextInputSkeleton />
+      </div>
+    );
+  }
+
+  if (errorFetchingVisitAttributeType) {
+    return null;
+  }
+
+  return <div className={styles.visitAttributeField}>{fieldToRender}</div>;
+};
+
+export default VisitAttributeTypeFields;

package/src/components/registration/start-visit-form/start-visit-workspace/visit-attribute-type.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.visitAttributeField {
+  margin-bottom: layout.$spacing-05;
+}

package/src/components/registration/start-visit-form/start-visit-workspace/visit-date-time.component.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { type Control, Controller, type FieldPath, get, useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { type amPm } from '@openmrs/esm-patient-common-lib';
+import { OpenmrsDatePicker, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { convertToDate, type VisitFormData } from './visit-form.resource';
+import styles from './visit-form.scss';
+
+const minOf = (...values: Array<number | undefined | null>) => {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  return nums.length ? Math.min(...nums) : undefined;
+};
+
+const maxOf = (...values: Array<number | undefined | null>) => {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  return nums.length ? Math.max(...nums) : undefined;
+};
+
+interface VisitDateTimeSectionProps {
+  control: Control<VisitFormData, any>;
+  earliestStartDate?: number;
+  firstEncounterDateTime: number;
+  lastEncounterDateTime: number;
+}
+
+const VisitDateTimeSection: React.FC<VisitDateTimeSectionProps> = ({
+  control,
+  earliestStartDate,
+  firstEncounterDateTime,
+  lastEncounterDateTime,
+}) => {
+  const { t } = useTranslation();
+  const [
+    visitStatus,
+    visitStartDate,
+    visitStartTime,
+    visitStartTimeFormat,
+    visitStopDate,
+    visitStopTime,
+    visitStopTimeFormat,
+  ] = useWatch({
+    control,
+    name: [
+      'visitStatus',
+      'visitStartDate',
+      'visitStartTime',
+      'visitStartTimeFormat',
+      'visitStopDate',
+      'visitStopTime',
+      'visitStopTimeFormat',
+    ],
+  });
+
+  const hasStopTime = 'past' === visitStatus;
+  const selectedVisitStartDateTime = convertToDate(visitStartDate, visitStartTime, visitStartTimeFormat);
+  const selectedVisitStopDateTime = convertToDate(visitStopDate, visitStopTime, visitStopTimeFormat);
+
+  if (visitStatus === 'new') {
+    return null;
+  }
+
+  return (
+    <section>
+      <div className={styles.sectionTitle}>
+        {visitStatus === 'ongoing'
+          ? t('visitStartDate', 'Visit start date')
+          : t('visitStartAndEndDate', 'Visit start and end date')}
+      </div>
+      <VisitDateTimeField
+        dateField={{ name: 'visitStartDate', label: t('startDate', 'Start date') }}
+        timeField={{ name: 'visitStartTime', label: t('startTime', 'Start time') }}
+        timeFormatField={{ name: 'visitStartTimeFormat', label: t('startTimeFormat', 'Start time format') }}
+        minDate={earliestStartDate}
+        maxDate={minOf(Date.now(), firstEncounterDateTime, selectedVisitStopDateTime?.getTime())}
+      />
+      {hasStopTime && (
+        <VisitDateTimeField
+          dateField={{ name: 'visitStopDate', label: t('endDate', 'End date') }}
+          timeField={{ name: 'visitStopTime', label: t('endTime', 'End time') }}
+          timeFormatField={{ name: 'visitStopTimeFormat', label: t('endTimeFormat', 'End time format') }}
+          minDate={maxOf(lastEncounterDateTime, selectedVisitStartDateTime?.getTime())}
+          maxDate={Date.now()}
+        />
+      )}
+    </section>
+  );
+};
+
+interface Field {
+  name: FieldPath<VisitFormData>;
+  label: string;
+}
+
+interface VisitDateTimeFieldProps {
+  dateField: Field;
+  timeField: Field;
+  timeFormatField: Field;
+  minDate?: dayjs.ConfigType;
+  maxDate?: dayjs.ConfigType;
+  disabled?: boolean;
+}
+
+const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
+  dateField,
+  timeField,
+  timeFormatField,
+  minDate,
+  maxDate,
+  disabled,
+}) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<VisitFormData>();
+  const { t } = useTranslation();
+
+  const minDateObj = minDate ? dayjs(minDate).startOf('day') : null;
+  const maxDateObj = maxDate ? dayjs(maxDate).endOf('day') : null;
+
+  const timeFieldError = get(errors, timeField.name);
+  const timeFormatFieldError = get(errors, timeFormatField.name);
+
+  return (
+    <div className={classNames(styles.dateTimeSection, styles.sectionField)}>
+      <Controller
+        name={dateField.name}
+        control={control}
+        render={({ field, fieldState }) => (
+          <ResponsiveWrapper>
+            <OpenmrsDatePicker
+              {...field}
+              value={field.value as Date}
+              className={styles.datePicker}
+              id={`${dateField.name}Input`}
+              data-testid={`${dateField.name}Input`}
+              maxDate={maxDateObj}
+              minDate={minDateObj}
+              labelText={dateField.label}
+              invalid={Boolean(fieldState?.error?.message)}
+              invalidText={fieldState?.error?.message}
+            />
+          </ResponsiveWrapper>
+        )}
+      />
+      <ResponsiveWrapper>
+        <Controller
+          name={timeField.name}
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <div className={styles.timePickerContainer}>
+              <TimePicker
+                className={styles.timePicker}
+                disabled={disabled}
+                id={timeField.name}
+                invalid={Boolean(timeFieldError?.message)}
+                invalidText={timeFieldError?.message}
+                labelText={timeField.label}
+                onBlur={onBlur}
+                onChange={(event) => onChange(event.target.value)}
+                pattern="^(0[1-9]|1[0-2]):([0-5][0-9])$"
+                value={value as string}>
+                <Controller
+                  name={timeFormatField.name}
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <TimePickerSelect
+                      aria-label={timeFormatField.label}
+                      className={classNames({
+                        [styles.timePickerSelectError]: Boolean(timeFormatFieldError),
+                      })}
+                      disabled={disabled}
+                      id={`${timeFormatField.name}Input`}
+                      onChange={(event) => onChange(event.target.value as amPm)}
+                      value={value as amPm}>
+                      <SelectItem value="AM" text={t('AM', 'AM')} />
+                      <SelectItem value="PM" text={t('PM', 'PM')} />
+                    </TimePickerSelect>
+                  )}
+                />
+              </TimePicker>
+              {timeFormatFieldError && <div className={styles.timerPickerError}>{timeFormatFieldError?.message}</div>}
+            </div>
+          )}
+        />
+      </ResponsiveWrapper>
+    </div>
+  );
+};
+
+export default VisitDateTimeSection;