@kenyaemr/esm-service-queues-app 7.0.2-pre.66 → 7.0.2-pre.68

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

@@ -22,6 +22,8 @@ import { useTranslation } from 'react-i18next';
 import { type QueueEntry, type QueueTableColumn } from '../types';
 import styles from './queue-table.scss';
 import { useColumns } from './cells/columns.resource';
+import classNames from 'classnames';
+import { DataTableSkeleton } from '@carbon/react';
 
 interface QueueTableProps {
   queueEntries: QueueEntry[];
@@ -48,6 +50,8 @@ interface QueueTableProps {
 
   // if provided, adds title to the top-left
   header?: string;
+
+  isLoading?: boolean;
 }
 
 function QueueTable({
@@ -59,12 +63,13 @@ function QueueTable({
   ExpandedRow,
   tableFilter,
   header,
+  isLoading,
 }: QueueTableProps) {
   const { t } = useTranslation();
   const [currentPageSize, setPageSize] = useState(10);
   const pageSizes = [10, 20, 30, 40, 50];
 
-  const { goTo, results: paginatedQueueEntries, currentPage } = usePagination(queueEntries, currentPageSize);
+  const { goTo, results: paginatedQueueEntries, currentPage, paginated } = usePagination(queueEntries, currentPageSize);
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
 
@@ -84,6 +89,10 @@ function QueueTable({
       return row;
     }) ?? [];
 
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
   if (columns.length == 0) {
     return <p>{t('noColumnsDefined', 'No table columns defined. Check Configuration')}</p>;
   }
@@ -130,7 +139,13 @@ function QueueTable({
                     <React.Fragment key={row.id}>
                       <Row {...getRowProps({ row })}>
                         {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                          <TableCell
+                            key={cell.id}
+                            className={classNames({
+                              'cds--table-column-menu': cell?.id?.split(':')?.[1] === 'actions',
+                            })}>
+                            {cell.value}
+                          </TableCell>
                         ))}
                       </Row>
                       {ExpandedRow && row.isExpanded && (
@@ -154,22 +169,24 @@ function QueueTable({
               </Tile>
             </div>
           )}
-          <Pagination
-            forwardText={t('nextPage', 'Next page')}
-            backwardText={t('previousPage', 'Previous page')}
-            page={currentPage}
-            pageSize={currentPageSize}
-            pageSizes={pageSizes}
-            totalItems={queueEntries?.length}
-            onChange={({ pageSize, page }) => {
-              if (pageSize !== currentPageSize) {
-                setPageSize(pageSize);
-              }
-              if (page !== currentPage) {
-                goTo(page);
-              }
-            }}
-          />
+          {paginated && (
+            <Pagination
+              forwardText={t('nextPage', 'Next page')}
+              backwardText={t('previousPage', 'Previous page')}
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={queueEntries?.length}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) {
+                  setPageSize(pageSize);
+                }
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          )}
         </>
       )}
     </DataTable>

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

@@ -16,7 +16,10 @@
 
 .headerButtons {
   display: flex;
-  flex-flow: column;
+  justify-content: space-between;
+  .filterSearch {
+    margin-left: spacing.$spacing-05;
+  }
 }
 
 .filterContainer {
@@ -61,7 +64,7 @@
 
 .tableContainer {
   background-color: $ui-01;
-  margin: 0 spacing.$spacing-05;
+  // margin: 0 spacing.$spacing-05;
   padding: 0;
 
   a {
@@ -78,6 +81,7 @@
 
   .toolbarContainer {
     display: flex;
+    justify-content: space-between;
   }
 
   .toolbarContent {
@@ -175,8 +179,8 @@ html[dir='rtl'] {
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
-  margin: 0 spacing.$spacing-05;
+  padding: 2rem 0;
+  // margin: 0 spacing.$spacing-05;
 }
 
 .tile {
@@ -190,3 +194,7 @@ html[dir='rtl'] {
   justify-content: center;
   align-items: center;
 }
+
+.paddedQueueTable {
+  padding: 0 spacing.$spacing-05;
+}

package/src/types/index.ts

@@ -489,6 +489,8 @@ export interface QueueEntrySearchCriteria {
 // TODO: The follow types match the types from backend.
 // They should be common enough to move to esm-core
 
-export interface Concept extends OpenmrsResource {}
+export interface Concept extends OpenmrsResource {
+  setMembers?: Array<Concept>;
+}
 
 export interface Provider extends OpenmrsResource {}

package/src/views/queue-table-by-status-view.component.tsx

@@ -1,25 +1,13 @@
-import { InlineNotification } from '@carbon/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useQueue } from '../hooks/useQueue';
-import QueueTableByStatus from '../queue-table/queue-table-by-status.component';
-import { QueueTableByStatusSkeleton } from '../queue-table/queue-table-by-status-skeleton.component';
 import QueueTablesForAllStatuses from './queue-tables-for-all-statuses.component';
 
 const QueueTableByStatusView: React.FC = () => {
   const { queueUuid, statusUuid } = useParams();
-  const { queue, isLoading } = useQueue(queueUuid);
-  const status = queue?.allowedStatuses.find((s) => s.uuid == statusUuid);
-  const { t } = useTranslation();
+  const { queue, isLoading: isLoadingQueue, error } = useQueue(queueUuid);
 
-  if (isLoading) {
-    return <QueueTableByStatusSkeleton />;
-  } else if (!queue) {
-    return <InlineNotification kind="error" title={t('invalidQueue', 'Invalid Queue')} />;
-  } else {
-    return <QueueTablesForAllStatuses selectedQueue={queue} />;
-  }
+  return <QueueTablesForAllStatuses selectedQueue={queue} isLoadingQueue={isLoadingQueue} errorFetchingQueue={error} />;
 };
 
 export default QueueTableByStatusView;

package/src/views/queue-tables-for-all-statuses.component.tsx

@@ -10,23 +10,96 @@ import QueueTable from '../queue-table/queue-table.component';
 import QueueTableMetrics from '../queue-table/queue-table-metrics.component';
 import styles from '../queue-table/queue-table.scss';
 import type { Concept, Queue, QueueEntry } from '../types';
+import PatientQueueHeader from '../patient-queue-header/patient-queue-header.component';
+import { SearchSkeleton } from '@carbon/react';
+import { SkeletonText } from '@carbon/react';
 
 interface QueueTablesForAllStatusesProps {
   selectedQueue: Queue; // the selected queue
+  isLoadingQueue: boolean; // whether the queue is still loading
+  errorFetchingQueue: Error;
 }
 
 // displays the queue entries of a given queue by
 // showing one table per status
-const QueueTablesForAllStatuses: React.FC<QueueTablesForAllStatusesProps> = ({ selectedQueue }) => {
+const QueueTablesForAllStatuses: React.FC<QueueTablesForAllStatusesProps> = ({
+  selectedQueue,
+  isLoadingQueue,
+  errorFetchingQueue,
+}) => {
   const layout = useLayoutType();
   const { t } = useTranslation();
 
-  const { queueEntries, isLoading, isValidating } = useQueueEntries({ queue: selectedQueue.uuid, isEnded: false });
-  const allowedStatuses = selectedQueue.allowedStatuses;
   const [searchTerm, setSearchTerm] = useState('');
 
+  if (errorFetchingQueue) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('invalidQueue', 'Invalid Queue')}
+        subtitle={errorFetchingQueue?.message}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PatientQueueHeader
+        title={!isLoadingQueue ? selectedQueue?.display : <SkeletonText />}
+        showLocationDropdown={false}
+        actions={
+          <div className={styles.headerButtons}>
+            <ExtensionSlot
+              name="patient-search-button-slot"
+              state={{
+                buttonText: t('addPatientToQueue', 'Add patient to queue'),
+                overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
+                buttonProps: {
+                  kind: 'secondary',
+                  renderIcon: (props) => <Add size={16} {...props} />,
+                  size: isDesktop(layout) ? 'sm' : 'lg',
+                },
+                selectPatientAction: (selectedPatientUuid) => {
+                  launchWorkspace('service-queues-patient-search', {
+                    selectedPatientUuid,
+                    currentServiceQueueUuid: selectedQueue.uuid,
+                  });
+                },
+              }}
+            />
+            <div className={styles.filterSearch}>
+              <Search
+                labelText=""
+                placeholder={t('filterTable', 'Filter table')}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                size={isDesktop(layout) ? 'sm' : 'lg'}
+                disabled={isLoadingQueue}
+              />
+            </div>
+          </div>
+        }
+      />
+      {!isLoadingQueue && <QueueTableMetrics selectedQueue={selectedQueue} />}
+      {!isLoadingQueue ? (
+        <QueueTablesByStatus selectedQueue={selectedQueue} searchTerm={searchTerm} />
+      ) : (
+        <QueueTableByStatusSkeleton />
+      )}
+    </>
+  );
+};
+
+interface QueueTablesByStatusProps {
+  selectedQueue: Queue;
+  searchTerm: string;
+}
+
+function QueueTablesByStatus({ selectedQueue, searchTerm }: QueueTablesByStatusProps) {
+  const { t } = useTranslation();
+  const { queueEntries, isLoading, isValidating } = useQueueEntries({ queue: selectedQueue.uuid, isEnded: false });
+  const allowedStatuses = selectedQueue.allowedStatuses.reverse();
   const noStatuses = !allowedStatuses?.length;
-  if (isLoading && !queueEntries.length) {
+  if (isLoading) {
     return <QueueTableByStatusSkeleton />;
   } else if (noStatuses) {
     return (
@@ -38,58 +111,23 @@ const QueueTablesForAllStatuses: React.FC<QueueTablesForAllStatusesProps> = ({ s
       />
     );
   }
-
   return (
     <div className={styles.container}>
-      <div className={styles.headerContainer}>
-        <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
-          <h3>{selectedQueue.display}</h3>
-        </div>
-        <div>
-          <QueueTableMetrics selectedQueue={selectedQueue} />
-        </div>
-        <div className={styles.headerButtons}>
-          <ExtensionSlot
-            name="patient-search-button-slot"
-            state={{
-              buttonText: t('addPatientToQueue', 'Add patient to queue'),
-              overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
-              buttonProps: {
-                kind: 'secondary',
-                renderIcon: (props) => <Add size={16} {...props} />,
-                size: 'sm',
-              },
-              selectPatientAction: (selectedPatientUuid) => {
-                launchWorkspace('service-queues-patient-search', {
-                  selectedPatientUuid,
-                  currentServiceQueueUuid: selectedQueue.uuid,
-                });
-              },
-            }}
-          />
-          <Search
-            labelText=""
-            placeholder={t('filterTable', 'Filter table')}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            size={isDesktop(layout) ? 'sm' : 'lg'}
-          />
-        </div>
-      </div>
       {allowedStatuses?.map((status) => (
         <QueueTableForQueueAndStatus
+          isValidating={isValidating}
           key={status.uuid}
           queueEntries={queueEntries}
           searchTerm={searchTerm}
           queue={selectedQueue}
           status={status}
-          isValidating={isValidating}
         />
       ))}
     </div>
   );
-};
+}
 
-interface QueueTableForQueueAndStatus {
+interface QueueTableForQueueAndStatusProps {
   queueEntries: QueueEntry[];
   isValidating: boolean;
   searchTerm: string;
@@ -104,7 +142,7 @@ function QueueTableForQueueAndStatus({
   searchTerm,
   queue,
   status,
-}: QueueTableForQueueAndStatus) {
+}: QueueTableForQueueAndStatusProps) {
   const statusUuid = status.uuid;
   const columns = useColumns(queue.uuid, statusUuid);
   const { t } = useTranslation();

package/translations/am.json

@@ -2,15 +2,15 @@
   "actions": "Actions",
   "activeVisits": "Active Visits",
   "activeVisitsNotInQueue": "Active visits not in queue",
+  "addAProviderQueueRoom": "Add a provider queue room?",
   "addEntry": "Add entry",
   "addisitToQueueTooltip": "Add to queue",
-  "addNewQueueService": "Add new queue service",
+  "addNewQueueService": "Add New Queue Service",
   "addNewQueueServiceRoom": "Add new queue service room",
   "addNewService": "Add new service",
   "addNewServiceRoom": "Add new service room",
-  "addPatientToList": "Add patient to list",
   "addPatientToQueue": "Add patient to queue",
-  "addProviderQueueRoom": "Add provider queue room?",
+  "addProviderQueueRoom": "Add provider queue room",
   "addQueue": "Add queue",
   "addQueueName": "Please add a queue name",
   "addQueueRoom": "Add queue room",
@@ -29,6 +29,7 @@
   "applyFilters": "Apply filters",
   "averageWaitTime": "Average wait time today",
   "backToScheduledVisits": "Back to scheduled visits",
+  "backToSearchResults": "Back to search results",
   "backToSimpleSearch": "Back to simple search",
   "between": "Between",
   "bmi": "Bmi",
@@ -39,7 +40,6 @@
   "checkFilters": "Check the filters above",
   "chooseRoom": "Select a room",
   "chooseService": "Select a service",
-  "chooseStatus": "Select a status",
   "clearAllQueueEntries": "Clear all queue entries?",
   "clearAllQueueEntriesWarningMessage": "Clearing all queue entries will remove  all the patients from the queues",
   "clearQueue": "Clear queue",
@@ -50,6 +50,7 @@
   "confirmDeleteQueueEntry": "Are you sure you want to delete this queue entry?",
   "confirmMoveBackQueueAndStatus": "Are you sure you want to move patient back to queue \"{{queue}}\" with status \"{{status}}\"?",
   "confirmMoveBackStatus": "Are you sure you want to move patient back to status \"{{status}}\"?",
+  "confirmRemovePatientFromQueue": "Are you sure you want to remove this patient from this queue?",
   "currentValueFormatted": "{{value}} (Current)",
   "currentVisit": "Current visit",
   "date": "Date",
@@ -77,11 +78,11 @@
   "errorLoadingQueueEntries": "Error loading queue entries",
   "errorPostingToScreen": "Error posting to screen",
   "facility": "Facility",
+  "failedToLoadRecommendedVisitTypes": "Failed to load recommended visit types",
   "female": "Female",
   "femaleLabelText": "Female",
   "fields": "of the following fields",
   "filter": "Filter (1)",
-  "filters": "Filters",
   "filterTable": "Filter table",
   "firstName": "First name",
   "firstNameSort": "First name (a-z)",
@@ -94,15 +95,15 @@
   "hourAndMinuteFormatted": "{{hours}} hour(s) and {{minutes}} minute(s)",
   "idNumber": "ID Number",
   "indication": "Indication",
-  "InQueue": "In Queue",
   "invalidQueue": "Invalid Queue",
-  "lastClinicalVisit": "Last clinical visit",
+  "invalidtableConfig": "Invalid table configuration",
   "lastEncounter": "Last encounter",
   "lastName": "Last name",
   "lastNameSort": "Last name (a-z)",
   "lastVisit": "Last visit",
   "lastVisitDate": "Date",
   "loading": "Loading...",
+  "location": "Location",
   "male": "Male",
   "maleLabelText": "Male",
   "match": "Match",
@@ -118,32 +119,35 @@
   "missingQueueRoomService": "Missing queue room service",
   "missingService": "Missing service",
   "missingVisitType": "Missing visit type",
+  "modifyDefaultValue": "Modify default value",
   "movePatientToNextService": "Move patient to the next service?",
   "moveToNextService": "Move to next service",
   "name": "Name",
   "nextPage": "Next page",
   "noActiveVisitsForLocation": "There are no active visits to display for this location.",
   "noAppointmentsFound": "No appointments found",
+  "noColumnsDefined": "No table columns defined. Check Configuration",
   "noEncountersFound": "No encounters found",
   "noLastEncounter": "There is no last encounter to display for this patient",
   "noLocationsAvailable": "No locations available",
   "noMedicationsFound": "No medications found",
-  "none": "None",
   "noNotesFound": "No notes found",
   "noPatientFoundMessage": "Sorry, no patient has been found",
   "noPatientsToDisplay": "No patients to display",
   "noPreviousVisitFound": "No previous visit found",
   "noPrioritiesConfigured": "No priorities configured",
+  "noPrioritiesForService": "The selected service does not have any allowed priorities. This is an error in configuration. Please contact your system administrator.",
+  "noPrioritiesForServiceTitle": "No priorities available",
   "noPriorityFound": "No priority found",
   "noResultsFound": "No results found",
   "noReturnDate": "There is no return date to display for this patient",
   "noServicesAvailable": "No services available",
   "noServicesConfigured": "No services configured",
   "noStatusConfigured": "No status configured",
+  "notableConfig": "No table configuration",
   "notes": "Notes",
-  "NotInQueue": "Not In Queue",
   "noVisitsNotInQueueFound": "No visits currently not in queue found",
-  "noVisitTypes": "There are no visit types to display for this patient",
+  "noVisitTypesMatchingSearch": "There are no visit types matching this search text",
   "noVitalsFound": "No vitals found",
   "oldest": "Oldest first",
   "onTime": "On time",
@@ -152,12 +156,16 @@
   "orderIndefiniteDuration": "Indefinite duration",
   "orInProperFormat": "Or",
   "orPatientName": "OR the patient's name(s)",
+  "patientAge": "Age",
   "patientAlreadyInQueue": "Patient is already in the queue",
   "patientAttendingService": "Patient attending service",
   "patientHasActiveVisit": "The patient already has an active visit",
   "patientList": "Patient list",
   "patientName": "Patient name",
   "patientNotInQueue": "The patient is not in the queue",
+  "patientRemoved": "Patient removed",
+  "patientRemovedFailed": "Error removing patient from queue",
+  "patientRemovedSuccessfully": "Paient removed from queue successfully",
   "patientRequeued": "Patient has been requeued",
   "patients": "Patients",
   "patientsCurrentlyInQueue": "Patients currently in queue",
@@ -176,7 +184,6 @@
   "provider": "Provider",
   "quantity": "Quantity",
   "queueAddedSuccessfully": "Queue added successfully",
-  "queueComingFrom": "Coming from",
   "queueEntryAddedSuccessfully": "Queue entry added successfully",
   "queueEntryAddFailed": "Error adding queue entry status",
   "queueEntryDeleteFailed": "Error deleting queue entry",
@@ -198,7 +205,6 @@
   "queueLocation": "Queue Location",
   "queueLocationRequired": "Queue location is required",
   "queueName": "Queue name",
-  "queueNumber": "Queue Number",
   "queuePriority": "Queue priority",
   "queueRoom": "Queue room",
   "queueRoomAddedSuccessfully": "Queue room added successfully",
@@ -214,6 +220,8 @@
   "recommended": "Recommended",
   "refills": "Refills",
   "removeFromQueueAndEndVisit": "Remove patient from queue and end active visit?",
+  "removePatient": "Remove patient",
+  "removePatientFromQueue": "Remove patient from queue",
   "removeQueueEntryError": "Error removing queue entry",
   "requeue": "Requeue",
   "retainLocation": "Retain location",
@@ -227,11 +235,12 @@
   "searchboxPlaceholder": "Search for a patient name or ID number",
   "searchForAVisitType": "Search for a visit type",
   "searchForPatient": "Search for a patient",
+  "searchPatient": "Search Patient",
   "searchThisList": "Search this list",
   "secondaryHelperText": "Type the patient's name or unique ID number",
+  "selectALocation": "Select a location",
   "selectAVisitType": "Select visit type",
   "selectFacility": "Select a facility",
-  "selectLocation": "Select a location",
   "selectOption": "Select an option",
   "selectProgramType": "Select program type",
   "selectQueue": "Select a queue",
@@ -240,7 +249,6 @@
   "selectRoom": "Select a room",
   "selectService": "Select a service",
   "selectServiceType": "Select a service type",
-  "selectStatus": "Select a status",
   "selectVisitType": "Please select a Visit Type",
   "serve": "Serve",
   "servePatient": "Serve patient",
@@ -259,28 +267,31 @@
   "startVisitError": "Error starting visit",
   "startVisitQueueSuccessfully": "Patient has been added to active visits list and queue.",
   "status": "Status",
-  "submitting": "Submitting...",
+  "statusIsRequired": "Status is required",
+  "submitting": "Submitting",
   "success": "Success",
-  "tcaDate": "Tca date",
   "temperature": "Temperature",
   "ticketNumber": "Ticket number",
   "time": "Time",
+  "timeCannotBeInFuture": "Time cannot be in the future",
+  "timeOfTransition": "Time of transition",
   "tirageNotYetCompleted": "Triage has not yet been completed",
   "today": "Today",
-  "transfer": "Transfer",
+  "totalPatients": "Total Patients",
   "transition": "Transition",
   "transitionPatient": "Transition patient",
   "transitionPatientStatusOrQueue": "Select a new status or queue for patient to transition to.",
   "triageForm": "Triage form",
   "triageNote": "Triage note",
   "trySearchWithPatientUniqueID": "Try searching with the patient's unique ID number",
+  "undoQueueEntryTransitionSuccess": "Undo transition success",
   "undoTransition": "Undo transition",
   "unexpectedServerResponse": "Unexpected Server Response",
   "unknown": "Unknown",
   "updateEntry": "Update entry",
   "updateRoom": "Update room",
   "useTodaysDate": "Use today's date",
-  "view": "View",
+  "visitQueueNumberAttributeUuid not configured": "visitQueueNumberAttributeUuid not configured",
   "visitStartTime": "Visit Time",
   "visitTabs": "Visit tabs",
   "visitType": "Visit Type",
@@ -288,7 +299,6 @@
   "vitalsForm": "Vitals form",
   "vitalsNotRecordedForVisit": "Vitals has not been recorded for this patient for this visit",
   "waitingFor": "Waiting for",
-  "waitTime": "Wait time",
   "weight": "Weight",
   "years": "Years",
   "youngest": "Youngest first"