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

package/src/history/history-and-comments.component.tsx

@@ -31,6 +31,7 @@ import {
   getUuidFromReference,
   revalidate,
   sortMedicationDispensesByWhenHandedOver,
+  computeTotalQuantityDispensed,
 } from '../utils';
 import { type PharmacyConfig } from '../config-schema';
 
@@ -81,12 +82,18 @@ const HistoryAndComments: React.FC<{
           (medicationDispense?.quantity ? medicationDispense.quantity.value : 0);
       }
 
+      let quantityDispensed = 0;
+      if (medicationRequestBundle.dispenses) {
+        quantityDispensed = computeTotalQuantityDispensed(medicationRequestBundle.dispenses);
+      }
+
       const dispenseFormProps = {
         patientUuid,
         encounterUuid,
         medicationDispense,
         medicationRequestBundle,
         quantityRemaining,
+        quantityDispensed,
         mode: 'edit',
       };
 
@@ -231,11 +238,11 @@ const HistoryAndComments: React.FC<{
                   {formatDatetime(parseDate(dispense.whenHandedOver))}
                 </h5>
                 <Tile className={styles.dispenseTile} data-floating-menu-container>
+                  <MedicationEvent medicationEvent={dispense} status={generateDispenseTag(dispense)} />
                   {generateMedicationDispenseActionMenu(
                     dispense,
                     getMedicationRequestBundleContainingMedicationDispense(medicationRequestBundles, dispense),
                   )}
-                  <MedicationEvent medicationEvent={dispense} status={generateDispenseTag(dispense)} />
                 </Tile>
               </div>
             );

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,24 @@
 
   .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 {
+    display: flex;
+    justify-content: space-between;
     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', () => {

package/src/medication/medication.resource.tsx

@@ -35,7 +35,7 @@ export function useMedicationFormulations(medicationCodeableConcept: string) {
     openmrsFetch,
   );
 
-  if (data) {
+  if (data?.data?.entry) {
     return {
       medicationFormulations: data.data.entry.map((e) => e.resource),
     };

package/src/patient/patient-info-cell.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { usePatientAge } from './patient.resources';
 import { useTranslation } from 'react-i18next';
+import { usePatientAge } from './patient.resources';
 
 type PatientInfoCellProps = {
   patient: {

package/src/pharmacy-header/pharmacy-header.scss

@@ -1,11 +1,11 @@
-@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 *;
 
 .header {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  height: spacing.$spacing-12;
+  height: layout.$spacing-12;
   background-color: $ui-02;
   display: flex;
   justify-content: space-between;
@@ -15,13 +15,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-left: 1rem;
+  margin-left: layout.$spacing-05;
 }
 
 .rightJustifiedItems {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  padding-top: 1rem;
+  padding-top: layout.$spacing-05;
 }
 
 .pageName {
@@ -29,9 +29,9 @@
 }
 
 .pageLabels {
-  margin-left: 1rem;
+  margin-left: layout.$spacing-05;
   p:first-of-type {
-    margin-bottom: 0.25rem;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -39,15 +39,15 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: layout.$spacing-05;
 }
 
 .value {
-  margin-left: 0.25rem;
+  margin-left: layout.$spacing-02;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .view {

package/src/prescriptions/prescription-actions.scss

@@ -1,6 +1,5 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use '@carbon/type';
 
 .actionsContainer {
   flex-direction: row;

package/src/prescriptions/prescription-details.component.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { DataTableSkeleton, Tag, Tile } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ActionButtons from '../components/action-buttons.component';
+import MedicationEvent from '../components/medication-event.component';
 import { type PharmacyConfig } from '../config-schema';
-import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
-import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay } from '../utils';
 import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
 import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
-import ActionButtons from '../components/action-buttons.component';
-import MedicationEvent from '../components/medication-event.component';
+import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
+import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay } from '../utils';
 import PrescriptionsActionsFooter from './prescription-actions.component';
 import styles from './prescription-details.scss';
 

package/src/prescriptions/prescription-details.scss

@@ -1,22 +1,22 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type/index';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .prescriptionTile {
   width: 100%;
-  margin: 2px 0 8px;
+  margin: layout.$spacing-01 0 layout.$spacing-03;
   padding: 0;
   background-color: #fff;
-  border-left: 4px solid var(--brand-03);
+  border-left: layout.$spacing-02 solid var(--brand-03);
   color: $text-02;
-  margin-bottom: 1rem !important;
+  margin-bottom: layout.$spacing-05 !important;
 }
 
 .prescriptionContainer {
   display: flex;
   flex-direction: column;
   max-width: 80%;
-  margin-bottom: 1rem;
+  margin-bottom: layout.$spacing-05;
 
   &:global(.cds--tile) {
     min-height: 3rem !important;
@@ -31,9 +31,9 @@
 }
 
 .allergiesTile {
-  height: 24px;
-  padding: 0 8px 0 0;
-  border-left: 4px solid #f1c21b;
+  height: layout.$spacing-06;
+  padding: 0 layout.$spacing-03 0 0;
+  border-left: layout.$spacing-02 solid #f1c21b;
   background-color: rgba(253, 209, 58, 0.3);
   margin: auto;
   width: 100%;

package/src/prescriptions/prescription-expanded.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type PatientUuid } from '@openmrs/esm-framework';
+import { ExtensionSlot, type PatientUuid } from '@openmrs/esm-framework';
 import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import HistoryAndComments from '../history/history-and-comments.component';
@@ -23,18 +23,14 @@ const PrescriptionExpanded: React.FC<{
       name: t('prescriptionDetails', 'Prescription details'),
       component: <PrescriptionDetails encounterUuid={encounterUuid} patientUuid={patientUuid} />,
     },
+    {
+      name: t('conditionsAndDiagnoses', 'Conditions and diagnoses'),
+      component: <ExtensionSlot name="dispensing-condition-and-diagnoses" state={{ patientUuid, encounterUuid }} />,
+    },
     {
       name: t('historyComments', 'History and comments'),
       component: <HistoryAndComments encounterUuid={encounterUuid} patientUuid={patientUuid} />,
     },
-    /* {
-      name: t("patientDetails", "Patient details"),
-      component: <PatientDetails patientUuid={patientUuid} />,
-    },*/
-    // {
-    //   name: t("billing", "Billing"),
-    //   component: <div>Billing</div>,
-    // },
   ];
 
   return (

package/src/prescriptions/prescription-expanded.scss

@@ -1,11 +1,10 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .expandedTabsParentContainer {
   display: flex;
   flex-direction: column;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .expandedTabsContainer {
@@ -13,7 +12,7 @@
   flex-direction: row;
 
   :global(.cds--tabs) {
-    margin: 1rem 0;
+    margin: layout.$spacing-05 0;
     width: 20%;
     max-height: 8rem !important;
   }
@@ -23,7 +22,7 @@
   }
 
   :global(.cds--tab-content) {
-    margin: 1rem 0;
+    margin: layout.$spacing-05 0;
     width: 100% !important;
   }
 
@@ -38,7 +37,7 @@
   }
 
   &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 
   > ul {

package/src/prescriptions/prescription-tab-lists.component.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Tab, Tabs, TabList, TabPanels, Search, ComboBox } from '@carbon/react';
+import { ComboBox, Search, Tab, Tabs, TabList, TabPanels } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import PrescriptionTabPanel from './prescription-tab-panel.component';
-import styles from './prescriptions.scss';
-import { useLocationForFiltering } from '../location/location.resource';
 import { useConfig } from '@openmrs/esm-framework';
+import { useLocationForFiltering } from '../location/location.resource';
 import { type SimpleLocation } from '../types';
 import { type PharmacyConfig } from '../config-schema';
+import PrescriptionTabPanel from './prescription-tab-panel.component';
+import styles from './prescriptions.scss';
 
 const PrescriptionTabLists: React.FC = () => {
   const { t } = useTranslation();
@@ -45,7 +45,7 @@ const PrescriptionTabLists: React.FC = () => {
   };
 
   return (
-    <main className={`omrs-main-content ${styles.prescriptionListContainer}`}>
+    <main className="omrs-main-content">
       <section className={styles.prescriptionTabsContainer}>
         <Tabs
           className={styles.prescriptionTabs}

package/src/prescriptions/prescriptions.scss

@@ -1,20 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
-
-title {
-  width: 6.938rem;
-  height: 1.75rem;
-  margin: 0.438rem 22.875rem 0.813rem 0;
-  font-family: IBMPlexSans;
-  font-size: 1.25rem;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: normal;
-}
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .link {
   text-decoration: none;
@@ -36,7 +22,7 @@ title {
 
 .prescriptionTabs {
   grid-column: 'span 2';
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
 }
 
 .newListButton {
@@ -47,10 +33,10 @@ title {
 
 .tabsContainer {
   background-color: $ui-02;
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
 
   :global(.cds--tabs__nav-item--selected) {
-    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+    box-shadow: inset 0 layout.$spacing-01 0 0 var(--brand-03) !important;
   }
 
   :global(.cds--tab--list) button {
@@ -67,7 +53,7 @@ title {
   grid-row: 3 / 4;
   grid-column: 1 / 2;
   height: 100%;
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
   background-color: $ui-01;
   border: 0.5px solid #e0e0e0;
 
@@ -99,7 +85,7 @@ title {
   }
 
   :global(.cds--table-expand__button) {
-    height: 2rem !important;
+    height: layout.$spacing-07 !important;
   }
 }
 
@@ -107,7 +93,7 @@ title {
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
-  padding: 0.5rem 1rem 0;
+  padding: layout.$spacing-05 layout.$spacing-05 0;
 
   :global(.cds--search-magnifier-icon) {
     z-index: 0 !important;
@@ -119,10 +105,10 @@ title {
 }
 
 .addPrescriptionBtn {
-  width: 10rem !important;
-  padding: 0.5rem !important;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  width: layout.$spacing-13 !important;
+  padding: layout.$spacing-05 !important;
+  margin-left: layout.$spacing-05;
+  margin-right: layout.$spacing-05;
 }
 
 .patientSearch {
@@ -149,7 +135,7 @@ title {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-09;
+  padding: layout.$spacing-09;
   text-align: center;
   background-color: $ui-02;
 }
@@ -162,7 +148,7 @@ title {
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {

package/src/print-prescription/prescription-printout.component.tsx

@@ -94,7 +94,7 @@ const PrescriptionsPrintout: React.FC<PrescriptionsPrintoutProps> = ({ medicatio
                         </p>
                         <p>
                           <span className={styles.faintText}>{t('datePrescribed', 'Date prescribed')}</span>
-                          {': '} <span>{formatDate(parseDate(request.request.authoredOn))}</span>
+                          {': '} <span>{formatDate(parseDate(request.request.authoredOn), { noToday: true })}</span>
                         </p>
                         <p>
                           <span className={styles.faintText}>{t('refills', 'Refills')}</span>

package/src/routes.json

@@ -20,6 +20,20 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "patient-diagnoses",
+      "component": "patientDiagnoses",
+      "slot": "dispensing-condition-and-diagnoses",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "patient-conditions",
+      "component": "patientConditions",
+      "slot": "dispensing-condition-and-diagnoses",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "dispensing-dashboard",
       "slot": "dispensing-dashboard-slot",

package/src/utils.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { mutate } from 'swr';
 import {
   type Coding,
@@ -21,7 +22,6 @@ import {
   PRESCRIPTION_DETAILS_ENDPOINT,
   PRESCRIPTIONS_TABLE_ENDPOINT,
 } from './constants';
-import dayjs from 'dayjs';
 
 const unitsDontMatchErrorMessage =
   "Misconfiguration, please contact your System Administrator:  Can't calculate quantity dispensed if units don't match. Likely issue: allowModifyingPrescription and restrictTotalQuantityDispensed configuration parameters both set to true. " +

package/tools/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tools/update-openmrs-deps.mjs

@@ -0,0 +1,42 @@
+import { execSync } from 'node:child_process';
+
+try {
+  execSync(`yarn up --fixed '@openmrs/esm-framework@next' '@openmrs@next' '@openmrs/esm-patient-common-lib@next'`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while updating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`yarn dedupe`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while deduplicating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`git diff-index --quiet HEAD --`, {
+    stdio: 'ignore',
+    windowsHide: true,
+  });
+  process.exit(0);
+} catch (error) {
+  // git diff-index --quite HEAD --
+  // exits with status 1 if there are changes; we only need to run yarn verify if there are changes
+}
+
+try {
+  execSync(`yarn verify`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while running yarn verify: ${error.message ?? error}. Updates require manual intervention.`);
+  process.exit(1);
+}

package/translations/en.json

@@ -1,5 +1,7 @@
 {
   "active": "Active",
+  "activecondition": "Active Condition",
+  "activeConditions": "Active Condition",
   "activePrescriptions": "Active prescriptions",
   "age": "Age",
   "allergiesCount_one": "{{count}} allergy",
@@ -14,9 +16,12 @@
   "closedDispense": "closed dispense",
   "closePrescription": "Close prescription",
   "completed": "Completed",
+  "conditions": "Condition",
+  "conditionsAndDiagnoses": "Conditions and diagnoses",
   "created": "Created",
   "datePrescribed": "Date prescribed",
   "delete": "Delete",
+  "diagnosis": "Diagnosis",
   "dispense": "Dispense",
   "dispensed": "Dispensed",
   "dispenseDate": "Date of Dispense",
@@ -38,6 +43,7 @@
   "errorLoadingInventoryItems": "Error fetching inventory items",
   "expired": "Expired",
   "filterByLocation": "Filter by location",
+  "finalDiagnoses": "Final Diagnoses",
   "for": "for",
   "frequency": "Frequency",
   "historyComments": "History and comments",
@@ -54,6 +60,7 @@
   "noPrescriptionsToDisplay": "No prescriptions to display",
   "noRefills": "No refills",
   "numberIsNotValid": "Number is not valid",
+  "onsetDate": "Onset Date",
   "ordered": "Ordered",
   "orderedMedication ": "ordered medication",
   "orders": "Orders",
@@ -88,5 +95,6 @@
   "substitutionType": "Type of substitution",
   "tabList": "Tab List",
   "today": "Today",
-  "view": "View"
+  "view": "View",
+  "visitFinalDiagnoses": "Visit final diagnoses"
 }