@ampath/esm-dispensing-app 1.10.0-next.1

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

@@ -0,0 +1,154 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
+import { formatDate, parseDate, useSession } from '@openmrs/esm-framework';
+import { type DosageInstruction, type MedicationRequestBundle, type Quantity } from '../types';
+import {
+  getDosageInstruction,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getQuantity,
+  getRefillsAllowed,
+} from '../utils';
+import styles from './print-prescription.scss';
+
+type PrescriptionsPrintoutProps = {
+  excludedPrescription: Array<string>;
+  medicationRequests: Array<MedicationRequestBundle>;
+};
+
+const PrescriptionsPrintout: React.FC<PrescriptionsPrintoutProps> = ({ excludedPrescription, medicationRequests }) => {
+  const { t } = useTranslation();
+  const {
+    sessionLocation: { display: facilityName },
+  } = useSession();
+  const patient = medicationRequests[0]?.request?.subject;
+
+  const extractPatientName = (display: string) => (display.includes('(') ? display.split('(')[0] : display);
+
+  const requesters = useMemo(() => {
+    const uniqueRequesters = new Set<string>();
+    medicationRequests
+      ?.filter((req) => !excludedPrescription.includes(req.request.id))
+      ?.forEach((request) => {
+        const display = request.request?.requester?.display;
+        if (display) uniqueRequesters.add(display);
+      });
+    return uniqueRequesters;
+  }, [medicationRequests, excludedPrescription]);
+
+  const filteredRequests = useMemo(
+    () => medicationRequests?.filter((req) => !excludedPrescription.includes(req.request.id)) || [],
+    [medicationRequests, excludedPrescription],
+  );
+
+  return (
+    <Layer className={styles.printOutContainer}>
+      <StructuredListWrapper>
+        <StructuredListBody>
+          <StructuredListRow head>
+            <StructuredListCell head>
+              <br />
+              <br />
+              <p className={styles.printoutTitle}>{t('prescriptionInstructions', 'Prescription instructions')}</p>
+              {patient && (
+                <p className={classNames(styles.patientName, styles.faintText)}>
+                  {extractPatientName(patient.display)}
+                </p>
+              )}
+              <br />
+              <br />
+            </StructuredListCell>
+          </StructuredListRow>
+          {filteredRequests.map((request) => {
+            const medicationEvent = request.request;
+            const dosageInstruction: DosageInstruction = getDosageInstruction(medicationEvent.dosageInstruction);
+            const quantity: Quantity = getQuantity(medicationEvent);
+            const numberOfRefillsAllowed: number = getRefillsAllowed(medicationEvent);
+
+            return (
+              <div key={request.request.id}>
+                {dosageInstruction && (
+                  <StructuredListRow>
+                    <StructuredListCell>
+                      <p className={styles.medicationName}>
+                        <strong>
+                          {getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationEvent))}
+                        </strong>
+                      </p>
+                      <br />
+                      <p>
+                        <span className={styles.faintText}>{t('dose', 'Dose')}</span>
+                        {': '}
+                        <span className={styles.prescriptionInfo}>
+                          {dosageInstruction?.doseAndRate?.map((doseAndRate, index) => {
+                            return (
+                              <span className={styles.prescriptionInfo} key={`dose-${request.request.id}-${index}`}>
+                                {doseAndRate?.doseQuantity?.value} {doseAndRate?.doseQuantity?.unit}
+                              </span>
+                            );
+                          })}
+                        </span>{' '}
+                        &mdash;{' '}
+                        <span className={styles.prescriptionInfo}>
+                          {dosageInstruction?.route?.text} &mdash; {dosageInstruction?.timing?.code?.text}
+                          {dosageInstruction?.timing?.repeat?.duration
+                            ? ` ${t('for', 'for')} ${dosageInstruction?.timing?.repeat?.duration} ${dosageInstruction?.timing?.repeat?.durationUnit}`
+                            : ''}
+                        </span>
+                        {quantity && (
+                          <div>
+                            <span className={styles.faintText}>{t('quantity', 'Quantity')}</span>
+                            {': '}
+                            <span className={styles.prescriptionInfo}>
+                              {quantity.value} {quantity.unit}
+                            </span>
+                          </div>
+                        )}
+                      </p>
+                      <p>
+                        <span className={styles.faintText}>{t('datePrescribed', 'Date prescribed')}</span>
+                        {': '}{' '}
+                        <span className={styles.prescriptionInfo}>
+                          {formatDate(parseDate(request.request.authoredOn), { noToday: true })}
+                        </span>
+                      </p>
+                      <p>
+                        <span className={styles.faintText}>{t('refills', 'Refills')}</span>
+                        {': '}{' '}
+                        <span className={styles.prescriptionInfo}>
+                          {numberOfRefillsAllowed || numberOfRefillsAllowed === 0
+                            ? numberOfRefillsAllowed
+                            : t('noRefills', 'No refills')}
+                        </span>
+                      </p>
+
+                      {dosageInstruction?.text && <p>{dosageInstruction.text}</p>}
+                      {dosageInstruction?.additionalInstruction?.length > 0 && (
+                        <p>
+                          {dosageInstruction?.additionalInstruction.map((instruction) => instruction.text).join(', ')}
+                        </p>
+                      )}
+                    </StructuredListCell>
+                  </StructuredListRow>
+                )}
+              </div>
+            );
+          })}
+          {requesters.size > 0 && (
+            <p className={styles.prescriber}>
+              {t('prescribedBy', 'Prescribed By')}:{' '}
+              {Array.from(requesters.values())
+                .map((name) => name?.split('(')?.at(0))
+                ?.join(', ')}
+            </p>
+          )}
+          <p className={styles.facilityName}>{facilityName}</p>
+        </StructuredListBody>
+      </StructuredListWrapper>
+    </Layer>
+  );
+};
+
+export default PrescriptionsPrintout;

