Skip to content

Commit 45ad4c7

Browse files
its-kios09its-kios09
authored
feat O3-4236: Improvements on the UI, Button Hierarchy and Placement in Order Expansion View (#103)
* Ui improvements * (refactor) updated the translation
1 parent 5579a42 commit 45ad4c7

14 files changed

+222
-122
lines changed

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

Lines changed: 110 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,133 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { Button, Tile, Accordion, AccordionItem } from '@carbon/react';
4-
import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
3+
import {
4+
Tag,
5+
StructuredListWrapper,
6+
StructuredListRow,
7+
StructuredListCell,
8+
StructuredListBody,
9+
Button,
10+
Accordion,
11+
AccordionItem,
12+
} from '@carbon/react';
13+
import capitalize from 'lodash-es/capitalize';
514
import { ListOrdersDetailsProps } from '../../types';
615
import styles from './list-order-details.scss';
7-
import { OrderDetail } from './order-detail.component';
8-
16+
import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
17+
import { Edit } from '@carbon/react/icons';
918
const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
1019
const { t } = useTranslation();
1120
const orders = props.groupedOrders?.orders;
21+
const isTablet = useLayoutType() === 'tablet';
1222

1323
return (
14-
<div className={styles.ordersContainer}>
24+
<div>
1525
{orders &&
1626
orders.map((row) => (
17-
<Tile className={styles.orderTile}>
18-
<div>
19-
<OrderDetail label={t('date', 'Date').toUpperCase()} value={row.dateActivated} />
20-
<OrderDetail label={t('orderNumber', 'Order number').toUpperCase()} value={row.orderNumber} />
21-
<OrderDetail label={t('procedure', 'Procedure').toUpperCase()} value={row.display} />
22-
<OrderDetail label={t('status', 'Status').toUpperCase()} value={row.fulfillerStatus} />
23-
<OrderDetail label={t('urgency', 'Urgency').toUpperCase()} value={row.urgency} />
24-
<OrderDetail label={t('orderer', 'Orderer').toUpperCase()} value={row.orderer?.display} />
25-
<OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions ?? '--'} />
27+
<div className={styles.orderDetailsContainer}>
28+
<div className={styles.orderUrgency}></div>
29+
<div className={styles.orderHeader}>
30+
<span className={styles.orderNumber}>
31+
{t('orderNumbers', 'Order number:')} {row.orderNumber}
32+
</span>
33+
<span className={styles.orderDate}>
34+
{t('orderDate', 'Order Date:')} {row.dateActivated}
35+
</span>
2636
</div>
27-
28-
<div className={styles.actionButtons}>
29-
{row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
30-
<ExtensionSlot className={styles.menuLink} state={{ order: row }} name="tests-ordered-actions-slot" />
31-
) : row.fulfillerStatus === 'IN_PROGRESS' ? (
32-
<ExtensionSlot
33-
className={styles.menuLink}
34-
state={{ order: row }}
35-
name="inprogress-tests-actions-slot"
36-
/>
37-
) : row.fulfillerStatus === 'COMPLETED' ? (
38-
<ExtensionSlot
39-
className={styles.menuLink}
40-
state={{ order: row }}
41-
name="completed-ordered-actions-slot"
42-
/>
43-
) : (
44-
<div></div>
45-
)}
37+
<div className={styles.orderStatus}>
38+
{t('orderStatus', 'Status:')}
39+
<Tag size="lg" type={row.fulfillerStatus ? 'green' : 'red'}>
40+
{row.fulfillerStatus || t('orderNotPicked', 'Order not picked')}
41+
</Tag>
42+
</div>
43+
<div>
44+
<div className={styles.orderUrgency}>
45+
<span className={styles.urgencyStatus}>
46+
{t('urgencyStatus', 'Urgency: ')} {capitalize(row.urgency)}
47+
</span>
48+
</div>
49+
<StructuredListWrapper>
50+
<StructuredListBody>
51+
<StructuredListRow>
52+
<StructuredListCell>{t('testOrdered', 'Test ordered: ')}</StructuredListCell>
53+
<StructuredListCell>{capitalize(row?.display)}</StructuredListCell>
54+
<br />
55+
<StructuredListCell>
56+
<span className={styles.instructionLabel}>{t('orderInStruction', 'Instructions: ')}</span>
57+
<span className={styles.instructions}>
58+
{row.instructions ?? (
59+
<Tag size="lg" type="red">
60+
{t('NoInstructionLeft', 'No instructions are provided.')}
61+
</Tag>
62+
)}
63+
</span>
64+
</StructuredListCell>
65+
</StructuredListRow>
66+
</StructuredListBody>
67+
</StructuredListWrapper>
4668
{row.fulfillerStatus === 'COMPLETED' && (
47-
<div className={styles.accordionContainer}>
48-
<Accordion>
49-
<AccordionItem title={t('results', 'Results')}>
69+
<Accordion>
70+
<AccordionItem
71+
title={<span className={styles.accordionTitle}>{t('viewTestResults', 'View test results')}</span>}
72+
>
73+
<div className={styles.viewResults}>
5074
<ExtensionSlot
5175
className={styles.labResultSlot}
5276
state={{ order: row }}
5377
name="completed-lab-order-results-slot"
5478
/>
55-
</AccordionItem>
56-
</Accordion>
57-
</div>
79+
</div>
80+
81+
{row.fulfillerStatus === 'COMPLETED' && (
82+
<ExtensionSlot
83+
className={styles.menuLink}
84+
state={{ order: row }}
85+
name="completed-ordered-actions-slot"
86+
/>
87+
)}
88+
</AccordionItem>
89+
</Accordion>
5890
)}
91+
<StructuredListRow>
92+
<StructuredListCell>
93+
<span className={styles.nameOrder}>
94+
{t('ordererName', 'Orderer Name: ')} {capitalize(row.orderer?.display)}
95+
</span>
96+
</StructuredListCell>
97+
</StructuredListRow>
98+
99+
<div className={styles.buttonSection}>
100+
<div className={styles.actionButtons}>
101+
{row.fulfillerStatus === 'New' ||
102+
row.fulfillerStatus === 'RECEIVED' ||
103+
row.fulfillerStatus == null ? (
104+
<>
105+
<div className={styles.actionButtons}>
106+
<div className={styles.rejectButton}>
107+
<ExtensionSlot state={{ order: row }} name="rejected-ordered-actions-slot" />
108+
</div>
109+
<div className={styles.testsOrderedActions}>
110+
<ExtensionSlot state={{ order: row }} name="tests-ordered-actions-slot" />
111+
</div>
112+
</div>
113+
</>
114+
) : row.fulfillerStatus === 'IN_PROGRESS' ? (
115+
<>
116+
<div className={styles.testsOrderedActions}>
117+
<ExtensionSlot
118+
className={styles.menuLink}
119+
state={{ order: row }}
120+
name="inprogress-tests-actions-slot"
121+
/>
122+
</div>
123+
</>
124+
) : (
125+
<div></div>
126+
)}
127+
</div>
128+
</div>
59129
</div>
60-
</Tile>
130+
</div>
61131
))}
62132
</div>
63133
);

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

