feat O3-4236: Improvements on the UI, Button Hierarchy and Placement …

…in Order Expansion View (#103) * Ui improvements * (refactor) updated the translation
openmrs · Dec 3, 2024 · 45ad4c7 · 45ad4c7
1 parent 5579a42
commit 45ad4c7
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 122 deletions.
diff --git a/src/components/orders-table/list-order-details.component.tsx b/src/components/orders-table/list-order-details.component.tsx
@@ -1,63 +1,133 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tile, Accordion, AccordionItem } from '@carbon/react';
-import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
+import {
+  Tag,
+  StructuredListWrapper,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+  Button,
+  Accordion,
+  AccordionItem,
+} from '@carbon/react';
+import capitalize from 'lodash-es/capitalize';
 import { ListOrdersDetailsProps } from '../../types';
 import styles from './list-order-details.scss';
-import { OrderDetail } from './order-detail.component';
-
+import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
+import { Edit } from '@carbon/react/icons';
 const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
   const { t } = useTranslation();
   const orders = props.groupedOrders?.orders;
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
-    <div className={styles.ordersContainer}>
+    <div>
       {orders &&
         orders.map((row) => (
-          <Tile className={styles.orderTile}>
-            <div>
-              <OrderDetail label={t('date', 'Date').toUpperCase()} value={row.dateActivated} />
-              <OrderDetail label={t('orderNumber', 'Order number').toUpperCase()} value={row.orderNumber} />
-              <OrderDetail label={t('procedure', 'Procedure').toUpperCase()} value={row.display} />
-              <OrderDetail label={t('status', 'Status').toUpperCase()} value={row.fulfillerStatus} />
-              <OrderDetail label={t('urgency', 'Urgency').toUpperCase()} value={row.urgency} />
-              <OrderDetail label={t('orderer', 'Orderer').toUpperCase()} value={row.orderer?.display} />
-              <OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions ?? '--'} />
+          <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.actionButtons}>
-              {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
-                <ExtensionSlot className={styles.menuLink} state={{ order: row }} name="tests-ordered-actions-slot" />
-              ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
-                <ExtensionSlot
-                  className={styles.menuLink}
-                  state={{ order: row }}
-                  name="inprogress-tests-actions-slot"
-                />
-              ) : row.fulfillerStatus === 'COMPLETED' ? (
-                <ExtensionSlot
-                  className={styles.menuLink}
-                  state={{ order: row }}
-                  name="completed-ordered-actions-slot"
-                />
-              ) : (
-                <div></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>
+                      <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>
+                    </StructuredListCell>
+                  </StructuredListRow>
+                </StructuredListBody>
+              </StructuredListWrapper>
               {row.fulfillerStatus === 'COMPLETED' && (
-                <div className={styles.accordionContainer}>
-                  <Accordion>
-                    <AccordionItem title={t('results', 'Results')}>
+                <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"
                       />
-                    </AccordionItem>
-                  </Accordion>
-                </div>
+                    </div>
+
+                    {row.fulfillerStatus === 'COMPLETED' && (
+                      <ExtensionSlot
+                        className={styles.menuLink}
+                        state={{ order: row }}
+                        name="completed-ordered-actions-slot"
+                      />
+                    )}
+                  </AccordionItem>
+                </Accordion>
               )}
+              <StructuredListRow>
+                <StructuredListCell>
+                  <span className={styles.nameOrder}>
+                    {t('ordererName', 'Orderer Name: ')} {capitalize(row.orderer?.display)}
+                  </span>
+                </StructuredListCell>
+              </StructuredListRow>
+
+              <div className={styles.buttonSection}>
+                <div className={styles.actionButtons}>
+                  {row.fulfillerStatus === 'New' ||
+                  row.fulfillerStatus === 'RECEIVED' ||
+                  row.fulfillerStatus == null ? (
+                    <>
+                      <div className={styles.actionButtons}>
+                        <div className={styles.rejectButton}>
+                          <ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
+                        </div>
+                        <div className={styles.testsOrderedActions}>
+                          <ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
+                        </div>
+                      </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>
-          </Tile>
+          </div>
         ))}
     </div>
   );

diff --git a/src/components/orders-table/list-order-details.scss b/src/components/orders-table/list-order-details.scss
@@ -1,61 +1,99 @@
 @use '@carbon/layout';
 @use '@carbon/colors';
 @use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+.buttonSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: layout.$spacing-03;
+  width: 100%;
+  gap: 10rem;
+}
+
+.nameOrder {
+  font-size: type.type-scale(2);
+  margin-left: layout.$spacing-04;
+}
+.testOrder {
+  font-size: type.type-scale(2);
+  font-weight: bold;
+}
 
