@kenyaemr/esm-service-queues-app 8.1.1-pre.124 → 8.1.2-pre.152

package/src/patient-search/visit-form/visit-form.component.tsx

@@ -1,337 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import dayjs from 'dayjs';
-import {
-  Button,
-  ButtonSet,
-  ContentSwitcher,
-  DatePicker,
-  DatePickerInput,
-  Form,
-  FormGroup,
-  InlineNotification,
-  RadioButton,
-  RadioButtonGroup,
-  Row,
-  Select,
-  SelectItem,
-  Stack,
-  Switch,
-  TimePicker,
-  TimePickerSelect,
-} from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import {
-  ExtensionSlot,
-  ResponsiveWrapper,
-  saveVisit,
-  showSnackbar,
-  toDateObjectStrict,
-  toOmrsIsoString,
-  useConfig,
-  useLayoutType,
-  useLocations,
-  useSession,
-} from '@openmrs/esm-framework';
-import { RecommendedVisitTypeSelector, VisitTypeSelector } from './visit-type-selector.component';
-import { postQueueEntry } from '../../active-visits/active-visits-table.resource';
-import { type amPm, convertTime12to24 } from '../../helpers/time-helpers';
-import { useActivePatientEnrollment } from '../hooks/useActivePatientEnrollment';
-import { type NewVisitPayload, type PatientProgram } from '../../types';
-import styles from './visit-form.scss';
-import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
-import isEmpty from 'lodash-es/isEmpty';
-import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
-import { type ConfigObject } from '../../config-schema';
-import { datePickerFormat, datePickerPlaceHolder } from '../../constants';
-import VisitFormQueueFields from '../visit-form-queue-fields/visit-form-queue-fields.component';
-
-interface VisitFormProps {
-  patientUuid: string;
-  closeWorkspace: () => void;
-}
-
-const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) => {
-  const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-  const locations = useLocations();
-  const sessionUser = useSession();
-  const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultLoginLocation();
-
-  const config = useConfig<ConfigObject>();
-  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(config.showRecommendedVisitTypeTab ? 0 : 1);
-  const [isMissingVisitType, setIsMissingVisitType] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [timeFormat, setTimeFormat] = useState<amPm>(new Date().getHours() >= 12 ? 'PM' : 'AM');
-  const [visitDate, setVisitDate] = useState(new Date());
-  const [visitTime, setVisitTime] = useState(dayjs(new Date()).format('hh:mm'));
-  const state = useMemo(() => ({ patientUuid }), [patientUuid]);
-  const [ignoreChanges, setIgnoreChanges] = useState(true);
-  const { activePatientEnrollment } = useActivePatientEnrollment(patientUuid);
-  const [enrollment, setEnrollment] = useState<PatientProgram>(activePatientEnrollment[0]);
-  const { mutateQueueEntries } = useMutateQueueEntries();
-  const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
-  const [selectedLocation, setSelectedLocation] = useState('');
-  const [visitType, setVisitType] = useState('');
-  const [{ service, priority, status, sortWeight, queueLocation }, setVisitFormFields] = useState({
-    service: null,
-    priority: null,
-    status: null,
-    sortWeight: null,
-    queueLocation: null,
-  });
-
-  useEffect(() => {
-    if (locations?.length && sessionUser) {
-      setSelectedLocation(sessionUser?.sessionLocation?.uuid);
-    } else if (!loadingDefaultFacility && defaultFacility) {
-      setSelectedLocation(defaultFacility?.uuid);
-    }
-  }, [locations, sessionUser, loadingDefaultFacility]);
-
-  const handleSubmit = useCallback(
-    (event) => {
-      event.preventDefault();
-
-      if (!visitType) {
-        setIsMissingVisitType(true);
-        return;
-      }
-
-      setIsSubmitting(true);
-
-      const [hours, minutes] = convertTime12to24(visitTime, timeFormat);
-
-      const payload: NewVisitPayload = {
-        patient: patientUuid,
-        startDatetime: toDateObjectStrict(
-          toOmrsIsoString(
-            new Date(dayjs(visitDate).year(), dayjs(visitDate).month(), dayjs(visitDate).date(), hours, minutes),
-          ),
-        ),
-        visitType: visitType,
-        location: selectedLocation,
-        attributes: [],
-      };
-
-      const abortController = new AbortController();
-
-      saveVisit(payload, abortController).then((response) => {
-        // add new queue entry if visit created successfully
-        postQueueEntry(
-          response.data.uuid,
-          service,
-          patientUuid,
-          priority,
-          status,
-          sortWeight,
-          queueLocation,
-          visitQueueNumberAttributeUuid,
-        )
-          .then(() => {
-            showSnackbar({
-              kind: 'success',
-              isLowContrast: true,
-              title: t('startAVisit', 'Start a visit'),
-              subtitle: t(
-                'startVisitQueueSuccessfully',
-                'Patient has been added to active visits list and queue.',
-                `${hours} : ${minutes}`,
-              ),
-            });
-            closeWorkspace();
-            setIsSubmitting(false);
-            mutateQueueEntries();
-          })
-          .catch((error) => {
-            showSnackbar({
-              title: t('queueEntryError', 'Error adding patient to the queue'),
-              kind: 'error',
-              subtitle: error?.message,
-            });
-            setIsSubmitting(false);
-          })
-          .catch((error) => {
-            showSnackbar({
-              title: t('startVisitError', 'Error starting visit'),
-              kind: 'error',
-              subtitle: error?.message,
-            });
-            setIsSubmitting(false);
-          });
-      });
-    },
-    [
-      closeWorkspace,
-      mutateQueueEntries,
-      patientUuid,
-      selectedLocation,
-      t,
-      timeFormat,
-      visitDate,
-      visitQueueNumberAttributeUuid,
-      visitTime,
-      visitType,
-    ],
-  );
-
-  const handleOnChange = useCallback(() => {
-    setIgnoreChanges((prevState) => !prevState);
-  }, []);
-
-  return (
-    <Form className={styles.form} onChange={handleOnChange} onSubmit={handleSubmit}>
-      <div>
-        {isTablet && (
-          <Row className={styles.headerGridRow}>
-            <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={state} />
-          </Row>
-        )}
-        <Stack gap={8} className={styles.container}>
-          <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('dateAndTimeOfVisit', 'Date and time of visit')}</div>
-            <div className={styles.dateTimeSection}>
-              <DatePicker
-                dateFormat={datePickerFormat}
-                datePickerType="single"
-                id="visitDate"
-                style={{ paddingBottom: '1rem' }}
-                maxDate={new Date().toISOString()}
-                onChange={([date]) => setVisitDate(date)}
-                value={visitDate}>
-                <DatePickerInput
-                  id="visitStartDateInput"
-                  labelText={t('date', 'Date')}
-                  placeholder={datePickerPlaceHolder}
-                  style={{ width: '100%' }}
-                />
-              </DatePicker>
-              <ResponsiveWrapper>
-                <TimePicker
-                  id="visitStartTime"
-                  labelText={t('time', 'Time')}
-                  onChange={(event) => setVisitTime(event.target.value as amPm)}
-                  pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
-                  style={{ marginLeft: '0.125rem', flex: 'none' }}
-                  value={visitTime}>
-                  <TimePickerSelect
-                    id="visitStartTimeSelect"
-                    onChange={(event) => setTimeFormat(event.target.value as amPm)}
-                    value={timeFormat}
-                    labelText={t('time', 'Time')}
-                    aria-label={t('time', 'Time')}>
-                    <SelectItem value="AM" text="AM" />
-                    <SelectItem value="PM" text="PM" />
-                  </TimePickerSelect>
-                </TimePicker>
-              </ResponsiveWrapper>
-            </div>
-          </section>
-
-          <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('facility', 'Facility')}</div>
-            <Select
-              labelText={t('selectFacility', 'Select a facility')}
-              id="location"
-              invalidText="Required"
-              value={selectedLocation}
-              defaultSelected={selectedLocation}
-              onChange={(event) => setSelectedLocation(event.target.value)}>
-              {!selectedLocation ? <SelectItem text={t('selectOption', 'Select an option')} value="" /> : null}
-              {!isEmpty(defaultFacility) ? (
-                <SelectItem key={defaultFacility?.uuid} text={defaultFacility?.display} value={defaultFacility?.uuid}>
-                  {defaultFacility?.display}
-                </SelectItem>
-              ) : locations?.length > 0 ? (
-                locations.map((location) => (
-                  <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
-                    {location.display}
-                  </SelectItem>
-                ))
-              ) : null}
-            </Select>
-          </section>
-
-          {config.showRecommendedVisitTypeTab && (
-            <section>
-              <div className={styles.sectionTitle}>{t('program', 'Program')}</div>
-              <FormGroup legendText={t('selectProgramType', 'Select program type')}>
-                <RadioButtonGroup
-                  defaultSelected={enrollment?.program?.uuid}
-                  orientation="vertical"
-                  onChange={(uuid) =>
-                    setEnrollment(activePatientEnrollment.find(({ program }) => program.uuid === uuid))
-                  }
-                  name="program-type-radio-group"
-                  valueSelected="default-selected">
-                  {activePatientEnrollment.map(({ uuid, display, program }) => (
-                    <RadioButton
-                      key={uuid}
-                      className={styles.radioButton}
-                      id={uuid}
-                      labelText={display}
-                      value={program.uuid}
-                    />
-                  ))}
-                </RadioButtonGroup>
-              </FormGroup>
-            </section>
-          )}
-          <section>
-            <div className={styles.sectionTitle}>{t('visitType', 'Visit Type')}</div>
-            {config.showRecommendedVisitTypeTab && (
-              <ContentSwitcher
-                selectedIndex={contentSwitcherIndex}
-                className={styles.contentSwitcher}
-                onChange={({ index }) => setContentSwitcherIndex(index)}>
-                <Switch name="recommended" text={t('recommended', 'Recommended')} />
-                <Switch name="all" text={t('all', 'All')} />
-              </ContentSwitcher>
-            )}
-            {config.showRecommendedVisitTypeTab && contentSwitcherIndex === 0 && (
-              <RecommendedVisitTypeSelector
-                onChange={(visitType) => {
-                  setVisitType(visitType);
-                  setIsMissingVisitType(false);
-                }}
-                patientUuid={patientUuid}
-                patientProgram={enrollment}
-                locationUuid={selectedLocation}
-              />
-            )}
-            {(!config.showRecommendedVisitTypeTab || contentSwitcherIndex === 1) && (
-              <VisitTypeSelector
-                onChange={(visitType) => {
-                  setVisitType(visitType);
-                  setIsMissingVisitType(false);
-                }}
-              />
-            )}
-          </section>
-          {isMissingVisitType && (
-            <section>
-              <InlineNotification
-                style={{ margin: '0', minWidth: '100%' }}
-                kind="error"
-                lowContrast={true}
-                title={t('missingVisitType', 'Missing visit type')}
-                subtitle={t('selectVisitType', 'Please select a Visit Type')}
-              />
-            </section>
-          )}
-
-          <VisitFormQueueFields setFormFields={setVisitFormFields} />
-        </Stack>
-      </div>
-      <ButtonSet className={isTablet ? styles.tabletButtons : styles.desktopButtons}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-          {t('discard', 'Discard')}
-        </Button>
-        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
-          {t('startVisit', 'Start visit')}
-        </Button>
-      </ButtonSet>
-    </Form>
-  );
-};
-
-export default VisitForm;

