@openmrs/esm-laboratory-app 1.1.2-pre.88 → 1.2.1-pre.590

package/src/components/orders-table/list-order-details.component.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import type { ReactNode } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -7,119 +8,111 @@ import {
   StructuredListCell,
   StructuredListRow,
   StructuredListWrapper,
-  Tag,
 } from '@carbon/react';
 import { capitalize } from 'lodash-es';
 import { ExtensionSlot } from '@openmrs/esm-framework';
 import { type ListOrdersDetailsProps } from '../../types';
 import styles from './list-order-details.scss';
 
-const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
+type OrderDetailsRowProps = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+const OrderDetailRow = ({ label, value }: OrderDetailsRowProps) => {
+  return (
+    <StructuredListRow className={styles.orderDetailsRow}>
+      <StructuredListCell className={styles.orderDetailsCell}>
+        <span className={styles.orderDetailsTextBold}>{label}</span>
+      </StructuredListCell>
+      <StructuredListCell className={styles.orderDetailsCell}>
+        <span className={styles.orderDetailsText}>{value}</span>
+      </StructuredListCell>
+    </StructuredListRow>
+  );
+};
+const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders }) => {
   const { t } = useTranslation();
-  const orders = props.groupedOrders?.orders;
+  const orders = groupedOrders?.orders ?? [];
 
   return (
     <div>
-      {orders &&
-        orders.map((row) => (
-          <div className={styles.orderDetailsContainer}>
-            <div className={styles.orderUrgency}></div>
-            <div className={styles.orderHeader}>
-              <span className={styles.orderNumber}>
-                {t('orderNumbers', 'Order number:')} {row.orderNumber}
-              </span>
-              <span className={styles.orderDate}>
-                {t('orderDate', 'Order Date:')} {row.dateActivated}
-              </span>
-            </div>
-            <div className={styles.orderStatus}>
-              {t('orderStatus', 'Status:')}
-              <Tag size="lg" type={row.fulfillerStatus ? 'green' : 'red'}>
-                {row.fulfillerStatus || t('orderNotPicked', 'Order not picked')}
-              </Tag>
-            </div>
-            <div>
-              <div className={styles.orderUrgency}>
-                <span className={styles.urgencyStatus}>
-                  {t('urgencyStatus', 'Urgency: ')} {capitalize(row.urgency)}
-                </span>
-              </div>
-              <StructuredListWrapper>
-                <StructuredListBody>
-                  <StructuredListRow>
-                    <StructuredListCell>{t('testOrdered', 'Test ordered: ')}</StructuredListCell>
-                    <StructuredListCell>{capitalize(row?.display)}</StructuredListCell>
-                    <br />
-                    <StructuredListCell>
-                      <div className={styles.instructionLabelContainer}>
-                        <span className={styles.instructionLabel}>{t('orderInStruction', 'Instructions: ')}</span>
-                        <span className={styles.instructions}>
-                          {row.instructions ?? (
-                            <Tag size="lg" type="red">
-                              {t('NoInstructionLeft', 'No instructions are provided.')}
-                            </Tag>
-                          )}
-                        </span>
-                      </div>
-                    </StructuredListCell>
-                  </StructuredListRow>
-                </StructuredListBody>
-              </StructuredListWrapper>
-              {row.fulfillerStatus === 'COMPLETED' && (
-                <Accordion>
-                  <AccordionItem
-                    title={<span className={styles.accordionTitle}>{t('viewTestResults', 'View test results')}</span>}
+      {orders.map((row) => (
+        <div key={row.orderNumber} className={styles.orderDetailsContainer}>
+          <StructuredListWrapper className={styles.orderDetailsWrapper}>
+            <StructuredListBody>
+              <OrderDetailRow
+                label={t('urgencyStatus', 'Urgency:')}
+                value={
+                  <div className={styles.priorityPill} data-urgency={row.urgency?.replace('_', ' ')}>
+                    {capitalize(row.urgency?.replace(/_/g, ' '))}
+                  </div>
+                }
+              />
+              <OrderDetailRow label={t('testOrdered', 'Test ordered:')} value={capitalize(row.display)} />
+              <OrderDetailRow
+                label={t('orderStatus', 'Status:')}
+                value={
+                  <div
+                    className={styles.statusPill}
+                    data-status={(row.fulfillerStatus ?? 'Order not picked').replace('_', ' ')}
                   >
-                    <div className={styles.viewResults}>
-                      <ExtensionSlot
-                        className={styles.labResultSlot}
-                        state={{ order: row }}
-                        name="completed-lab-order-results-slot"
-                      />
-                    </div>
-                  </AccordionItem>
-                </Accordion>
-              )}
+                    {capitalize(row.fulfillerStatus?.replace('_', '')) || t('orderNotPicked', 'Order not picked')}
+                  </div>
+                }
+              />
+              <OrderDetailRow label={t('orderNumbers', 'Order number:')} value={capitalize(row.orderNumber)} />
+              <OrderDetailRow label={t('orderDate', 'Order date:')} value={row.dateActivated} />
+              <OrderDetailRow label={t('orderedBy', 'Ordered By:')} value={capitalize(row.orderer?.display)} />
+              <OrderDetailRow
+                label={t('orderInstructions', 'Instructions:')}
+                value={row.instructions ?? t('NoInstructionLeft', 'No instructions are provided.')}
+              />
+
               {row.fulfillerStatus === 'DECLINED' && (
-                <StructuredListRow>
-                  <StructuredListCell> {t('reasonForDecline', 'Reason for decline:')}</StructuredListCell>
-                  <StructuredListCell>{row.fulfillerComment}</StructuredListCell>
-                </StructuredListRow>
+                <OrderDetailRow label={t('reasonForDecline', 'Reason for decline:')} value={row.fulfillerComment} />
               )}
-              <StructuredListRow className={styles.nameOrderRow}>
-                <StructuredListCell>
-                  <span className={styles.nameOrder}>
-                    {t('ordererName', 'Orderer Name: ')} {capitalize(row.orderer?.display)}
-                  </span>
-                </StructuredListCell>
-              </StructuredListRow>
+            </StructuredListBody>
+          </StructuredListWrapper>
+          {row.fulfillerStatus === 'COMPLETED' && (
+            <Accordion>
+              <AccordionItem
+                title={<span className={styles.accordionTitle}>{t('viewTestResults', 'View test results')}</span>}
+              >
+                <div className={styles.viewResults}>
+                  <ExtensionSlot
+                    className={styles.labResultSlot}
+                    state={{ order: row }}
+                    name="completed-lab-order-results-slot"
+                  />
+                </div>
+              </AccordionItem>
+            </Accordion>
+          )}
 
-              <div className={styles.buttonSection}>
-                {/* @ts-ignore */}
-                {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
-                  <>
-                    <div className={styles.testsOrderedActions}>
-                      <ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
-                      <ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
-                    </div>
-                  </>
-                ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
-                  <>
-                    <div className={styles.testsOrderedActions}>
-                      <ExtensionSlot
-                        className={styles.menuLink}
-                        state={{ order: row }}
-                        name="inprogress-tests-actions-slot"
-                      />
-                    </div>
-                  </>
-                ) : (
-                  <div></div>
-                )}
-              </div>
-            </div>
+          <div className={styles.buttonSection}>
+            {/* @ts-ignore */}
+            {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
+                  <ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
+                </div>
+              </>
+            ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: row }}
+                    name="inprogress-tests-actions-slot"
+                  />
+                </div>
+              </>
+            ) : null}
           </div>
-        ))}
+        </div>
+      ))}
     </div>
   );
 };

