@kenyaemr/esm-service-queues-app 7.0.2-pre.65

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { VisitTypeSelector } from './visit-type-selector.component';
+import { render, screen } from '@testing-library/react';
+import { mockPatient, mockVisitTypes } from '__mocks__';
+import { useVisitTypes } from '@openmrs/esm-framework';
+
+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.queryByRole('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();
+  });
+});

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

@@ -0,0 +1,178 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { InlineNotification, Select, SelectItem, RadioButtonGroup, RadioButton, TextInput } from '@carbon/react';
+import { useQueueLocations } from '../hooks/useQueueLocations';
+import styles from './visit-form-queue-fields.scss';
+import { useConfig, ResponsiveWrapper, useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useQueues } from '../../hooks/useQueues';
+import { type ConfigObject } from '../../config-schema';
+import { SelectSkeleton } from '@carbon/react';
+import { RadioButtonSkeleton } from '@carbon/react';
+import { AddPatientToQueueContext } from '../patient-search.workspace';
+
+export interface VisitFormQueueFieldsProps {
+  setFormFields: (fields: {
+    queueLocation: string;
+    service: string;
+    status: string;
+    priority: string;
+    sortWeight: number;
+  }) => void;
+}
+
+const VisitFormQueueFields: React.FC<VisitFormQueueFieldsProps> = (props) => {
+  const { setFormFields } = props;
+  const { t } = useTranslation();
+  const { queueLocations, isLoading: isLoadingQueueLocations } = useQueueLocations();
+  const { sessionLocation } = useSession();
+  const config = useConfig<ConfigObject>();
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState(queueLocations[0]?.id);
+  const { queues, isLoading: isLoadingQueues } = useQueues(selectedQueueLocation);
+  const defaultStatus = config.concepts.defaultStatusConceptUuid;
+  const [selectedService, setSelectedService] = useState('');
+  const { currentServiceQueueUuid } = useContext(AddPatientToQueueContext);
+  const [priority, setPriority] = useState(config.concepts.defaultPriorityConceptUuid);
+  const priorities = queues.find((q) => q.uuid === selectedService)?.allowedPriorities ?? [];
+  const [sortWeight, setSortWeight] = useState(0);
+
+  useEffect(() => {
+    if (priority === config.concepts.emergencyPriorityConceptUuid) {
+      setSortWeight(1);
+    }
+  }, [priority]);
+
+  useEffect(() => {
+    if (currentServiceQueueUuid) {
+      setSelectedService(currentServiceQueueUuid);
+    }
+  }, [queues]);
+
+  useEffect(() => {
+    if (queueLocations.map((l) => l.id).includes(sessionLocation.uuid)) {
+      setSelectedQueueLocation(sessionLocation.uuid);
+    }
+  }, [queueLocations]);
+
+  useEffect(() => {
+    setFormFields({
+      queueLocation: selectedQueueLocation,
+      service: selectedService,
+      status: defaultStatus,
+      priority,
+      sortWeight,
+    });
+  }, [selectedQueueLocation, selectedService, defaultStatus, priority, sortWeight]);
+
+  return (
+    <div>
+      <section className={styles.section}>
+        <div className={styles.sectionTitle}>{t('queueLocation', 'Queue location')}</div>
+        <ResponsiveWrapper>
+          {isLoadingQueueLocations ? (
+            <SelectSkeleton />
+          ) : (
+            <Select
+              labelText={t('selectQueueLocation', 'Select a queue location')}
+              id="queueLocation"
+              name="queueLocation"
+              invalidText="Required"
+              value={selectedQueueLocation}
+              onChange={(event) => setSelectedQueueLocation(event.target.value)}>
+              {!selectedQueueLocation ? (
+                <SelectItem text={t('selectQueueLocation', 'Select a queue location')} value="" />
+              ) : null}
+              {queueLocations?.length > 0 &&
+                queueLocations.map((location) => (
+                  <SelectItem key={location.id} text={location.name} value={location.id}>
+                    {location.name}
+                  </SelectItem>
+                ))}
+            </Select>
+          )}
+        </ResponsiveWrapper>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionTitle}>{t('service', 'Service')}</div>
+        {isLoadingQueues ? (
+          <SelectSkeleton />
+        ) : !queues?.length ? (
+          <InlineNotification
+            className={styles.inlineNotification}
+            kind={'error'}
+            lowContrast
+            subtitle={t('configureServices', 'Please configure services to continue.')}
+            title={t('noServicesConfigured', 'No services configured')}
+          />
+        ) : (
+          <Select
+            labelText={t('selectService', 'Select a service')}
+            id="service"
+            name="service"
+            invalidText="Required"
+            value={selectedService}
+            onChange={(event) => setSelectedService(event.target.value)}>
+            {!selectedService ? <SelectItem text={t('selectQueueService', 'Select a queue service')} value="" /> : null}
+            {queues?.length > 0 &&
+              queues.map((service) => (
+                <SelectItem key={service.uuid} text={service.name} value={service.uuid}>
+                  {service.name}
+                </SelectItem>
+              ))}
+          </Select>
+        )}
+      </section>
+
+      {/* Status section of the form would go here; historical version of this code can be found at
+          https://github.com/openmrs/openmrs-esm-patient-management/blame/6c31e5ff2579fc89c2fd0d12c13510a1f2e913e0/packages/esm-service-queues-app/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.component.tsx#L115 */}
+
+      {selectedService ? (
+        <section className={styles.section}>
+          <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+          {isLoadingQueues ? (
+            <RadioButtonGroup>
+              <RadioButtonSkeleton />
+              <RadioButtonSkeleton />
+              <RadioButtonSkeleton />
+            </RadioButtonGroup>
+          ) : !priorities?.length ? (
+            <InlineNotification
+              className={styles.inlineNotification}
+              kind={'error'}
+              lowContrast
+              title={t('noPrioritiesForServiceTitle', 'No priorities available')}>
+              {t(
+                'noPrioritiesForService',
+                'The selected service does not have any allowed priorities. This is an error in configuration. Please contact your system administrator.',
+              )}
+            </InlineNotification>
+          ) : priorities.length ? (
+            <RadioButtonGroup
+              className={styles.radioButtonWrapper}
+              name="priority"
+              id="priority"
+              defaultSelected={config.concepts.defaultPriorityConceptUuid}
+              onChange={(uuid) => setPriority(uuid)}>
+              {priorities.map(({ uuid, display }) => (
+                <RadioButton key={uuid} labelText={display} value={uuid} />
+              ))}
+            </RadioButtonGroup>
+          ) : null}
+        </section>
+      ) : null}
+
+      <section className={classNames(styles.section, styles.sectionHidden)}>
+        <TextInput
+          type="number"
+          id="sortWeight"
+          name="sortWeight"
+          labelText={t('sortWeight', 'Sort weight')}
+          value={sortWeight}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default VisitFormQueueFields;

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.scss

@@ -0,0 +1,19 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/styles/scss/spacing';
+
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.section {
+  margin: layout.$spacing-07 layout.$spacing-05 0;
+}
+
+.sectionHidden {
+  display: none;
+}

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import VisitFormQueueFields from './visit-form-queue-fields.component';
+import { defineConfigSchema, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { configSchema } from '../../config-schema';
+
+defineConfigSchema('@openmrs/esm-service-queues-app', configSchema);
+
+const mockUseLayoutType = useLayoutType as jest.Mock;
+mockUseLayoutType.mockReturnValue('small-desktop');
+
+const mockUseSession = useSession as jest.Mock;
+mockUseSession.mockReturnValue({ sessionLocation: { uuid: '1' } });
+
+jest.mock('../hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: [{ id: '1', name: 'Location 1' }],
+  })),
+}));
+
+jest.mock('../../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({
+      queues: [
+        {
+          uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+          name: 'Service 1',
+          allowedPriorities: [{ uuid: '197852c7-5fd4-4b33-89cc-7bae6848c65a', display: 'High' }],
+          allowedStatuses: [{ uuid: '176052c7-5fd4-4b33-89cc-7bae6848c65a', display: 'In Progress' }],
+        },
+      ],
+    }),
+  };
+});
+
+describe('VisitFormQueueFields', () => {
+  it('renders the form fields and returns the set values', async () => {
+    const user = userEvent.setup();
+    const setFormFields = jest.fn();
+    render(<VisitFormQueueFields setFormFields={setFormFields} />);
+
+    expect(screen.getByLabelText('Select a queue location')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select a service')).toBeInTheDocument();
+    expect(screen.getByLabelText('Sort weight')).toBeInTheDocument();
+
+    const serviceSelect = screen.getByLabelText('Select a service').closest('select');
+    await user.selectOptions(serviceSelect, 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90');
+
+    expect(screen.getByText('Priority')).toBeInTheDocument();
+    expect(screen.getByText('High')).toBeInTheDocument();
+
+    expect(setFormFields).toHaveBeenCalledWith({
+      queueLocation: '1',
+      service: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+      // The status and priority are the defaults that come from the config schema.
+      // They are selected even though they are not 'allowed' for the queue.
+      status: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
+      priority: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+      sortWeight: 0,
+    });
+  });
+});

package/src/queue-entry-table-components/edit-entry.scss

@@ -0,0 +1,14 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.editIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: var(--omrs-color-brand-orange);
+    color: var(--omrs-color-brand-orange);
+  }
+}
+
+.editIcon:hover {
+  background-color: transparent;
+}

