@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/visit-context/retrospective-data-date-time-picker/retrospective-date-time-picker.component.tsx

@@ -0,0 +1,140 @@
+import { SelectItem, TimePickerSelect, TimePicker, Checkbox } from '@carbon/react';
+import { OpenmrsDatePicker, ResponsiveWrapper, useFeatureFlag, type Visit } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { type Control, Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import styles from './restrospective-date-time-picker.scss';
+
+type FormValues = {
+  retrospectiveDate: Date;
+  retrospectiveTime: string;
+  retrospectiveTimeFormat: string;
+};
+
+type RetrospectiveDateTimePickerProps = {
+  patientUuid: string;
+  visitContext: Visit;
+  control?: Control<FormValues>;
+  onChange?: (data: FormValues) => void;
+};
+
+const RetrospectiveDateTimePicker = ({
+  visitContext,
+  control: propControl,
+  onChange,
+}: RetrospectiveDateTimePickerProps) => {
+  const { t } = useTranslation();
+  const isRdeEnabled = useFeatureFlag('rde');
+
+  const isActiveVisit = !Boolean(visitContext && visitContext.stopDatetime);
+  const maxDate = visitContext?.stopDatetime;
+  const minDate = visitContext?.startDatetime;
+
+  const [manuallyEnableDateTimePicker, setManuallyEnableDateTimePicker] = useState<boolean>(false);
+
+  // disable inputs if user has not manually enabled the picker.
+  const disableInputs = isActiveVisit && !manuallyEnableDateTimePicker;
+
+  // the below form is for when the caller does not pass a control prop
+  // when this happens we assume the caller passed an onChange function which we
+  // call to supply the data
+  const form = useForm<FormValues>();
+
+  const retrospectiveDate = form.watch('retrospectiveDate');
+  const retrospectiveTime = form.watch('retrospectiveTime');
+  const retrospectiveTimeFormat = form.watch('retrospectiveTimeFormat');
+
+  const control = propControl || form.control;
+
+  useEffect(() => {
+    if (onChange) {
+      onChange({
+        retrospectiveDate: retrospectiveDate,
+        retrospectiveTime: retrospectiveTime,
+        retrospectiveTimeFormat: retrospectiveTimeFormat,
+      });
+    }
+  }, [onChange, retrospectiveDate, retrospectiveTime, retrospectiveTimeFormat]);
+
+  if (!isRdeEnabled) {
+    return null;
+  }
+
+  return (
+    <section className={styles.wrapper}>
+      <h4 className={styles.heading}>Encounter time</h4>
+      {isActiveVisit && (
+        <Checkbox
+          checked={manuallyEnableDateTimePicker}
+          className={styles.checkbox}
+          id={'enable-date-time-picker'}
+          labelText={t('enable', 'Enable')}
+          onChange={(_, { checked, id }) => {
+            setManuallyEnableDateTimePicker(checked);
+          }}
+        />
+      )}
+      <div className={styles.pickerWrapper}>
+        <Controller
+          name={'retrospectiveDate'}
+          control={control}
+          render={({ field, fieldState }) => (
+            <ResponsiveWrapper>
+              <OpenmrsDatePicker
+                {...field}
+                id={'retrospective-date-picker-input'}
+                labelText={t('date', 'Date')}
+                invalid={Boolean(fieldState?.error?.message)}
+                invalidText={fieldState?.error?.message}
+                isDisabled={disableInputs}
+                maxDate={maxDate}
+                minDate={minDate}
+                className={styles.datePicker}
+              />
+            </ResponsiveWrapper>
+          )}
+        />
+        <ResponsiveWrapper>
+          <Controller
+            name={'retrospectiveTime'}
+            control={control}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <div className={styles.timePickerWrapper}>
+                <TimePicker
+                  id={'retrospective-time-picker-input'}
+                  labelText={t('time', 'Time')}
+                  onBlur={onBlur}
+                  onChange={(event) => onChange(event.target.value)}
+                  pattern="^(0[1-9]|1[0-2]):([0-5][0-9])$"
+                  value={value}
+                  disabled={disableInputs}
+                  className={styles.timePicker}
+                >
+                  <Controller
+                    name={'retrospectiveTimeFormat'}
+                    control={control}
+                    render={({ field: { onChange, value } }) => (
+                      <TimePickerSelect
+                        aria-label={t('timeFormat ', 'Time Format')}
+                        id={`am-pm-input`}
+                        onChange={(event) => onChange(event.target.value)}
+                        value={value}
+                        disabled={disableInputs}
+                      >
+                        <SelectItem value="" text="" />
+                        <SelectItem value="AM" text={t('AM', 'AM')} />
+                        <SelectItem value="PM" text={t('PM', 'PM')} />
+                      </TimePickerSelect>
+                    )}
+                  />
+                </TimePicker>
+              </div>
+            )}
+          />
+        </ResponsiveWrapper>
+      </div>
+    </section>
+  );
+};
+
+export default RetrospectiveDateTimePicker;

