@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visit-form/location-selector.component.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { isEmpty } from 'lodash-es';
+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 { type ChartConfig } from '../../config-schema';
+import styles from './visit-form.scss';
+
+interface LocationSelectorProps {
+  control: Control<VisitFormData>;
+}
+
+const LocationSelector: React.FC<LocationSelectorProps> = ({ control }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ChartConfig>();
+  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) => {
+    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}
+                itemToString={(location: Location) => location?.display}
+                onBlur={onBlur}
+                onChange={({ selectedItem }) => onChange(selectedItem)}
+                onInputChange={(searchTerm) => handleSearch(searchTerm)}
+                readOnly={disableChangingVisitLocation}
+                selectedItem={value}
+                titleText={t('selectLocation', 'Select a location')}
+              />
+            )}
+          />
+        ) : (
+          <p className={styles.bodyShort02}>{defaultVisitLocation?.display}</p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default LocationSelector;

package/src/visit/visit-form/location-selector.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { vi, describe, it, expect, test, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useForm, FormProvider } from 'react-hook-form';
+import {
+  getDefaultsFromConfigSchema,
+  useConfig,
+  useLocations,
+  useSession,
+  useFeatureFlag,
+} from '@openmrs/esm-framework';
+import { esmPatientChartSchema, type ChartConfig } from '../../config-schema';
+import { mockLocationsResponse, mockSessionDataResponse } from '__mocks__';
+import { type VisitFormData } from './visit-form.resource';
+import { useDefaultFacilityLocation } from '../hooks/useDefaultFacilityLocation';
+import LocationSelector from './location-selector.component';
+
+const mockSession = vi.mocked(useSession);
+const mockUseLocations = vi.mocked(useLocations);
+const mockUseConfig = vi.mocked(useConfig<ChartConfig>);
+const mockUseFeatureFlag = vi.mocked(useFeatureFlag);
+const mockUseDefaultFacilityLocation = vi.mocked(useDefaultFacilityLocation);
+
+mockSession.mockReturnValue(mockSessionDataResponse.data);
+
+beforeEach(() => {
+  mockUseConfig.mockReturnValue({
+    ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+  });
+  mockUseFeatureFlag.mockReturnValue(true);
+});
+
+describe('LocationSelector', () => {
+  it('should render a paragraph with the default visit location when disableChangingVisitLocation is truthy', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      disableChangingVisitLocation: true,
+    });
+
+    renderLocationSelector();
+
+    expect(screen.getByText(/visit location/i)).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    expect(screen.getByRole('paragraph')).toHaveTextContent('Inpatient Ward');
+  });
+
+  it('should render a list of locations to pick from if disableChangingVisitLocation is falsy', () => {
+    renderLocationSelector();
+
+    expect(screen.getByRole('combobox', { name: /select a location/i })).toBeInTheDocument();
+    expect(screen.queryByRole('paragraph')).not.toBeInTheDocument();
+  });
+
+  it('should display session location as the selected location when no locations are available', () => {
+    mockUseLocations.mockReturnValue([]);
+
+    renderLocationSelector();
+
+    expect(screen.getByRole('combobox')).toHaveValue('Test Location');
+  });
+
+  it('should render a list of locations to pick from if locations are available from the backend', async () => {
+    const user = userEvent.setup();
+    mockUseLocations.mockReturnValue(mockLocationsResponse);
+
+    renderLocationSelector();
+
+    const locationSelector = screen.getByRole('combobox');
+    expect(locationSelector).toBeInTheDocument();
+
+    await user.click(locationSelector);
+
+    mockLocationsResponse.forEach((location) => {
+      expect(screen.getByRole('option', { name: location.display })).toBeInTheDocument();
+    });
+  });
+
+  it('should call useLocations with Visit Location restriction when restrictByVisitLocationTag is true and the EMR API module is installed', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      restrictByVisitLocationTag: true,
+    });
+    mockUseFeatureFlag.mockReturnValue(true);
+
+    renderLocationSelector();
+
+    expect(mockUseLocations).toHaveBeenCalledWith('Visit Location', '');
+  });
+
+  it('should not restrict locations by the Visit Location tag when the EMR API module is not installed', () => {
+    const consoleError = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      restrictByVisitLocationTag: true,
+    });
+    mockUseFeatureFlag.mockReturnValue(false);
+
+    renderLocationSelector();
+
+    expect(mockUseLocations).toHaveBeenCalledWith(null, '');
+    consoleError.mockRestore();
+  });
+
+  it('should update the search term incrementally as user types in the combobox', async () => {
+    const user = userEvent.setup();
+    mockUseLocations.mockReturnValue(mockLocationsResponse);
+
+    renderLocationSelector();
+
+    const locationSelector = screen.getByRole('combobox');
+    await user.click(locationSelector);
+    await user.clear(locationSelector);
+    await user.paste('test search');
+
+    expect(mockUseLocations).toHaveBeenCalledWith(null, 'test search');
+  });
+});
+
+function renderLocationSelector(props = {}) {
+  const visitToEdit = {
+    uuid: 'visit-uuid',
+    location: {
+      uuid: 'test-location-uuid',
+      display: 'Test Location',
+    },
+  };
+
+  const App = () => {
+    const methods = useForm<VisitFormData>({
+      mode: 'all',
+      defaultValues: {
+        visitLocation: visitToEdit?.location ?? mockSessionDataResponse.data.sessionLocation ?? {},
+      },
+    });
+
+    return (
+      <FormProvider {...methods}>
+        <LocationSelector control={methods.control} />
+      </FormProvider>
+    );
+  };
+
+  render(<App />);
+}

package/src/visit/visit-form/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/visit/visit-form/visit-attribute-type.component.tsx

@@ -0,0 +1,258 @@
+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 { type ChartConfig } from '../../config-schema';
+import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from '../hooks/useVisitAttributeType';
+import { type VisitFormData } from './visit-form.resource';
+import styles from './visit-attribute-type.scss';
+
+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<ChartConfig>();
+  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);
+  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/visit/visit-form/visit-attribute-type.scss

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