package/src/queue-entry-table-components/queue-duration.component.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+
+interface QueueDurationProps {
+  startedAt: Date;
+  endedAt?: Date;
+}
+
+const QueueDuration: React.FC<QueueDurationProps> = ({ startedAt, endedAt }) => {
+  return <DurationString startedAt={startedAt} endedAt={endedAt} />;
+};
+
+function DurationString({ startedAt, endedAt }: { startedAt: Date; endedAt: Date }) {
+  const { t } = useTranslation();
+
+  const endedTime = endedAt ? dayjs(endedAt) : dayjs();
+  const [currentTime, setCurrentTime] = useState(dayjs());
+
+  useEffect(() => {
+    const handle = setInterval(() => setCurrentTime(dayjs()), 60000);
+    return () => clearInterval(handle);
+  }, []);
+
+  const totalMinutes = dayjs(endedTime ?? currentTime).diff(startedAt, 'minutes');
+  const hours = Math.trunc(totalMinutes / 60);
+  const minutes = Math.trunc(totalMinutes % 60);
+
+  return (
+    <span>
+      {Math.abs(hours) > 0
+        ? t('hourAndMinuteFormatted', '{{hours}} hour(s) and {{minutes}} minute(s)', {
+            hours,
+            minutes: Math.abs(minutes),
+          })
+        : t('minuteFormatted', '{{minutes}} minute(s)', { minutes })}
+    </span>
+  );
+}
+
+export default QueueDuration;