package/src/patient-search/visit-form/visit-type-selector.component.tsx

@@ -1,153 +0,0 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import classNames from 'classnames';
-import isEmpty from 'lodash-es/isEmpty';
-import { useTranslation } from 'react-i18next';
-import {
-  InlineNotification,
-  Layer,
-  RadioButton,
-  RadioButtonGroup,
-  Search,
-  StructuredListSkeleton,
-  Tile,
-} from '@carbon/react';
-import { ResponsiveWrapper, useDebounce, useLayoutType, useVisitTypes, type VisitType } from '@openmrs/esm-framework';
-import EmptyDataIllustration from '../empty-data-illustration.component';
-import styles from './visit-type-selector.scss';
-import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
-import { type PatientProgram } from '../../types';
-
-export interface VisitTypeSelectorProps {
-  onChange: (event) => void;
-}
-
-export const VisitTypeSelector: React.FC<VisitTypeSelectorProps> = ({ onChange }) => {
-  const allVisitTypes = useVisitTypes();
-
-  return (
-    <div>
-      {allVisitTypes.length == 0 ? (
-        <StructuredListSkeleton />
-      ) : (
-        <VisitTypeSelectorPresentation visitTypes={allVisitTypes} onChange={onChange} />
-      )}
-    </div>
-  );
-};
-
-export interface RecommendedVisitTypeSelectorProps {
-  onChange: (event) => void;
-  patientUuid: string;
-  patientProgram: PatientProgram;
-  locationUuid: string;
-}
-
-/** Recommended visits are specfic to a patient, patient program, and location. */
-export const RecommendedVisitTypeSelector: React.FC<RecommendedVisitTypeSelectorProps> = ({
-  onChange,
-  patientUuid,
-  patientProgram,
-  locationUuid,
-}) => {
-  const { t } = useTranslation();
-  const { recommendedVisitTypes, error, isLoading } = useRecommendedVisitTypes(
-    patientUuid,
-    patientProgram?.uuid,
-    patientProgram?.program?.uuid,
-    locationUuid,
-  );
-
-  return (
-    <div style={{ marginTop: '0.625rem' }}>
-      {isLoading ? (
-        <StructuredListSkeleton />
-      ) : (
-        <VisitTypeSelectorPresentation onChange={onChange} visitTypes={recommendedVisitTypes} />
-      )}
-      {error && (
-        <InlineNotification
-          kind="error"
-          title={t('failedToLoadRecommendedVisitTypes', 'Failed to load recommended visit types')}></InlineNotification>
-      )}
-    </div>
-  );
-};
-
-interface VisitTypeSelectorPresentationProps {
-  onChange: (event) => void;
-  visitTypes: VisitType[];
-}
-
-const MAX_RESULTS = 5;
-
-const VisitTypeSelectorPresentation: React.FC<VisitTypeSelectorPresentationProps> = ({ visitTypes, onChange }) => {
-  const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
-  const [selectedVisitType, setSelectedVisitType] = useState<string>();
-
-  const results = useMemo(() => {
-    if (!isEmpty(debouncedSearchTerm)) {
-      return visitTypes.filter(
-        (visitType) => visitType.display.toLowerCase().search(debouncedSearchTerm.toLowerCase()) !== -1,
-      );
-    } else {
-      return visitTypes;
-    }
-  }, [debouncedSearchTerm, visitTypes]);
-
-  const truncatedResults = results.slice(0, MAX_RESULTS);
-
-  useEffect(() => {
-    if (results.length > 0) {
-      onChange(results[0].uuid);
-      setSelectedVisitType(results[0].uuid);
-    }
-  }, [results]);
-
-  return (
-    <div
-      className={classNames(styles.visitTypeOverviewWrapper, {
-        [styles.tablet]: isTablet,
-        [styles.desktop]: !isTablet,
-      })}>
-      {truncatedResults.length < visitTypes.length ? (
-        <ResponsiveWrapper>
-          <Search
-            onChange={(event) => setSearchTerm(event.target.value)}
-            placeholder={t('searchForAVisitType', 'Search for a visit type')}
-            labelText=""
-          />
-        </ResponsiveWrapper>
-      ) : null}
-      {truncatedResults.length ? (
-        <RadioButtonGroup
-          className={styles.radioButtonGroup}
-          defaultSelected={results[0].uuid}
-          orientation="vertical"
-          onChange={(visitType) => {
-            setSelectedVisitType(visitType);
-            onChange(visitType);
-          }}
-          name="radio-button-group"
-          valueSelected={selectedVisitType}>
-          {truncatedResults.map(({ uuid, display, name }) => (
-            <RadioButton key={uuid} className={styles.radioButton} id={name} labelText={display} value={uuid} />
-          ))}
-          {/* TODO: This is supposed to paginate. Right now it just shows the user a truncated list
-                with no indication that the list is truncated. */}
-        </RadioButtonGroup>
-      ) : (
-        <Layer>
-          <Tile className={styles.tile}>
-            <EmptyDataIllustration />
-            <p className={styles.content}>
-              {t('noVisitTypesMatchingSearch', 'There are no visit types matching this search text')}
-            </p>
-          </Tile>
-        </Layer>
-      )}
-    </div>
-  );
-};

