From 970da4afbfcd1ded43874befd2653c2c4e308017 Mon Sep 17 00:00:00 2001 From: Pius Rubangakene Date: Tue, 6 Feb 2024 11:47:16 +0300 Subject: [PATCH] (fix) remove blank div from lab tabs (#49) --- .../completed-list.component.tsx | 7 +- src/completed-list/completed-list.scss | 9 - src/lab-tabs/approved-tab.component.tsx | 1 - src/lab-tabs/referred-tab.component.tsx | 2 - src/lab-tabs/review-tab.component.tsx | 1 - src/lab-tabs/work-list-tab.component.tsx | 1 - src/patient-chart/laboratory-order.scss | 111 ++++---- .../print-results-summary.scss | 13 +- .../results-summary/results-summary.scss | 245 +++++++++--------- .../lab-tests/lab-tests.component.tsx | 67 +++-- .../laboratory-patient-list.component.tsx | 233 ++++++++--------- src/queue-list/laboratory-queue.scss | 5 - src/queue-list/laboratory-tabs.component.tsx | 5 +- src/review-list/review-list.component.tsx | 211 ++++++++------- src/review-list/review-list.scss | 8 +- src/work-list/work-list.component.tsx | 208 ++++++++------- src/work-list/work-list.scss | 8 +- 17 files changed, 526 insertions(+), 609 deletions(-) diff --git a/src/completed-list/completed-list.component.tsx b/src/completed-list/completed-list.component.tsx index b6dd36c..caa21c1 100644 --- a/src/completed-list/completed-list.component.tsx +++ b/src/completed-list/completed-list.component.tsx @@ -163,12 +163,7 @@ const CompletedList: React.FC = ({ fulfillerStatus }) => { } if (paginatedWorkListEntries?.length > 0) { - return ( -
-
- -
- ); + return ; } else { return (
diff --git a/src/completed-list/completed-list.scss b/src/completed-list/completed-list.scss index fa3c939..68c5ddf 100644 --- a/src/completed-list/completed-list.scss +++ b/src/completed-list/completed-list.scss @@ -123,12 +123,6 @@ title { } } -.headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; -} - .searchContainer { display: flex; align-items: center; @@ -193,7 +187,6 @@ title { .tableLayerSearch { margin: 5px; padding: 10px; - } .dropDownContainer { @@ -207,7 +200,6 @@ title { margin: 10px; } - .tileContainer { background-color: $ui-02; border-top: 1px solid $ui-03; @@ -230,4 +222,3 @@ title { color: $text-02; margin-bottom: 0.5rem; } - diff --git a/src/lab-tabs/approved-tab.component.tsx b/src/lab-tabs/approved-tab.component.tsx index ffa78e4..8d8a709 100644 --- a/src/lab-tabs/approved-tab.component.tsx +++ b/src/lab-tabs/approved-tab.component.tsx @@ -5,7 +5,6 @@ import styles from "../queue-list/laboratory-queue.scss"; const ApprovedComponent = () => { return (
-
); diff --git a/src/lab-tabs/referred-tab.component.tsx b/src/lab-tabs/referred-tab.component.tsx index 375803c..6cfb2e1 100644 --- a/src/lab-tabs/referred-tab.component.tsx +++ b/src/lab-tabs/referred-tab.component.tsx @@ -5,8 +5,6 @@ import styles from "../queue-list/laboratory-queue.scss"; const ReferredComponent = () => { return (
-
- { return (
-
); diff --git a/src/lab-tabs/work-list-tab.component.tsx b/src/lab-tabs/work-list-tab.component.tsx index 90fea60..365df9d 100644 --- a/src/lab-tabs/work-list-tab.component.tsx +++ b/src/lab-tabs/work-list-tab.component.tsx @@ -5,7 +5,6 @@ import styles from "../queue-list/laboratory-queue.scss"; const WorkListComponent = () => { return (
-
); diff --git a/src/patient-chart/laboratory-order.scss b/src/patient-chart/laboratory-order.scss index 4266d98..033bcc3 100644 --- a/src/patient-chart/laboratory-order.scss +++ b/src/patient-chart/laboratory-order.scss @@ -2,65 +2,60 @@ @use '@carbon/styles/scss/type'; @import "~@openmrs/esm-styleguide/src/vars"; @import '../root.scss'; -.headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; - } - .tileContainer { - background-color: $ui-02; - border-top: 1px solid $ui-03; - padding: 5rem 0; - } - - .tile { - margin: auto; - width: fit-content; - } - - .tileContent { - display: flex; - flex-direction: column; - align-items: center; +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} + +.tile { + margin: auto; + width: fit-content; +} + +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; +} + +.helper { + @include type.type-style('body-compact-01'); + color: $text-02; +} + +.separator { + @include type.type-style('body-compact-02'); + color: $text-02; + width: 80%; + margin: 1.5rem auto; + overflow: hidden; + text-align: center; + + &::before, + &::after { + background-color: $text-03; + content: ''; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; } - .content { - @include type.type-style('heading-compact-02'); - color: $text-02; - margin-bottom: 0.5rem; + + &::before { + right: 0.5rem; + margin-left: -50%; } - - .helper { - @include type.type-style('body-compact-01'); - color: $text-02; + + &::after { + left: 0.5rem; + margin-right: -50%; } - - .separator { - @include type.type-style('body-compact-02'); - color: $text-02; - width: 80%; - margin: 1.5rem auto; - overflow: hidden; - text-align: center; - - &::before, - &::after { - background-color: $text-03; - content: ''; - display: inline-block; - height: 1px; - position: relative; - vertical-align: middle; - width: 50%; - } - - &::before { - right: 0.5rem; - margin-left: -50%; - } - - &::after { - left: 0.5rem; - margin-right: -50%; - } - } \ No newline at end of file +} diff --git a/src/patient-chart/results-summary/print-results-summary.scss b/src/patient-chart/results-summary/print-results-summary.scss index 1b33941..54fdba8 100644 --- a/src/patient-chart/results-summary/print-results-summary.scss +++ b/src/patient-chart/results-summary/print-results-summary.scss @@ -20,12 +20,6 @@ margin: 5px; } - .headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; - } - .tileContainer { background-color: $ui-02; border-top: 1px solid $ui-03; @@ -89,7 +83,7 @@ border-collapse: collapse; width: 100%; } - + td, th { border: 1px solid #000; text-align: left; @@ -97,9 +91,8 @@ padding: 8px; width: 80px; } - + th { background-color: #f2f2f2; } - -} \ No newline at end of file +} diff --git a/src/patient-chart/results-summary/results-summary.scss b/src/patient-chart/results-summary/results-summary.scss index 8f78abb..60991b8 100644 --- a/src/patient-chart/results-summary/results-summary.scss +++ b/src/patient-chart/results-summary/results-summary.scss @@ -4,151 +4,144 @@ @import "~@openmrs/esm-styleguide/src/vars"; @import '../../root.scss'; - .section { - margin: 5px; - } +.section { + margin: 5px; +} - .headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; - } +.tileContainer { + background-color: $ui-02; + border-top: 1px solid $ui-03; + padding: 5rem 0; +} - .tileContainer { - background-color: $ui-02; - border-top: 1px solid $ui-03; - padding: 5rem 0; - } +.tile { + margin: auto; + width: fit-content; +} - .tile { - margin: auto; - width: fit-content; - } +.tileContent { + display: flex; + flex-direction: column; + align-items: center; +} - .tileContent { - display: flex; - flex-direction: column; - align-items: center; - } +.content { + @include type.type-style('heading-compact-02'); + color: $text-02; + margin-bottom: 0.5rem; +} + +.helper { + @include type.type-style('body-compact-01'); + color: $text-02; +} - .content { - @include type.type-style('heading-compact-02'); - color: $text-02; - margin-bottom: 0.5rem; +.separator { + @include type.type-style('body-compact-02'); + color: $text-02; + width: 80%; + margin: 1.5rem auto; + overflow: hidden; + text-align: center; + + &::before, + &::after { + background-color: $text-03; + content: ''; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 50%; } - .helper { - @include type.type-style('body-compact-01'); - color: $text-02; + &::before { + right: 0.5rem; + margin-left: -50%; } - .separator { - @include type.type-style('body-compact-02'); - color: $text-02; - width: 80%; - margin: 1.5rem auto; - overflow: hidden; - text-align: center; - - &::before, - &::after { - background-color: $text-03; - content: ''; - display: inline-block; - height: 1px; - position: relative; - vertical-align: middle; - width: 50%; - } - - &::before { - right: 0.5rem; - margin-left: -50%; - } - - &::after { - left: 0.5rem; - margin-right: -50%; - } + &::after { + left: 0.5rem; + margin-right: -50%; } +} - td { - white-space: nowrap; - } - - .criticallyLow, .criticallyHigh, .low, .high { - td:nth-child(2) { - @include type.type-style("heading-compact-01"); - } - } - - .criticallyLow, .criticallyHigh { - border: 2px solid colors.$red-60 !important; - } - - .low, .high { - border: 1.5px solid colors.$black-100 !important; - } - - .criticallyLow { - td:nth-child(2)::after { - content: " ↓↓"; - } - } - - .criticallyHigh { - td:nth-child(2)::after { - content: " ↑↑"; - } - } - - .low { - td:nth-child(2)::after { - content: " ↓"; - } - } - - .high { - td:nth-child(2)::after { - content: " ↑"; - } - } - - .off-scale-low { - td:nth-child(2)::after { - content: " ↓↓↓"; - } - } - - .off-scale-high { - td:nth-child(2)::after { - content: " ↑↑↑"; - } - } - - .offScaleHigh, - .offScaleLow, - .criticallyHigh, - .criticallyLow, - .high, - .low { - @include type.type-style('heading-compact-01'); +td { + white-space: nowrap; +} + +.criticallyLow, .criticallyHigh, .low, .high { + td:nth-child(2) { + @include type.type-style("heading-compact-01"); } - - .criticallyLow::after { +} + +.criticallyLow, .criticallyHigh { + border: 2px solid colors.$red-60 !important; +} + +.low, .high { + border: 1.5px solid colors.$black-100 !important; +} + +.criticallyLow { + td:nth-child(2)::after { content: " ↓↓"; } - - .criticallyHigh::after { +} + +.criticallyHigh { + td:nth-child(2)::after { content: " ↑↑"; } - - .low::after { +} + +.low { + td:nth-child(2)::after { content: " ↓"; } - - .high::after { +} + +.high { + td:nth-child(2)::after { content: " ↑"; } +} + +.off-scale-low { + td:nth-child(2)::after { + content: " ↓↓↓"; + } +} + +.off-scale-high { + td:nth-child(2)::after { + content: " ↑↑↑"; + } +} + +.offScaleHigh, +.offScaleLow, +.criticallyHigh, +.criticallyLow, +.high, +.low { + @include type.type-style('heading-compact-01'); +} + +.criticallyLow::after { + content: " ↓↓"; +} + +.criticallyHigh::after { + content: " ↑↑"; +} + +.low::after { + content: " ↓"; +} +.high::after { + content: " ↑"; +} diff --git a/src/queue-list/lab-tests/lab-tests.component.tsx b/src/queue-list/lab-tests/lab-tests.component.tsx index 5047ca1..073fa6d 100644 --- a/src/queue-list/lab-tests/lab-tests.component.tsx +++ b/src/queue-list/lab-tests/lab-tests.component.tsx @@ -75,41 +75,38 @@ const LabTests: React.FC = ({ encounter, queueId }) => { } return ( -
-
- - {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => ( - - - - - {headers.map((header) => ( - - {header.header} - - ))} - - - - {rows.map((row, index) => { - return ( - - - {row.cells.map((cell) => ( - - {cell.value?.content ?? cell.value} - - ))} - - - ); - })} - -
- - )} - -
+ + {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => ( + + + + + {headers.map((header) => ( + + {header.header} + + ))} + + + + {rows.map((row, index) => { + return ( + + + {row.cells.map((cell) => ( + + {cell.value?.content ?? cell.value} + + ))} + + + ); + })} + +
+ + )} + ); }; diff --git a/src/queue-list/laboratory-patient-list.component.tsx b/src/queue-list/laboratory-patient-list.component.tsx index e91ab3b..a01f0fc 100644 --- a/src/queue-list/laboratory-patient-list.component.tsx +++ b/src/queue-list/laboratory-patient-list.component.tsx @@ -191,127 +191,120 @@ const LaboratoryPatientList: React.FC = () => { if (paginatedWorklistQueueEntries?.length >= 0) { return ( -
-
- - {({ - rows, - headers, - getHeaderProps, - getTableProps, - getRowProps, - onInputChange, - }) => ( - - - - - - + + {({ + rows, + headers, + getHeaderProps, + getTableProps, + getRowProps, + onInputChange, + }) => ( + + + + + + - - - { - setActivatedOnOrAfterDate(event.target.value); - }} - type="date" - value={activatedOnOrAfterDate} - /> - - - - - - - - {headers.map((header) => ( - - {header.header?.content ?? header.header} - - ))} - - - - {rows.map((row, index) => { - return ( - - - {row.cells.map((cell) => ( - - {cell.value?.content ?? cell.value} - - ))} - - - ); - })} - -
- {rows.length === 0 ? ( -
- -
-

- {t( - "noWorklistsToDisplay", - "No worklists orders to display" - )} -

-
- -
- ) : null} - { - if (pageSize !== currentPageSize) { - setPageSize(pageSize); - } - if (page !== currentPage) { - goTo(page); - } - }} - /> - - )} - -
+ + + { + setActivatedOnOrAfterDate(event.target.value); + }} + type="date" + value={activatedOnOrAfterDate} + /> + + + + + + + + {headers.map((header) => ( + + {header.header?.content ?? header.header} + + ))} + + + + {rows.map((row, index) => { + return ( + + + {row.cells.map((cell) => ( + + {cell.value?.content ?? cell.value} + + ))} + + + ); + })} + +
+ {rows.length === 0 ? ( +
+ +
+

+ {t( + "noWorklistsToDisplay", + "No worklists orders to display" + )} +

+
+ +
+ ) : null} + { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } + }} + /> + + )} + ); } }; diff --git a/src/queue-list/laboratory-queue.scss b/src/queue-list/laboratory-queue.scss index 5858768..8044910 100644 --- a/src/queue-list/laboratory-queue.scss +++ b/src/queue-list/laboratory-queue.scss @@ -122,11 +122,6 @@ title { border-bottom: none; } } -.headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; -} .searchContainer { display: flex; diff --git a/src/queue-list/laboratory-tabs.component.tsx b/src/queue-list/laboratory-tabs.component.tsx index 2323954..d1bd6d2 100644 --- a/src/queue-list/laboratory-tabs.component.tsx +++ b/src/queue-list/laboratory-tabs.component.tsx @@ -72,10 +72,7 @@ const LaboratoryQueueTabs: React.FC = () => { -
-
- -
+ {tabExtensions .filter((extension) => Object.keys(extension.meta).length > 0) diff --git a/src/review-list/review-list.component.tsx b/src/review-list/review-list.component.tsx index 4935f3c..bdbf65b 100644 --- a/src/review-list/review-list.component.tsx +++ b/src/review-list/review-list.component.tsx @@ -155,118 +155,109 @@ const ReviewList: React.FC = ({ fulfillerStatus }) => { } if (paginatedWorkListEntries?.length >= 0) { return ( -
-
- - {({ - rows, - headers, - getHeaderProps, - getTableProps, - getRowProps, - onInputChange, - }) => ( - - - - - - { - setActivatedOnOrAfterDate(event.target.value); - }} - type="date" - value={activatedOnOrAfterDate} - /> - - - - + {({ + rows, + headers, + getHeaderProps, + getTableProps, + getRowProps, + onInputChange, + }) => ( + + + + + + { + setActivatedOnOrAfterDate(event.target.value); + }} + type="date" + value={activatedOnOrAfterDate} /> - - - - - - - {headers.map((header) => ( - - {header.header?.content ?? header.header} - - ))} - - - - {rows.map((row, index) => { - return ( - - - {row.cells.map((cell) => ( - - {cell.value?.content ?? cell.value} - - ))} - - + + + + + + + +
+ + + {headers.map((header) => ( + + {header.header?.content ?? header.header} + + ))} + + + + {rows.map((row, index) => { + return ( + + + {row.cells.map((cell) => ( + + {cell.value?.content ?? cell.value} - - - ); - })} - -
- {rows.length === 0 ? ( -
- -
-

- {t( - "noReviewListToDisplay", - "No review list to display" - )} -

-
- -
- ) : null} - { - if (pageSize !== currentPageSize) { - setPageSize(pageSize); - } - if (page !== currentPage) { - goTo(page); - } - }} - /> - - )} - -
+ ))} + + + + + + ); + })} + + + {rows.length === 0 ? ( +
+ +
+

+ {t("noReviewListToDisplay", "No review list to display")} +

+
+ +
+ ) : null} + { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } + }} + /> + + )} + ); } }; diff --git a/src/review-list/review-list.scss b/src/review-list/review-list.scss index f3caf83..301f250 100644 --- a/src/review-list/review-list.scss +++ b/src/review-list/review-list.scss @@ -40,12 +40,6 @@ } } -.headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; -} - .container { background-color: $ui-01; } @@ -71,4 +65,4 @@ @include type.type-style('heading-compact-02'); color: $text-02; margin-bottom: 0.5rem; -} \ No newline at end of file +} diff --git a/src/work-list/work-list.component.tsx b/src/work-list/work-list.component.tsx index 70a169d..d5a7538 100644 --- a/src/work-list/work-list.component.tsx +++ b/src/work-list/work-list.component.tsx @@ -198,114 +198,108 @@ const WorkList: React.FC = ({ fulfillerStatus }) => { if (paginatedWorkListEntries?.length >= 0) { return ( -
-
- - {({ - rows, - headers, - getHeaderProps, - getTableProps, - getRowProps, - onInputChange, - }) => ( - - - - - - { - setActivatedOnOrAfterDate(event.target.value); - }} - type="date" - value={activatedOnOrAfterDate} - /> - - - - + {({ + rows, + headers, + getHeaderProps, + getTableProps, + getRowProps, + onInputChange, + }) => ( + + + + + + { + setActivatedOnOrAfterDate(event.target.value); + }} + type="date" + value={activatedOnOrAfterDate} /> - - - - - - - {headers.map((header) => ( - - {header.header?.content ?? header.header} - - ))} - - - - {rows.map((row, index) => { - return ( - - - {row.cells.map((cell) => ( - - {cell.value?.content ?? cell.value} - - ))} - - - ); - })} - -
- {rows.length === 0 ? ( -
- -
-

- {t( - "noWorklistsToDisplay", - "No worklists orders to display" - )} -

-
- -
- ) : null} - { - if (pageSize !== currentPageSize) { - setPageSize(pageSize); - } - if (page !== currentPage) { - goTo(page); - } - }} - /> - - )} - -
+ + + + + + + + + + + {headers.map((header) => ( + + {header.header?.content ?? header.header} + + ))} + + + + {rows.map((row, index) => { + return ( + + + {row.cells.map((cell) => ( + + {cell.value?.content ?? cell.value} + + ))} + + + ); + })} + +
+ {rows.length === 0 ? ( +
+ +
+

+ {t( + "noWorklistsToDisplay", + "No worklists orders to display" + )} +

+
+ +
+ ) : null} + { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + } + if (page !== currentPage) { + goTo(page); + } + }} + /> + + )} + ); } }; diff --git a/src/work-list/work-list.scss b/src/work-list/work-list.scss index 6730120..03384cf 100644 --- a/src/work-list/work-list.scss +++ b/src/work-list/work-list.scss @@ -123,12 +123,6 @@ title { } } -.headerBtnContainer { - background-color: $ui-background; - padding: spacing.$spacing-05; - text-align: right; -} - .searchContainer { display: flex; align-items: center; @@ -212,4 +206,4 @@ title { @include type.type-style('heading-compact-02'); color: $text-02; margin-bottom: 0.5rem; -} \ No newline at end of file +}