@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/helpers/helpers.ts

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { getGlobalStore } from '@openmrs/esm-framework';
+import type { AppointmentSummary } from '../types';
+
+export const getServiceCountByAppointmentType = (
+  appointmentSummary: Array<AppointmentSummary>,
+  appointmentType: string,
+) => {
+  return appointmentSummary
+    .map((appointment) =>
+      Object.entries(appointment.appointmentCountMap).flatMap((appointment) => appointment[1][appointmentType]),
+    )
+    .flat(1)
+    .reduce((count, val) => count + val, 0);
+};
+
+const initialServiceNameState = { serviceName: localStorage.getItem('queueServiceName') };
+const initialServiceUuidState = { serviceUuid: localStorage.getItem('queueServiceUuid') };
+const intialStatusNameState = { status: '' };
+const initialQueueLocationNameState = { queueLocationName: localStorage.getItem('queueLocationName') };
+const initialQueueLocationUuidState = { queueLocationUuid: localStorage.getItem('queueLocationUuid') };
+const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() };
+const initialPermanentProviderQueueRoomState = {
+  isPermanentProviderQueueRoom: localStorage.getItem('isPermanentProviderQueueRoom'),
+};
+
+export function getSelectedServiceName() {
+  return getGlobalStore<{ serviceName: string }>('queueSelectedServiceName', initialServiceNameState);
+}
+
+export function getSelectedServiceUuid() {
+  return getGlobalStore<{ serviceUuid: string }>('queueSelectedServiceUuid', initialServiceUuidState);
+}
+
+export function getSelectedAppointmentStatus() {
+  return getGlobalStore<{ status: string }>('appointmentSelectedStatus', intialStatusNameState);
+}
+
+export function getSelectedQueueLocationName() {
+  return getGlobalStore<{ queueLocationName: string }>('queueLocationNameSelected', initialQueueLocationNameState);
+}
+
+export function getSelectedQueueLocationUuid() {
+  return getGlobalStore<{ queueLocationUuid: string }>('queueLocationUuidSelected', initialQueueLocationUuidState);
+}
+
+export function getSelectedQueueRoomTimestamp() {
+  return getGlobalStore<{ providerQueueRoomTimestamp: Date }>(
+    'queueProviderRoomTimestamp',
+    initialSelectedQueueRoomTimestamp,
+  );
+}
+
+export function getIsPermanentProviderQueueRoom() {
+  return getGlobalStore<{ isPermanentProviderQueueRoom: string }>(
+    'isPermanentProviderQueueRoom',
+    initialPermanentProviderQueueRoomState,
+  );
+}
+
+export const updateSelectedServiceName = (currentServiceName: string) => {
+  const store = getSelectedServiceName();
+  store.setState({ serviceName: currentServiceName });
+};
+
+export const updateSelectedServiceUuid = (currentServiceUuid: string) => {
+  const store = getSelectedServiceUuid();
+  store.setState({ serviceUuid: currentServiceUuid });
+};
+
+export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string) => {
+  const store = getSelectedAppointmentStatus();
+  store.setState({ status: currentAppointmentStatus });
+};
+
+export const updateSelectedQueueLocationName = (currentLocationName: string) => {
+  const store = getSelectedQueueLocationName();
+  store.setState({ queueLocationName: currentLocationName });
+};
+
+export const updateSelectedQueueLocationUuid = (currentLocationUuid: string) => {
+  const store = getSelectedQueueLocationUuid();
+  store.setState({ queueLocationUuid: currentLocationUuid });
+};
+
+export const updatedSelectedQueueRoomTimestamp = (currentProviderRoomTimestamp: Date) => {
+  const store = getSelectedQueueRoomTimestamp();
+  store.setState({ providerQueueRoomTimestamp: currentProviderRoomTimestamp });
+};
+
+export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQueueRoom) => {
+  const store = getIsPermanentProviderQueueRoom();
+  store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom });
+};
+
+export const useSelectedServiceName = () => {
+  const [currentServiceName, setCurrentServiceName] = useState(initialServiceNameState.serviceName ?? '');
+
+  useEffect(() => {
+    getSelectedServiceName().subscribe(({ serviceName }) => setCurrentServiceName(serviceName));
+  }, []);
+
+  return currentServiceName;
+};
+
+export const useSelectedServiceUuid = () => {
+  const [currentServiceUuid, setCurrentServiceUuid] = useState(initialServiceUuidState.serviceUuid);
+
+  useEffect(() => {
+    getSelectedServiceUuid().subscribe(({ serviceUuid }) => setCurrentServiceUuid(serviceUuid));
+  }, []);
+  return currentServiceUuid;
+};
+
+export const useSelectedAppointmentStatus = () => {
+  const [currentAppointmentStatus, setCurrentAppointmentStatus] = useState(intialStatusNameState.status);
+
+  useEffect(() => {
+    getSelectedAppointmentStatus().subscribe(({ status }) => setCurrentAppointmentStatus(status));
+  }, []);
+  return currentAppointmentStatus;
+};
+
+export const useSelectedQueueLocationName = () => {
+  const [currentQueueLocationName, setCurrentQueueLocationName] = useState(
+    initialQueueLocationNameState.queueLocationName,
+  );
+
+  useEffect(() => {
+    getSelectedQueueLocationName().subscribe(({ queueLocationName }) => setCurrentQueueLocationName(queueLocationName));
+  }, []);
+  return currentQueueLocationName;
+};
+
+export const useSelectedQueueLocationUuid = () => {
+  const [currentQueueLocationUuid, setCurrentQueueLocationUuid] = useState(
+    initialQueueLocationUuidState.queueLocationUuid,
+  );
+
+  useEffect(() => {
+    getSelectedQueueLocationUuid().subscribe(({ queueLocationUuid }) => setCurrentQueueLocationUuid(queueLocationUuid));
+  }, []);
+  return currentQueueLocationUuid;
+};
+
+export const useSelectedProviderRoomTimestamp = () => {
+  const [currentProviderRoomTimestamp, setCurrentProviderRoomTimestamp] = useState(
+    initialSelectedQueueRoomTimestamp.providerQueueRoomTimestamp,
+  );
+
+  useEffect(() => {
+    getSelectedQueueRoomTimestamp().subscribe(({ providerQueueRoomTimestamp }) =>
+      setCurrentProviderRoomTimestamp(providerQueueRoomTimestamp),
+    );
+  }, []);
+  return currentProviderRoomTimestamp;
+};
+
+export const useIsPermanentProviderQueueRoom = () => {
+  const [currentIsPermanentProviderQueueRoom, setCurrentIsPermanentProviderQueueRoom] = useState(
+    initialPermanentProviderQueueRoomState.isPermanentProviderQueueRoom,
+  );
+
+  useEffect(() => {
+    getIsPermanentProviderQueueRoom().subscribe(({ isPermanentProviderQueueRoom }) =>
+      setCurrentIsPermanentProviderQueueRoom(isPermanentProviderQueueRoom),
+    );
+  }, []);
+  return currentIsPermanentProviderQueueRoom;
+};

