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

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

@@ -0,0 +1,56 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+$overlay-header-height: 5.5rem;
+
+.heading {
+  @include type.type-style('heading-compact-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: var(--desktop-workspace-window-height);
+}
+
+.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;
+}

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import QueueRoomForm from './queue-room-form.workspace';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: jest.fn(() => 'tablet'),
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: { uuid: 'e7786d9a-ab62-11ec-b909-0242ac120002', display: 'Location Test' },
+  })),
+  showSnackbar: jest.fn(),
+}));
+
+const workspaceProps = {
+  closeWorkspace: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: 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 {...workspaceProps} />);
+
+    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', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    await user.click(screen.getByText('Save'));
+
+    expect(screen.getByText('Missing queue room name')).toBeInTheDocument();
+  });
+
+  it('displays error notification if queue room service is missing on submission', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+
+    await user.type(queueRoomNameInput, 'Room 123');
+    await user.click(screen.getByText('Save'));
+
+    expect(screen.getByText('Missing queue room service')).toBeInTheDocument();
+  });
+
+  it('calls closePanel when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+
+    const closeWorkspace = jest.fn();
+    render(<QueueRoomForm {...{ ...workspaceProps, closeWorkspace }} />);
+
+    await user.click(screen.getByText('Cancel'));
+
+    expect(closeWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates queue room name state when a value is entered', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+    await user.type(queueRoomNameInput, 'Room 123');
+
+    expect(queueRoomNameInput).toHaveValue('Room 123');
+  });
+});

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

@@ -0,0 +1,169 @@
+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 { type DefaultWorkspaceProps, restBaseUrl, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { saveQueueRoom } from './queue-room.resource';
+import styles from './queue-room-form.scss';
+import { useQueues } from '../hooks/useQueues';
+
+const QueueRoomForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+  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 { queues } = useQueues(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) {
+            showSnackbar({
+              title: t('addQueueRoom', 'Add queue room'),
+              kind: 'success',
+              subtitle: t('queueRoomAddedSuccessfully', 'Queue room added successfully'),
+            });
+            closeWorkspace();
+            mutate(`${restBaseUrl}/queueroom`);
+          }
+        },
+        (error) => {
+          showSnackbar({
+            title: t('errorAddingQueueRoom', 'Error adding queue room'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        },
+      );
+    },
+    [queueRoomName, queueRoomService, t, closeWorkspace],
+  );
+
+  return (
+    <Form onSubmit={createQueueRoom} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <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>
+        </Column>
+
+        <Column>
+          <Layer className={styles.input}>
+            <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>
+          </Layer>
+        </Column>
+
+        <Column>
+          <Layer className={styles.input}>
+            <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}
+                {queues?.length > 0 &&
+                  queues.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>
+            )}
+          </Layer>
+        </Column>
+      </Stack>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {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.resource.ts

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

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 title={t('queueScreen', 'Queue screen')} />
+      <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,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useActiveTickets } from './useActiveTickets';
+import QueueScreen from './queue-screen.component';
+
+jest.mock('./useActiveTickets');
+jest.mock('../helpers/helpers', () => ({
+  useSelectedQueueLocationName: jest.fn().mockReturnValue('Room A'),
+  useSelectedQueueLocationUuid: jest.fn().mockReturnValue(''),
+}));
+
+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, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export const useActiveTickets = () => {
+  const { data, isLoading, error, mutate } = useSWR<{ data: Record<string, { status: string; ticketNumber: string }> }>(
+    `${restBaseUrl}/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.scss

@@ -0,0 +1,61 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('heading-compact-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: var(--desktop-workspace-window-height);
+}
+
+.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%;
+}
+
+.buttonSet {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .buttonSet {
+    padding: spacing.$spacing-06 spacing.$spacing-05;
+    background-color: $ui-02;
+  }
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import QueueServiceForm from './queue-service-form.workspace';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: () => 'desktop',
+  showSnackbar: jest.fn(),
+}));
+
+jest.mock('./queue-service.resource', () => ({
+  useServiceConcepts: () => ({
+    queueConcepts: [
+      { uuid: '6f017eb0-b035-4acd-b284-da45f5067502', display: 'Concept 1' },
+      { uuid: '5f017eb0-b035-4acd-b284-da45f5067502', display: 'Concept 2' },
+    ],
+  }),
+  saveQueue: jest.fn(() => Promise.resolve({ status: 201 })),
+}));
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+  useQueueLocations: () => ({
+    queueLocations: [
+      { id: '34567eb0-b035-4acd-b284-da45f5067502', name: 'Location 1' },
+      { id: '12wi7eb0-b035-4acd-b284-da45f5067502', name: 'Location 2' },
+    ],
+  }),
+}));
+
+describe('QueueServiceForm', () => {
+  it('should display required error messages when form is submitted with missing fields', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+
+    const submitButton = screen.getByText('Save');
+
+    await user.click(submitButton);
+
+    expect(screen.getByText('Missing queue name')).toBeInTheDocument();
+  });
+
+  it('should submit the form when all fields are filled', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+
+    const queueNameInput = screen.getByLabelText('Queue name');
+    const serviceSelect = screen.getByLabelText('Select a service type');
+    const locationSelect = screen.getByLabelText('Select a location');
+
+    await user.type(queueNameInput, 'Test Queue');
+    await user.selectOptions(serviceSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+
+    expect(queueNameInput).toHaveValue('Test Queue');
+    expect(serviceSelect).toHaveValue('6f017eb0-b035-4acd-b284-da45f5067502');
+    expect(locationSelect).toHaveValue('34567eb0-b035-4acd-b284-da45f5067502');
+  });
+});