package/src/components/orders-table/list-order-details.scss

@@ -7,29 +7,14 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding-top: layout.$spacing-03;
   width: 100%;
-  margin-left: layout.$spacing-05;
-}
-
-.nameOrderRow {
-  border-top: none;
-}
-
-.nameOrder {
-  // TODO: Prefer type styles over scales as mentioned here: https://carbondesignsystem.com/elements/typography/code/#type-scale
-  font-size: type.type-scale(2);
-}
-
-.testOrder {
-  font-size: type.type-scale(2);
-  font-weight: bold;
 }
 
 .testsOrderedActions {
-  margin-left: auto;
   display: flex;
-  padding-right: 1rem;
+  justify-content: flex-end;
+  padding: layout.$spacing-03 0;
+  width: 100%;
 }
 
 .menuLink {
@@ -40,53 +25,35 @@
   width: 80%;
   display: flex;
   flex-direction: column;
-  padding: layout.$spacing-05;
-  margin-left: layout.$spacing-13;
   background-color: colors.$white-0;
-  margin: layout.$spacing-05 0;
-}
-
-.orderUrgency {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 0 layout.$spacing-03;
-  margin-bottom: layout.$spacing-03;
-}
-
-.orderHeader {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0;
-  margin-bottom: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-05;
 }
 