package/src/queue-entry-table-components/queue-priority.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DefinitionTooltip, Tag } from '@carbon/react';
+import styles from './queue-priority.scss';
+import { type PriorityConfig } from '../config-schema';
+import { type Concept } from '../types';
+import classNames from 'classnames';
+
+interface QueuePriorityProps {
+  priority: Concept;
+  priorityComment?: string;
+  priorityConfigs: PriorityConfig[];
+}
+
+const QueuePriority: React.FC<QueuePriorityProps> = ({ priority, priorityComment, priorityConfigs }) => {
+  const priorityConfig = priorityConfigs.find((c) => c.conceptUuid === priority.uuid);
+  return (
+    <>
+      {priorityComment ? (
+        <DefinitionTooltip className={styles.tooltip} align="bottom-left" definition={priorityComment}>
+          <Tag
+            role="tooltip"
+            className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
+            type={priorityConfig?.color}>
+            {priority.display}
+          </Tag>
+        </DefinitionTooltip>
+      ) : (
+        <Tag
+          className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
+          type={priorityConfig?.color}>
+          {priority.display}
+        </Tag>
+      )}
+    </>
+  );
+};
+
+export default QueuePriority;

package/src/queue-entry-table-components/queue-priority.scss

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tag {
+  margin: 0.25rem 0;
+  white-space: nowrap;
+}
+
+.bold {
+  font-weight: bold;
+}