package/src/helpers/time-helpers.ts

@@ -0,0 +1,15 @@
+export type amPm = 'AM' | 'PM';
+
+export const convertTime12to24 = (time12h, timeFormat: amPm) => {
+  let [hours, minutes] = time12h.split(':');
+
+  if (hours === '12' && timeFormat === 'AM') {
+    hours = '00';
+  }
+
+  if (timeFormat === 'PM') {
+    hours = hours === '12' ? hours : parseInt(hours, 10) + 12;
+  }
+
+  return [hours, minutes];
+};

package/src/home.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ActiveVisitsTable from './active-visits/active-visits-table.component';
+import ActiveVisitsTabs from './active-visits/active-visits-tab.component';
+import ClinicMetrics from './patient-queue-metrics/clinic-metrics.component';
+import { ConfigObject, useConfig } from '@openmrs/esm-framework';
+import PatientQueueHeader from './patient-queue-header/patient-queue-header.component';
+import QueueScreen from './queue-screen/queue-screen.component';
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = (props) => {
+  const config = useConfig() as ConfigObject;
+  const useQueueTableTabs = config.showQueueTableTab;
+  const pathName = window.location.pathname;
+  const activeTicketScreen = pathName.substring(pathName.lastIndexOf('/') + 1);
+
+  if (activeTicketScreen === 'screen') {
+    return <QueueScreen />;
+  }
+  return (
+    <div>
+      <PatientQueueHeader />
+      <ClinicMetrics />
+      {useQueueTableTabs === true ? <ActiveVisitsTabs /> : <ActiveVisitsTable />}
+    </div>
+  );
+};
+
+export default Home;