Lines changed: 74 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,99 @@
11
@use '@carbon/layout';
22
@use '@carbon/colors';
33
@use '@openmrs/esm-styleguide/src/vars' as *;
4+
@use '@carbon/type';
5+
.buttonSection {
6+
display: flex;
7+
justify-content: space-between;
8+
align-items: center;
9+
padding-top: layout.$spacing-03;
10+
width: 100%;
11+
gap: 10rem;
12+
}
13+
14+
.nameOrder {
15+
font-size: type.type-scale(2);
16+
margin-left: layout.$spacing-04;
17+
}
18+
.testOrder {
19+
font-size: type.type-scale(2);
20+
font-weight: bold;
21+
}
422

5-
.orderTile {
23+
.actionButtons {
624
display: flex;
725
justify-content: space-between;
26+
align-items: center;
827
width: 100%;
9-
margin: 2px 0 8px;
10-
padding: 0 8px 0 8px;
11-
background-color: colors.$white-0;
12-
border-left: 4px solid var(--brand-03);
13-
color: $text-02;
14-
margin-bottom: 1rem !important;
28+
}
1529

16-
&:hover {
17-
background-color: colors.$white-hover;
18-
}
30+
.testsOrderedActions {
31+
margin-left: auto;
32+
display: flex;
1933
}
2034

21-
.ordersContainer {
35+
.rejectButton {
36+
margin-right: auto;
2237
display: flex;
23-
flex-direction: column;
24-
max-width: 100%;
25-
margin-bottom: 1rem;
38+
}
2639

27-
&:global(.cds--tile) {
28-
min-height: 3rem !important;
29-
padding-left: 10px !important;
30-
}
40+
.menuLink {
41+
display: inline-flex;
3142
}
3243

33-
.ordersContainer > :global(.cds--tile) {
34-
min-height: 3rem !important;
35-
padding-left: 10px !important;
36-
margin: auto;
44+
.orderDetailsContainer {
45+
width: 80%;
46+
display: flex;
47+
flex-direction: column;
48+
padding: layout.$spacing-05;
49+
margin-left: layout.$spacing-13;
50+
background-color: colors.$white-0;
51+
margin: layout.$spacing-05 0;
3752
}
3853

39-
.orderPropertyDisplay {
40-
font-size: 15px !important;
54+
.orderUrgency {
55+
display: flex;
56+
justify-content: flex-end;
57+
width: 100%;
58+
padding: 0 layout.$spacing-03;
59+
margin-bottom: layout.$spacing-03;
4160
}
4261

43-
.bodyLong01 {
44-
font-size: 13px !important;
62+
.orderHeader {
63+
display: flex;
64+
justify-content: space-between;
65+
width: 100%;
66+
padding: 0;
67+
margin-bottom: layout.$spacing-03;
68+
}
69+
.orderNumber {
70+
font-size: type.type-scale(2);
71+
}
72+
.orderStatus {
73+
font-size: type.type-scale(2);
4574
}
4675

47-
.displayValue {
48-
color: #525252;
49-
font-weight: bold;
50-
width: layout.$spacing-05;
51-
height: layout.$spacing-05;
76+
.orderDate {
77+
text-align: right;
78+
font-size: type.type-scale(2);
5279
}
5380

54-
.actionButtons {
55-
margin-left: layout.$spacing-05;
56-
margin-top: layout.$spacing-07;
81+
.instructions {
82+
text-align: justify;
83+
font-size: type.type-scale(1);
84+
}
85+
.urgencyStatus {
86+
font-size: type.type-scale(2);
87+
}
88+
.instructionLabel {
89+
font-weight: bold;
90+
font-size: type.type-scale(2);
5791
}
5892

59-
.accordionContainer {
60-
margin-top: layout.$spacing-03;
93+
.labResultSlot {
94+
text-align: center;
95+
margin-bottom: layout.$spacing-03;
96+
}
97+
.accordionTitle {
98+
font-weight: bold;
6199
}

‎src/components/orders-table/order-detail.component.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/orders-table/order-detail.scss

Lines changed: 0 additions & 14 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
114114
const columns = useMemo(() => {
115115
return [
116116
{ id: 0, header: t('patient', 'Patient'), key: 'patientName' },
117-
{ id: 1, header: t('age', 'Age'), key: 'patientAge' }, // Age is now included as a column
117+
{ id: 1, header: t('age', 'Age'), key: 'patientAge' },
118118
{ id: 2, header: t('totalOrders', 'Total Orders'), key: 'totalOrders' },
119119
];
120120
}, [t]);

‎src/lab-tabs/actions/actions.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
@use '@carbon/styles/scss/type';
1+
@use '@carbon/type';
22
@use '@carbon/styles/scss/spacing';
33
@use '@carbon/layout';
44
@use '@carbon/colors';
55

66
.actionButton {
7-
margin-top: layout.$spacing-01;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
text-align: center;
11+
padding: 0 layout.$spacing-04;
12+
font-size: type.type-scale(2);
13+
}
14+
.actionRejectButton {
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
text-align: center;
19+
padding: 0 layout.$spacing-04;
20+
font-size: type.type-scale(2);
821
}

‎src/lab-tabs/actions/add-lab-request-results-action.component.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ const AddLabRequestResultsAction: React.FC<AddLabRequestResultsActionProps> = ({
1515
<Button
1616
className={styles.actionButton}
1717
kind="primary"
18+
size="sm"
1819
key={`${order.uuid}`}
1920
onClick={() => launchWorkspace('test-results-form-workspace', { order })}
2021
>
21-
{t('labResultsForm', 'Lab Results Form')}
22+
{t('addLabResult', 'Add lab results')}
2223
</Button>
2324
);
2425
};

‎src/lab-tabs/actions/edit-lab-request-results-action.component.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const EditButton: React.FC<EditButtonProps> = ({ order }) => {
1313
const { t } = useTranslation();
1414
return (
1515
<Button
16-
kind="secondary"
16+
kind="tertiary"
1717
className={styles.actionButton}
18+
size="sm"
1819
onClick={() => launchWorkspace('test-results-form-workspace', { order })}
1920
>
2021
{t('editResults', 'Edit results')}

0 commit comments

Comments
 (0)