@openmrs/esm-dispensing-app 1.6.2 → 1.6.3-pre.3

package/src/forms/medication-dispense-review.component.tsx

@@ -2,7 +2,14 @@ import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { ComboBox, Dropdown, NumberInput, Stack, TextArea } from '@carbon/react';
-import { OpenmrsDatePicker, useLayoutType, useConfig, useSession, userHasAccess } from '@openmrs/esm-framework';
+import {
+  OpenmrsDatePicker,
+  useLayoutType,
+  useConfig,
+  useSession,
+  userHasAccess,
+  ResponsiveWrapper,
+} from '@openmrs/esm-framework';
 import { getConceptCodingUuid, getMedicationReferenceOrCodeableConcept, getOpenMRSMedicineDrugName } from '../utils';
 import { useMedicationCodeableConcept, useMedicationFormulations } from '../medication/medication.resource';
 import { useMedicationRequest, usePrescriptionDetails } from '../medication-request/medication-request.resource';
@@ -206,94 +213,97 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             editAction={userCanModify && allowEditing ? () => setIsEditingFormulation(true) : null}
           />
         ) : (
-          <Dropdown
-            id="medicationFormulation"
-            light={isTablet}
-            items={medicationFormulations}
-            itemToString={(item: Medication) => getOpenMRSMedicineDrugName(item)}
-            initialSelectedItem={{
-              ...medicationFormulations?.find(
-                (formulation) => formulation.id === medicationDispense.medicationReference?.reference.split('/')[1],
-              ),
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                medicationCodeableConcept: undefined,
-                medicationReference: {
-                  reference: 'Medication/' + selectedItem?.id,
-                  display: getOpenMRSMedicineDrugName(selectedItem),
-                },
-              });
-              setIsEditingFormulation(false);
-            }}
-            required
-          />
-        )}
-
-        {isSubstitution && (
-          <div className={styles.dispenseDetailsContainer}>
-            <ComboBox
-              className={styles.substitutionType}
-              id="substitutionType"
-              light={isTablet}
-              items={substitutionTypes}
-              titleText={t('substitutionType', 'Type of substitution')}
-              itemToString={(item) => item?.text}
+          <ResponsiveWrapper>
+            <Dropdown
+              id="medicationFormulation"
+              items={medicationFormulations}
+              itemToString={(item: Medication) => getOpenMRSMedicineDrugName(item)}
               initialSelectedItem={{
-                id: medicationDispense.substitution.type?.coding[0]?.code,
-                text: medicationDispense.substitution.type?.text,
+                ...medicationFormulations?.find(
+                  (formulation) => formulation.id === medicationDispense.medicationReference?.reference.split('/')[1],
+                ),
               }}
               onChange={({ selectedItem }) => {
                 updateMedicationDispense({
                   ...medicationDispense,
-                  substitution: {
-                    ...medicationDispense.substitution,
-                    type: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
-                    },
+                  medicationCodeableConcept: undefined,
+                  medicationReference: {
+                    reference: 'Medication/' + selectedItem?.id,
+                    display: getOpenMRSMedicineDrugName(selectedItem),
                   },
                 });
+                setIsEditingFormulation(false);
               }}
+              required
             />
-          </div>
+          </ResponsiveWrapper>
         )}
 
         {isSubstitution && (
           <div className={styles.dispenseDetailsContainer}>
-            <ComboBox
-              className={styles.substitutionReason}
-              id="substitutionReason"
-              light={isTablet}
-              items={substitutionReasons}
-              titleText={t('substitutionReason', 'Reason for substitution')}
-              itemToString={(item) => item?.text}
-              initialSelectedItem={{
-                id: medicationDispense.substitution.reason[0]?.coding[0]?.code,
-                text: medicationDispense.substitution.reason[0]?.text,
-              }}
-              onChange={({ selectedItem }) => {
-                updateMedicationDispense({
-                  ...medicationDispense,
-                  substitution: {
-                    ...medicationDispense.substitution,
-                    reason: [
-                      {
+            <ResponsiveWrapper>
+              <ComboBox
+                className={styles.substitutionType}
+                id="substitutionType"
+                items={substitutionTypes}
+                titleText={t('substitutionType', 'Type of substitution')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.substitution.type?.coding[0]?.code,
+                  text: medicationDispense.substitution.type?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  updateMedicationDispense({
+                    ...medicationDispense,
+                    substitution: {
+                      ...medicationDispense.substitution,
+                      type: {
                         coding: [
                           {
                             code: selectedItem?.id,
                           },
                         ],
                       },
-                    ],
-                  },
-                });
-              }}
-            />
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
+          </div>
+        )}
+
+        {isSubstitution && (
+          <div className={styles.dispenseDetailsContainer}>
+            <ResponsiveWrapper>
+              <ComboBox
+                className={styles.substitutionReason}
+                id="substitutionReason"
+                items={substitutionReasons}
+                titleText={t('substitutionReason', 'Reason for substitution')}
+                itemToString={(item) => item?.text}
+                initialSelectedItem={{
+                  id: medicationDispense.substitution.reason[0]?.coding[0]?.code,
+                  text: medicationDispense.substitution.reason[0]?.text,
+                }}
+                onChange={({ selectedItem }) => {
+                  updateMedicationDispense({
+                    ...medicationDispense,
+                    substitution: {
+                      ...medicationDispense.substitution,
+                      reason: [
+                        {
+                          coding: [
+                            {
+                              code: selectedItem?.id,
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  });
+                }}
+              />
+            </ResponsiveWrapper>
           </div>
         )}
 
@@ -324,29 +334,30 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             }}
           />
 
-          <ComboBox
-            id="quantityUnits"
-            disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugDispensingUnits}
-            titleText={t('drugDispensingUnit', 'Dispensing unit')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.quantity.code,
-              text: medicationDispense.quantity.unit,
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
-                quantity: {
-                  value: medicationDispense.quantity.value,
-                  code: selectedItem?.id,
-                },
-              });
-            }}
-            required
-          />
+          <ResponsiveWrapper>
+            <ComboBox
+              id="quantityUnits"
+              disabled={!userCanModify || !allowEditing}
+              items={drugDispensingUnits}
+              titleText={t('drugDispensingUnit', 'Dispensing unit')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.quantity.code,
+                text: medicationDispense.quantity.unit,
+              }}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                  quantity: {
+                    value: medicationDispense.quantity.value,
+                    code: selectedItem?.id,
+                  },
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
         </div>
 
         <div className={styles.dispenseDetailsContainer}>
@@ -380,49 +391,83 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             }}
           />
 
-          <ComboBox
-            id="dosingUnits"
-            disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugDosingUnits}
-            titleText={t('doseUnit', 'Dose unit')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.code,
-              text: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.unit,
-            }}
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                dosageInstruction: [
-                  {
-                    ...medicationDispense.dosageInstruction[0],
-                    doseAndRate: [
-                      {
-                        doseQuantity: {
-                          // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
-                          value: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.value,
-                          code: selectedItem?.id,
+          <ResponsiveWrapper>
+            <ComboBox
+              id="dosingUnits"
+              disabled={!userCanModify || !allowEditing}
+              items={drugDosingUnits}
+              titleText={t('doseUnit', 'Dose unit')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.code,
+                text: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.unit,
+              }}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  dosageInstruction: [
+                    {
+                      ...medicationDispense.dosageInstruction[0],
+                      doseAndRate: [
+                        {
+                          doseQuantity: {
+                            // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                            value: medicationDispense.dosageInstruction[0].doseAndRate[0].doseQuantity?.value,
+                            code: selectedItem?.id,
+                          },
                         },
+                      ],
+                    },
+                  ],
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
+
+          <ResponsiveWrapper>
+            <ComboBox
+              id="editRoute"
+              disabled={!userCanModify || !allowEditing}
+              items={drugRoutes}
+              initialSelectedItem={{
+                id: medicationDispense.dosageInstruction[0].route?.coding[0]?.code,
+                text: medicationDispense.dosageInstruction[0].route?.text,
+              }}
+              titleText={t('route', 'Route')}
+              itemToString={(item) => item?.text}
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  dosageInstruction: [
+                    {
+                      ...medicationDispense.dosageInstruction[0],
+                      route: {
+                        coding: [
+                          {
+                            code: selectedItem?.id,
+                          },
+                        ],
                       },
-                    ],
-                  },
-                ],
-              });
-            }}
-            required
-          />
+                    },
+                  ],
+                });
+              }}
+              required
+            />
+          </ResponsiveWrapper>
+        </div>
 