package/src/patient-search/visit-form/visit-type-selector.scss

@@ -1,100 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.visitTypeOverviewWrapper {
-  margin: layout.$spacing-05 0;
-  border: 0.0625rem solid $grey-2;
-}
-
-.tablet {
-  background-color: $ui-02;
-}
-
-.desktop {
-  background-color: $ui-01;
-
-  .paginationContainer div {
-    background-color: $ui-01;
-  }
-}
-
-.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
-  position: relative;
-}
-
-.visitTypeOverviewWrapper div:nth-child(3) span * {
-  display: none;
-}
-
-.radioButtonGroup {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: layout.$spacing-03;
-  min-height: layout.$spacing-10;
-  width: 100%;
-  @include type.type-style('body-compact-01');
-}
-
-.radioButton {
-  padding: layout.$spacing-02 layout.$spacing-05;
-  margin: layout.$spacing-03 0;
-}
-
-.content {
-  @include type.type-style('heading-compact-01');
-  color: $text-02;
-  margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-03;
-}
-
-.desktopHeading {
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-  }
-}
-
-.tabletHeading {
-  h4 {
-    @include type.type-style('heading-03');
-    color: $text-02;
-  }
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-  margin-bottom: layout.$spacing-05;
-
-  h4:after {
-    content: '';
-    display: block;
-    width: layout.$spacing-07;
-    padding-top: 0.188rem;
-    border-bottom: 0.375rem solid var(--brand-03);
-  }
-}
-
-.heading:after {
-  content: '';
-  display: block;
-  width: layout.$spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid var(--brand-03);
-}
-
-.tile {
-  text-align: center;
-  border: 1px solid $ui-03;
-}
-
-// Overriding styles for RTL support
-html[dir='rtl'] {
-  .desktopHeading,
-  .tabletHeading {
-    text-align: right;
-  }
-}