-.orderTile {
+.actionButtons {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
-  margin: 2px 0 8px;
-  padding: 0 8px 0 8px;
-  background-color: colors.$white-0;
-  border-left: 4px solid var(--brand-03);
-  color: $text-02;
-  margin-bottom: 1rem !important;
+}
 
-  &:hover {
-    background-color: colors.$white-hover;
-  }
+.testsOrderedActions {
+  margin-left: auto;
+  display: flex;
 }
 
-.ordersContainer {
+.rejectButton {
+  margin-right: auto;
   display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  margin-bottom: 1rem;
+}
 
-  &:global(.cds--tile) {
-    min-height: 3rem !important;
-    padding-left: 10px !important;
-  }
+.menuLink {
+  display: inline-flex;
 }
 
-.ordersContainer > :global(.cds--tile) {
-  min-height: 3rem !important;
-  padding-left: 10px !important;
-  margin: auto;
+.orderDetailsContainer {
+  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;
 }
 
-.orderPropertyDisplay {
-  font-size: 15px !important;
+.orderUrgency {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
-.bodyLong01 {
-  font-size: 13px !important;
+.orderHeader {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  margin-bottom: layout.$spacing-03;
+}
+.orderNumber {
+  font-size: type.type-scale(2);
+}
+.orderStatus {
+  font-size: type.type-scale(2);
 }
 
-.displayValue {
-  color: #525252;
-  font-weight: bold;
-  width: layout.$spacing-05;
-  height: layout.$spacing-05;
+.orderDate {
+  text-align: right;
+  font-size: type.type-scale(2);
 }
 
-.actionButtons {
-  margin-left: layout.$spacing-05;
-  margin-top: layout.$spacing-07;
+.instructions {
+  text-align: justify;
+  font-size: type.type-scale(1);
+}
+.urgencyStatus {
+  font-size: type.type-scale(2);
+}
+.instructionLabel {
+  font-weight: bold;
+  font-size: type.type-scale(2);
 }
 
-.accordionContainer {
-  margin-top: layout.$spacing-03;
+.labResultSlot {
+  text-align: center;
+  margin-bottom: layout.$spacing-03;
+}
+.accordionTitle {
+  font-weight: bold;
 }
diff --git a/src/components/orders-table/order-detail.component.tsx b/src/components/orders-table/order-detail.component.tsx
diff --git a/src/components/orders-table/order-detail.scss b/src/components/orders-table/order-detail.scss
diff --git a/src/components/orders-table/orders-data-table.component.tsx b/src/components/orders-table/orders-data-table.component.tsx
@@ -114,7 +114,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const columns = useMemo(() => {
     return [
       { id: 0, header: t('patient', 'Patient'), key: 'patientName' },
-      { id: 1, header: t('age', 'Age'), key: 'patientAge' }, // Age is now included as a column
+      { id: 1, header: t('age', 'Age'), key: 'patientAge' },
       { id: 2, header: t('totalOrders', 'Total Orders'), key: 'totalOrders' },
     ];
   }, [t]);

diff --git a/src/lab-tabs/actions/actions.scss b/src/lab-tabs/actions/actions.scss
@@ -1,8 +1,21 @@
-@use '@carbon/styles/scss/type';
+@use '@carbon/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/layout';
 @use '@carbon/colors';
 
 .actionButton {
-  margin-top: layout.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 layout.$spacing-04;
+  font-size: type.type-scale(2);
+}
+.actionRejectButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 layout.$spacing-04;
+  font-size: type.type-scale(2);
 }
diff --git a/src/lab-tabs/actions/add-lab-request-results-action.component.tsx b/src/lab-tabs/actions/add-lab-request-results-action.component.tsx
@@ -15,10 +15,11 @@ const AddLabRequestResultsAction: React.FC<AddLabRequestResultsActionProps> = ({
     <Button
       className={styles.actionButton}
       kind="primary"
+      size="sm"
       key={`${order.uuid}`}
       onClick={() => launchWorkspace('test-results-form-workspace', { order })}
     >
-      {t('labResultsForm', 'Lab Results Form')}
+      {t('addLabResult', 'Add lab results')}
     </Button>
   );
 };

diff --git a/src/lab-tabs/actions/edit-lab-request-results-action.component.tsx b/src/lab-tabs/actions/edit-lab-request-results-action.component.tsx
@@ -13,8 +13,9 @@ const EditButton: React.FC<EditButtonProps> = ({ order }) => {
   const { t } = useTranslation();
   return (
     <Button
-      kind="secondary"
+      kind="tertiary"
       className={styles.actionButton}
+      size="sm"
       onClick={() => launchWorkspace('test-results-form-workspace', { order })}
     >
       {t('editResults', 'Edit results')}