@ampath/esm-laboratory-app 1.3.0-next.2

package/src/components/orders-table/orders-data-table.component.tsx

@@ -0,0 +1,349 @@
+import React, { useMemo, useState } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  Layer,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+} from '@carbon/react';
+import { ExtensionSlot, formatDate, parseDate, showModal, useConfig, usePagination } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type FulfillerStatus, type FlattenedOrder, type Order } from '../../types';
+import { type Config } from '../../config-schema';
+import { useLabOrders } from '../../laboratory.resource';
+import { OrdersDateRangePicker } from './orders-date-range-picker.component';
+import ListOrderDetails from './list-order-details.component';
+import styles from './orders-data-table.scss';
+
+const labTableColumnSpec = {
+  name: {
+    // t('patient', 'Patient')
+    headerLabelKey: 'patient',
+    headerLabelDefault: 'Patient',
+    key: 'patientName',
+  },
+  age: {
+    // t('age', 'Age')
+    headerLabelKey: 'age',
+    headerLabelDefault: 'Age',
+    key: 'patientAge',
+  },
+  dob: {
+    // t('dateOfBirth', 'Date of Birth')
+    headerLabelKey: 'dob',
+    headerLabelDefault: 'Date of Birth',
+    key: 'patientDob',
+  },
+  sex: {
+    // t('sex', 'Sex')
+    headerLabelKey: 'sex',
+    headerLabelDefault: 'Sex',
+    key: 'patientSex',
+  },
+  totalOrders: {
+    // t('totalOrders', 'Total Orders')
+    headerLabelKey: 'totalOrders',
+    headerLabelDefault: 'Total Orders',
+    key: 'totalOrders',
+  },
+  action: {
+    // t('action', 'Action')
+    headerLabelKey: 'action',
+    headerLabelDefault: 'Action',
+    key: 'action',
+  },
+  patientId: {
+    // t('patientId', 'Patient ID')
+    headerLabelKey: 'patientId',
+    headerLabelDefault: 'Patient ID',
+    key: 'patientId',
+  },
+};
+
+export interface OrdersDataTableProps {
+  /* Whether the data table should include a status filter dropdown */
+  useFilter?: boolean;
+  excludeColumns?: Array<string>;
+  fulfillerStatus?: FulfillerStatus;
+  newOrdersOnly?: boolean;
+  excludeCanceledAndDiscontinuedOrders?: boolean;
+}
+
+const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState<FulfillerStatus>(null);
+  const [searchString, setSearchString] = useState('');
+  const { labTableColumns, patientIdIdentifierTypeUuid } = useConfig<Config>();
+
+  const { labOrders, isLoading } = useLabOrders({
+    status: props.useFilter ? filter : props.fulfillerStatus,
+    newOrdersOnly: props.newOrdersOnly,
+    excludeCanceled: props.excludeCanceledAndDiscontinuedOrders,
+    includePatientId: labTableColumns.includes('patientId'),
+  });
+
+  const flattenedLabOrders: Array<FlattenedOrder> = useMemo(() => {
+    return (
+      labOrders?.map((order) => {
+        return {
+          id: order.uuid,
+          patientUuid: order.patient.uuid,
+          orderNumber: order.orderNumber,
+          dateActivated: formatDate(parseDate(order.dateActivated)),
+          fulfillerStatus: order.fulfillerStatus,
+          urgency: order.urgency,
+          orderer: order.orderer?.display,
+          instructions: order.instructions,
+          fulfillerComment: order.fulfillerComment,
+          display: order.display,
+        };
+      }) ?? []
+    );
+  }, [labOrders]);
+
+  const groupedOrdersByPatient = useMemo(() => {
+    if (labOrders && labOrders.length > 0) {
+      const patientUuids = [...new Set(labOrders.map((order) => order.patient.uuid))];
+
+      return patientUuids.map((patientUuid) => {
+        const labOrdersForPatient = labOrders.filter((order) => order.patient.uuid === patientUuid);
+        const patient = labOrdersForPatient[0]?.patient;
+        const flattenedLabOrdersForPatient = flattenedLabOrders.filter((order) => order.patientUuid === patientUuid);
+        return {
+          patientId: patient?.identifiers?.find(
+            (identifier) =>
+              identifier.preferred &&
+              !identifier.voided &&
+              identifier.identifierType.uuid === patientIdIdentifierTypeUuid,
+          )?.identifier,
+          patientUuid: patientUuid,
+          patientName: patient?.person?.display,
+          patientAge: patient?.person?.age,
+          patientDob: patient?.person?.birthdate ? formatDate(parseDate(patient.person.birthdate)) : undefined,
+          patientSex: patient?.person?.gender,
+          totalOrders: flattenedLabOrdersForPatient.length,
+          orders: flattenedLabOrdersForPatient,
+          originalOrders: labOrdersForPatient,
+        };
+      });
+    } else {
+      return [];
+    }
+  }, [flattenedLabOrders, labOrders, patientIdIdentifierTypeUuid]);
+
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      // Normalize the search string to lowercase
+      const lowerSearchString = searchString.toLowerCase();
+      return groupedOrdersByPatient.filter(
+        (orderGroup) =>
+          (labTableColumns.includes('name') && orderGroup.patientName?.toLowerCase().includes(lowerSearchString)) ||
+          (labTableColumns.includes('patientId') && orderGroup.patientId?.toLowerCase().includes(lowerSearchString)) ||
+          orderGroup.orders.some((order) => order.orderNumber?.toLowerCase().includes(lowerSearchString)),
+      );
+    }
+
+    return groupedOrdersByPatient;
+  }, [searchString, groupedOrdersByPatient, labTableColumns]);
+
+  const orderStatuses = [
+    { value: null, display: t('all', 'All') },
+    { value: 'RECEIVED', display: t('receivedStatus', 'RECEIVED') },
+    { value: 'IN_PROGRESS', display: t('inProgressStatus', 'IN_PROGRESS') },
+    { value: 'COMPLETED', display: t('completedStatus', 'COMPLETED') },
+    { value: 'EXCEPTION', display: t('exceptionStatus', 'EXCEPTION') },
+    { value: 'ON_HOLD', display: t('onHoldStatus', 'ON_HOLD') },
+    { value: 'DECLINED', display: t('declinedStatus', 'DECLINED') },
+  ];
+
+  const columns = useMemo(() => {
+    return labTableColumns
+      .map((column) => {
+        const spec = labTableColumnSpec[column];
+        if (!spec) {
+          throw new Error(`Lab table has been configured with an invalid column: ${column}`);
+        }
+        if (spec.key === 'action') {
+          const showActionColumn = flattenedLabOrders.some((order) => order.fulfillerStatus === 'COMPLETED');
+          if (!showActionColumn) {
+            return null;
+          }
+        }
+        return { header: t(spec.headerLabelKey, spec.headerLabelDefault), key: spec.key };
+      })
+      .filter(Boolean)
+      .map((column) => ({ ...column, id: column.key }));
+  }, [t, flattenedLabOrders, labTableColumns]);
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const { goTo, results: paginatedLabOrders, currentPage } = usePagination(searchResults, currentPageSize);
+
+  const handleOrderStatusChange = ({ selectedItem }: { selectedItem: { value: FulfillerStatus; display: string } }) =>
+    setFilter(selectedItem.value);
+
+  const handlePrintModal = (orders: Array<Order>) => {
+    const completedOrders = orders.filter((order) => order.fulfillerStatus === 'COMPLETED');
+    const dispose = showModal('print-lab-results-modal', {
+      closeModal: () => dispose(),
+      orders: completedOrders,
+    });
+  };
+
+  const handleLaunchModal = (orders: Array<Order>) => {
+    const completedOrders = orders.filter((order) => order.fulfillerStatus === 'COMPLETED');
+    const dispose = showModal('edit-lab-results-modal', {
+      orders: completedOrders,
+      closeModal: () => dispose(),
+      patient: completedOrders[0]?.patient,
+      workspaceName: 'lab-app-test-results-form-workspace',
+    });
+  };
+
+  const tableRows = useMemo(() => {
+    return paginatedLabOrders.map((groupedOrder) => ({
+      ...groupedOrder,
+      id: groupedOrder.patientUuid,
+      action: groupedOrder.orders.some((o) => o.fulfillerStatus === 'COMPLETED') ? (
+        <div className={styles.actionCell}>
+          <OverflowMenu aria-label="Actions" flipped iconDescription="Actions">
+            <ExtensionSlot
+              className={styles.transitionOverflowMenuItemSlot}
+              name="transition-overflow-menu-item-slot"
+              state={{ patientUuid: groupedOrder.patientUuid }}
+              // Without tabIndex={0} here, the overflow menu incorrectly sets initial focus to the second item instead of the first.
+              tabIndex={0}
+            />
+            <OverflowMenuItem
+              className={styles.menuitem}
+              itemText={t('editResults', 'Edit results')}
+              onClick={() => handleLaunchModal(groupedOrder.originalOrders)}
+            />
+            <OverflowMenuItem
+              className={styles.menuitem}
+              itemText={t('printTestResults', 'Print test results')}
+              onClick={() => handlePrintModal(groupedOrder.originalOrders)}
+            />
+          </OverflowMenu>
+        </div>
+      ) : null,
+    }));
+  }, [paginatedLabOrders, t]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} />;
+  }
+
+  return (
+    <DataTable rows={tableRows} headers={columns} useZebraStyles>
+      {({ getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps, headers, rows }) => (
+        <TableContainer className={styles.tableContainer}>
+          <TableToolbar>
+            <TableToolbarContent className={styles.tableToolBar}>
+              <Layer className={styles.toolbarItem}>
+                {props.useFilter && (
+                  <Dropdown
+                    id="orderStatusFilter"
+                    initialSelectedItem={
+                      filter ? orderStatuses.find((status) => status.value === filter) : orderStatuses[0]
+                    }
+                    items={orderStatuses}
+                    itemToString={(item) => item?.display}
+                    label=""
+                    onChange={handleOrderStatusChange}
+                    titleText={t('filterOrdersByStatus', 'Filter orders by status') + ':'}
+                    type="inline"
+                  />
+                )}
+                <OrdersDateRangePicker />
+              </Layer>
+              <Layer className={styles.toolbarItem}>
+                <TableToolbarSearch
+                  expanded
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchString(e.target.value)}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size="sm"
+                />
+              </Layer>
+            </TableToolbarContent>
+          </TableToolbar>
+          <Table className={styles.tableWrapper} {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  <TableExpandRow {...getRowProps({ row })} key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                    ))}
+                  </TableExpandRow>
+                  {row.isExpanded ? (
+                    <TableExpandedRow colSpan={headers.length + 2}>
+                      <ListOrderDetails
+                        groupedOrders={groupedOrdersByPatient.find((item) => item.patientUuid === row.id)}
+                      />
+                    </TableExpandedRow>
+                  ) : (
+                    <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                  )}
+                </React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+          {rows.length === 0 ? (
+            <div className={styles.tileContainer}>
+              <Tile className={styles.tile}>
+                <div className={styles.tileContent}>
+                  <p className={styles.content}>{t('noLabRequestsFound', 'No lab requests found')}</p>
+                  <p className={styles.emptyStateHelperText}>
+                    {t('checkFilters', 'Please check the filters above and try again')}
+                  </p>
+                </div>
+              </Tile>
+            </div>
+          ) : null}
+          {rows.length > 0 && (
+            <Pagination
+              forwardText={t('nextPage', 'Next page')}
+              backwardText={t('previousPage', 'Previous page')}
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={searchResults?.length}
+              className={styles.pagination}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) setPageSize(pageSize);
+                if (page !== currentPage) goTo(page);
+              }}
+            />
+          )}
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default OrdersDataTable;