-.orderNumber {
-  font-size: type.type-scale(2);
+.orderDetailsContainer:last-child {
+  margin-bottom: 0;
 }
 
-.orderStatus {
-  font-size: type.type-scale(2);
+.orderDetailsRow {
+  &:first-child {
+    border-top: none !important;
+  }
 }
 
-.orderDate {
-  text-align: right;
-  font-size: type.type-scale(2);
+.orderDetailsWrapper {
+  :global(.cds--structured-list-td) {
+    align-content: center;
+    padding: layout.$spacing-03 !important;
+  }
 }
 
-.instructions {
-  text-align: justify;
-  font-size: type.type-scale(1);
+.textBold {
+  font-weight: bold;
 }
 
-.urgencyStatus {
-  font-size: type.type-scale(2);
-}
-
-.instructionLabel {
-  font-weight: bold;
-  font-size: type.type-scale(2);
+.orderDetailsTextBold {
+  @extend .textBold;
 }
 
 .labResultSlot {
@@ -95,7 +62,7 @@
 }
 
 .accordionTitle {
-  font-weight: bold;
+  @extend .textBold;
 }
 
 .instructionLabelContainer {
@@ -103,3 +70,58 @@
   align-items: center;
   justify-content: center;
 }
+
+.pill {
+  @include type.type-style('label-01');
+  display: inline-block;
+  background-color: colors.$gray-20;
+  border-radius: layout.$spacing-03;
+  padding: layout.$spacing-02;
+  padding-inline: layout.$spacing-03;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.priorityPill {
+  @extend .pill;
+
+  &[data-urgency='ROUTINE'] {
+    background-color: colors.$green-20;
+  }
+
+  &[data-urgency='ON SCHEDULED_DATE'] {
+    background-color: colors.$red-20;
+  }
+}
+
+.statusPill {
+  @extend .pill;
+
+  &[data-status='RECEIVED'] {
+    background-color: colors.$blue-20;
+  }
+
+  &[data-status='IN PROGRESS'] {
+    background-color: colors.$cyan-20;
+  }
+
+  &[data-status='ON HOLD'] {
+    background-color: colors.$teal-20;
+  }
+
+  &[data-status='EXCEPTION'] {
+    background-color: colors.$magenta-20;
+  }
+
+  &[data-status='COMPLETED'] {
+    background-color: colors.$green-20;
+  }
+
+  &[data-status='DISCONTINUED'],
+  &[data-status='DECLINED'],
+  &[data-status='Order not picked'] {
+    background-color: colors.$red-20;
+  }
+}

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

@@ -23,14 +23,13 @@ import {
   Tile,
 } from '@carbon/react';
 import { ExtensionSlot, formatDate, parseDate, showModal, usePagination } from '@openmrs/esm-framework';
-import { type Order } from '@openmrs/esm-patient-common-lib';
-import { upperCase } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import { useLabOrders, useSearchGroupedResults } from '../../laboratory-resource';
+import { type Order } from '@openmrs/esm-patient-common-lib';
 import type { FulfillerStatus, OrdersDataTableProps } from '../../types';
+import { useLabOrders, useSearchGroupedResults } 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';
-import { OrdersDateRangePicker } from './orders-date-range-picker.component';
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();
@@ -127,7 +126,6 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
     });
   };
 
-
   const tableRows = useMemo(() => {
     return paginatedLabOrders.map((order) => ({
       id: order.patientId,
@@ -138,13 +136,21 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
       patientGender: order.orders[0]?.patient?.person?.gender || '',
       action: order.orders.some((o) => o.fulfillerStatus === 'COMPLETED') ? (
         <div className={styles.actionCell}>
-          <OverflowMenu aria-label="Actions" iconDescription="Actions" flipped>
-            <ExtensionSlot name="transition-overflow-menu-item-slot" state={{ patientUuid: order?.patientId }} />
+          <OverflowMenu aria-label="Actions" flipped iconDescription="Actions">
+            <ExtensionSlot
+              className={styles.transitionOverflowMenuItemSlot}
+              name="transition-overflow-menu-item-slot"
+              state={{ patientUuid: order?.patientId }}
+              // 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(order?.orders)}
             />
             <OverflowMenuItem
+              className={styles.menuitem}
               itemText={t('printTestResults', 'Print test results')}
               onClick={() => handlePrintModal(order?.orders)}
             />
@@ -155,11 +161,11 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   }, [paginatedLabOrders, t]);
 
   if (isLoading) {
-    return <DataTableSkeleton className={styles.loader} role="progressbar" showHeader={false} showToolbar={false} />;
+    return <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} />;
   }
 
   return (
-    <DataTable rows={tableRows} headers={columns} useZebraStyles={labOrders?.length > 1}>
+    <DataTable rows={tableRows} headers={columns} useZebraStyles>
       {({ getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps, headers, rows }) => (
         <TableContainer className={styles.tableContainer}>
           <TableToolbar>
@@ -173,6 +179,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
                     }
                     items={orderStatuses}
                     itemToString={(item) => item?.display}
+                    label=""
                     onChange={handleOrderStatusChange}
                     titleText={t('filterOrdersByStatus', 'Filter orders by status') + ':'}
                     type="inline"
@@ -183,7 +190,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
               <Layer className={styles.toolbarItem}>
                 <TableToolbarSearch
                   expanded
-                  onChange={(e) => setSearchString(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchString(e.target.value)}
                   placeholder={t('searchThisList', 'Search this list')}
                   size="sm"
                 />
@@ -193,9 +200,9 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
           <Table className={styles.tableWrapper} {...getTableProps()}>
             <TableHead>
               <TableRow>
-                <TableExpandHeader enableToggle={rows.length > 0} {...getExpandHeaderProps()} />
+                <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
                 {headers.map((header) => (
-                  <TableHeader {...getHeaderProps({ header })}>{header.header?.content ?? header.header}</TableHeader>
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                 ))}
               </TableRow>
             </TableHead>

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

@@ -5,7 +5,6 @@
 .tableContainer {
   border: 1px solid colors.$gray-20;
   background-color: colors.$gray-10;
-  margin: layout.$spacing-05;
   padding: 0;
 
   :global(.cds--data-table-content) {
@@ -43,10 +42,6 @@
   }
 }
 
-.loader {
-  margin: layout.$spacing-05;
-}
-
 .toolbarItem {
   margin-left: layout.$spacing-05;
   display: flex;
@@ -114,5 +109,16 @@
 
 .tableToolBar {
   height: auto;
-  padding-top: layout.$spacing-04;
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.transitionOverflowMenuItemSlot {
+  min-width: 100%;
+
+  :global(.cds--overflow-menu-options__btn) {
+    min-width: 100%;
+  }
 }

package/src/components/orders-table/orders-date-range-picker.component.tsx

@@ -30,8 +30,8 @@ export const OrdersDateRangePicker = () => {
         maxDate={currentDate.toISOString()}
         value={dateRange}
       >
-        <DatePickerInput id="date-picker-input-id-start" placeholder="dd/mm/yyyy" size="md" />
-        <DatePickerInput id="date-picker-input-id-finish" placeholder="dd/mm/yyyy" size="md" />
+        <DatePickerInput id="date-picker-input-id-start" labelText="" placeholder="dd/mm/yyyy" size="md" />
+        <DatePickerInput id="date-picker-input-id-finish" labelText="" placeholder="dd/mm/yyyy" size="md" />
       </DatePicker>
     </div>
   );

package/src/components/overlay/overlay.component.tsx

@@ -22,16 +22,14 @@ const Overlay: React.FC = () => {
               </Button>
             </div>
           ) : (
-            <Header
-              onClick={() => closeOverlay()}
-              aria-label={t('tabletOverlay', 'Tablet overlay')}
-              className={styles.tabletOverlayHeader}
-            >
-              <Button hasIconOnly>
-                <ArrowLeft size={16} />
-              </Button>
-              <div className={styles.headerContent}>{header}</div>
-            </Header>
+            <div onClick={() => closeOverlay()}>
+              <Header aria-label={t('tabletOverlay', 'Tablet overlay')} className={styles.tabletOverlayHeader}>
+                <Button hasIconOnly>
+                  <ArrowLeft size={16} />
+                </Button>
+                <div className={styles.headerContent}>{header}</div>
+              </Header>
+            </div>
           )}
           <div>{component}</div>
         </div>

package/src/index.ts

@@ -55,6 +55,7 @@ export const completedLabRequestsTable = getAsyncLifecycle(
   options,
 );
 
+// t('Declined tests', 'Declined tests')
 export const declinedLabRequestsTable = getAsyncLifecycle(
   () => import('./lab-tabs/data-table-extensions/declined-lab-requests-table-extension'),
   options,

package/src/lab-tabs/actions/pickup-lab-request-action.component.tsx

@@ -11,7 +11,7 @@ interface PickLabRequestActionMenuProps {
 
 const PickupLabRequestAction: React.FC<PickLabRequestActionMenuProps> = ({ order }) => {
   const { t } = useTranslation();
-  const unSupportedStatuses = ['IN_PROGRESS', 'COMPLETED', 'DECLINED'];
+  const unsupportedStatuses = ['COMPLETED', 'DECLINED', 'IN_PROGRESS'];
 
   const launchModal = useCallback(() => {
     const dispose = showModal('pickup-lab-request-modal', {
@@ -23,13 +23,13 @@ const PickupLabRequestAction: React.FC<PickLabRequestActionMenuProps> = ({ order
   return (
     <Button
       className={styles.actionButton}
-      disabled={unSupportedStatuses.includes(order.fulfillerStatus)}
+      disabled={unsupportedStatuses.includes(order.fulfillerStatus)}
       size="sm"
       kind="primary"
-      key={`${order.uuid}`}
+      key={order.uuid}
       onClick={launchModal}
     >
-      {t('pickLabRequest', 'Pick Lab Request')}
+      {t('pickRequest', 'Pick lab request')}
     </Button>
   );
 };