(feat) O3-3521: Add configurable ability to print multiple stickers on the same page

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "classnames": "^2.3.2",
+    "html-to-image": "^1.11.11",
     "react-barcode": "^1.5.3",
     "react-hook-form": "^7.46.2",
     "react-to-print": "^2.14.13",
@@ -62,7 +63,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
-    "openmrs": "next",
+    "openmrs": "^5.8.2-pre.2483",
     "prettier": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/esm-form-entry-app/translations/es.json

@@ -29,7 +29,7 @@
   "from": "Desde",
   "futureDateRestriction": "¡No se permite una fecha futura!",
   "hoursAgo": " horas atrás",
-  "invalidDate": "¡La fecha proporcionada es inválida!",
+  "invalidDate": "¡La fecha proporcionada no válida!",
   "loading": "Cargando...",
   "loadingComponent": "Cargando Componente...",
   "max": "El valor máximo debe ser {max}",

packages/esm-patient-attachments-app/translations/es.json

@@ -35,15 +35,15 @@
   "gridView": "Vista de cuadrícula",
   "image": "Imagen",
   "imageDescription": "Descripción de la imagen",
-  "imagePlaceholder": "Marcador de posición de la imagen",
+  "imagePlaceholder": "Marcador de posición de imagen",
   "imagePreview": "Vista previa de la imagen",
   "name": "nombre",
-  "nameIsRequired": "El nombre es requerido",
+  "nameIsRequired": "El nombre es obligatorio",
   "noAttachmentsToDisplay": "No hay archivos adjuntos para mostrar para este paciente",
   "noImageToDisplay": "No hay imagen para mostrar",
   "options": "Opciones",
   "successfullyDeleted": "eliminado exitosamente",
-  "supportedFiletypes": "Los archivos compatibles son {{supportedFiles}}",
+  "supportedFiletypes": "Los archivos soportados son {{supportedFiles}}",
   "tableView": "Vista de tabla",
   "type": "Tipo",
   "unsupportedFileType": "Tipo de archivo no compatible",

packages/esm-patient-banner-app/src/config-schema.ts

@@ -34,17 +34,78 @@ export const configSchema = {
         logo: '',
       },
     },
