@digihmis/esm-administration-app 1.0.0

package/src/queue-management/queue-management-workspace/queue-room/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 { saveQueueRoom } from './queue-room.resource';
+import styles from './queue-room-form.scss';
+import { useQueues } from '../../../hooks/useQueues';
+import { useQueueLocations } from '../queue-service/queue-service.resource';
+
+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-management/queue-management-workspace/queue-room/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,
+      description,
+      queue: {
+        uuid: queueUuid,
+      },
+    },
+  });
+}

package/src/queue-management/queue-management-workspace/queue-service/queue-service-form.scss

@@ -0,0 +1,61 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: layout.$spacing-05 0 layout.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: layout.$spacing-04;
+  margin: layout.$spacing-03 0 layout.$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: 100%;
+}
+
+.grid {
+  margin: 0 layout.$spacing-05;
+  padding: 0;
+}
+
+.input {
+  margin-top: layout.$spacing-04;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  padding: 0;
+  margin-top: layout.$spacing-05;
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: 100%;
+  }
+
+  .buttonSet {
+    padding: layout.$spacing-06 layout.$spacing-05;
+    background-color: $ui-02;
+  }
+}

package/src/queue-management/queue-management-workspace/queue-service/queue-service-form.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { saveQueue } from './queue-service.resource';
+import QueueServiceForm from './queue-service-form.workspace';
+
+const defaultProps = {
+  closeWorkspace: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  setTitle: jest.fn(),
+};
+
+const mockSaveQueue = jest.mocked(saveQueue);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUseLayoutType = jest.mocked(useLayoutType);
+
+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('../../queue-management-workspace/queue-service/queue-service.resource.ts', () => ({
+  useQueueLocations: () => ({
+    queueLocations: [
+      { id: '34567eb0-b035-4acd-b284-da45f5067502', name: 'Location 1' },
+      { id: '12wi7eb0-b035-4acd-b284-da45f5067502', name: 'Location 2' },
+    ],
+  }),
+}));
+
+describe('QueueServiceForm', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('tablet');
+  });
+
+  it('renders validation errors when form is submitted with missing fields', async () => {
+    const user = userEvent.setup();
+    render(<QueueServiceForm {...defaultProps} />);
+
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    expect(cancelButton).toBeInTheDocument();
+    expect(saveButton).toBeInTheDocument();
+    expect(queueNameInput).toBeInTheDocument();
+    expect(queueNameInput).not.toBeInvalid();
+    expect(serviceTypeSelect).toBeInTheDocument();
+    expect(serviceTypeSelect).not.toBeInvalid();
+
+    await user.click(saveButton);
+    expect(queueNameInput).toBeInvalid();
+
+    await user.type(queueNameInput, 'Test Queue');
+    expect(queueNameInput).not.toBeInvalid();
+    expect(serviceTypeSelect).toBeInvalid();
+
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
+
+    expect(serviceTypeSelect).not.toBeInvalid();
+    expect(queueNameInput).not.toBeInvalid();
+    expect(locationSelect).not.toBeInvalid();
+  });
+
+  it('submits the form when all required fields are filled', async () => {
+    const user = userEvent.setup();
+    render(<QueueServiceForm {...defaultProps} />);
+
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
+
+    await user.type(queueNameInput, 'Test Queue');
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
+
+    expect(mockSaveQueue).toHaveBeenCalledTimes(1);
+    expect(mockSaveQueue).toHaveBeenCalledWith(
+      'Test Queue',
+      '6f017eb0-b035-4acd-b284-da45f5067502',
+      '',
+      '34567eb0-b035-4acd-b284-da45f5067502',
+    );
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      kind: 'success',
+      title: expect.stringMatching(/queue service created/i),
+      subtitle: expect.stringMatching(/queue service created successfully/i),
+    });
+  });
+
+  it('renders an error message when the queue service creation fails', async () => {
+    const user = userEvent.setup();
+    mockSaveQueue.mockRejectedValueOnce(new Error('Internal server error'));
+    render(<QueueServiceForm {...defaultProps} />);
+
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
+
+    await user.type(queueNameInput, 'Test Queue');
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
+
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      title: expect.stringMatching(/error creating queue service/i),
+      subtitle: expect.stringMatching(/internal server error/i),
+    });
+  });
+});