package/src/visit/visits-widget/visit-context/visit-context-header.extension.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@carbon/react';
+import { showModal, useFeatureFlag } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './visit-context-header.scss';
+import VisitContextInfo from './visit-context-info.component';
+import { usePatientChartStore, useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+
+interface VisitContextHeaderProps {
+  patientUuid: string;
+}
+
+/**
+ * The visit context header displays the currently select visit context in the patient chart store.
+ * When creating encounters (ex: visit notes, order entry, vitals), they are associated
+ * with the visit in context.
+ *
+ * This extension uses the patient chart store and should only be shown within the patient chart.
+ * It does not render when mounted outside the patient chart.
+ */
+const VisitContextHeader: React.FC<VisitContextHeaderProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { systemVisitEnabled } = useSystemVisitSetting();
+  const isRdeEnabled = useFeatureFlag('rde');
+
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const isActiveVisit = Boolean(visitContext && !visitContext.stopDatetime);
+
+  const showVisitContextHeader = systemVisitEnabled && isRdeEnabled && visitContext;
+
+  const openVisitSwitcherModal = () => {
+    const dispose = showModal('visit-context-switcher', {
+      patientUuid,
+      closeModal: () => dispose(),
+      size: 'sm',
+    });
+  };
+
+  if (!showVisitContextHeader) {
+    return null;
+  }
+  return (
+    <div
+      className={classNames(styles.visitContextHeader, isActiveVisit ? styles.activeVisit : styles.retroactiveVisit)}
+    >
+      <div className={styles.addingTo}>{t('addingToVisit', 'Adding to:')}</div>
+      <div className={styles.visitType}>{visitContext.visitType?.display}</div>
+      <div className={styles.changeVisitButton}>
+        <Button kind="ghost" size="sm" onClick={openVisitSwitcherModal}>
+          {t('change', 'Change')}
+        </Button>
+      </div>
+      <div className={styles.visitInfo}>
+        <VisitContextInfo visit={visitContext} />
+      </div>
+    </div>
+  );
+};
+
+export default VisitContextHeader;

package/src/visit/visits-widget/visit-context/visit-context-header.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+
+.visitContextHeader {
+  display: grid;
+  column-gap: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  font-size: layout.$spacing-04;
+  grid-template-areas:
+    'addingTo    visitType    changeVisitButton'
+    'addingTo    visitInfo    visitInfo';
+  grid-template-columns: max-content 1fr min-content;
+}
+
+.activeVisit {
+  background-color: #defbe6;
+}
+
+.retroactiveVisit {
+  background-color: #f4f4f4;
+}
+
+.addingTo {
+  grid-area: addingTo;
+}
+
+.visitType {
+  font-size: 14px;
+  font-weight: 600;
+  grid-area: visitType;
+}
+
+.changeVisitButton {
+  grid-area: changeVisitButton;
+  :global(.cds--btn) {
+    min-height: 0;
+    padding: 0;
+  }
+}
+
+.visitInfo {
+  grid-area: visitInfo;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}

package/src/visit/visits-widget/visit-context/visit-context-header.test.tsx