package/src/home.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Home from './home.component';
+import { useConfig } from '@openmrs/esm-framework';
+
+const mockedUseConfig = useConfig as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(() => ({
+    showQueueTableTab: true,
+    concepts: {
+      visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+  })),
+}));
+
+describe('Home Component', () => {
+  it('renders PatientQueueHeader, ClinicMetrics, and ActiveVisitsTabs when activeTicketScreen is not "screen"', () => {
+    // Mock window.location.pathname
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = { pathname: '/some-path' };
+
+    render(<Home />);
+
+    // Assert that the expected components are rendered
+    expect(screen.getByTestId('patient-queue-header')).toBeInTheDocument();
+    expect(screen.getByTestId('clinic-metrics')).toBeInTheDocument();
+    expect(screen.getByTestId('active-visits-tabs')).toBeInTheDocument();
+
+    // Clean up the mock
+    window.location = originalLocation;
+  });
+
+  it('renders QueueScreen when activeTicketScreen is "screen"', () => {
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = { pathname: '/some-path/screen' };
+
+    render(<Home />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+
+    window.location = originalLocation;
+  });
+
+  it('renders ActiveVisitsTable when showQueueTableTab is false', () => {
+    mockedUseConfig.mockImplementationOnce(() => ({
+      showQueueTableTab: false,
+      concepts: {
+        visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+      },
+    }));
+    render(<Home />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+});

package/src/index.ts

@@ -0,0 +1,100 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from './createDashboardLink';
+import { dashboardMeta } from './dashboard.meta';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const moduleName = '@openmrs/esm-service-queues-app';
+
+const options = {
+  featureName: 'outpatient',
+  moduleName,
+};
+
+export const appointmentsList = getAsyncLifecycle(
+  () => import('./queue-patient-linelists/scheduled-appointments-table.component'),
+  options,
+);
+
+export const queueList = getAsyncLifecycle(
+  () => import('./queue-patient-linelists/queue-services-table.component'),
+  options,
+);
+
+export const outpatientSideNav = getAsyncLifecycle(() => import('./side-menu/side-menu.component'), options);
+
+export const serviceQueuesDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+
+export const homeDashboard = getAsyncLifecycle(() => import('./home.component'), options);
+
+export const editQueueEntryStatusModal = getAsyncLifecycle(
+  () => import('./active-visits/change-status-dialog.component'),
+  {
+    featureName: 'edit queue status',
+    moduleName,
+  },
+);
+
+export const patientInfoBannerSlot = getAsyncLifecycle(() => import('./patient-info/patient-info.component'), {
+  featureName: 'patient info slot',
+  moduleName,
+});
+
+export const addPatientToQueue = getAsyncLifecycle(() => import('./patient-search/visit-form/visit-form.component'), {
+  featureName: 'patient info slot',
+  moduleName,
+});
+
+export const removeQueueEntry = getAsyncLifecycle(
+  () => import('./remove-queue-entry-dialog/remove-queue-entry.component'),
+  {
+    featureName: 'remove queue entry and end visit',
+    moduleName,
+  },
+);
+
+export const clearAllQueueEntries = getAsyncLifecycle(
+  () => import('./clear-queue-entries-dialog/clear-queue-entries-dialog.component'),
+  {
+    featureName: 'clear all queue entries and end visits',
+    moduleName,
+  },
+);
+
+export const addVisitToQueueModal = getAsyncLifecycle(
+  () => import('./add-patient-toqueue/add-patient-toqueue-dialog.component'),
+  {
+    featureName: 'add visit to queue',
+    moduleName,
+  },
+);
+
+export const transitionQueueEntryStatusModal = getAsyncLifecycle(
+  () => import('./transition-queue-entry/transition-queue-entry-dialog.component'),
+  {
+    featureName: 'transition queue status',
+    moduleName,
+  },
+);
+
+export const previousVisitSummaryWidget = getAsyncLifecycle(() => import('./past-visit/past-visit.component'), options);
+
+export const addProviderToRoomModal = getAsyncLifecycle(
+  () => import('./add-provider-queue-room/add-provider-queue-room.component'),
+  {
+    featureName: 'add provider queue room',
+    moduleName,
+  },
+);
+
+export const addQueueEntryWidget = getAsyncLifecycle(
+  () => import('./patient-search/visit-form-queue-fields/visit-form-queue-fields.component'),
+  options,
+);
+
+export function startupApp() {
+  registerBreadcrumbs([]);
+
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/overlay.component.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Header } from '@carbon/react';
+import { ArrowLeft, Close } from '@carbon/react/icons';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './overlay.scss';
+
+interface OverlayProps {
+  closePanel: () => void;
+  header: string;
+  children?: React.ReactNode;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ closePanel, children, header }) => {
+  const layout = useLayoutType();
+
+  return (
+    <div className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}>
+      {isDesktop(layout) ? (
+        <div className={styles.desktopHeader}>
+          <div className={styles.headerContent}>{header}</div>
+          <Button
+            className={styles.closePanelButton}
+            onClick={closePanel}
+            kind="ghost"
+            hasIconOnly
+            renderIcon={(props) => <Close size={16} {...props} />}
+            iconDescription="Close overlay"
+          />
+        </div>
+      ) : (
+        <Header aria-label="Tablet overlay" className={styles.tabletOverlayHeader}>
+          <Button
+            onClick={closePanel}
+            hasIconOnly
+            renderIcon={(props) => <ArrowLeft size={16} {...props} />}
+            iconDescription="Close overlay"
+          />
+          <div className={styles.headerContent}>{header}</div>
+        </Header>
+      )}
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default Overlay;

package/src/overlay.scss

@@ -0,0 +1,96 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import './root.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: $ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+  z-index: 99999;
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow: hidden;
+  padding-top: spacing.$spacing-09;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closeButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopOverlay {
+    right: unset;
+    left: 0;
+  }
+}

package/src/overlay.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import Overlay from './overlay.component';
+import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
+
+const mockUseLayoutType = useLayoutType as jest.Mock;
+const mockIsDesktop = isDesktop as jest.Mock;
+
+jest.mock('@openmrs/esm-framework');
+
+const headerText = 'Test Header';
+
+describe('Overlay Component', () => {
+  it('renders desktop layout with close button', () => {
+    const closePanelMock = jest.fn();
+
+    mockIsDesktop.mockImplementation(() => true);
+
+    render(<Overlay closePanel={closePanelMock} header={headerText} />);
+
+    const headerContent = screen.getByText(headerText);
+    const closeButton = screen.getByLabelText('Close overlay');
+
+    expect(headerContent).toBeInTheDocument();
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+    expect(closePanelMock).toHaveBeenCalled();
+  });
+
+  it('renders tablet layout with back arrow button and the children', () => {
+    const closePanelMock = jest.fn();
+    mockIsDesktop.mockImplementation(() => false);
+    mockUseLayoutType.mockImplementation(() => 'tablet');
+
+    render(
+      <Overlay closePanel={closePanelMock} header={headerText}>
+        <div>Something</div>
+      </Overlay>,
+    );
+
+    const headerContent = screen.getByText(headerText);
+    const backButton = screen.getByText('Close overlay');
+
+    expect(headerContent).toBeInTheDocument();
+    expect(backButton).toBeInTheDocument();
+    expect(screen.getByText('Something')).toBeInTheDocument();
+  });
+});

package/src/past-visit/past-visit-details/encounter-list.component.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  StructuredListHead,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListBody,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { FormattedEncounter } from '../../types/index';
+import styles from '../past-visit.scss';
+
+interface EncounterListProps {
+  encounters: Array<FormattedEncounter>;
+}
+
+const EncounterList: React.FC<EncounterListProps> = ({ encounters }) => {
+  const { t } = useTranslation();
+
+  const structuredListBodyRowGenerator = () => {
+    return encounters.map((encounter, i) => (
+      <StructuredListRow label key={`row-${i}`}>
+        <StructuredListCell>{formatDatetime(parseDate(encounter.datetime), { mode: 'wide' })}</StructuredListCell>
+        <StructuredListCell className={styles.textColor}>{encounter.encounterType}</StructuredListCell>
+        <StructuredListCell>{encounter.provider}</StructuredListCell>
+      </StructuredListRow>
+    ));
+  };
+
+  if (encounters?.length) {
+    return (
+      <div className={styles.encounterListContainer}>
+        <StructuredListWrapper>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head>{t('dateTime', 'Date & time')}</StructuredListCell>
+              <StructuredListCell head>{t('encounterType', 'Encounter type')}</StructuredListCell>
+              <StructuredListCell head>{t('provider', 'Provider')}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>{structuredListBodyRowGenerator()}</StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    );
+  }
+
+  return <p className={`${styles.bodyLong01} ${styles.text02}`}>{t('noEncountersFound', 'No encounters found')}</p>;
+};
+
+export default EncounterList;