From e540f844ac1191782ff8f41db34bec30f0108945 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Thu, 3 Oct 2024 12:38:38 +0300 Subject: [PATCH] (feat) Order basket UI tweaks This PR applies the following UI tweaks to the order basket: - Adjusts the fill color property of svg icons in buttons to match the `currentColor` value of the parent element. - Tweaks the search results pages of the order basket to display a "Return to order basket" button per the [designs](https://zpl.io/MdQEOXK). - Adds some top margin to the test type name in the lab order form. - Tweaks the skeleton loader of the lab order search page to match the medication order search page. - Tweaks to the medication order form including amending the field sizes for both tablet and desktop views. --- .../add-lab-order/add-lab-order.scss | 1 + .../lab-order-form.component.tsx | 2 +- .../add-lab-order/lab-order-form.scss | 3 +- .../test-type-search.component.tsx | 16 ++- .../add-lab-order/test-type-search.scss | 55 ++++++-- .../lab-order-basket-panel.extension.tsx | 1 + .../lab-order-basket-panel.scss | 6 + .../esm-patient-labs-app/translations/en.json | 2 + .../src/add-drug-order/add-drug-order.scss | 1 + .../drug-order-form.component.tsx | 49 +++---- .../src/add-drug-order/drug-order-form.scss | 31 ++++- .../order-basket-search-results.component.tsx | 130 +++++++++--------- .../order-basket-search-results.scss | 59 +++++--- .../drug-order-basket-panel.extension.tsx | 1 + .../drug-order-basket-panel.scss | 6 + .../translations/en.json | 2 + 16 files changed, 238 insertions(+), 127 deletions(-) diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss index bf2fc693c8..0effb8e15f 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss +++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.scss @@ -34,6 +34,7 @@ order: 1; margin-right: layout.$spacing-03; margin-left: 0 !important; + fill: currentColor !important; } span { diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx index f398521f85..88ed2a3c85 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx +++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.component.tsx @@ -174,7 +174,7 @@ export function LabOrderForm({ -

{initialOrder?.testType?.label}

+

{initialOrder?.testType?.label}

 diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss index 84e40036e0..031f728b47 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss +++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss @@ -83,6 +83,7 @@ } } -.bodyShort02 { +.testType { @include type.type-style('body-compact-02'); + margin-top: layout.$spacing-03; } diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx index 16276f3769..29087a4a59 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx +++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.component.tsx @@ -88,6 +88,13 @@ function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchI } }, [searchTerm, testTypes]); + const cancelOrder = useCallback(() => { + closeWorkspace('add-lab-order', { + ignoreChanges: true, + onWorkspaceClose: () => launchPatientWorkspace('order-basket'), + }); + }, []); + if (isLoading) { return ; } @@ -138,7 +145,12 @@ function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchI -
+
+

{t('or', 'or')}