-    fields: {
-      _type: Type.Array,
-      _description: 'Patient demographics to include in the patient sticker printout',
-      _default: ['name', 'dob', 'gender', 'identifier', 'age', 'contact', 'address'],
+    printStickerFields: {
+      _type: Type.Object,
+      _description: 'Configuration of the patient sticker fields for the patient identifier stickers',
+      fields: {
+        _type: Type.Array,
+        _description: 'Patient demographics to include in the patient sticker printout',
+      },
+      fieldSeparator: {
+        _type: Type.Boolean,
+        _description: 'Whether to display a colon symbol alongside each field label',
+      },
+      fieldsTableGroups: {
+        _type: Type.Array,
+        _description:
+          'Groups of patient demographic fields to be displayed as distinct tables in the patient sticker. Each group contains a set of related fields that will appear together in one table ie a single line.',
+      },
+      fieldsContainerStyleOverrides: {
+        _type: Type.Object,
+        _description: 'CSS style elements override how fields appear in the field container.',
+      },
+      _default: {
+        fields: ['name', 'dob', 'gender', 'identifier', 'age', 'contact', 'address'],
+        fieldSeparator: false,
+        fieldsTableGroups: [],
+        fieldsContainerStyleOverrides: {},
+      },
     },
     pageSize: {
       _type: Type.String,
       _description:
         'Specifies the paper size for printing the sticker. You can define the size using units (e.g., mm, in) or named sizes (e.g., "148mm 210mm", "A1", "A2", "A4", "A5").',
       _default: 'A4',
     },
+    printMultipleStickers: {
+      _type: Type.Object,
+      _description: 'Configuration of how many stickers to print, together with the columns and rows to print per page',
+      numberOfStickers: {
+        _type: Type.Number,
+        _description: 'The number of patient ID stickers to print',
+      },
+      stickerColumnsPerPage: {
+        _type: Type.Number,
+        _description: 'The number of columns of patient ID stickers to print per page',
+      },
+      stickerRowsPerPage: {
+        _type: Type.Number,
+        _description: 'The number of rows of patient ID stickers to print per page',
+      },
+      _default: {
+        enabled: false,
+        numberOfStickers: 1,
+        stickerColumnsPerPage: 1,
+        stickerRowsPerPage: 1,
+      },
+    },
+    stickerSize: {
+      _type: Type.Object,
+      _description: 'Configuration of the patient sticker height and width for the patient identifier stickers',
+      height: {
+        _type: Type.String,
+        _description:
+          'Specifies the height of each patient ID sticker in the printout in units such as inches or centimetres.',
+      },
+      width: {
+        _type: Type.String,
+        _description: 'The width of each patient ID sticker in the printout in units such as inches or centimetres.',
+      },
+      _default: {
+        height: 'auto',
+        width: 'auto',
+      },
+    },
     identifiersToDisplay: {
       _type: Type.Array,
       _description:
@@ -54,6 +115,11 @@ export const configSchema = {
         _type: Type.UUID,
       },
     },
+    autoPrint: {
+      _type: Type.Boolean,
+      _description: 'Whether to print the patient sticker by default',
+      _default: false,
+    },
   },
   useRelationshipNameLink: {
     _type: Type.Boolean,
@@ -72,9 +138,24 @@ export interface ConfigObject {
       showLogo: boolean;
       logo: string;
     };
-    fields: Array<AllowedPatientFields>;
+    printStickerFields: {
+      fields: Array<AllowedPatientFields>;
+      fieldSeparator: boolean;
+      fieldsTableGroups: Array<Array<AllowedPatientFields>>;
+      fieldsContainerStyleOverrides: Record<string, string | number>;
+    };
     pageSize: string;
+    printMultipleStickers: {
+      numberOfStickers: number;
+      stickerColumnsPerPage: number;
+      stickerRowsPerPage: number;
+    };
+    stickerSize: {
+      height: string;
+      width: string;
+    };
     identifiersToDisplay: Array<string>;
+    autoPrint: boolean;
   };
   useRelationshipNameLink: boolean;
 }

packages/esm-patient-banner-app/src/print-identifier-sticker/patient-detail.component.tsx

@@ -7,45 +7,48 @@ import styles from './print-identifier-sticker.scss';
 
 export interface PatientDetailProps {
   patient: fhir.Patient;
+  showFieldSeparator: boolean;
 }
 
-export const PatientName: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientName: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { t } = useTranslation();
   return (
-    <div>
-      <span>
-        <strong className={styles.strong}>{t('patientNameWithSeparator', 'Patient name:')}</strong>
+    <div className={styles.fieldRow}>
+      <span className={styles.patientDetailLabel}>
+        {showFieldSeparator ? t('patientNameWithSeparator', 'Patient name:') : t('patientName', 'Patient name')}
       </span>
       <span className={styles.patientDetail}>{getPatientName(patient)}</span>
     </div>
   );
 };
 
-export const PatientAge: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientAge: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { t } = useTranslation();
   return (
-    <div>
-      <span>
-        <strong className={styles.strong}>{t('patientAge', 'Age:')}</strong>
+    <div className={styles.fieldRow}>
+      <span className={styles.patientDetailLabel}>
+        {showFieldSeparator ? t('patientAgeWithSeparator', 'Age:') : t('patientAge', 'Age')}
       </span>
       <span className={styles.patientDetail}>{age(patient.birthDate)}</span>
     </div>
   );
 };
 
-export const PatientDob: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientDob: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { t } = useTranslation();
   return (
-    <div>
-      <span>
-        <strong className={styles.strong}>{t('patientDateOfBirthWithSeparator', 'Date of birth:')}</strong>
+    <div className={styles.fieldRow}>
+      <span className={styles.patientDetailLabel}>
+        {showFieldSeparator
+          ? t('patientDateOfBirthWithSeparator', 'Date of birth:')
+          : t('patientDateOfBirth', 'Date of birth')}
       </span>
       <span className={styles.patientDetail}>{dayjs(patient.birthDate).format('DD-MM-YYYY')}</span>
     </div>
   );
 };
 