package/src/queue-entry-table-components/queue-status.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Group, InProgress } from '@carbon/react/icons';
+import styles from '../queue-table/queue-table.scss';
+import { type Concept, type Queue } from '../types';
+import { type StatusConfig } from '../config-schema';
+
+interface QueueStatusProps {
+  status: Concept;
+  queue?: Queue;
+  statusConfigs: StatusConfig[];
+}
+
+const QueueStatus: React.FC<QueueStatusProps> = ({ status, queue, statusConfigs }) => {
+  const statusConfig = statusConfigs?.find((c) => c.conceptUuid === status.uuid);
+  return (
+    <span className={styles.statusContainer}>
+      <StatusIcon statusConfig={statusConfig} />
+      <span>
+        {status.display}
+        {queue ? ' - ' + queue.display : ''}
+      </span>
+    </span>
+  );
+};
+
+interface StatusIconProps {
+  statusConfig?: StatusConfig;
+}
+
+const StatusIcon: React.FC<StatusIconProps> = ({ statusConfig }) => {
+  return (
+    <span>
+      {statusConfig?.iconComponent === 'InProgress' && <InProgress size={16} />}
+      {statusConfig?.iconComponent === 'Group' && <Group size={16} />}
+    </span>
+  );
+};
+
+export default QueueStatus;

package/src/queue-entry-table-components/transition-entry.component.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { mutate } from 'swr';
+import { Button } from '@carbon/react';
+import { Notification } from '@carbon/react/icons';
+import { restBaseUrl, showModal, showNotification } from '@openmrs/esm-framework';
+import { type MappedVisitQueueEntry, serveQueueEntry } from '../active-visits/active-visits-table.resource';
+import styles from './transition-entry.scss';
+
+interface TransitionMenuProps {
+  queueEntry: MappedVisitQueueEntry;
+}
+
+const TransitionMenu: React.FC<TransitionMenuProps> = ({ queueEntry }) => {
+  const { t } = useTranslation();
+
+  const launchTransitionPriorityModal = useCallback(() => {
+    serveQueueEntry(queueEntry?.queue.name, queueEntry?.visitQueueNumber, 'calling').then(
+      ({ status }) => {
+        if (status === 200) {
+          mutate(`${restBaseUrl}/queueutil/assignticket`);
+        }
+      },
+      (error) => {
+        showNotification({
+          title: t('errorPostingToScreen', 'Error posting to screen'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+    const dispose = showModal('transition-queue-entry-status-modal', {
+      closeModal: () => dispose(),
+      queueEntry,
+    });
+  }, [queueEntry]);
+
+  return (
+    <Button
+      renderIcon={(props) => <Notification size={16} {...props} />}
+      className={classNames(styles.callBtn, {
+        [styles.requeueIcon]: queueEntry?.priorityComment === 'Requeued',
+        [styles.normalIcon]: queueEntry?.priorityComment !== 'Requeued',
+      })}
+      onClick={launchTransitionPriorityModal}
+      iconDescription={t('call', 'Call')}
+      hasIconOnly
+      tooltipAlignment="end"
+    />
+  );
+};
+
+export default TransitionMenu;

package/src/queue-entry-table-components/transition-entry.scss

@@ -0,0 +1,22 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.callBtn:hover {
+  background-color: transparent;
+}
+
+.requeueIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: $danger;
+    color: $danger;
+  }
+}
+
+.normalIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: var(--omrs-color-success);
+  }
+}