@kenyaemr/esm-service-queues-app 8.1.1-pre.124 → 8.1.2-pre.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-service-queues-app",
-  "version": "8.1.1-pre.124",
+  "version": "8.1.2-pre.152",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-service-queues-app.js",
   "main": "src/index.ts",
@@ -37,11 +37,14 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
-    "lodash-es": "^4.17.15"
+    "@carbon/react": "^1.71.0",
+    "@hookform/resolvers": "^3.9.1",
+    "lodash-es": "^4.17.15",
+    "react-hook-form": "^7.54.0",
+    "zod": "^3.24.1"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-framework": "6.x",
     "react": "^18.1.0",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
@@ -50,5 +53,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.1.0"
+  "stableVersion": "8.0.2"
 }

package/src/active-visits/active-visits-table.resource.ts

@@ -193,68 +193,6 @@ export function useServiceQueueEntries(service: string, locationUuid: string) {
   };
 }
 
-export async function postQueueEntry(
-  visitUuid: string,
-  queueUuid: string,
-  patientUuid: string,
-  priority: string,
-  status: string,
-  sortWeight: number,
-  locationUuid: string,
-  visitQueueNumberAttributeUuid: string,
-) {
-  const abortController = new AbortController();
-
-  await Promise.all([generateVisitQueueNumber(locationUuid, visitUuid, queueUuid, visitQueueNumberAttributeUuid)]);
-
-  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    signal: abortController.signal,
-    body: {
-      visit: { uuid: visitUuid },
-      queueEntry: {
-        status: {
-          uuid: status,
-        },
-        priority: {
-          uuid: priority,
-        },
-        queue: {
-          uuid: queueUuid,
-        },
-        patient: {
-          uuid: patientUuid,
-        },
-        startedAt: new Date(),
-        sortWeight: sortWeight,
-      },
-    },
-  });
-}
-
-export async function generateVisitQueueNumber(
-  location: string,
-  visitUuid: string,
-  queueUuid: string,
-  visitQueueNumberAttributeUuid: string,
-) {
-  const abortController = new AbortController();
-
-  await openmrsFetch(
-    `${restBaseUrl}/queue-entry-number?location=${location}&queue=${queueUuid}&visit=${visitUuid}&visitAttributeType=${visitQueueNumberAttributeUuid}`,
-    {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      signal: abortController.signal,
-    },
-  );
-}
-
 export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string) {
   const abortController = new AbortController();
 

package/src/active-visits/change-status-dialog.component.tsx

@@ -25,7 +25,7 @@ import { type ConfigObject } from '../config-schema';
 import { useQueues } from '../hooks/useQueues';
 import { updateQueueEntry } from './active-visits-table.resource';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import styles from './change-status-dialog.scss';
 
 interface ChangeStatusDialogProps {
@@ -46,7 +46,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
         service: z.string({ required_error: t('serviceIsRequired', 'Service is required') }),
         status: z.string({ required_error: t('statusIsRequired', 'Status is required') }),
       }),
-    [],
+    [t],
   );
 
   type ChangeStatusForm = z.infer<typeof schema>;