package/src/components/orders-table/orders-data-table.scss

@@ -0,0 +1,129 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.tableContainer {
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+  padding: 0;
+
+  :global(.cds--data-table-content) {
+    overflow-x: unset;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: colors.$gray-70;
+  }
+
+  :global(.cds--data-table) {
+    background-color: colors.$gray-20;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: static;
+  }
+
+  :global(.cds--overflow-menu) {
+    background-color: transparent;
+    border: none;
+  }
+
+  :global(.cds--pagination) {
+    border-top: none;
+  }
+
+  .toolbarContent {
+    height: layout.$spacing-07;
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.toolbarItem {
+  margin-left: layout.$spacing-05;
+  display: flex;
+  align-items: center;
+
+  & p {
+    padding-right: layout.$spacing-03;
+    @include type.type-style('body-01');
+    color: colors.$gray-70;
+  }
+
+  :global(.cds--date-picker__input) {
+    height: layout.$spacing-09;
+  }
+
+  :global(.cds--dropdown) {
+    height: layout.$spacing-09;
+  }
+
+  :global(.cds--list-box__menu:focus) {
+    outline: none;
+  }
+}
+
+.tableWrapper tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.tileContainer {
+  background-color: colors.$white;
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.singleLineDisplay {
+  white-space: nowrap;
+}
+
+.emptyStateHelperText {
+  @include type.type-style('helper-text-02');
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.tableToolBar {
+  height: auto;
+  align-items: flex-end;
+
+  :global(.cds--toolbar-search-container-expandable) {
+    align-self: flex-end;
+  }
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.transitionOverflowMenuItemSlot {
+  min-width: 100%;
+
+  :global(.cds--overflow-menu-options__btn) {
+    min-width: 100%;
+  }
+}

package/src/components/orders-table/orders-data-table.test.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useConfig, getDefaultsFromConfigSchema, type Order, type Patient } from '@openmrs/esm-framework';
+import { configSchema, type Config } from '../../config-schema';
+import { useLabOrders } from '../../laboratory.resource';
+import OrdersDataTable from './orders-data-table.component';
+
+jest.mock('../../laboratory.resource', () => ({
+  useLabOrders: jest.fn(),
+}));
+
+const mockUseConfig = jest.mocked(useConfig<Config>);
+const mockUseLabOrders = jest.mocked(useLabOrders);
+
+function mockUseLabOrdersImplementation(props: Parameters<typeof useLabOrders>[0]) {
+  const mockPatient1: Partial<Patient> = {
+    uuid: 'patient-uuid-1',
+    display: 'PAT-001 - Pete Seeger',
+    identifiers: props.includePatientId
+      ? [
+          {
+            uuid: 'identifier-uuid-1',
+            identifier: 'PAT-001',
+            preferred: true,
+            voided: false,
+            identifierType: {
+              uuid: 'identifier-type-uuid-1',
+            },
+          },
+          {
+            uuid: 'identifier-uuid-2',
+            identifier: 'BAD-ID-NOT-PREFERRED',
+            preferred: false,
+            voided: false,
+            identifierType: {
+              uuid: 'identifier-type-uuid-1',
+            },
+          },
+        ]
+      : undefined,
+    person: {
+      uuid: 'person-uuid-1',
+      display: 'Pete Seeger',
+      age: 70,
+      gender: 'M',
+    },
+  };
+  const mockPatient2: Partial<Patient> = {
+    uuid: 'patient-uuid-2',
+    display: 'PAT-002 - Bob Dylan',
+    identifiers: props.includePatientId
+      ? [
+          {
+            uuid: 'identifier-uuid-3',
+            identifier: 'BAD-ID-WRONG-TYPE',
+            preferred: true,
+            voided: false,
+            identifierType: {
+              uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+            },
+          },
+          {
+            uuid: 'identifier-uuid-4',
+            identifier: 'PAT-002',
+            preferred: true,
+            voided: false,
+            identifierType: {
+              uuid: 'identifier-type-uuid-1',
+            },
+          },
+        ]
+      : undefined,
+    person: {
+      uuid: 'person-uuid-2',
+      display: 'Bob Dylan',
+      age: 60,
+      gender: 'M',
+    },
+  };
+
+  const mockOrderer = {
+    uuid: 'orderer-uuid-1',
+    display: 'Dr. John Doe',
+    person: {
+      display: 'Dr. John Doe',
+    },
+  };
+
+  const labOrders = [
+    {
+      uuid: 'order-uuid-1',
+      orderNumber: 'ORD-001',
+      patient: mockPatient1 as Patient,
+      dateActivated: '2021-01-01',
+      fulfillerStatus: 'RECEIVED',
+      urgency: 'ROUTINE',
+      orderer: mockOrderer,
+      instructions: 'Inspect banjo & check tuning',
+      fulfillerComment: null,
+      display: 'Banjo Inspection',
+    },
+    {
+      uuid: 'order-uuid-2',
+      orderNumber: 'ORD-002',
+      patient: mockPatient1 as Patient,
+      dateActivated: '2021-01-01',
+      fulfillerStatus: 'RECEIVED',
+      urgency: 'ROUTINE',
+      orderer: mockOrderer,
+      instructions: 'Give it a strum',
+      fulfillerComment: null,
+      display: 'Guitar Inspection',
+    },
+    {
+      uuid: 'order-uuid-3',
+      orderNumber: 'ORD-003',
+      patient: mockPatient2 as Patient,
+      dateActivated: '2021-01-01',
+      fulfillerStatus: 'RECEIVED',
+      urgency: 'EMERGENCY',
+      orderer: mockOrderer,
+      instructions: 'Make some noise',
+      fulfillerComment: null,
+      display: 'Sound Check',
+    },
+  ]
+    .filter((order) => !props.status || order.fulfillerStatus === props.status)
+    .filter((order) => !props.excludeCanceled || order.fulfillerStatus !== 'CANCELLED') as Array<Order>;
+  return {
+    labOrders,
+    isLoading: false,
+    isError: false,
+    mutate: jest.fn(),
+    isValidating: false,
+  };
+}
+
+describe('OrdersDataTable', () => {
+  beforeEach(() => {
+    mockUseLabOrders.mockImplementation(mockUseLabOrdersImplementation);
+  });
+
+  it('should render one row per patient and show lab details', async () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+    });
+
+    render(<OrdersDataTable />);
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(5);
+    const dataRows = rows.slice(1).filter((row) => !row.classList.contains('hiddenRow'));
+    expect(dataRows).toHaveLength(2);
+    const headerRow = rows[0];
+    expect(headerRow).toHaveTextContent('Patient');
+    expect(headerRow).toHaveTextContent('Age');
+    expect(headerRow).toHaveTextContent('Sex');
+    expect(headerRow).toHaveTextContent('Total Orders');
+    const row1 = dataRows[0];
+    expect(row1).toHaveTextContent('Pete Seeger');
+    expect(row1).toHaveTextContent('70');
+    expect(row1).toHaveTextContent('M');
+    expect(row1).toHaveTextContent('2');
+    const row2 = dataRows[1];
+    expect(row2).toHaveTextContent('Bob Dylan');
+    expect(row2).toHaveTextContent('60');
+    expect(row2).toHaveTextContent('M');
+    expect(row2).toHaveTextContent('1');
+
+    const user = userEvent.setup();
+    await user.click(within(row1).getByLabelText('Expand current row'));
+
+    const orderDetailsTables = within(table).getAllByRole('table');
+    expect(orderDetailsTables).toHaveLength(2);
+    const orderDetailsTable1 = orderDetailsTables[0];
+    const orderDetailsTable2 = orderDetailsTables[1];
+    expect(orderDetailsTable1).toHaveTextContent('Banjo Inspection');
+    expect(orderDetailsTable1).toHaveTextContent('Inspect banjo & check tuning');
+    expect(orderDetailsTable1).toHaveTextContent('Dr. John Doe');
+    expect(orderDetailsTable1).toHaveTextContent('01-Jan-2021');
+    expect(orderDetailsTable1).toHaveTextContent('Received');
+    expect(orderDetailsTable1).toHaveTextContent('Routine');
+    expect(orderDetailsTable2).toHaveTextContent('Guitar Inspection');
+    expect(orderDetailsTable2).toHaveTextContent('Give it a strum');
+    expect(orderDetailsTable2).toHaveTextContent('Dr. John Doe');
+    expect(orderDetailsTable2).toHaveTextContent('01-Jan-2021');
+    expect(orderDetailsTable2).toHaveTextContent('Received');
+    expect(orderDetailsTable2).toHaveTextContent('Routine');
+  });
+
+  it('should show patient identifier if it is configured', () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      labTableColumns: ['patientId', 'age', 'totalOrders'],
+      patientIdIdentifierTypeUuid: 'identifier-type-uuid-1',
+    });
+    render(<OrdersDataTable />);
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(5);
+    const dataRows = rows.slice(1).filter((row) => !row.classList.contains('hiddenRow'));
+    expect(dataRows).toHaveLength(2);
+    const row1 = dataRows[0];
+    expect(row1).toHaveTextContent('PAT-001');
+    expect(row1).toHaveTextContent('70');
+    expect(row1).toHaveTextContent('2');
+    const row2 = dataRows[1];
+    expect(row2).toHaveTextContent('PAT-002');
+    expect(row2).toHaveTextContent('60');
+    expect(row2).toHaveTextContent('1');
+    expect(screen.queryByText(/BAD-ID/)).not.toBeInTheDocument();
+  });
+});