Skip to content

Commit

Permalink
(refactor) revert to the old UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@its-kios09
its-kios09 committed Nov 14, 2024
1 parent 4831fd3 commit c4cbc33
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 163 deletions.
130 changes: 43 additions & 87 deletions src/components/orders-table/list-order-details.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,63 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
Tag,
StructuredListWrapper,
StructuredListRow,
StructuredListCell,
StructuredListBody,
Button,
} from '@carbon/react';
import capitalize from 'lodash-es/capitalize';
import { Button, Tile, Accordion, AccordionItem } from '@carbon/react';
import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
import { ListOrdersDetailsProps } from '../../types';
import styles from './list-order-details.scss';
import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
import { Edit } from '@carbon/react/icons';
import { OrderDetail } from './order-detail.component';

const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
const { t } = useTranslation();
const orders = props.groupedOrders?.orders;
const isTablet = useLayoutType() === 'tablet';

return (
<div>
<div className={styles.ordersContainer}>
{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>
<Tile className={styles.orderTile}>
<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>
<div className={styles.buttonSection}>
<span className={styles.nameOrder}>
{t('ordererName', 'Orderer Name: ')} {capitalize(row.orderer?.display)}
</span>
<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 === 'COMPLETED' ? (
<ExtensionSlot
className={styles.menuLink}
state={{ order: row }}
name="completed-ordered-actions-slot"
/>
) : row.fulfillerStatus === 'IN_PROGRESS' ? (
<ExtensionSlot
className={styles.menuLink}
state={{ order: row }}
name="inprogress-tests-actions-slot"
/>
) : (
<div></div>
)}
</div>
</div>
{row.fulfillerStatus === 'COMPLETED' && (
<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>

<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.labResultSlot}
className={styles.menuLink}
state={{ order: row }}
name="completed-lab-order-results-slot"
name="inprogress-tests-actions-slot"
/>
) : row.fulfillerStatus === 'COMPLETED' ? (
<ExtensionSlot
className={styles.menuLink}
state={{ order: row }}
name="completed-ordered-actions-slot"
/>
) : (
<div></div>
)}
{row.fulfillerStatus === 'COMPLETED' && (
<div className={styles.accordionContainer}>
<Accordion>
<AccordionItem title={t('results', 'Results')}>
<ExtensionSlot
className={styles.labResultSlot}
state={{ order: row }}
name="completed-lab-order-results-slot"
/>
</AccordionItem>
</Accordion>
</div>
)}
</div>
</div>
</Tile>
))}
</div>
);
Expand Down
91 changes: 37 additions & 54 deletions src/components/orders-table/list-order-details.scss
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,60 @@
@use '@carbon/layout';
@use '@carbon/colors';
@use '@openmrs/esm-styleguide/src/vars' as *;
@use '@carbon/type';
.buttonSection {

.orderTile {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: layout.$spacing-03;
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;

.nameOrder {
font-size: type.type-scale(2);
&:hover {
background-color: colors.$white-hover;
}
}

.actionButtons {
.ordersContainer {
display: flex;
gap: layout.$spacing-03;
align-items: center;
}
flex-direction: column;
max-width: 100%;
margin-bottom: 1rem;

.menuLink {
display: inline-flex;
&:global(.cds--tile) {
min-height: 3rem !important;
padding-left: 10px !important;
}
}

.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;
.ordersContainer > :global(.cds--tile) {
min-height: 3rem !important;
padding-left: 10px !important;
margin: auto;
}

.orderUrgency {
display: flex;
justify-content: flex-end;
width: 100%;
padding: 0 layout.$spacing-03;
margin-bottom: layout.$spacing-03;
.orderPropertyDisplay {
font-size: 15px !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);
.bodyLong01 {
font-size: 13px !important;
}

.orderDate {
text-align: right;
font-size: type.type-scale(2);
.displayValue {
color: #525252;
font-weight: bold;
width: layout.$spacing-05;
height: layout.$spacing-05;
}

.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);
.actionButtons {
margin-left: layout.$spacing-05;
margin-top: layout.$spacing-07;
}
.labResultSlot {
width: 100%;
.accordionContainer {
margin-top: layout.$spacing-03;
}
26 changes: 13 additions & 13 deletions src/components/orders-table/order-detail.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// import React from 'react';
// import styles from './order-detail.scss';
import React from 'react';
import styles from './order-detail.scss';

// export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, value }) => {
// return (
// <div>
// <p className={styles.bodyLong01}>
// <span className={styles.label01}>{label}</span>
// {': '}
// <span className={styles.displayValue}>{value}</span>
// </p>
// </div>
// );
// };
export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, value }) => {
return (
<div>
<p className={styles.bodyLong01}>
<span className={styles.label01}>{label}</span>
{': '}
<span className={styles.displayValue}>{value}</span>
</p>
</div>
);
};
11 changes: 2 additions & 9 deletions src/lab-tabs/actions/actions.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
@use '@carbon/type';
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/spacing';
@use '@carbon/layout';
@use '@carbon/colors';

.actionButton {
--cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
--cds-layout-size-height: var(--cds-layout-size-height-context);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 layout.$spacing-04;
font-size: type.type-scale(2);
margin-top: layout.$spacing-01;
}

0 comments on commit c4cbc33

Please sign in to comment.