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

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

@@ -1,166 +1,162 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'react-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,
-  Stack,
-  TextInput,
   Select,
   SelectItem,
-  ButtonSet,
-  Button,
-  InlineNotification,
+  Stack,
+  TextInput,
 } from '@carbon/react';
 import { mutate } from 'swr';
 import { type DefaultWorkspaceProps, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { saveQueue, useServiceConcepts } from './queue-service.resource';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import styles from './queue-service-form.scss';
 
+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 [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();
+  const QueueServiceSchema = createQueueServiceSchema(t);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<QueueServiceFormData>({
+    resolver: zodResolver(QueueServiceSchema),
+    defaultValues: {
+      queueName: '',
+      queueServiceType: '',
+      userLocation: '',
+    },
+  });
 
-      if (!queueName) {
-        setMissingName(true);
-        return;
-      }
-      if (!queueConcept) {
-        setMissingQueue(true);
-        return;
-      }
-      if (!userLocation) {
-        setMissingLocation(true);
-        return;
-      }
+  const createQueue = async (data: QueueServiceFormData) => {
+    try {
+      await saveQueue(data.queueName, data.queueServiceType, '', data.userLocation);
 
-      setMissingName(false);
-      setMissingQueue(false);
-      setMissingLocation(false);
+      showSnackbar({
+        title: t('queueServiceCreated', 'Queue service created'),
+        kind: 'success',
+        subtitle: t('queueServiceCreatedSuccessfully', 'Queue service created successfully'),
+      });
 
-      saveQueue(queueName, queueConcept, queueName, userLocation).then(
-        ({ status }) => {
-          if (status === 201) {
-            showSnackbar({
-              title: t('addQueue', 'Add queue'),
-              kind: 'success',
-              subtitle: t('queueAddedSuccessfully', 'Queue added successfully'),
-            });
-            closeWorkspace();
-            mutate(`${restBaseUrl}/queue?${userLocation}`);
-            mutate(`${restBaseUrl}/queue?location=${userLocation}`);
-          }
-        },
-        (error) => {
-          showSnackbar({
-            title: t('errorAddingQueue', 'Error adding queue'),
-            kind: 'error',
-            isLowContrast: false,
-            subtitle: error?.message,
-          });
-        },
-      );
-    },
-    [queueName, queueConcept, userLocation, t, closeWorkspace],
-  );
+      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={createQueue} className={styles.form}>
-      <Stack gap={4} className={styles.grid}>
+    <Form onSubmit={handleSubmit(createQueue)} className={styles.form}>
+      <Stack gap={5} className={styles.grid}>
         <Column>
           <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')}
+            <Controller
+              name="queueName"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  id="queueName"
+                  invalidText={errors.queueName?.message}
+                  invalid={!!errors.queueName}
+                  labelText={t('queueName', 'Queue name')}
                 />
-              </section>
-            )}
+              )}
+            />
           </Layer>
         </Column>
-
         <Column>
           <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>
-            )}
+            <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}>
-            <Select
-              labelText={t('selectALocation', 'Select a location')}
-              id="location"
-              invalidText="Required"
-              value={userLocation}
-              onChange={(event) => setUserLocation(event.target.value)}>
-              {!userLocation && <SelectItem text={t('selectALocation', '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('pleaseSelectLocation', 'Please select a location')}
-                />
-              </section>
-            )}
+            <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>
@@ -168,8 +164,12 @@ const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) =
         <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button className={styles.button} kind="primary" type="submit">
-          {t('save', 'Save')}
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            <span>{t('save', 'Save')}</span>
+          )}
         </Button>
       </ButtonSet>
     </Form>

package/src/queue-services/queue-service.resource.ts

@@ -12,7 +12,12 @@ export function useServiceConcepts() {
   };
 }
 