+        <ResponsiveWrapper>
           <ComboBox
-            id="editRoute"
+            id="frequency"
             disabled={!userCanModify || !allowEditing}
-            light={isTablet}
-            items={drugRoutes}
+            items={orderFrequencies}
             initialSelectedItem={{
-              id: medicationDispense.dosageInstruction[0].route?.coding[0]?.code,
-              text: medicationDispense.dosageInstruction[0].route?.text,
+              id: medicationDispense.dosageInstruction[0].timing?.code?.coding[0]?.code,
+              text: medicationDispense.dosageInstruction[0].timing?.code?.text,
             }}
-            titleText={t('route', 'Route')}
+            titleText={t('frequency', 'Frequency')}
             itemToString={(item) => item?.text}
             onChange={({ selectedItem }) => {
               updateMedicationDispense({
@@ -430,12 +475,15 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
                 dosageInstruction: [
                   {
                     ...medicationDispense.dosageInstruction[0],
-                    route: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
+                    timing: {
+                      ...medicationDispense.dosageInstruction[0].timing,
+                      code: {
+                        coding: [
+                          {
+                            code: selectedItem?.id,
+                          },
+                        ],
+                      },
                     },
                   },
                 ],
@@ -443,41 +491,7 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
             }}
             required
           />
-        </div>
-
-        <ComboBox
-          id="frequency"
-          disabled={!userCanModify || !allowEditing}
-          light={isTablet}
-          items={orderFrequencies}
-          initialSelectedItem={{
-            id: medicationDispense.dosageInstruction[0].timing?.code?.coding[0]?.code,
-            text: medicationDispense.dosageInstruction[0].timing?.code?.text,
-          }}
-          titleText={t('frequency', 'Frequency')}
-          itemToString={(item) => item?.text}
-          onChange={({ selectedItem }) => {
-            updateMedicationDispense({
-              ...medicationDispense,
-              dosageInstruction: [
-                {
-                  ...medicationDispense.dosageInstruction[0],
-                  timing: {
-                    ...medicationDispense.dosageInstruction[0].timing,
-                    code: {
-                      coding: [
-                        {
-                          code: selectedItem?.id,
-                        },
-                      ],
-                    },
-                  },
-                },
-              ],
-            });
-          }}
-          required
-        />
+        </ResponsiveWrapper>
 
         <TextArea
           labelText={t('patientInstructions', 'Patient instructions')}
@@ -514,33 +528,34 @@ const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
           value={dayjs(medicationDispense.whenHandedOver).toDate()}></OpenmrsDatePicker>
 
         {providers && (
-          <ComboBox
-            id="dispenser"
-            light={isTablet}
-            initialSelectedItem={
-              medicationDispense?.performer[0].actor.reference
-                ? providers.find(
-                    (provider) => provider.uuid === medicationDispense?.performer[0].actor.reference.split('/')[1],
-                  )
-                : null
-            }
-            onChange={({ selectedItem }) => {
-              updateMedicationDispense({
-                ...medicationDispense,
-                performer: [
-                  {
-                    actor: {
-                      reference: `Practitioner/${selectedItem?.uuid}`,
+          <ResponsiveWrapper>
+            <ComboBox
+              id="dispenser"
+              initialSelectedItem={
+                medicationDispense?.performer[0].actor.reference
+                  ? providers.find(
+                      (provider) => provider.uuid === medicationDispense?.performer[0].actor.reference.split('/')[1],
+                    )
+                  : null
+              }
+              onChange={({ selectedItem }) => {
+                updateMedicationDispense({
+                  ...medicationDispense,
+                  performer: [
+                    {
+                      actor: {
+                        reference: `Practitioner/${selectedItem?.uuid}`,
+                      },
                     },
-                  },
-                ],
-              });
-            }}
-            items={providers}
-            itemToString={(item) => item?.person?.display}
-            required
-            titleText={t('dispensedBy', 'Dispensed by')}
-          />
+                  ],
+                });
+              }}
+              items={providers}
+              itemToString={(item) => item?.person?.display}
+              required
+              titleText={t('dispensedBy', 'Dispensed by')}
+            />
+          </ResponsiveWrapper>
         )}
       </Stack>
     </div>

package/src/forms/pause-dispense-form.workspace.tsx

@@ -5,6 +5,7 @@ import {
   type DefaultWorkspaceProps,
   ExtensionSlot,
   getCoreTranslation,
+  ResponsiveWrapper,
   showSnackbar,
   useConfig,
   useLayoutType,
@@ -152,29 +153,30 @@ const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({
         )}
         {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
         <section className={styles.formGroup}>
-          <ComboBox
-            id="reasonForPause"
-            light={isTablet}
-            items={reasonsForPause}
-            titleText={t('reasonForPause', 'Reason for pause')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
-              text: medicationDispense.statusReasonCodeableConcept?.text,
-            }}
-            onChange={({ selectedItem }) => {
-              setMedicationDispensePayload({
-                ...medicationDispensePayload,
-                statusReasonCodeableConcept: {
-                  coding: [
-                    {
-                      code: selectedItem?.id,
-                    },
-                  ],
-                },
-              });
-            }}
-          />
+          <ResponsiveWrapper>
+            <ComboBox
+              id="reasonForPause"
+              items={reasonsForPause}
+              titleText={t('reasonForPause', 'Reason for pause')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+                text: medicationDispense.statusReasonCodeableConcept?.text,
+              }}
+              onChange={({ selectedItem }) => {
+                setMedicationDispensePayload({
+                  ...medicationDispensePayload,
+                  statusReasonCodeableConcept: {
+                    coding: [
+                      {
+                        code: selectedItem?.id,
+                      },
+                    ],
+                  },
+                });
+              }}
+            />
+          </ResponsiveWrapper>
         </section>
       </div>
       <section className={styles.buttonGroup}>

package/src/forms/stock-dispense/stock-dispense.component.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ComboBox, InlineLoading, InlineNotification, Layer } from '@carbon/react';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
 import { type MedicationDispense, type InventoryItem } from '../../types';
+import { type PharmacyConfig } from '../../config-schema';
 import { useDispenseStock } from './stock.resource';
-import { formatDate } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 
 type StockDispenseProps = {
   medicationDispense: MedicationDispense;
@@ -13,17 +14,13 @@ type StockDispenseProps = {
 
 const StockDispense: React.FC<StockDispenseProps> = ({ medicationDispense, updateInventoryItem }) => {
   const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+
   const drugUuid = medicationDispense?.medicationReference?.reference?.split('/')[1];
   const { inventoryItems, error, isLoading } = useDispenseStock(drugUuid);
-  const validInventoryItems = inventoryItems.filter((item) => isValidBatch(medicationDispense, item));
-  const validInventoryItemss = inventoryItems
+  const validInventoryItems = inventoryItems
     .filter((item) => isValidBatch(medicationDispense, item))
-    .sort((a, b) => {
-      const dateA = new Date(a.expiration);
-      const dateB = new Date(b.expiration);
-
-      return dateA.getDate() - dateB.getDate();
-    });
+    .sort((a, b) => new Date(a.expiration).getTime() - new Date(b.expiration).getTime());
 
   function parseDate(dateString) {
     return new Date(dateString);
@@ -31,6 +28,9 @@ const StockDispense: React.FC<StockDispenseProps> = ({ medicationDispense, updat
 
   //check whether the drug will expire before the medication period ends
   function isValidBatch(medicationToDispense, inventoryItem) {
+    if (typeof config !== 'undefined' && !config.validateBatch) {
+      return true;
+    }
     if (medicationToDispense?.dosageInstruction && medicationToDispense?.dosageInstruction.length > 0) {
       return medicationToDispense.dosageInstruction.some((instruction) => {
         if (

package/src/history/history-and-comments.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .historyAndCommentsContainer {
   max-width: 80%;
@@ -13,15 +13,15 @@
 
   form input {
     vertical-align: middle;
-    margin: 0 10px 0 0;
-    padding: 10px;
+    margin: 0 0.625rem 0 0;
+    padding: 0.625rem;
     border: 1px solid #8d8d8d !important;
     background-color: white;
   }
   form button {
     width: 90px;
-    height: 20px;
-    min-height: 2.5rem !important;
+    height: 1.25rem;
+    min-height: layout.$spacing-08 !important;
   }
 
   form :global(.cds--btn--ghost) {
@@ -30,22 +30,22 @@
 
   .requestTile {
     width: 100%;
-    margin: 2px 0 8px;
-    padding: 0 8px 0 8px;
+    margin: layout.$spacing-01 0 layout.$spacing-03;
+    padding: 0 layout.$spacing-03 0 layout.$spacing-03;
     background-color: #fff;
-    border-left: 4px solid var(--brand-03);
+    border-left: layout.$spacing-03 solid var(--brand-03);
     color: $text-02;
-    margin-bottom: 1rem !important;
+    margin-bottom: layout.$spacing-05 !important;
   }
 
   .dispenseTile {
     width: 100%;
-    margin: 2px 0 8px;
-    padding: 0 8px 0 8px;
+    margin: layout.$spacing-01 0 layout.$spacing-03;
+    padding: 0 layout.$spacing-03 0 layout.$spacing-03;
     background-color: #fff;
-    border-left: 4px solid red;
+    border-left: layout.$spacing-03 solid red;
     color: $text-02;
-    margin-bottom: 1rem !important;
+    margin-bottom: layout.$spacing-05 !important;
   }
 
   .medicationEventActionMenu {

package/src/index.ts

@@ -44,3 +44,6 @@ export const dispenseWorkspace = getAsyncLifecycle(() => import('./forms/dispens
 export const pauseDispenseWorkspace = getAsyncLifecycle(() => import('./forms/pause-dispense-form.workspace'), options);
 
 export const printPrescriptionPreviewModal = getSyncLifecycle(PrescriptionPrintPreviewModal, options);
+
+export const patientDiagnoses = getAsyncLifecycle(() => import('./diagnoses/diagnoses.component'), options);
+export const patientConditions = getAsyncLifecycle(() => import('./conditions/conditions.component'), options);

package/src/location/location.resource.test.tsx

@@ -34,6 +34,7 @@ const pharmacyConfig: PharmacyConfig = {
     substitutionType: { uuid: '' },
   },
   enableStockDispense: false,
+  validateBatch: false,
 };
 
 describe('Location Resource tests', () => {