+ +
); } @@ -244,7 +256,6 @@ const TestTypeSearchSkeleton = () => { [styles.skeletonTile]: true, }); const buttonSize = isTablet ? 'md' : 'sm'; - const dividerClassName = classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider); return (
@@ -257,7 +268,6 @@ const TestTypeSearchSkeleton = () => { ))} -
); }; diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss index 65afcf4a48..358d5c8998 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss +++ b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/test-type-search.scss @@ -5,21 +5,44 @@ /** For TestTypeSearchResults */ .container { - margin: layout.$spacing-03 layout.$spacing-05; + margin: layout.$spacing-03 layout.$spacing-05 0; } -.divider { - border: 0; - border-top: 1px solid $color-gray-30; - width: 66%; -} +.separator { + @include type.type-style('body-01'); + color: colors.$gray-90; + width: 12rem; + margin: layout.$spacing-05 auto layout.$spacing-03; + overflow: hidden; + text-align: center; -.desktopDivider { - margin: layout.$spacing-07 auto layout.$spacing-05; -} + &::before, + &::after { + background-color: colors.$gray-40; + content: ''; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; + } -.tabletDivider { - margin: layout.$spacing-08 auto layout.$spacing-06; + &::before { + right: layout.$spacing-05; + margin-left: -50%; + } + + &::after { + left: layout.$spacing-05; + margin-right: -50%; + } +} +.separatorContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: layout.$spacing-05; } .searchResultsCount { @@ -35,7 +58,6 @@ } /** For TestTypeSearchResultItem */ - .searchResultTile { padding: 0; display: flex; @@ -48,8 +70,9 @@ } .tabletSearchResultTile { - margin-top: 5px; - background-color: $ui-02; + &:not(:last-of-type) { + margin-bottom: layout.$spacing-04; + } } .searchResultTileContent { @@ -61,6 +84,10 @@ padding: 0 layout.$spacing-05; display: flex; justify-content: flex-end; + + svg { + fill: currentColor !important; + } } .searchResultSkeletonWrapper { diff --git a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx index e19de1ad0f..18d4c5374b 100644 --- a/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx +++ b/packages/esm-patient-labs-app/src/lab-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx @@ -96,6 +96,7 @@ export default function LabOrderBasketPanelExtension() {
{' '} ); @@ -837,6 +834,8 @@ const ControlledFieldInput = ({ field: { onBlur, onChange, value, ref }, fieldState: { error }, } = useController({ name: name, control }); + const isTablet = useLayoutType() === 'tablet'; + const responsiveSize = isTablet ? 'lg' : 'sm'; const fieldErrorStyles = classNames({ [styles.fieldError]: error?.message, @@ -873,6 +872,7 @@ const ControlledFieldInput = ({ handleChange(isNaN(number) ? null : number); }} ref={ref} + size={responsiveSize} value={!!value ? value : 0} {...restProps} /> @@ -886,6 +886,7 @@ const ControlledFieldInput = ({ onBlur={onBlur} onChange={(e: ChangeEvent) => handleChange(e.target.value)} ref={ref} + size={responsiveSize} value={value} {...restProps} /> @@ -899,6 +900,7 @@ const ControlledFieldInput = ({ onChange={(e: ChangeEvent) => handleChange(e.target.value)} onBlur={onBlur} ref={ref} + size={responsiveSize} value={value} {...restProps} /> @@ -912,6 +914,7 @@ const ControlledFieldInput = ({ onBlur={onBlur} onChange={({ selectedItem }) => handleChange(selectedItem)} ref={ref} + size={responsiveSize} selectedItem={value} {...restProps} /> @@ -919,7 +922,7 @@ const ControlledFieldInput = ({ } return null; - }, [type, value, restProps, fieldErrorStyles, onBlur, ref, handleChange]); + }, [type, value, restProps, handleChange, fieldErrorStyles, onBlur, ref, responsiveSize]); return ( <> diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.scss b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.scss index bcc1fc7ae6..d45a292bab 100644 --- a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.scss +++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.scss @@ -37,7 +37,7 @@ } :global(.cds--list-box) { - border: none; + border: 0; } :global(.cds--number__control-btn) { @@ -101,8 +101,12 @@ margin-bottom: layout.$spacing-05; } -.pullColumnContentRight > div { - float: right; +.freeTextDosageToggle { + justify-self: flex-end; + + :global(.cds--toggle__label-text) { + margin-bottom: layout.$spacing-03; + } } .fullWidthDatePickerContainer { @@ -139,10 +143,12 @@ button { display: flex; padding-left: 0 !important; + svg { order: 1; margin-right: layout.$spacing-03; margin-left: 0 !important; + fill: currentColor !important; } span { @@ -158,11 +164,15 @@ /* Desktop */ :global(.omrs-breakpoint-lt-desktop) .gridRow { - align-items: baseline; + align-items: center; } .field { margin-bottom: layout.$spacing-05; + + :global(.cds--label) { + vertical-align: middle; + } } .buttonSet { @@ -187,7 +197,7 @@ .linkedInput::after { content: ''; - border: 1px solid colors.$gray-40; + border: 0.5px solid colors.$gray-40; width: layout.$spacing-05; margin-right: calc(layout.$spacing-05 * -1); } @@ -206,6 +216,10 @@ text-align: center; } } + + svg { + fill: currentColor !important; + } } /* Tablet */ @@ -214,6 +228,13 @@ height: 100%; } + .durationUnit, + .prn { + .field { + margin-bottom: 0; + } + } + .orderForm { background-color: #ededed; } diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.component.tsx b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.component.tsx index fae33af2fb..37f9fa410a 100644 --- a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.component.tsx +++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.component.tsx @@ -1,6 +1,6 @@ import React, { type ComponentProps, useCallback, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; import { Button, Tile, SkeletonText, ButtonSkeleton } from '@carbon/react'; import { ShoppingCartArrowUp } from '@carbon/react/icons'; import { launchPatientWorkspace, useOrderBasket } from '@openmrs/esm-patient-common-lib'; @@ -31,6 +31,11 @@ export interface OrderBasketSearchResultsProps { focusAndClearSearchInput: () => void; } +interface DrugSearchResultItemProps { + drug: DrugSearchResult; + openOrderForm: (searchResult: DrugOrderBasketItem) => void; +} + export default function OrderBasketSearchResults({ searchTerm, openOrderForm, @@ -40,6 +45,12 @@ export default function OrderBasketSearchResults({ const isTablet = useLayoutType() === 'tablet'; const { drugs, isLoading, error } = useDrugSearch(searchTerm); + const cancelDrugOrder = useCallback(() => { + closeWorkspace('add-drug-order', { + onWorkspaceClose: () => launchPatientWorkspace('order-basket'), + }); + }, []); + if (!searchTerm) { return
; } @@ -65,56 +76,54 @@ export default function OrderBasketSearchResults({ ); } + if (drugs?.length === 0) { + return ( + +
+

+ {t('noResultsForDrugSearch', 'No results to display for "{{searchTerm}}"', { + searchTerm, + })} +

+

+ {t('tryTo', 'Try to')}{' '} + + {t('searchAgain', 'search again')} + {' '} + {t('usingADifferentTerm', 'using a different term')} +

+
+ + ); + } + return ( - <> - {drugs?.length ? ( -
-
- - {t('searchResultsMatchesForTerm', '{{count}} results for "{{searchTerm}}"', { - count: drugs?.length, - searchTerm, - })} - - -
-
- {drugs.map((drug) => ( - - ))} +
+
+ + {t('searchResultsMatchesForTerm', '{{count}} results for "{{searchTerm}}"', { + count: drugs?.length, + searchTerm, + })} + + +
+
+ {drugs?.map((drug) => )} -
-
+
+

{t('or', 'or')}

+
- ) : ( - -
-

- {t('noResultsForDrugSearch', 'No results to display for "{{searchTerm}}"', { - searchTerm, - })} -

-

- {t('tryTo', 'Try to')}{' '} - - {t('searchAgain', 'search again')} - {' '} - {t('usingADifferentTerm', 'using a different term')} -

-
- - )} - +
+
); } -interface DrugSearchResultItemProps { - drug: DrugSearchResult; - openOrderForm: (searchResult: DrugOrderBasketItem) => void; -} - const DrugSearchResultItem: React.FC = ({ drug, openOrderForm }) => { const isTablet = useLayoutType() === 'tablet'; const { orders, setOrders } = useOrderBasket('medications', prepMedicationOrderPostData); @@ -245,29 +254,24 @@ const DrugSearchResultItem: React.FC = ({ drug, openO const DrugSearchSkeleton = () => { const isTablet = useLayoutType() === 'tablet'; - const tileClassName = `${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${ - styles.skeletonTile - }`; + const tileClassName = classNames({ + [styles.tabletSearchResultTile]: isTablet, + [styles.desktopSearchResultTile]: !isTablet, + [styles.skeletonTile]: true, + }); + const buttonSize = isTablet ? 'md' : 'sm'; + return (
- +
- - - - - - - - - - - - - -
+ {[...Array(4)].map((_, index) => ( + + + + ))}
); }; diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.scss b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.scss index e2b615beeb..cadbfb2e78 100644 --- a/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.scss +++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.scss @@ -1,3 +1,4 @@ +@use '@carbon/colors'; @use '@carbon/layout'; @use '@carbon/type'; @use '@openmrs/esm-styleguide/src/vars' as *; @@ -7,22 +8,6 @@ margin: layout.$spacing-03 layout.$spacing-05 0; } -.divider { - border: 0; - border-top: 1px solid $color-gray-30; - width: 66%; -} - -.desktopDivider { - margin: layout.$spacing-07 auto layout.$spacing-05; - padding-bottom: 8rem; -} - -.tabletDivider { - margin: layout.$spacing-08 auto 0; - padding-bottom: layout.$spacing-08; -} - .searchResultsCount { @include type.type-style('body-compact-01'); color: $text-02; @@ -36,7 +21,6 @@ } /** For DrugSearchResultItem */ - .searchResultTile { padding: 0; display: flex; @@ -63,6 +47,10 @@ padding: 0 layout.$spacing-05; display: flex; justify-content: flex-end; + + svg { + fill: currentColor !important; + } } .errorLabel { @@ -139,3 +127,40 @@ .text02 { color: $text-02; } + +.separator { + @include type.type-style('body-01'); + color: colors.$gray-90; + width: 12rem; + margin: layout.$spacing-05 auto layout.$spacing-03; + overflow: hidden; + text-align: center; + + &::before, + &::after { + background-color: colors.$gray-40; + content: ''; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; + } + + &::before { + right: layout.$spacing-05; + margin-left: -50%; + } + + &::after { + left: layout.$spacing-05; + margin-right: -50%; + } +} +.separatorContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: layout.$spacing-05; +} diff --git a/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.extension.tsx b/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.extension.tsx index 44c3e5a8ce..0dfdc69b23 100644 --- a/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.extension.tsx +++ b/packages/esm-patient-medications-app/src/drug-order-basket-panel/drug-order-basket-panel.extension.tsx @@ -92,6 +92,7 @@ export default function DrugOrderBasketPanelExtension() {