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

package/src/queue-rooms/queue-room-form.component.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Column,
+  Form,
+  Layer,
+  Stack,
+  TextInput,
+  Select,
+  SelectItem,
+  ButtonSet,
+  Button,
+  InlineNotification,
+} from '@carbon/react';
+import { showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import styles from './queue-room.scss';
+import { SearchTypes } from '../types';
+import { mutate } from 'swr';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useServices } from '../active-visits/active-visits-table.resource';
+import { saveQueueRoom } from './queue-room.resource';
+
+interface QueueRoomFormProps {
+  toggleSearchType: (searchMode: SearchTypes) => void;
+  closePanel: () => void;
+}
+
+const QueueRoomForm: React.FC<QueueRoomFormProps> = ({ toggleSearchType, closePanel }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [queueRoomName, setQueueRoomName] = useState('');
+  const [queueRoomService, setQueueRoomService] = useState('');
+  const [isMissingRoomName, setMissingRoomName] = useState(false);
+  const [isMissingQueueRoomService, setMissingQueueRoomService] = useState(false);
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState('');
+  const { services } = useServices(selectedQueueLocation);
+  const { queueLocations } = useQueueLocations();
+
+  const createQueueRoom = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (!queueRoomName) {
+        setMissingRoomName(true);
+        return;
+      }
+      if (!queueRoomService) {
+        setMissingQueueRoomService(true);
+        return;
+      }
+
+      setMissingRoomName(false);
+      setMissingQueueRoomService(false);
+
+      saveQueueRoom(queueRoomName, queueRoomName, queueRoomService).then(
+        ({ status }) => {
+          if (status === 201) {
+            showToast({
+              title: t('addQueueRoom', 'Add queue room'),
+              kind: 'success',
+              description: t('queueRoomAddedSuccessfully', 'Queue room addeded successfully'),
+            });
+            closePanel();
+            mutate(`/ws/rest/v1/queueroom`);
+          }
+        },
+        (error) => {
+          showNotification({
+            title: t('errorAddingQueueRoom', 'Error adding queue room'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+        },
+      );
+    },
+    [queueRoomName, queueRoomService, t, closePanel],
+  );
+
+  return (
+    <Form onSubmit={createQueueRoom} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <h3 className={styles.heading}>{t('addNewQueueRoom', 'Add new queue room')}</h3>
+          <Layer className={styles.input}>
+            <TextInput
+              id="queueRoomName"
+              invalidText="Required"
+              labelText={t('queueRoomName', 'Queue room name')}
+              onChange={(event) => setQueueRoomName(event.target.value)}
+              value={queueRoomName}
+            />
+            {isMissingRoomName && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingQueueRoomName', 'Missing queue room name')}
+                  subtitle={t('addQueueRoomName', 'Please add a queue room name')}
+                />
+              </section>
+            )}
+          </Layer>
+
+          <section className={styles.section}>
+            <Select
+              labelText={t('selectQueueLocation', 'Select a queue location')}
+              id="location"
+              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>
+          </section>
+
+          <section className={styles.section}>
+            <Select
+              labelText={t('selectService', 'Select a service')}
+              id="service"
+              invalidText="Required"
+              value={queueRoomService}
+              onChange={(event) => setQueueRoomService(event.target.value)}>
+              {!queueRoomService ? <SelectItem text={t('selectService', 'Select a service')} value="" /> : null}
+              {services?.length > 0 &&
+                services.map((service) => (
+                  <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                    {service.display}
+                  </SelectItem>
+                ))}
+            </Select>
+          </section>
+          {isMissingQueueRoomService && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('missingQueueRoomService', 'Missing queue room service')}
+                subtitle={t('addQueueRoomService', 'Please add a queue room service')}
+              />
+            </section>
+          )}
+        </Column>
+      </Stack>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => closePanel()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default QueueRoomForm;