-export const PatientGender: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientGender: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { t } = useTranslation();
   const getGender = (gender: string): string => {
     switch (gender) {
@@ -62,28 +65,29 @@ export const PatientGender: React.FC<PatientDetailProps> = ({ patient }) => {
     }
   };
   return (
-    <div>
-      <span>
-        <strong className={styles.strong}>{t('patientGenderWithSeparator', 'Gender:')}</strong>
+    <div className={styles.fieldRow}>
+      <span className={styles.patientDetailLabel}>
+        {showFieldSeparator ? t('patientGenderWithSeparator', 'Gender:') : t('patientGender', 'Gender')}
       </span>
       <span className={styles.patientDetail}>{getGender(patient.gender)}</span>
     </div>
   );
 };
 
-export const PatientIdentifier: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientIdentifier: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { printPatientSticker } = useConfig<ConfigObject>();
   const { identifiersToDisplay } = printPatientSticker ?? {};
   const patientIdentifiers =
     (identifiersToDisplay ?? []).length === 0
       ? patient.identifier
       : patient.identifier?.filter((identifier) => identifiersToDisplay.includes(identifier.type.coding[0].code));
   return (
-    <div>
+    <div className={styles.fieldRow}>
       {patientIdentifiers?.map((identifier) => (
-        <div key={identifier.id}>
-          <span>
-            <strong className={styles.strong}>{identifier.type.text}:</strong>
+        <div key={identifier.id} className={styles.fieldRow}>
+          <span className={styles.patientDetailLabel}>
+            {identifier.type.text}
+            {showFieldSeparator ? ':' : ''}
           </span>
           <span className={styles.patientDetail}>{identifier.value}</span>
         </div>
@@ -92,24 +96,26 @@ export const PatientIdentifier: React.FC<PatientDetailProps> = ({ patient }) =>
   );
 };
 
-export const PatientContact: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientContact: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const { t } = useTranslation();
 
   if (!patient?.telecom?.length) {
     return null;
   }
 
   return (
-    <div>
-      <span>
-        <strong className={styles.strong}>{t('telephoneNumberWithSeparator', 'Telephone number:')}</strong>
+    <div className={styles.fieldRow}>
+      <span className={styles.patientDetailLabel}>
+        {showFieldSeparator
+          ? t('telephoneNumberWithSeparator', 'Telephone number:')
+          : t('telephoneNumber', 'Telephone number')}
       </span>
       <span className={styles.patientDetail}>{patient.telecom?.[0]?.value}</span>
     </div>
   );
 };
 
-export const PatientAddress: React.FC<PatientDetailProps> = ({ patient }) => {
+export const PatientAddress: React.FC<PatientDetailProps> = ({ patient, showFieldSeparator }) => {
   const address = patient?.address?.find((a) => a.use === 'home');
   const getAddressKey = (url: string) => url.split('#')[1];
 
@@ -121,20 +127,23 @@ export const PatientAddress: React.FC<PatientDetailProps> = ({ patient }) => {
           .map(([key, value]) =>
             key === 'extension' ? (
               address.extension?.[0]?.extension?.map((add, i) => (
-                <div key={`address-${key}-${i}`}>
-                  <span className={styles.strong}>
+                <div key={`address-${key}-${i}`} className={styles.fieldRow}>
+                  <span className={styles.patientDetailLabel}>
                     {getCoreTranslation(
                       getAddressKey(add.url) as CoreTranslationKey,
                       getAddressKey(add.url) as CoreTranslationKey,
                     )}
-                    :
+                    {showFieldSeparator ? ':' : ''}
                   </span>
                   <span className={styles.patientDetail}>{add.valueString}</span>
                 </div>
               ))
             ) : (
-              <div key={`address-${key}`}>
-                <span className={styles.strong}>{getCoreTranslation(key as CoreTranslationKey, key)}:</span>
+              <div key={`address-${key}`} className={styles.fieldRow}>
+                <span className={styles.patientDetailLabel}>
+                  {getCoreTranslation(key as CoreTranslationKey, key)}
+                  {showFieldSeparator ? ':' : ''}
+                </span>
                 <span className={styles.patientDetail}>{value}</span>
               </div>
             ),