O3-1713: Order basket drug search implemented with SWR

__mocks__/medication.mock.ts

@@ -259,10 +259,7 @@ export const mockMedicationOrderSearchResults = [
         resourceVersion: '2.0',
       },
     },
-    dosage: {
-      value: 81,
-      default: true,
-    },
+    dosage: 81,
     unit: {
       valueCoded: '3013AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
       value: 'mg',

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

@@ -266,10 +266,7 @@ function OrderBasketItemActions({
         previousOrder: null,
         action: 'DISCONTINUE',
         drug: medication.drug,
-        dosage: {
-          value: medication.dose,
-          default: true,
-        },
+        dosage: medication.dose,
         unit: {
           value: medication.doseUnits.display,
           valueCoded: medication.doseUnits.uuid,
@@ -317,10 +314,7 @@ function OrderBasketItemActions({
         startDate: new Date(),
         action: 'REVISE',
         drug: medication.drug,
-        dosage: {
-          value: medication.dose,
-          default: true,
-        },
+        dosage: medication.dose,
         unit: {
           value: medication.doseUnits.display,
           valueCoded: medication.doseUnits.uuid,
@@ -367,10 +361,7 @@ function OrderBasketItemActions({
         startDate: new Date(),
         action: 'RENEWED',
         drug: medication.drug,
-        dosage: {
-          value: medication.dose,
-          default: true,
-        },
+        dosage: medication.dose,
         unit: {
           value: medication.doseUnits.display,
           valueCoded: medication.doseUnits.uuid,

packages/esm-patient-medications-app/src/order-basket/drug-ordering.ts

@@ -37,7 +37,7 @@ function medicationOrderToApiDto(orderBasketItems: Array<OrderBasketItem>, patie
         orderer: order.orderer,
         encounter: order.encounterUuid,
         drug: order.drug.uuid,
-        dose: order.dosage.value,
+        dose: order.dosage,
         doseUnits: order.unit.valueCoded,
         route: order.route.valueCoded,
         frequency: order.frequency.valueCoded,
@@ -66,7 +66,7 @@ function medicationOrderToApiDto(orderBasketItems: Array<OrderBasketItem>, patie
         orderer: order.orderer,
         encounter: order.encounterUuid,
         drug: order.drug.uuid,
-        dose: order.dosage.value,
+        dose: order.dosage,
         doseUnits: order.unit.valueCoded,
         route: order.route.valueCoded,
         frequency: order.frequency.valueCoded,

packages/esm-patient-medications-app/src/order-basket/medication-order-form.component.tsx

@@ -58,9 +58,7 @@ export default function MedicationOrderForm({ initialOrderBasketItem, onSign, on
     error: fetchingDurationUnitsError,
   } = useDurationUnits(config.durationUnitsConcept);
 
-  const doseWithUnitsLabel = template
-    ? `${initialOrderBasketItem?.dosage?.value} ${initialOrderBasketItem?.unit?.value}`
-    : '';
+  const doseWithUnitsLabel = template ? `${initialOrderBasketItem?.dosage} ${initialOrderBasketItem?.unit?.value}` : '';
 
   const [dosingUnitOptions, setDosingUnitOptions] = useState(
     addIfNotPresent(
@@ -72,16 +70,6 @@ export default function MedicationOrderForm({ initialOrderBasketItem, onSign, on
     ),
   );
 
-  const [dosageOptions, setDosageOptions] = useState(
-    addIfNotPresent(
-      template?.dosingInstructions?.dose?.map((x) => ({
-        id: `${x.value}`,
-        text: `${x.value}`,
-      })),
-      initialOrderBasketItem.dosage,
-    ),
-  );
-
   const [frequencyOptions, setFrequencyOptions] = useState(
     addIfNotPresent(
       template?.dosingInstructions?.frequency?.map((x) => ({
@@ -232,56 +220,23 @@ export default function MedicationOrderForm({ initialOrderBasketItem, onSign, on
             <>
               <Grid className={styles.gridRow}>
                 <Column md={4}>
-                  <ComboBox
-                    id="doseSelection"
-                    light={isTablet}
-                    items={dosageOptions}
-                    selectedItem={
-                      dosageOptions?.length
-                        ? {
-                            id: orderBasketItem.dosage ? `${orderBasketItem.dosage?.value}` : null,
-                            text: orderBasketItem.dosage ? `${orderBasketItem.dosage?.value}` : null,
-                          }
-                        : null
-                    }
-                    // @ts-ignore
-                    placeholder={t('editDoseComboBoxPlaceholder', 'Dose')}
-                    titleText={t('editDoseComboBoxTitle', 'Enter Dose')}
-                    itemToString={(item) => item?.text}
-                    onChange={({ selectedItem }) => {
-                      if (selectedItem) {
-                        selectedItem.id = selectedItem.id == 'draft' ? selectedItem.text : selectedItem.text;
-                        setOrderBasketItem({
-                          ...orderBasketItem,
-                          dosage: { value: Number(selectedItem.text) },
-                        });
-                      } else {
+                  <div className={styles.numberInput}>
+                    <NumberInput
+                      id="doseSelection"
+                      light={isTablet}
+                      placeholder={t('editDoseComboBoxPlaceholder', 'Dose')}
+                      label={t('editDoseComboBoxTitle', 'Enter Dose')}
+                      value={orderBasketItem?.dosage ?? 0}
+                      onChange={(e, { value }) => {
                         setOrderBasketItem({
                           ...orderBasketItem,
-                          dosage: { value: 0 },
+                          dosage: value ? parseFloat(value) : 0,
                         });
-                      }
-                      // cleaup
-                      setDosageOptions(dosageOptions.filter((opt) => opt.id != 'draft'));
-                    }}
-                    onInputChange={(value) => {
-                      if (value == 'undefined') {
-                        return;
-                      }
-                      const valueExists = value ? dosageOptions.some((opt) => `${opt.text}` == value) : null;
-                      const draftIndex = dosageOptions.findIndex((opt) => opt.id == 'draft');
-                      // validate and clean up
-                      if (draftIndex >= 0 && value) {
-                        dosageOptions[draftIndex].text = value;
-                      } else if (draftIndex >= 0) {
-                        dosageOptions.pop();
-                      }
-                      if (value && !valueExists && draftIndex == -1 && !isNaN(Number(value))) {
-                        dosageOptions.push({ id: 'draft', text: value });
-                      }
-                    }}
-                    required
-                  />
+                      }}
+                      min={0}
+                      hideSteppers
+                    />
+                  </div>
                 </Column>
                 <Column md={4}>
                   <ComboBox

packages/esm-patient-medications-app/src/order-basket/medication-order-form.scss

@@ -1,4 +1,5 @@
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
 @import '~@openmrs/esm-styleguide/src/vars';
 @import "../root";
 
@@ -56,6 +57,13 @@
   }
 }
 
+.numberInput {
+  :global(.cds--number__input-wrapper) input {
+  min-width: unset !important;
+  padding-right: spacing.$spacing-05;
+  }
+}
+
 .fullHeightTextAreaContainer {
   :global .cds--form-item {
     height: 100%;
@@ -135,6 +143,10 @@
 .gridRow {
   @extend .row;
   padding: 0px;
+
+  :global(.cds--number) {
+    display: inline-block;
+  }
 }
 
 .lastGridCell {

packages/esm-patient-medications-app/src/order-basket/order-basket-item.component.tsx

@@ -47,7 +47,7 @@ export default function OrderBasketItemTile({ orderBasketItem, onItemClick, onRe
         <span className={styles.label01}>
           <span className={styles.doseCaption}>{t('dose', 'Dose').toUpperCase()}</span>{' '}
           <span className={styles.dosageLabel}>
-            {orderBasketItem.dosage.value} {orderBasketItem.unit.value}
+            {orderBasketItem.dosage} {orderBasketItem.unit.value}
           </span>{' '}
           <span className={styles.dosageInfo}>
             &mdash; {orderBasketItem.route.value} &mdash; {orderBasketItem.frequency.value} &mdash;{' '}

packages/esm-patient-medications-app/src/order-basket/order-basket-search/drug-search.resource.tsx

@@ -61,7 +61,7 @@ export function useDrugTemplate(drugUuid: string): {
 }
 
 export function getDefault(template: OrderTemplate, prop: string) {
-  return template.dosingInstructions[prop].filter((x) => x.default)[0] || template.dosingInstructions[prop][0];
+  return template.dosingInstructions[prop].find((x) => x.default) || template.dosingInstructions[prop][0];
 }
 
 export function getTemplateOrderBasketItem(
@@ -74,7 +74,7 @@ export function getTemplateOrderBasketItem(
         action: 'NEW',
         drug,
         unit: getDefault(template.template, 'unit'),
-        dosage: getDefault(template.template, 'dose'),
+        dosage: getDefault(template.template, 'dose')?.value,
         frequency: getDefault(template.template, 'frequency'),
         route: getDefault(template.template, 'route'),
         commonMedicationName: drug.name,

packages/esm-patient-medications-app/src/order-basket/order-basket-search/order-basket-search-results.component.tsx

@@ -132,43 +132,26 @@ const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, onSea
 
 const Skeleton = () => {
   const isTablet = useLayoutType() === 'tablet';
+  const tileClassName = `${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
+    styles.skeletonTile
+  }`;
   return (
     <div className={styles.searchResultSkeletonWrapper}>
       <div className={styles.orderBasketSearchResultsHeader}>
         <SkeletonText className={styles.searchResultCntSkeleton} />
         <ButtonSkeleton size={isTablet ? 'md' : 'sm'} />
       </div>
-      <Tile
-        className={`${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
-          styles.skeletonTile
-        }`}
-        onClick={() => {}}
-      >
+      <Tile className={tileClassName} onClick={() => {}}>
         <SkeletonText />
       </Tile>
 
-      <Tile
-        className={`${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
-          styles.skeletonTile
-        }`}
-        onClick={() => {}}
-      >
+      <Tile className={tileClassName} onClick={() => {}}>
         <SkeletonText />
       </Tile>
-      <Tile
-        className={`${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
-          styles.skeletonTile
-        }`}
-        onClick={() => {}}
-      >
+      <Tile className={tileClassName} onClick={() => {}}>
         <SkeletonText />
       </Tile>
-      <Tile
-        className={`${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
-          styles.skeletonTile
-        }`}
-        onClick={() => {}}
-      >
+      <Tile className={tileClassName} onClick={() => {}}>
         <SkeletonText />
       </Tile>
       <hr className={`${styles.divider} ${isTablet ? `${styles.tabletDivider}` : `${styles.desktopDivider}`}`} />

packages/esm-patient-medications-app/src/types/order-basket-item.ts

@@ -1,10 +1,4 @@
-import {
-  DosingUnit,
-  MedicationDosage,
-  MedicationFrequency,
-  MedicationRoute,
-  OrderTemplate,
-} from '../api/drug-order-template';
+import { DosingUnit, MedicationFrequency, MedicationRoute, OrderTemplate } from '../api/drug-order-template';
 import { OpenmrsResource } from '@openmrs/esm-framework';
 import { Drug } from './order';
 
@@ -14,7 +8,7 @@ export interface OrderBasketItem {
   drug: Drug;
   unit: DosingUnit;
   commonMedicationName: string;
-  dosage: MedicationDosage;
+  dosage: number;
   frequency: MedicationFrequency;
   route: MedicationRoute;
   encounterUuid: string;