Other useful mods

openmrs · Jul 12, 2024 · f36a72f · f36a72f
1 parent 786c475
commit f36a72f
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 49 deletions.
diff --git a/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx b/packages/esm-patient-labs-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx
@@ -11,7 +11,7 @@ import {
   type LabOrderBasketItem,
   launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
-import { TestTypeSearch } from './test-type-search';
+import { TestTypeSearch } from './test-type-search.component';
 import { LabOrderForm } from './lab-order-form.component';
 import styles from './add-lab-order.scss';
 

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
@@ -1,10 +1,9 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/type';
+@use '@carbon/layout';
 @use '@carbon/colors';
 @import '@openmrs/esm-styleguide/src/vars';
 @import "../../root";
 
-
 .orderForm {
   flex-grow: 1;
   display: flex;
@@ -16,15 +15,15 @@
   }
 
   :global(.cds--css-grid-column) {
-    margin: 0 spacing.$spacing-03 !important;
+    margin: 0 !important;
   }
 
   :global(.cds--subgrid) {
-    margin: 0 calc(spacing.$spacing-03 * -1) !important;
+    margin: 0 calc(layout.$spacing-03 * -1) !important;
   }
 
   :global(.cds--number--nosteppers.cds--number input[type=number]) {
-    padding-right: spacing.$spacing-05;
+    padding-right: layout.$spacing-05;
   }
 
   :global(.cds--number__control-btn) {
@@ -33,7 +32,7 @@
 }
 
 .form {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .gridRow {
@@ -45,7 +44,7 @@
 }
 
 .field {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .buttonSet {
@@ -71,12 +70,12 @@
   }
 
   .buttonSet {
-    padding: spacing.$spacing-06 spacing.$spacing-05;
+    padding: layout.$spacing-06 layout.$spacing-05;
     background-color: $ui-02;
   }
 
   .errorContainer {
     margin: 1rem;
     margin-bottom: calc(var(--bottom-nav-height) + 1rem);
   }
-}
+}
diff --git a/...orders/add-lab-order/test-type-search.tsx → ...-lab-order/test-type-search.component.tsx b/...orders/add-lab-order/test-type-search.tsx → ...-lab-order/test-type-search.component.tsx
@@ -16,7 +16,6 @@ export interface TestTypeSearchProps {
 
 export function TestTypeSearch({ openLabForm }: TestTypeSearchProps) {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
   const searchInputRef = useRef(null);
@@ -103,13 +102,9 @@ function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchI
           )}
           <div className={styles.resultsContainer}>
             {testTypes.map((testType) => (
-              <>
-                <TestTypeSearchResultItem
-                  key={testType.conceptUuid}
-                  testType={testType}
-                  openOrderForm={openOrderForm}
-                />
-              </>
+              <React.Fragment key={testType.conceptUuid}>
+                <TestTypeSearchResultItem testType={testType} openOrderForm={openOrderForm} />
+              </React.Fragment>
             ))}
           </div>
         </div>
@@ -216,28 +211,26 @@ const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({ tes
 
 const TestTypeSearchSkeleton = () => {
   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';
+  const dividerClassName = classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider);
+
   return (
     <div className={styles.searchResultSkeletonWrapper}>
       <div className={styles.orderBasketSearchResultsHeader}>
         <SkeletonText className={styles.searchResultCntSkeleton} />
-        <ButtonSkeleton size={isTablet ? 'md' : 'sm'} />
+        <ButtonSkeleton size={buttonSize} />
       </div>
-      <Tile className={tileClassName}>
-        <SkeletonText />
-      </Tile>
-      <Tile className={tileClassName}>
-        <SkeletonText />
-      </Tile>
-      <Tile className={tileClassName}>
-        <SkeletonText />
-      </Tile>
-      <Tile className={tileClassName}>
-        <SkeletonText />
-      </Tile>
-      <hr className={classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider)} />
+      {[...Array(4)].map((_, index) => (
+        <Tile key={index} className={tileClassName}>
+          <SkeletonText />
+        </Tile>
+      ))}
+      <hr className={dividerClassName} />
     </div>
   );
 };
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
@@ -65,7 +65,7 @@
 
 .searchResultSkeletonWrapper {
   margin: spacing.$spacing-03 1rem spacing.$spacing-03;
-  
+
   :global(.cds--skeleton__text) {
     margin: 0;
   }
@@ -101,10 +101,6 @@
   cursor: pointer;
 }
 
-.resultsContainer {
-  overflow-y: scroll;
-}
-
 .resultsContainer::-webkit-scrollbar {
   width: spacing.$spacing-03;
 }

diff --git a/packages/esm-patient-labs-app/src/root.scss b/packages/esm-patient-labs-app/src/root.scss
@@ -1,35 +1,35 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @import '@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style("heading-compact-01");
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .productiveHeading02 {
   @include type.type-style("heading-compact-02");
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading03 {
   @include type.type-style("heading-03");
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading04 {
   @include type.type-style("heading-04");
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading05 {
   @include type.type-style("heading-05");
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .productiveHeading06 {
   @include type.type-style("heading-06");
-  margin-bottom: spacing.$spacing-06;
+  margin-bottom: layout.$spacing-06;
 }
 
 .bodyShort01 {

diff --git a/packages/esm-patient-labs-app/translations/en.json b/packages/esm-patient-labs-app/translations/en.json
@@ -6,20 +6,25 @@
   "backToTimeline": "Back to timeline",
   "cancel": "Cancel",
   "checkFilters": "Check the filters above",
+  "clearSearchResults": "Clear Results",
   "dataLoadError": "Data Load Error",
   "date": "Date",
   "dateCollected": "Displaying date collected",
+  "directlyAddToBasket": "Add to basket",
   "discard": "Discard",
   "endDate": "End date",
   "error": "Error",
+  "errorFetchingTestTypes": "Error fetching results for \"{{searchTerm}}\"",
   "errorLoadingTestTypes": "Error occured when loading test types",
   "female": "Female",
   "full": "Full",
+  "goToDrugOrderForm": "Order form",
   "labOrders": "Lab orders",
   "labReferenceNumber": "Lab reference number",
   "loading": "Loading",
   "male": "Male",
   "moreResultsAvailable": "More results available",
+  "noResultsForTestTypeSearch": "No results to display for \"{{searchTerm}}\"",
   "noTestResultsWithinSpecifiedRange": "No test results found within the specified range",
   "observationsDisplayText": "observations",
   "onDate": "on",
@@ -49,6 +54,10 @@
   "resultsText": "results",
   "returnToTimeline": "Return to timeline",
   "saveOrder": "Save order",
+  "searchAgain": "search again",
+  "searchFieldPlaceholder": "Search for a test type",
+  "searchResultsMatchesForTerm_one": "{{count}} results for \"{{searchTerm}}\"",
+  "searchResultsMatchesForTerm_other": "{{count}} results for \"{{searchTerm}}\"",
   "seeAllResults": "See all results",
   "showTree": "Show tree",
   "split": "Split",
@@ -72,7 +81,10 @@
   "trendlineRangeSelectorAll": "All",
   "trendlineRangeSelectorMonths": "6 months",
   "tryReopeningTheForm": "Please try launching the form again",
+  "trySearchingAgain": "Please try searching again",
+  "tryTo": "Try to",
   "unknown": "Unknown",
+  "usingADifferentTerm": "using a different term",
   "value": "Value",
   "view": "View"
 }