package/src/print-prescription/print-prescription.scss

@@ -0,0 +1,75 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.title {
+  @include type.type-style('heading-02');
+}
+
+.btnSet {
+  width: 100%;
+}
+
+.faintText {
+  color: colors.$black;
+  @include type.type-style('heading-01');
+}
+
+.printOutContainer {
+  width: 20rem;
+  background-color: colors.$white;
+  padding: layout.$spacing-03;
+
+  @media print {
+    background-color: colors.$white;
+    height: 100vh;
+    padding: 0;
+  }
+}
+
+.printoutTitle {
+  @include type.type-style('heading-03');
+  text-align: center;
+  font-weight: bold;
+}
+
+.facilityName {
+  color: colors.$black;
+  text-align: end;
+  padding: layout.$spacing-05;
+  @include type.type-style('label-01');
+}
+
+.prescriber {
+  color: colors.$black;
+  padding: layout.$spacing-05;
+  @include type.type-style('label-01');
+}
+
+.printoutSelectorRow {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: 0 layout.$spacing-05 0 layout.$spacing-05;
+  justify-content: space-between;
+}
+
+.patientName {
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.printPreviewContainer {
+  background-color: colors.$white;
+}
+
+.prescriptionInfo {
+  color: colors.$black;
+  font-weight: bolder;
+  @include type.type-style('label-01');
+}
+
+.medicationName {
+  @include type.type-style('body-compact-02');
+  color: colors.$black;
+}

package/src/print-prescription/printable-prescriptions.component.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react';
+import { Checkbox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type DosageInstruction, type MedicationRequestBundle } from '../types';
+import { getDosageInstruction, getMedicationDisplay, getMedicationReferenceOrCodeableConcept } from '../utils';
+
+type PrintablePrescriptionsSelectorProps = {
+  medicationRequests: Array<MedicationRequestBundle>;
+  excludedPrescription: Array<string>;
+  onExcludedPrescriptionChange: React.Dispatch<React.SetStateAction<string[]>>;
+};
+
+const PrintablePrescriptionsSelector: React.FC<PrintablePrescriptionsSelectorProps> = ({
+  medicationRequests,
+  onExcludedPrescriptionChange,
+  excludedPrescription,
+}) => {
+  const { t } = useTranslation();
+
+  const handleChange = useCallback(
+    (checked: boolean, medicationEventId: string) => {
+      if (checked) {
+        onExcludedPrescriptionChange(excludedPrescription.filter((id) => id !== medicationEventId));
+      } else {
+        onExcludedPrescriptionChange([...excludedPrescription, medicationEventId]);
+      }
+    },
+    [onExcludedPrescriptionChange, excludedPrescription],
+  );
+
+  return (
+    <div>
+      <p>
+        <strong>{t('selectPrescriptions', 'Check prescriptions to print')}</strong>
+      </p>
+      {medicationRequests?.map((request) => {
+        const medicationEvent = request.request;
+        const dosageInstruction: DosageInstruction = getDosageInstruction(medicationEvent.dosageInstruction);
+
+        return (
+          <div key={medicationEvent.id}>
+            {dosageInstruction && (
+              <Checkbox
+                id={medicationEvent.id}
+                labelText={getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationEvent))}
+                checked={!excludedPrescription.includes(medicationEvent.id)}
+                onChange={(_, { checked }) => handleChange(checked, medicationEvent.id)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PrintablePrescriptionsSelector;

package/src/routes.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": ">=2.2.0"
+  },
+  "pages": [
+    {
+      "component": "dispensing",
+      "route": "dispensing",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "name": "dispensing-link",
+      "slot": "app-menu-slot",
+      "component": "dispensingLink",
+      "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",
+      "component": "dispensingDashboard",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "dispensing-dashboard-link",
+      "component": "dispensingDashboardLink",
+      "meta": {
+        "name": "dispensing",
+        "slot": "dispensing-dashboard-slot",
+        "title": "Dispensing"
+      }
+    },
+    {
+      "name": "dispense-action-button",
+      "slot": "prescription-action-button-slot",
+      "component": "dispenseActionButton"
+    },
+    {
+      "name": "pause-action-button",
+      "slot": "prescription-action-button-slot",
+      "component": "pauseActionButton"
+    },
+    {
+      "name": "close-action-button",
+      "slot": "prescription-action-button-slot",
+      "component": "closeActionButton"
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "close-dispense-workspace",
+      "component": "closeDispenseWorkspace",
+      "window": "dispensing-window"
+    },
+    {
+      "name": "pause-dispense-workspace",
+      "component": "pauseDispenseWorkspace",
+      "window": "dispensing-window"
+    },
+    {
+      "name": "dispense-workspace",
+      "component": "dispenseWorkspace",
+      "window": "dispensing-window"
+    },
+    {
+      "name": "dispensing-patient-search-workspace",
+      "component": "@openmrs/esm-patient-search-app#patientSearchWorkspace2",
+      "window": "fill-prescription-window"
+    },
+    {
+      "name": "dispensing-start-visit-workspace",
+      "component": "@openmrs/esm-patient-chart-app#exportedVisitForm",
+      "window": "fill-prescription-window"
+    },
+    {
+      "name": "dispensing-order-basket-workspace",
+      "component": "@openmrs/esm-patient-orders-app#exportedOrderBasketWorkspace",
+      "window": "fill-prescription-window"
+    },
+    {
+      "name": "dispensing-order-basket-add-drug-order-workspace",
+      "component": "@openmrs/esm-patient-medications-app#exportedAddDrugOrderWorkspace",
+      "window": "fill-prescription-window"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "dispensing-window",
+      "group": "dispensing-group"
+    },
+    {
+      "name": "fill-prescription-window",
+      "group": "dispensing-group"
+    }
+  ],
+  "workspaceGroups2": [
+    {
+      "name": "dispensing-group",
+      "overlay": true
+    }
+  ],
+  "modals": [
+    {
+      "name": "prescription-print-preview-modal",
+      "component": "printPrescriptionPreviewModal"
+    },
+    {
+      "name": "delete-confirm-modal",
+      "component": "deleteConfirmModal"
+
+    },
+    {
+      "name": "on-prescription-filled-modal",
+      "component": "onPrescriptionFilledModal"
+    }
+  ]
+}