@@ -0,0 +1,59 @@
+import { usePatientChartStore, useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { mockCurrentVisit } from '__mocks__';
+import React from 'react';
+import VisitContextHeader from './visit-context-header.extension';
+import { mockPatient } from 'tools';
+
+const mockUsePatientChartStore = vi.mocked(usePatientChartStore);
+const mockUseSystemVisitSetting = vi.mocked(useSystemVisitSetting);
+
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
+  usePatientChartStore: vi.fn(),
+  useSystemVisitSetting: vi.fn(),
+}));
+
+describe('VisitContextHeader', () => {
+  beforeEach(() => {
+    mockUseSystemVisitSetting.mockReturnValue({
+      systemVisitEnabled: true,
+      errorFetchingSystemVisitSetting: null,
+      isLoadingSystemVisitSetting: false,
+    });
+  });
+
+  it('should not show header if system does not support visits', () => {
+    mockUseSystemVisitSetting.mockReturnValueOnce({
+      systemVisitEnabled: false,
+      errorFetchingSystemVisitSetting: null,
+      isLoadingSystemVisitSetting: false,
+    });
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+      setPatient: vi.fn(),
+      setVisitContext: vi.fn(),
+    });
+
+    render(<VisitContextHeader patientUuid="some-uuid" />);
+    expect(screen.queryByText('Adding to')).not.toBeInTheDocument();
+  });
+
+  it('should show the current visit', () => {
+    mockUsePatientChartStore.mockReturnValue({
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: mockCurrentVisit,
+      mutateVisitContext: null,
+      setPatient: vi.fn(),
+      setVisitContext: vi.fn(),
+    });
+
+    render(<VisitContextHeader patientUuid={mockPatient.id} />);
+    expect(screen.getByText(/Adding to/i)).toBeInTheDocument();
+    expect(screen.getByText(mockCurrentVisit.visitType.display)).toBeInTheDocument();
+  });
+});

package/src/visit/visits-widget/visit-context/visit-context-info.component.tsx