@@ -106,7 +106,13 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
   const onError = (errors) => console.error(errors);
 
   if (Object.keys(queueEntry)?.length === 0) {
-    return <ModalHeader closeModal={closeModal} title={t('patientNotInQueue', 'The patient is not in the queue')} />;
+    return (
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('patientNotInQueue', 'The patient is not in the queue')}
+      />
+    );
   }
 
   if (Object.keys(queueEntry)?.length > 0) {
@@ -114,6 +120,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
       <div>
         <Form onSubmit={handleSubmit(onSubmit, onError)}>
           <ModalHeader
+            className={styles.modalHeader}
             closeModal={closeModal}
             title={t('movePatientToNextService', 'Move patient to the next service?')}
           />

package/src/active-visits/change-status-dialog.scss

@@ -1,6 +1,6 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 
 .radioButtonGroup {
   display: flex;
@@ -45,3 +45,31 @@ section {
   color: colors.$red-60;
   @include type.type-style('label-01');
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/active-visits/change-status-dialog.test.tsx

@@ -14,18 +14,18 @@ import { configSchema, type ConfigObject } from '../config-schema';
 import { updateQueueEntry } from './active-visits-table.resource';
 import ChangeStatus from './change-status-dialog.component';
 
-const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockShowSnackbar = jest.mocked(showSnackbar);
 const mockUpdateQueueEntry = jest.mocked(updateQueueEntry);
-const mockUseSession = jest.mocked(useSession);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLocations = jest.mocked(useLocations);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('./active-visits-table.resource', () => ({
   ...jest.requireActual('./active-visits-table.resource'),
   updateQueueEntry: jest.fn(),
 }));
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => {
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => {
   return {
     useQueueLocations: jest.fn().mockReturnValue({
       queueLocations: mockLocations.data?.results.map((location) => ({ ...location, id: location.uuid })),
@@ -40,6 +40,8 @@ jest.mock('../hooks/useQueues', () => {
 });
 
 describe('ChangeStatusDialog', () => {
+  let consoleSpy: jest.SpyInstance;
+
   beforeEach(() => {
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
@@ -47,6 +49,12 @@ describe('ChangeStatusDialog', () => {
     } as ConfigObject);
     mockUseLocations.mockReturnValue(mockLocations.data.results);
     mockUseSession.mockReturnValue(mockSession.data);
+
+    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
   });
 
   it('should update a queue entry and display toast message', async () => {

package/src/add-provider-queue-room/add-provider-queue-room.component.tsx

@@ -13,7 +13,7 @@ import {
   SelectItem,
 } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import {
   addProviderToQueueRoom,
   updateProviderToQueueRoom,
@@ -35,20 +35,21 @@ import useQueueServices from '../hooks/useQueueService';
 import styles from './add-provider-queue-room.scss';
 
 interface AddProviderQueueRoomProps {
-  providerUuid: string;
   closeModal: () => void;
+  providerUuid: string;
 }
 
-const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUuid, closeModal }) => {
+const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ closeModal, providerUuid }) => {
   const { t } = useTranslation();
-
+  const { providerRoom } = useProvidersQueueRoom(providerUuid);
+  const currentIsPermanentProviderQueueRoom = useIsPermanentProviderQueueRoom() ?? false;
   const currentLocationName = useSelectedQueueLocationName();
   const currentLocationUuid = useSelectedQueueLocationUuid();
   const currentService = useSelectedService();
-  const currentIsPermanentProviderQueueRoom = useIsPermanentProviderQueueRoom();
-  const { providerRoom } = useProvidersQueueRoom(providerUuid);
-  const [queueRoomUuid, setQueueRoomUuid] = useState('');
+
+  const [isMissingQueueRoom, setIsMissingQueueRoom] = useState(false);
   const [queueProviderMapUuid, setQueueProviderMapUuid] = useState('');
+  const [queueRoomUuid, setQueueRoomUuid] = useState('');
 
   useEffect(() => {
     if (providerRoom?.length > 0) {
@@ -58,10 +59,9 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
   }, [providerRoom]);
 
   const { mutate } = useProvidersQueueRoom(providerUuid);
-  const { services } = useQueueServices();
-  const { rooms } = useQueueRooms(currentLocationUuid, currentService?.serviceUuid);
   const { queueLocations } = useQueueLocations();
-  const [isMissingQueueRoom, setIsMissingQueueRoom] = useState(false);
+  const { rooms } = useQueueRooms(currentLocationUuid, currentService?.serviceUuid);
+  const { services } = useQueueServices();
 
   const handleServiceChange = ({ selectedItem }) => {
     localStorage.setItem('queueServiceName', selectedItem.name);
@@ -90,19 +90,17 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
 
     if (providerRoom?.length > 0) {
       updateProviderToQueueRoom(queueProviderMapUuid, queueRoomUuid, providerUuid).then(
-        ({ status }) => {
-          if (status === 200) {
-            showSnackbar({
-              isLowContrast: true,
-              title: t('updateRoom', 'Update room'),
-              kind: 'success',
-              subtitle: t('queueRoomUpdatedSuccessfully', 'Queue room updated successfully'),
-            });
-            closeModal();
-            localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
-            updatedSelectedQueueRoomTimestamp(new Date());
-            mutate();
-          }
+        () => {
+          showSnackbar({
+            isLowContrast: true,
+            title: t('updateRoom', 'Update room'),
+            kind: 'success',
+            subtitle: t('queueRoomUpdatedSuccessfully', 'Queue room updated successfully'),
+          });
+          closeModal();
+          localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
+          updatedSelectedQueueRoomTimestamp(new Date());
+          mutate();
         },
         (error) => {
           showSnackbar({
@@ -116,19 +114,17 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
       );
     } else {
       addProviderToQueueRoom(queueRoomUuid, providerUuid).then(
-        ({ status }) => {
-          if (status === 201) {
-            showSnackbar({
-              isLowContrast: true,
-              title: t('addRoom', 'Add room'),
-              kind: 'success',
-              subtitle: t('queueRoomAddedSuccessfully', 'Queue room added successfully'),
-            });
-            closeModal();
-            localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
-            updatedSelectedQueueRoomTimestamp(new Date());
-            mutate();
-          }
+        () => {
+          showSnackbar({
+            isLowContrast: true,
+            title: t('addRoom', 'Add room'),
+            kind: 'success',
+            subtitle: t('queueRoomAddedSuccessfully', 'Queue room added successfully'),
+          });
+          closeModal();
+          localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
+          updatedSelectedQueueRoomTimestamp(new Date());
+          mutate();
         },
         (error) => {
           showSnackbar({
@@ -144,36 +140,40 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
 
   return (
     <div>
-      <ModalHeader closeModal={closeModal} title={t('addAProviderQueueRoom', 'Add a provider queue room?')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('addAProviderQueueRoom', 'Add a provider queue room?')}
+      />
       <ModalBody>
         <Form onSubmit={onSubmit}>
           <section className={styles.section}>
             <Dropdown
-              id="queueLocation"
               aria-label={t('selectQueueLocation', 'Select a queue location')}
-              label=""
-              titleText={t('queueLocation', 'Queue location')}
-              type="default"
+              id="queueLocation"
+              initialSelectedItem={{ uuid: currentLocationUuid, name: currentLocationName }}
               items={queueLocations}
               itemToString={(item) => (item ? item.name : '')}
+              label=""
               onChange={handleQueueLocationChange}
               size="md"
-              initialSelectedItem={{ uuid: currentLocationUuid, name: currentLocationName }}
+              titleText={t('queueLocation', 'Queue location')}
+              type="default"
             />
           </section>
 
           <section className={styles.section}>
             <Dropdown
-              id="service"
               aria-label={t('selectService', 'Select a service')}
-              type="default"
-              label=""
-              titleText={t('queueService', 'Queue service')}
+              id="service"
+              initialSelectedItem={{ uuid: currentService?.serviceUuid, display: currentService?.serviceDisplay }}
               items={services ?? []}
               itemToString={(item) => (item ? item.display : '')}
+              label=""
               onChange={handleServiceChange}
               size="md"
-              initialSelectedItem={{ uuid: currentService?.serviceUuid, display: currentService?.serviceDisplay }}
+              titleText={t('queueService', 'Queue service')}
+              type="default"
             />
           </section>
 
@@ -181,15 +181,14 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
             <div className={styles.sectionTitle}>{t('queueRoom', 'Queue room')}</div>
             <div className={styles.filterContainer}>
               <Select
-                labelText={t('selectRoom', 'Select a room')}
                 id="service"
                 invalidText="Required"
-                value={queueRoomUuid}
-                defaultValue={queueRoomUuid}
+                labelText={t('selectRoom', 'Select a room')}
                 onChange={(event) => {
                   setQueueRoomUuid(event.target.value);
                   localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
-                }}>
+                }}
+                value={queueRoomUuid}>
                 {!queueRoomUuid ? <SelectItem text={t('chooseRoom', 'Select a room')} value="" /> : null}
                 {rooms?.length > 0 &&
                   rooms.map((room) => (
@@ -213,11 +212,11 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
 
           <section className={styles.section}>
             <Checkbox
-              onChange={handleRetainLocation}
               checked={currentIsPermanentProviderQueueRoom}
-              labelText={t('retainLocation', 'Retain location')}
-              id="retianLocation"
               className={styles.checkbox}
+              id="retainLocation"
+              labelText={t('retainLocation', 'Retain location')}
+              onChange={handleRetainLocation}
             />
           </section>
         </Form>

package/src/add-provider-queue-room/add-provider-queue-room.scss

@@ -2,6 +2,34 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}
+
 .section {
   margin: layout.$spacing-03;
 }

package/src/add-provider-queue-room/add-provider-queue-room.test.tsx

@@ -39,7 +39,7 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
   useQueueLocations: jest.fn().mockReturnValue({
     queueLocations: [
       { id: '1GHI12', name: 'Location 1' },

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx

@@ -45,6 +45,7 @@ const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queue
   return (
     <div>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         label={t('serviceQueue', 'Service queue')}
         title={t('clearAllQueueEntries', 'Clear all queue entries?')}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss

@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
@@ -5,3 +6,31 @@
   @include type.type-style('heading-compact-01');
   color: $ui-05;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.test.tsx

@@ -12,7 +12,10 @@ const defaultProps = {
   closeModal: mockCloseModal,
 };
 
-jest.mock('./clear-queue-entries-dialog.resource');
+jest.mock('./clear-queue-entries-dialog.resource', () => ({
+  batchClearQueueEntries: jest.fn(),
+}));
+
 jest.mock('../hooks/useQueueEntries', () => ({
   useMutateQueueEntries: () => ({ mutateQueueEntries: jest.fn() }),
 }));

package/src/config-schema.ts

@@ -23,8 +23,8 @@ type ColumnType = (typeof columnTypes)[number];
 const statusIcons = ['Group', 'InProgress'] as const;
 type StatusIcon = (typeof statusIcons)[number];
 
-// Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview
-const carbonTagColors = [
+// Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview plus orange for priority tags
+const priorityTagColors = [
   'red',
   'magenta',
   'purple',
@@ -32,13 +32,14 @@ const carbonTagColors = [
   'teal',
   'cyan',
   'gray',
+  'orange',
   'green',
   'warm-gray',
   'cool-gray',
   'high-contrast',
   'outline',
 ] as const;
-type CarbonTagColor = (typeof carbonTagColors)[number];
+type PriorityTagColor = (typeof priorityTagColors)[number];
 
 const tagStyles = ['bold'] as const;
 type TagStyle = (typeof tagStyles)[number];
@@ -46,10 +47,29 @@ type TagStyle = (typeof tagStyles)[number];
 // equal to columnTypes but without extension
 export const builtInColumns = columnTypes.filter((columnType) => columnType !== 'extension');
 const defaultIdentifierTypeUuid = '05a29f94-c0ed-11e2-94be-8c13b969e334'; // OpenMRS ID
+const defaultPriorityUuid = 'f4620bfa-3625-4883-bd3f-84c2cce14470';
+const defaultEmergencyPriorityUuid = '04f6f7e0-e3cb-4e13-a133-4479f759574e';
+const defaultUrgentPriorityUuid = 'dc3492ef-24a5-4fd9-b58d-4fd2acf7071f';
 
 export const defaultColumnConfig: ColumnConfig = {
   identifierTypeUuid: defaultIdentifierTypeUuid,
-  priorityConfigs: [],
+  priorityConfigs: [
+    {
+      conceptUuid: defaultEmergencyPriorityUuid,
+      style: null,
+      color: 'red',
+    },
+    {
+      conceptUuid: defaultPriorityUuid,
+      style: null,
+      color: 'green',
+    },
+    {
+      conceptUuid: defaultUrgentPriorityUuid,
+      style: null,
+      color: 'orange',
+    },
+  ],
   statusConfigs: [],
   visitQueueNumberAttributeUuid: null,
 };
@@ -70,7 +90,7 @@ export const configSchema = {
     defaultPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the default priority for the queues eg Not urgent.',
-      _default: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+      _default: defaultPriorityUuid,
     },
     defaultStatusConceptUuid: {
       _type: Type.ConceptUuid,
@@ -93,7 +113,7 @@ export const configSchema = {
     emergencyPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
-      _default: '04f6f7e0-e3cb-4e13-a133-4479f759574e',
+      _default: defaultEmergencyPriorityUuid,
     },
     heightUuid: {
       _type: Type.ConceptUuid,
@@ -262,7 +282,7 @@ export const configSchema = {
                 _type: Type.String,
                 _description:
                   'The color of the tag. This is based on the "type" field of the Carbon Design System "Tag" component.',
-                _validators: [validators.oneOf(carbonTagColors)],
+                _validators: [validators.oneOf(priorityTagColors)],
                 _default: 'gray',
               },
               style: {
@@ -447,7 +467,7 @@ export interface PatientIdentifierColumnConfig {
 }
 export interface PriorityConfig {
   conceptUuid: string;
-  color: CarbonTagColor;
+  color: PriorityTagColor;
   style: TagStyle;
 }