-export function saveQueue(queueName: string, queueConcept: string, queueDescription: string, queueLocation: string) {
+export function saveQueue(
+  queueName: string,
+  queueServiceType: string,
+  queueDescription?: string,
+  queueLocation?: string,
+) {
   const abortController = new AbortController();
 
   return openmrsFetch(`${restBaseUrl}/queue`, {
@@ -24,7 +29,7 @@ export function saveQueue(queueName: string, queueConcept: string, queueDescript
     body: {
       name: queueName,
       description: queueDescription,
-      service: { uuid: queueConcept },
+      service: { uuid: queueServiceType },
       location: {
         uuid: queueLocation,
       },

package/src/queue-table/cells/columns.resource.ts

@@ -1,5 +1,5 @@
-import { showToast, translateFrom, useConfig } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
+import { showToast, useConfig } from '@openmrs/esm-framework';
 import { useTranslation, type TFunction } from 'react-i18next';
 import {
   builtInColumns,
@@ -30,11 +30,14 @@ export function useColumns(queue: string, status: string): QueueTableColumn[] {
   const config = useConfig<ConfigObject>();
   const { queueTables, visitQueueNumberAttributeUuid } = config;
   const { columnDefinitions } = queueTables;
-  const tableDefinitions = [...queueTables.tableDefinitions, defaultQueueTable];
-  const globalColumnConfig = {
-    ...defaultColumnConfig,
-    visitQueueNumberAttributeUuid,
-  };
+  const tableDefinitions = useMemo(() => [...queueTables.tableDefinitions, defaultQueueTable], [queueTables]);
+  const globalColumnConfig = useMemo(
+    () => ({
+      ...defaultColumnConfig,
+      visitQueueNumberAttributeUuid,
+    }),
+    [visitQueueNumberAttributeUuid],
+  );
 
   const columnsMap = useMemo(() => {
     const map = new Map<string, QueueTableColumn>();
@@ -49,7 +52,7 @@ export function useColumns(queue: string, status: string): QueueTableColumn[] {
       map.set(columnDef.id, getColumnFromDefinition(t, columnDef));
     }
     return map;
-  }, [columnDefinitions, t]);
+  }, [columnDefinitions, globalColumnConfig, t, visitQueueNumberAttributeUuid]);
 
   const tableDefinition = useMemo(
     () =>

package/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx

@@ -15,6 +15,7 @@ export const queueTableVisitAttributeQueueNumberColumn: QueueTableColumnFunction
 
   const QueueTableVisitAttributeQueueNumberCell = ({ queueEntry }: QueueTableCellComponentProps) => {
     const { t } = useTranslation();
+
     return (
       <>
         {visitQueueNumberAttributeUuid ? (

package/src/queue-table/default-queue-table.component.tsx

@@ -27,13 +27,15 @@ import QueueTableExpandedRow from './queue-table-expanded-row.component';
 import QueueTable from './queue-table.component';
 import styles from './queue-table.scss';
 
-const serviceQueuesPatientSearchWorkspace = 'service-queues-patient-search';
+const serviceQueuesPatientSearchWorkspace = 'create-queue-entry-workspace';
 
 /*
 Component with default values / sub-components passed into the more generic QueueTable.
 This is used in the main dashboard of the queues app. (Currently behind a feature flag)
 */
 function DefaultQueueTable() {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
   const selectedService = useSelectedService();
   const currentLocationUuid = useSelectedQueueLocationUuid();
   const selectedQueueStatus = useSelectedQueueStatus();
@@ -48,8 +50,6 @@ function DefaultQueueTable() {
   );
   const { queueEntries, isLoading, error, isValidating } = useQueueEntries(searchCriteria);
 
-  const { t } = useTranslation();
-
   useEffect(() => {
     if (error?.message) {
       showSnackbar({
@@ -58,11 +58,10 @@ function DefaultQueueTable() {
         subtitle: error?.message,
       });
     }
-  }, [error?.message]);
-  const layout = useLayoutType();
+  }, [error?.message, t]);
 
   const [isPatientSearchOpen, setIsPatientSearchOpen] = useState(false);
-  const [patientSearchQuery, setPatientSearchQuery] = useState<string>('');
+  const [patientSearchQuery, setPatientSearchQuery] = useState('');
 
   const handleBackToSearchList = useCallback(() => {
     setIsPatientSearchOpen(true);
@@ -88,7 +87,7 @@ function DefaultQueueTable() {
         return columnSearchTerm?.includes(searchTermLowercase);
       });
     });
-  }, [queueEntries, searchTerm]);
+  }, [columns, queueEntries, searchTerm]);
 
   return (
     <div className={styles.defaultQueueTable}>
@@ -164,6 +163,7 @@ function QueueDropdownFilter() {
 
   const handleServiceChange = useCallback(({ selectedItem }) => {
     updateSelectedService(selectedItem.uuid, selectedItem?.display);
+    mutateQueueEntries.mutateQueueEntries();
   }, []);
 
   return (
@@ -171,13 +171,13 @@ function QueueDropdownFilter() {
       <div className={styles.filterContainer}>
         <Dropdown
           id="serviceFilter"
-          titleText={t('filterByService', 'Filter by service:')}
-          label={selectedService?.serviceDisplay ?? t('all', 'All')}
-          type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
           itemToString={(item) => (item ? item.display : '')}
+          label={selectedService?.serviceDisplay ?? t('all', 'All')}
           onChange={handleServiceChange}
           size={isDesktop(layout) ? 'sm' : 'lg'}
+          titleText={t('filterByService', 'Filter by service:')}
+          type="inline"
         />
       </div>
     </>
@@ -198,13 +198,13 @@ function StatusDropdownFilter() {
       <div className={styles.filterContainer}>
         <Dropdown
           id="statusFilter"
-          titleText={t('filterByStatus', 'Filter by status:')}
-          label={queueStatus?.statusDisplay ?? t('all', 'All')}
-          type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(statuses ?? [])]}
           itemToString={(item) => (item ? item.display : '')}
+          label={queueStatus?.statusDisplay ?? t('all', 'All')}
           onChange={handleServiceChange}
           size={isDesktop(layout) ? 'sm' : 'lg'}
+          titleText={t('filterByStatus', 'Filter by status:')}
+          type="inline"
         />
       </div>
     </>

package/src/queue-table/default-queue-table.test.tsx

@@ -13,7 +13,7 @@ import {
 import { renderWithSwr } from 'tools';
 import { useQueueEntries } from '../hooks/useQueueEntries';
 import { useQueueRooms } from '../add-provider-queue-room/add-provider-queue-room.resource';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import { type ConfigObject, configSchema } from '../config-schema';
 import DefaultQueueTable from '../queue-table/default-queue-table.component';
 
@@ -29,8 +29,8 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => ({
-  ...jest.requireActual('../patient-search/hooks/useQueueLocations'),
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
+  ...jest.requireActual('../create-queue-entry/hooks/useQueueLocations'),
   useQueueLocations: jest.fn(),
 }));
 

package/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss

@@ -34,3 +34,31 @@ section {
 .dateTimeFields {
   display: flex;
 }
+
+.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/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx

@@ -198,13 +198,19 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
       );
     }
     return null;
-  }, [formState.transitionDate, formState.transitionTime, formState.transitionTimeFormat, t]);
+  }, [
+    formState.transitionDate,
+    formState.transitionTime,
+    formState.transitionTimeFormat,
+    queueEntry.previousQueueEntry?.startedAt,
+    t,
+  ]);
 
   const selectedPriorityIndex = priorities?.findIndex((p) => p.uuid == formState.selectedPriority);
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={modalTitle} />
+      <ModalHeader className={styles.modalHeader} closeModal={closeModal} title={modalTitle} />
       <ModalBody>
         <div className={styles.queueEntryActionModalBody}>
           <Stack gap={4}>

package/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx

@@ -4,6 +4,7 @@ import { type QueueEntry } from '../../types';
 import { Button, ModalHeader, ModalBody, ModalFooter, Stack } from '@carbon/react';
 import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
 import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+import styles from './queue-entry-confirm-action.scss';
 
 interface QueueEntryUndoActionsModalProps {
   queueEntry: QueueEntry;
@@ -75,7 +76,7 @@ export const QueueEntryConfirmActionModal: React.FC<QueueEntryUndoActionsModalPr
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={modalTitle} />
+      <ModalHeader className={styles.modalHeader} closeModal={closeModal} title={modalTitle} />
       <ModalBody>
         <Stack gap={4}>
           <h5>{queueEntry.display}</h5>

package/src/queue-table/queue-entry-actions/queue-entry-confirm-action.scss

@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.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/queue-table/queue-table.component.tsx

@@ -74,7 +74,7 @@ function QueueTable({
 
   useEffect(() => {
     goTo(1);
-  }, [queueEntries]);
+  }, [goTo, queueEntries]);
 
   const rowsData =
     paginatedQueueEntries?.map((queueEntry) => {

package/src/queue-table/queue-table.scss

@@ -192,13 +192,12 @@ html[dir='rtl'] {
 }
 
 .tileContainer {
-  background-color: $ui-02;
   border-top: 1px solid $ui-03;
   padding: layout.$spacing-07 0;
-  // margin: 0 layout.$spacing-05;
 }
 
 .tile {
+  background-color: $ui-01;
   margin: auto;
   width: fit-content;
 }
@@ -209,3 +208,14 @@ html[dir='rtl'] {
   justify-content: center;
   align-items: center;
 }
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
 import { screen, within } from '@testing-library/react';
 import { type ConfigObject, configSchema } from '../config-schema';
-import { mockPriorityNonUrgent, mockQueueEntries, mockSession } from '__mocks__';
+import { mockPriorityNonUrgent, mockPriorityUrgent, mockQueueEntries, mockSession } from '__mocks__';
 import { renderWithSwr } from 'tools';
 import QueueTable from './queue-table.component';
 
@@ -176,6 +176,11 @@ describe('QueueTable', () => {
                   color: 'blue',
                   style: 'bold',
                 },
+                {
+                  conceptUuid: mockPriorityUrgent.uuid,
+                  color: 'orange',
+                  style: null,
+                },
               ],
               statusConfigs: [],
               visitQueueNumberAttributeUuid: 'queue-number-visit-attr-uuid',
@@ -200,6 +205,10 @@ describe('QueueTable', () => {
     const firstRow = rows[1];
     const cells = within(firstRow).getAllByRole('cell');
     expect(cells[1].childNodes[0]).toHaveClass('bold');
+
+    const secondRow = rows[2];
+    const secondCells = within(secondRow).getAllByRole('cell');
+    expect(secondCells[1].childNodes[0]).toHaveClass('orange');
   });
 
   it('uses the visitQueueNumberAttributeUuid defined at the top level', () => {