@@ -0,0 +1,37 @@
+import { Building } from '@carbon/react/icons';
+import { formatDate, parseDate, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './visit-context-info.scss';
+
+interface VisitContextInfoProps {
+  visit: Visit;
+}
+
+const VisitContextInfo: React.FC<VisitContextInfoProps> = ({ visit }) => {
+  const { t } = useTranslation();
+
+  if (!visit) {
+    return null;
+  }
+
+  const isActive = !visit.stopDatetime;
+
+  return (
+    <div className={styles.visitContextInfoContainer}>
+      <span>
+        {isActive
+          ? t('currentActiveVisit', 'Current active visit')
+          : t('fromDateToDate', '{{fromDate}} - {{toDate}}', {
+              fromDate: formatDate(parseDate(visit.startDatetime), { time: false }),
+              toDate: formatDate(parseDate(visit.stopDatetime), { time: false }),
+            })}
+      </span>
+      <span className={styles.separator}>&middot;</span>
+      <Building />
+      <span className={styles.visitLocation}>{visit.location.display}</span>
+    </div>
+  );
+};
+
+export default VisitContextInfo;

package/src/visit/visits-widget/visit-context/visit-context-info.scss

@@ -0,0 +1,12 @@
+@use '@carbon/layout';
+
+.visitContextInfoContainer {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.separator,
+.visitLocation {
+  margin: layout.$spacing-02;
+}

package/src/visit/visits-widget/visit-context/visit-context-switcher.modal.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { Button, ModalBody, ModalFooter, ModalHeader, RadioButton, InlineLoading, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ErrorState,
+  launchWorkspace2,
+  OpenmrsDatePicker,
+  useDebounce,
+  useOnVisible,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { invalidateVisitByUuid, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { useInfiniteVisits } from '../visit.resource';
+import VisitContextInfo from './visit-context-info.component';
+import styles from './visit-context-switcher.scss';
+import { useSWRConfig } from 'swr';
+
+interface VisitContextSwitcherProps {
+  patientUuid: string;
+  onAfterVisitSelected?(); // optional callback to run after visit is selected
+  closeModal();
+}
+
+const VisitContextSwitcherModal: React.FC<VisitContextSwitcherProps> = ({
+  patientUuid,
+  closeModal,
+  onAfterVisitSelected,
+}) => {
+  const { t } = useTranslation();
+  const [maxStartDate, setMaxStartDate] = useState(new Date());
+  const maxStartDateDebounced = useDebounce(maxStartDate);
+
+  const rep = 'custom:(uuid,display,visitType,startDatetime,stopDatetime,location,patient)';
+  const { visits, isLoading, error, hasMore, loadMore } = useInfiniteVisits(
+    patientUuid,
+    { toStartDate: dayjs(maxStartDateDebounced).endOf('day').toISOString() },
+    rep,
+  );
+  const { visitContext, setVisitContext } = usePatientChartStore(patientUuid);
+  const [selectedVisitUuid, setSelectedVisitUuid] = useState<string>(visitContext?.uuid ?? null);
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const onScrollToEnd = useCallback(() => {
+    if (hasMore) {
+      loadMore();
+    }
+  }, [hasMore, loadMore]);
+  const ref = useOnVisible(onScrollToEnd);
+
+  const openStartVisitWorkspace = () => {
+    closeModal();
+    launchWorkspace2('start-visit-workspace-form', {
+      openedFrom: 'visit-context-switcher',
+    });
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('selectAVisit', 'Select a visit')}>
+        <OpenmrsDatePicker
+          id="visit-context-switcher-date-picker"
+          className={styles.datepicker}
+          labelText={t('showVisitWithStartDateOnOrPriorTo', 'Show visit with start date on or prior to:')}
+          maxDate={Date.now()}
+          value={maxStartDate}
+          onChange={setMaxStartDate}
+        />
+      </ModalHeader>
+      <ModalBody>
+        {error ? (
+          <ErrorState headerTitle={t('visits', 'visits')} error={error} />
+        ) : visits?.length === 0 ? (
+          <Tile className={styles.tile}>
+            <div className={styles.tileContent}>
+              <p className={styles.content}>{t('noVisitsToDisplay', 'No visits to display')}</p>
+              <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+            </div>
+          </Tile>
+        ) : (
+          <div>
+            {visits?.map((visit) => {
+              return (
+                <VisitCardRow
+                  key={visit.uuid}
+                  visit={visit}
+                  setSelectedVisit={setSelectedVisitUuid}
+                  isSelected={selectedVisitUuid === visit.uuid}
+                />
+              );
+            })}
+            {isLoading ? <InlineLoading description={t('loading', 'Loading')} /> : <span ref={ref} />}
+          </div>
+        )}
+      </ModalBody>
+      <div className={styles.createVisitButtonContainer}>
+        <Button kind="ghost" size="sm" onClick={openStartVisitWorkspace}>
+          {t('createNewVisit', 'Create new visit...')}
+        </Button>
+      </div>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          disabled={selectedVisitUuid === null || isLoading}
+          onClick={() => {
+            const selectedVisit = visits.find((v) => v.uuid === selectedVisitUuid);
+            const mutateVisitContext = () => invalidateVisitByUuid(globalMutate, selectedVisit.uuid);
+            setVisitContext(selectedVisit, mutateVisitContext);
+            onAfterVisitSelected?.();
+            closeModal();
+          }}
+        >
+          {t('continue', 'Continue')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+interface VisitCardRowProps {
+  visit: Visit;
+  isSelected: boolean;
+  setSelectedVisit(visitUuid: string);
+}
+
+/**
+ * A clickable row within the visit context switcher to select a visit. This
+ * has slightly different UX than a regular radio button, as the entire card
+ * (not just the radio button and the label) is clickable
+ */
+const VisitCardRow: React.FC<VisitCardRowProps> = ({ visit, setSelectedVisit: setSelected, isSelected }) => {
+  const isActive = !visit.stopDatetime;
+
+  return (
+    <div
+      className={classNames(
+        styles.visitCardRow,
+        isActive ? styles.activeVisit : styles.retroactiveVisit,
+        isSelected ? styles.isSelected : '',
+      )}
+    >
+      <div className={styles.visitInfoContainer}>
+        <div className={styles.visitType}>{visit.visitType.display}</div>
+        <div className={styles.visitInfo}>
+          <VisitContextInfo visit={visit} />
+        </div>
+      </div>
+      <div className={styles.visitCardRowRadioButton}>
+        <RadioButton
+          className={styles.visitRow}
+          id={`visit-card-row-${visit.uuid}`}
+          value={visit.uuid}
+          checked={isSelected}
+          labelText={visit.visitType.display}
+          onChange={(value) => setSelected(String(value))}
+        />
+      </div>
+      <button className={styles.visitCardRowButton} onClick={() => setSelected(visit.uuid)}></button>
+    </div>
+  );
+};
+
+export default VisitContextSwitcherModal;

package/src/visit/visits-widget/visit-context/visit-context-switcher.scss

@@ -0,0 +1,83 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.visitCardRow {
+  display: flex;
+  position: relative;
+  border: solid 1px #e0e0e0;
+  padding: layout.$spacing-03;
+
+  &.activeVisit {
+    background-color: #defbe6;
+    &:hover {
+      background-color: #b6f6c8;
+    }
+  }
+
+  &.retroactiveVisit {
+    background-color: #f4f4f4;
+    &:hover {
+      background-color: #e5e5e5;
+    }
+  }
+}
+
+.visitInfoContainer {
+  flex: 1;
+}
+
+.visitType {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.visitCardRowButton {
+  border: none;
+  padding: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.visitCardRowRadioButton {
+  display: flex;
+  align-items: center;
+}
+
+.createVisitButtonContainer {
+  padding: layout.$spacing-05;
+}
+
+.datepicker {
+  padding-top: layout.$spacing-05;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  margin-top: layout.$spacing-07;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}

package/src/visit/visits-widget/visit-context/visit-context-switcher.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSystemVisitSetting } from '@openmrs/esm-patient-common-lib';
+import { mockCurrentVisit, mockVisit2, mockVisit3 } from '__mocks__';
+import { useInfiniteVisits } from '../visit.resource';
+import VisitContextSwitcherModal from './visit-context-switcher.modal';
+
+const mockUseSystemVisitSetting = vi.fn(useSystemVisitSetting).mockReturnValue({
+  errorFetchingSystemVisitSetting: null,
+  isLoadingSystemVisitSetting: false,
+  systemVisitEnabled: true,
+});
+
+const mockUseInfiniteVisits = vi.fn(useInfiniteVisits).mockReturnValue({
+  visits: [mockCurrentVisit, mockVisit2, mockVisit3],
+  error: null,
+  mutate: vi.fn(),
+  isValidating: false,
+  isLoading: false,
+  totalCount: 3,
+  hasMore: false,
+  loadMore: vi.fn(),
+  nextUri: '',
+});
+
+vi.mock('@openmrs/esm-patient-common-lib/src/useSystemVisitSetting', () => ({
+  useSystemVisitSetting: () => mockUseSystemVisitSetting(),
+}));
+
+vi.mock('../visit.resource', () => ({
+  useInfiniteVisits: () => mockUseInfiniteVisits('some-uuid'),
+}));
+
+const mockSetVisitContext = vi.fn();
+vi.mock('@openmrs/esm-patient-common-lib', async () => ({
+  ...((await vi.importActual('@openmrs/esm-patient-common-lib')) as object),
+  usePatientChartStore: vi.fn(() => ({
+    visitContext: null,
+    setVisitContext: mockSetVisitContext,
+  })),
+}));
+
+describe('VisitContextSwitcherModal', () => {
+  it('should display a list of past visits', () => {
+    mockUseSystemVisitSetting.mockReturnValueOnce({
+      systemVisitEnabled: false,
+      errorFetchingSystemVisitSetting: null,
+      isLoadingSystemVisitSetting: false,
+    });
+    renderVisitContextSwitcherModal();
+    // location
+    expect(screen.getAllByText('Registration Desk')).toHaveLength(3);
+    // visit type - only check the visitType div elements
+    expect(screen.getAllByText('Facility Visit', { selector: '.visitType' })).toHaveLength(3);
+  });
+
+  it('should call setVisitContext when continue button is clicked with selected visit', async () => {
+    const user = userEvent.setup();
+
+    renderVisitContextSwitcherModal();
+
+    // Select a visit by clicking on the first visit card
+    const firstVisitRadio = screen.getAllByRole('radio', { name: /Facility Visit/ })[0];
+    await user.click(firstVisitRadio);
+
+    // Click the continue button
+    const continueButton = screen.getByRole('button', { name: /continue/i });
+    await user.click(continueButton);
+
+    // Verify setVisitContext was called with the selected visit
+    expect(mockSetVisitContext).toHaveBeenCalledWith(mockCurrentVisit, expect.any(Function));
+  });
+});
+
+function renderVisitContextSwitcherModal() {
+  render(<VisitContextSwitcherModal patientUuid="some-uuid" closeModal={vi.fn()} />);
+}