package/src/patient-search/visit-form/visit-type-selector.test.tsx

@@ -1,84 +0,0 @@
-/* eslint-disable testing-library/no-node-access */
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
-import { mockVisitTypes } from '__mocks__';
-import { useVisitTypes } from '@openmrs/esm-framework';
-import { VisitTypeSelector } from './visit-type-selector.component';
-
-const mockUseVisitTypes = jest.mocked(useVisitTypes);
-
-describe('VisitTypeSelector', () => {
-  beforeEach(() => {
-    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
-  });
-
-  it('renders visit types with no search bar if there are 5 or fewer', () => {
-    const fewVisitTypes = mockVisitTypes.slice(0, 3);
-    mockUseVisitTypes.mockReturnValue(fewVisitTypes);
-    render(<VisitTypeSelector onChange={() => {}} />);
-
-    expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
-
-    fewVisitTypes.forEach((visitType) => {
-      const radioButton = screen.getByLabelText(visitType.display);
-      expect(radioButton).toBeInTheDocument();
-    });
-  });
-
-  it('renders the first 5 visit types with a search bar if there are more than 5', () => {
-    render(<VisitTypeSelector onChange={() => {}} />);
-
-    expect(screen.getByRole('searchbox')).toBeInTheDocument();
-
-    mockVisitTypes.slice(0, 5).forEach((visitType) => {
-      const radioButton = screen.getByLabelText(visitType.display);
-      expect(radioButton).toBeInTheDocument();
-    });
-  });
-
-  it('filters by search input and calls onChange', async () => {
-    const user = userEvent.setup();
-
-    const mockOnChange = jest.fn();
-    render(<VisitTypeSelector onChange={mockOnChange} />);
-
-    const searchInput = screen.getByRole('searchbox').closest('input');
-    await user.type(searchInput, 'hiv');
-
-    expect(searchInput.value).toBe('hiv');
-    expect(screen.getByLabelText('HIV Return Visit')).toBeInTheDocument();
-    expect(screen.getByLabelText('HIV Initial Visit')).toBeInTheDocument();
-    expect(screen.queryByLabelText('Outpatient Visit')).not.toBeInTheDocument();
-    expect(screen.queryByLabelText('Diabetes Clinic Visit')).not.toBeInTheDocument();
-
-    expect(mockOnChange).toHaveBeenLastCalledWith(
-      mockVisitTypes.filter((vt) => vt.display == 'HIV Return Visit')[0].uuid,
-    );
-  });
-
-  it('calls onChange when a visit type is selected', async () => {
-    const user = userEvent.setup();
-
-    const mockOnChange = jest.fn();
-    render(<VisitTypeSelector onChange={mockOnChange} />);
-
-    const radioButton = screen.getByLabelText(mockVisitTypes[1].display).closest('input');
-    await user.click(radioButton);
-    expect(radioButton).toBeChecked();
-    expect(mockOnChange).toHaveBeenLastCalledWith(mockVisitTypes[1].uuid);
-  });
-
-  it('allows changing the search input if no results are returned from a search', async () => {
-    const user = userEvent.setup();
-
-    render(<VisitTypeSelector onChange={() => {}} />);
-
-    const searchInput: HTMLInputElement = screen.getByRole('searchbox');
-    await user.type(searchInput, 'asdfasdf');
-
-    const searchInputAfter: HTMLInputElement = screen.getByRole('searchbox');
-    expect(searchInputAfter).toBeInTheDocument();
-    expect(screen.getByText(/no visit types/i)).toBeInTheDocument();
-  });
-});