package/src/queue-management/queue-management-workspace/queue-service/queue-service-form.workspace.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  Form,
+  InlineLoading,
+  Layer,
+  Select,
+  SelectItem,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { mutate } from 'swr';
+import { type DefaultWorkspaceProps, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import styles from './queue-service-form.scss';
+import { saveQueue, useQueueLocations, useServiceConcepts } from './queue-service.resource';
+
+const createQueueServiceSchema = (t: TFunction) =>
+  z.object({
+    queueName: z
+      .string({
+        required_error: t('queueNameRequired', 'Queue name is required'),
+      })
+      .trim()
+      .min(1, t('queueNameRequired', 'Queue name is required')),
+    queueServiceType: z
+      .string({
+        required_error: t('queueConceptRequired', 'Queue concept is required'),
+      })
+      .trim()
+      .min(1, t('queueConceptRequired', 'Queue concept is required')),
+    userLocation: z
+      .string({
+        required_error: t('queueLocationRequired', 'Queue location is required'),
+      })
+      .trim()
+      .min(1, t('queueLocationRequired', 'Queue location is required')),
+  });
+
+type QueueServiceFormData = z.infer<ReturnType<typeof createQueueServiceSchema>>;
+
+const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+  const { t } = useTranslation();
+  const { queueConcepts } = useServiceConcepts();
+  const { queueLocations } = useQueueLocations();
+
+  const QueueServiceSchema = createQueueServiceSchema(t);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<QueueServiceFormData>({
+    resolver: zodResolver(QueueServiceSchema),
+    defaultValues: {
+      queueName: '',
+      queueServiceType: '',
+      userLocation: '',
+    },
+  });
+
+  const createQueue = async (data: QueueServiceFormData) => {
+    try {
+      await saveQueue(data.queueName, data.queueServiceType, '', data.userLocation);
+
+      showSnackbar({
+        title: t('queueServiceCreated', 'Queue service created'),
+        kind: 'success',
+        subtitle: t('queueServiceCreatedSuccessfully', 'Queue service created successfully'),
+      });
+
+      closeWorkspace();
+      await Promise.all([
+        mutate(`${restBaseUrl}/queue?${data.userLocation}`),
+        mutate(`${restBaseUrl}/queue?location=${data.userLocation}`),
+      ]);
+    } catch (error) {
+      showSnackbar({
+        title: t('errorCreatingQueueService', 'Error creating queue service'),
+        kind: 'error',
+        isLowContrast: false,
+        subtitle: error?.responseBody?.message || error?.message,
+      });
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(createQueue)} className={styles.form}>
+      <Stack gap={5} className={styles.grid}>
+        <Column>
+          <Layer className={styles.input}>
+            <Controller
+              name="queueName"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  id="queueName"
+                  invalidText={errors.queueName?.message}
+                  invalid={!!errors.queueName}
+                  labelText={t('queueName', 'Queue name')}
+                />
+              )}
+            />
+          </Layer>
+        </Column>
+        <Column>
+          <Layer className={styles.input}>
+            <Controller
+              name="queueServiceType"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  labelText={t('selectServiceType', 'Select a service type')}
+                  id="queueServiceType"
+                  invalid={!!errors?.queueServiceType}
+                  invalidText={errors?.queueServiceType?.message}>
+                  <SelectItem text={t('selectServiceType', 'Select a service type')} value="" />
+                  {queueConcepts?.length > 0 &&
+                    queueConcepts.map((concept) => (
+                      <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
+                        {concept.display}
+                      </SelectItem>
+                    ))}
+                </Select>
+              )}
+            />
+          </Layer>
+        </Column>
+        <Column>
+          <Layer className={styles.input}>
+            <Controller
+              name="userLocation"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  id="location"
+                  invalid={!!errors?.userLocation}
+                  invalidText={errors?.userLocation?.message}
+                  labelText={t('selectALocation', 'Select a location')}>
+                  <SelectItem text={t('selectALocation', 'Select a location')} value="" />
+                  {queueLocations?.length > 0 &&
+                    queueLocations.map((location) => (
+                      <SelectItem key={location.id} text={location.name} value={location.id}>
+                        {location.name}
+                      </SelectItem>
+                    ))}
+                </Select>
+              )}
+            />
+          </Layer>
+        </Column>
+      </Stack>
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            <span>{t('save', 'Save')}</span>
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default QueueServiceForm;

package/src/queue-management/queue-management-workspace/queue-service/queue-service.resource.ts

@@ -0,0 +1,55 @@
+import { fhirBaseUrl, getLocale, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useConcept } from '../../../hooks/useConcept';
+import { useSystemSetting } from '../../../hooks/useSystemSetting';
+import useSWRImmutable from 'swr/immutable';
+import { useMemo } from 'react';
+import { type FHIRResponse } from '../../queue-types';
+
+export function useServiceConcepts() {
+  const { systemSetting: serviceConceptSetting } = useSystemSetting('queue.serviceConceptSetName');
+  const { concept: serviceConceptSet, error, isLoading } = useConcept(serviceConceptSetting?.value);
+  return {
+    queueConcepts: serviceConceptSet?.setMembers?.sort((c1, c2) => c1.display.localeCompare(c2.display)) || [],
+    error,
+    isLoading,
+  };
+}
+
+export function saveQueue(
+  queueName: string,
+  queueServiceType: string,
+  queueDescription?: string,
+  queueLocation?: string,
+) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/queue`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      name: queueName,
+      description: queueDescription,
+      service: { uuid: queueServiceType },
+      location: {
+        uuid: queueLocation,
+      },
+    },
+  });
+}
+
+export function useQueueLocations() {
+  const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=queue location`;
+  const { data, error, isLoading } = useSWRImmutable<{ data: FHIRResponse }>(apiUrl, openmrsFetch);
+
+  const queueLocations = useMemo(
+    () =>
+      data?.data?.entry
+        ?.map((response) => response.resource)
+        .sort((a, b) => a.name.localeCompare(b.name, getLocale())) ?? [],
+    [data?.data?.entry],
+  );
+  return { queueLocations, isLoading, error };
+}

package/src/queue-management/queue-types/index.ts

@@ -0,0 +1,33 @@
+import { type OpenmrsResource, type Location } from '@openmrs/esm-framework';
+
+export interface QueueRoom {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: Concept;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+// TODO: The following types match the types from backend.
+// They should be common enough to move to esm-core
+
+export interface Concept extends OpenmrsResource {
+  setMembers?: Array<Concept>;
+}
+
+export interface FHIRResponse {
+  entry: Array<{ resource: fhir.Location }>;
+  total: number;
+  type: string;
+  resourceType: string;
+}