package/src/queue-rooms/queue-room-form.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import QueueRoomForm from './queue-room-form.component';
+import { mockServices } from '../../__mocks__/active-visits.mock';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: jest.fn(() => 'tablet'),
+  useServices: jest.fn(() => ({ services: mockServices })),
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: { uuid: 'e7786d9a-ab62-11ec-b909-0242ac120002', display: 'Location Test' },
+  })),
+  showToast: jest.fn(),
+}));
+
+jest.mock('./queue-room.resource', () => ({
+  saveQueueRoom: jest.fn(() => Promise.resolve({ status: 201 })),
+}));
+
+describe('QueueRoomForm', () => {
+  it('renders the form with queue room elements', () => {
+    render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
+
+    expect(screen.getByLabelText('Queue room name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select a service')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select a queue location')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('displays error notification if queue room name is missing on submission', () => {
+    render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
+
+    fireEvent.click(screen.getByText('Save'));
+
+    expect(screen.getByText('Missing queue room name')).toBeInTheDocument();
+  });
+
+  it('displays error notification if queue room service is missing on submission', () => {
+    render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
+
+    fireEvent.change(screen.getByLabelText('Queue room name'), { target: { value: 'Room 123' } });
+    fireEvent.click(screen.getByText('Save'));
+
+    expect(screen.getByText('Missing queue room service')).toBeInTheDocument();
+  });
+
+  it('calls closePanel when Cancel button is clicked', () => {
+    const closePanelMock = jest.fn();
+    render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={closePanelMock} />);
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(closePanelMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates queue room name state when a value is entered', () => {
+    render(<QueueRoomForm toggleSearchType={jest.fn()} closePanel={jest.fn()} />);
+
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+    fireEvent.change(queueRoomNameInput, { target: { value: 'Room 123' } });
+
+    expect(queueRoomNameInput).toHaveValue('Room 123');
+  });
+});

package/src/queue-rooms/queue-room.resource.tsx

@@ -0,0 +1,20 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export function saveQueueRoom(name: string, description: string, queueUuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/queueroom`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      name: name,
+      description: description,
+      queue: {
+        uuid: queueUuid,
+      },
+    },
+  });
+}

package/src/queue-rooms/queue-room.scss

@@ -0,0 +1,58 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('productive-heading-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: spacing.$spacing-04;
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+.grid {
+  margin: 0 spacing.$spacing-05;
+  padding: 0rem;
+}
+
+.input {
+  margin-top: spacing.$spacing-04;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+}
+
+.section {
+  margin: spacing.$spacing-03;
+}

package/src/queue-screen/queue-screen.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DataTableSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useActiveTickets } from './useActiveTickets';
+import PatientQueueHeader from '../patient-queue-header/patient-queue-header.component';
+import styles from './queue-screen.scss';
+
+interface QueueScreenProps {}
+
+const QueueScreen: React.FC<QueueScreenProps> = () => {
+  const { t } = useTranslation();
+  const { activeTickets, isLoading, error } = useActiveTickets();
+
+  if (isLoading) {
+    return <DataTableSkeleton row={5} className={styles.queueScreen} role="progressbar" />;
+  }
+
+  if (error) {
+    return <div>Error</div>;
+  }
+
+  const rowData = activeTickets.map((ticket, index) => ({
+    id: `${index}}`,
+    room: ticket.room,
+    ticketNumber: ticket.ticketNumber,
+    status: ticket.status,
+  }));
+
+  return (
+    <div>
+      <PatientQueueHeader />
+      <div className={styles.gridFlow}>
+        {rowData.map((row) => (
+          <div className={styles.card} key={row.id}>
+            <p className={styles.subHeader}>{t('ticketNumber', 'Ticket number')}</p>
+            <p className={row.status === 'calling' ? styles.headerBlinking : styles.header}>{row.ticketNumber}</p>
+            <p className={styles.subHeader}>
+              {t('room', 'Room')} &nbsp; : &nbsp; {row.room}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default QueueScreen;

package/src/queue-screen/queue-screen.scss

@@ -0,0 +1,39 @@
+.gridFlow {
+  display: flex;
+  flex-direction: row;
+  padding: 2rem;
+  flex-wrap: wrap;
+}
+
+.card {
+  border-radius: 0.9rem;
+  border: 1px solid #343332;
+  margin: 1.5rem;
+  padding: 1.3rem;
+  width: 30%;
+  text-align: center;
+  justify-content: center;
+}
+
+.header {
+  font-size: 2rem;
+  font-weight: bold;
+  color: black;
+}
+
+.headerBlinking {
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+.subheader {
+  font-size: medium;
+}

package/src/queue-screen/queue-screen.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useActiveTickets } from './useActiveTickets';
+import QueueScreen from './queue-screen.component';
+
+jest.mock('./useActiveTickets');
+
+describe('QueueScreen component', () => {
+  test('renders loading skeleton when data is loading', () => {
+    const mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
+    mockedUseActiveTickets.mockReturnValue({ isLoading: true, activeTickets: [], error: undefined, mutate: jest.fn() });
+    render(<QueueScreen />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  test('renders error message when there is an error fetching data', () => {
+    const mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
+    mockedUseActiveTickets.mockReturnValue({
+      error: new Error('Error'),
+      isLoading: false,
+      activeTickets: [],
+      mutate: jest.fn(),
+    });
+    render(<QueueScreen />);
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  test('renders table with active tickets when data is loaded', () => {
+    const mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
+    mockedUseActiveTickets.mockReturnValue({
+      activeTickets: [
+        {
+          room: 'Room A',
+          ticketNumber: '123',
+          status: 'Pending',
+        },
+      ],
+      isLoading: false,
+      error: undefined,
+      mutate: jest.fn(),
+    });
+    render(<QueueScreen />);
+    expect(screen.getByText('Room : Room A')).toBeInTheDocument();
+    expect(screen.getByText('Ticket number')).toBeInTheDocument();
+    expect(screen.getByText('123')).toBeInTheDocument();
+  });
+});

package/src/queue-screen/useActiveTickets.tsx

@@ -0,0 +1,13 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export const useActiveTickets = () => {
+  const { data, isLoading, error, mutate } = useSWR<{ data: Record<string, { status: string; ticketNumber: string }> }>(
+    '/ws/rest/v1/queueutil/active-tickets',
+    openmrsFetch,
+    { refreshInterval: 3000 },
+  );
+  const activeTickets =
+    Array.from(Object.entries(data?.data ?? {}).map(([key, value]) => ({ room: key, ...value }))) ?? [];
+  return { activeTickets, isLoading, error, mutate };
+};

package/src/queue-services/queue-service-form.component.tsx

@@ -0,0 +1,183 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Column,
+  Form,
+  Layer,
+  Stack,
+  TextInput,
+  Select,
+  SelectItem,
+  ButtonSet,
+  Button,
+  InlineNotification,
+} from '@carbon/react';
+import { showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import styles from './queue-service.scss';
+import { saveQueue, useServiceConcepts } from './queue-service.resource';
+import { SearchTypes } from '../types';
+import { mutate } from 'swr';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+
+interface QueueServiceFormProps {
+  toggleSearchType: (searchMode: SearchTypes) => void;
+  closePanel: () => void;
+}
+
+const QueueServiceForm: React.FC<QueueServiceFormProps> = ({ toggleSearchType, closePanel }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { queueConcepts } = useServiceConcepts();
+  const [queueName, setQueueName] = useState('');
+  const [queueConcept, setQueueConcept] = useState('');
+  const [isMissingName, setMissingName] = useState(false);
+  const [isMissingQueue, setMissingQueue] = useState(false);
+  const [isMissingLocation, setMissingLocation] = useState(false);
+  const [userLocation, setUserLocation] = useState('');
+  const { queueLocations } = useQueueLocations();
+
+  const createQueue = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (!queueName) {
+        setMissingName(true);
+        return;
+      }
+      if (!queueConcept) {
+        setMissingQueue(true);
+        return;
+      }
+      if (!userLocation) {
+        setMissingLocation(true);
+        return;
+      }
+
+      setMissingName(false);
+      setMissingQueue(false);
+      setMissingLocation(false);
+
+      saveQueue(queueName, queueConcept, queueName, userLocation).then(
+        ({ status }) => {
+          if (status === 201) {
+            showToast({
+              title: t('addQueue', 'Add queue'),
+              kind: 'success',
+              description: t('queueAddedSuccessfully', 'Queue addeded successfully'),
+            });
+            closePanel();
+            mutate(`/ws/rest/v1/queue?${userLocation}`);
+            mutate(`/ws/rest/v1/queue?location=${userLocation}`);
+          }
+        },
+        (error) => {
+          showNotification({
+            title: t('errorAddingQueue', 'Error adding queue'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+        },
+      );
+    },
+    [queueName, queueConcept, userLocation, t, closePanel],
+  );
+
+  return (
+    <Form onSubmit={createQueue} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <h3 className={styles.heading}>{t('addNewQueue', 'Add new queue')}</h3>
+          <Layer className={styles.input}>
+            <TextInput
+              id="queueName"
+              invalidText="Required"
+              labelText={t('queueName', 'Queue name')}
+              onChange={(event) => setQueueName(event.target.value)}
+              value={queueName}
+            />
+            {isMissingName && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingQueueName', 'Missing queue name')}
+                  subtitle={t('addQueueName', 'Please add a queue name')}
+                />
+              </section>
+            )}
+          </Layer>
+
+          <Layer className={styles.input}>
+            <Select
+              labelText={t('selectServiceType', 'Select a service type')}
+              id="queueConcept"
+              invalidText="Required"
+              value={queueConcept}
+              onChange={(event) => setQueueConcept(event.target.value)}>
+              {!queueConcept && <SelectItem text={t('selectServiceType', 'Select a service type')} />}
+              {queueConcepts.length === 0 && <SelectItem text={t('noServicesAvailable', 'No services available')} />}
+              {queueConcepts?.length > 0 &&
+                queueConcepts.map((concept) => (
+                  <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
+                    {concept.display}
+                  </SelectItem>
+                ))}
+            </Select>
+            {isMissingQueue && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingService', 'Missing service')}
+                  subtitle={t('selectServiceType', 'Select a service type')}
+                />
+              </section>
+            )}
+          </Layer>
+
+          <Layer className={styles.input}>
+            <Select
+              labelText={t('selectLocation', 'Select a location')}
+              id="location"
+              invalidText="Required"
+              value={userLocation}
+              onChange={(event) => setUserLocation(event.target.value)}>
+              {!userLocation && <SelectItem text={t('selectLocation', 'Select a location')} />}
+              {queueLocations.length === 0 && <SelectItem text={t('noLocationsAvailable', 'No locations available')} />}
+              {queueLocations?.length > 0 &&
+                queueLocations.map((location) => (
+                  <SelectItem key={location.id} text={location.name} value={location.id}>
+                    {location.name}
+                  </SelectItem>
+                ))}
+            </Select>
+            {isMissingLocation && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingLocation', 'Missing location')}
+                  subtitle={t('selectLocation', 'Please select a location')}
+                />
+              </section>
+            )}
+          </Layer>
+        </Column>
+      </Stack>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => closePanel()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default QueueServiceForm;