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

jnsereko · 2024-07-22T22:29:01Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This PR adds the following configurability

specifying the size of the ID sticker on the printed page.
specifying the number of column and rows on each printing page.
specifying the number of ID stickers to be printed

This PR also adds ability to preview rows and columns before printing.
cc @denniskigen @vasharma05 @ibacher @pirupius

Screenshots

Video Preview

Screen.Recording.2024-10-24.at.14.35.07.mov

Related Issue

https://openmrs.atlassian.net/browse/O3-3521

Other

jnsereko · 2024-07-22T22:33:10Z

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

+            style={{
+              gridTemplateColumns: `repeat(${numberOfLabelColumns}, 1fr)`,
+              gridTemplateRows: `repeat(${numberOfLabelRowsPerPage}, auto)`,
+            }}


@denniskigen @ibacher I couldn't make this work via supplying a variable to in css and updating in here. Are you okay with this?

jnsereko · 2024-07-22T22:33:36Z

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

+              <div
+                key={index}
+                className={styles.printContainer}
+                style={{ height: printIdentifierStickerHeight, width: printIdentifierStickerWidth }}


jnsereko · 2024-07-22T22:35:56Z

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker.modal.tsx

+          <IdentifierSticker patient={patient} />
+          <span>
+            <Button kind="ghost" onClick={() => setIsPreviewVisible(!isPreviewVisible)}>
+              {!isPreviewVisible ? t('preview', 'Preview') : t('hidePreview', 'Hide Preview')}


@denniskigen should i use t or getCoreTranslation here?

jnsereko · 2024-08-15T19:17:55Z

package.json

@@ -19,7 +19,7 @@
    "@hookform/resolvers": "^3.3.1",
    "classnames": "^2.3.2",
    "react-hook-form": "^7.46.2",
-    "react-to-print": "^2.14.13",
+    "react-to-print": "^3.0.0-beta-1",


Thank you @ibacher

I didn't intend to do this migration since we might not be ready for it.
As you are aware, things are slightly different in beta v3, meaning i will have to refactor most of the printing logic in other parts of patient chart like vitals, medications, lab orders, etc.
I was testing if beta v3 actually solves the Type Error: can not read properties of undefined we experienced in #1847

Such migrations are the reasons why we might need a hook, wrapper or something like that to reduce the burden of writing alot of code when the react-to-print library hook parameters change
cc @brandones

@denniskigen, beta v3 solves solves the Type Error: can not read properties of undefined on the first printing attempt

Did you not notice that this version of the PR already does that refactoring?

denniskigen · 2024-08-20T21:24:30Z

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

  printIdentifierStickerFields: Array<string>;
-  printIdentifierStickerSize: string;
+  printIdentifierStickerPaperSize: string;
+  numberOfPatientIdStickers: number;
+  numberOfPatientIdStickerRowsPerPage: number;
+  numberOfPatientIdStickerColumns: number;
  useRelationshipNameLink: boolean;
+  printIdentifierStickerHeight: string;
+  printIdentifierStickerWidth: string;


It'd be nice to sort these alphabetically.

jnsereko · 2024-08-27T09:13:43Z

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

+        <style type="text/css" media="print">
+          {`
+            @page {
+              size: ${printIdentifierStickerPaperSize};
+            }
+            @media print { html, body { height: initial !important; overflow: initial !important; background-color: white; }}
+          `}
+        </style>


@denniskigen, this will be fixed in https://openmrs.atlassian.net/browse/O3-3870

We have a copyStyles prop from the react-to-print lib, won't that suffice this?
Thanks!

vasharma05 · 2024-08-28T12:53:44Z

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

@@ -0,0 +1,66 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';


First observation: Since we have so many files for print, and banner-tags have other tag components as well, please move all the print related files in a single folder

vasharma05 · 2024-08-28T12:54:17Z

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

+import styles from './print-identifier-sticker-content.scss';
+
+interface PrintIdentifierStickerContentProps {
+  labels: Array<{}>;


Array<{} ?

vasharma05 · 2024-08-28T12:57:31Z

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

+
+interface PrintIdentifierStickerContentProps {
+  labels: Array<{}>;
+  numberOfLabelColumns: number;


We can make this columns and rows

vasharma05 · 2024-08-28T12:58:19Z

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

+
+const PrintIdentifierStickerContent = forwardRef<HTMLDivElement, PrintIdentifierStickerContentProps>(
+  ({ labels, numberOfLabelColumns, numberOfLabelRowsPerPage, patient }) => {
+    const { printIdentifierStickerWidth, printIdentifierStickerHeight, printIdentifierStickerPaperSize } =


Since all these properties are related to a single workflow, you should club them all in a common object.

vasharma05 · 2024-08-28T12:59:11Z

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

+    if (numberOfLabelColumns < 1 || numberOfLabelRowsPerPage < 1 || labels.length < 1) {
+      return;
+    }


Shouldn't this be validated properly, that we always have at least 1 sticker to print, min value of the fields must be set to 1

vasharma05 · 2024-08-28T13:00:34Z

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

+        <style type="text/css" media="print">
+          {`
+            @page {
+              size: ${printIdentifierStickerPaperSize};
+            }
+            @media print { html, body { height: initial !important; overflow: initial !important; background-color: white; }}
+          `}
+        </style>


We have a copyStyles prop from the react-to-print lib, won't that suffice this?
Thanks!

vasharma05 · 2024-08-28T13:01:52Z

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

+                gridTemplateColumns: `repeat(${numberOfLabelColumns}, 1fr)`,
+                gridTemplateRows: `repeat(${numberOfLabelRowsPerPage}, auto)`,


What if the pagesize provided by the user is not able to accommodate the provided count, what will/should happen in such cases?
Thanks!

vasharma05 · 2024-08-28T13:02:04Z

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss

+.labelsContainer {
+  display: grid;
+  column-gap: 1.3rem;
+  row-gap: 1rem;


layout.$spacing-05

vasharma05 · 2024-08-28T13:02:51Z

packages/esm-patient-banner-app/src/banner-tags/print-identifier-sticker-content.scss

+
+.labelsContainer {
+  display: grid;
+  column-gap: 1.3rem;


Shouldn't this be 1.25rem, given the styles in carbon are often used in multiples of .125rem
Thanks!

ibacher · 2024-08-28T15:32:34Z

Why did we revert out the CSS property stuff? I also don't really understand the reversion to 2.x instead of 3.x...

jnsereko · 2024-08-28T16:25:01Z

reversion to 2.x instead of 3.x...

@ibacher i have created a separate ticket to track the migration here since the API was changing and there are many other printing spots around the patient chart beyond the Identifier-Sticker

Why did we revert out the CSS property stuff?

Sorry @ibacher, I forgot to share here. Styles for some un-known reason were not being loaded into the print preview. For that reason, i was only able to print only a single page instead of 2 or more depending on the number of stickers per page and the number of rows and columns.
Also columns were wrapping in case 4 or more columns were specified.
@denniskigen shared that this is something he experienced some time back with the library so i created a ticket to debug that here

Supplying styles directly

Screen.Recording.2024-08-28.at.19.15.31.mov

Supplying styles indirectly using CSS file

Screen.Recording.2024-08-28.at.19.17.47.mov

denniskigen · 2024-10-08T19:59:37Z

@jnsereko can we fix the conflicts now that #2022 is in.

brandones · 2024-10-21T19:12:17Z

Ping @jnsereko , is it clear to you how to move forward?

jnsereko · 2024-10-23T11:31:46Z

I am fixing the tests. @vasharma05, could you be knowing why some fields on the Id sticker are hidden even on dev3?

jnsereko · 2024-10-24T11:44:20Z

I am fixing the tests. @vasharma05, could you be knowing why some fields on the Id sticker are hidden even on dev3?

Found out that is occurs in case a patient has no address details defined.

jnsereko · 2024-10-24T12:00:01Z

hey @denniskigen @ibacher @vasharma05, what do you think about this?

I am not so sure about the sticker size: height and width. I have defaulted it to auto so that it can automatically adjusted depending on the defined fields. This property can be helpful when arranging the number rows and columns across the to be printed page.

Since the sticker size is dynamic it will be up-to the user to determine the number of rows to print on each page without fields overflowing to the next page.

jnsereko commented Jul 22, 2024

View reviewed changes

pirupius changed the title ~~Add configurable ability to print multiple stickers on the same page~~ (feat) O3-3521 Add configurable ability to print multiple stickers on the same page Jul 23, 2024

denniskigen requested review from denniskigen and ibacher July 25, 2024 12:02

jnsereko force-pushed the O3-3521 branch 2 times, most recently from 3fd3ae9 to 67b180a Compare July 28, 2024 19:12

jnsereko commented Aug 15, 2024

View reviewed changes

denniskigen force-pushed the O3-3521 branch 2 times, most recently from a815733 to 245d57a Compare August 20, 2024 21:20

denniskigen reviewed Aug 20, 2024

View reviewed changes

denniskigen force-pushed the O3-3521 branch 5 times, most recently from eea4160 to 0239db1 Compare August 22, 2024 08:22

jnsereko force-pushed the O3-3521 branch from 0239db1 to 550fd54 Compare August 27, 2024 00:57

jnsereko requested a review from denniskigen August 27, 2024 00:58

jnsereko commented Aug 27, 2024

View reviewed changes

vasharma05 reviewed Aug 28, 2024

View reviewed changes

WodPachua mentioned this pull request Aug 30, 2024

(refactor) O3-3870 Move inline styles to SCSS file #1984

Open

3 tasks

denniskigen force-pushed the O3-3521 branch from b0fed05 to 56cfd5b Compare September 3, 2024 16:32

denniskigen changed the title ~~(feat) O3-3521 Add configurable ability to print multiple stickers on the same page~~ (feat) O3-3521: Add configurable ability to print multiple stickers on the same page Sep 3, 2024

denniskigen force-pushed the O3-3521 branch from eff6208 to 462a6cd Compare September 3, 2024 18:28

denniskigen mentioned this pull request Oct 8, 2024

(fix) O3-3871 Upgrade react-to-print library to v3 beta to resolve TypeError #1979

Open

3 tasks

update printing multiple stickers

3bca493

jnsereko force-pushed the O3-3521 branch from dc9a3a1 to 3bca493 Compare October 23, 2024 11:21

add translations

f4dd228

jnsereko added 2 commits October 24, 2024 00:43

fix breaking tests

9ffd66d

add toogle to printing multiple stickers

acd404b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jnsereko commented Jul 22, 2024 •

edited

Loading

jnsereko Jul 22, 2024

jnsereko Jul 22, 2024

jnsereko Jul 22, 2024

jnsereko Aug 15, 2024

jnsereko Aug 15, 2024

ibacher Aug 28, 2024

denniskigen Aug 20, 2024

jnsereko Aug 27, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

vasharma05 Aug 28, 2024

ibacher commented Aug 28, 2024

jnsereko commented Aug 28, 2024

denniskigen commented Oct 8, 2024 •

edited

Loading

brandones commented Oct 21, 2024

jnsereko commented Oct 23, 2024 •

edited

Loading

jnsereko commented Oct 24, 2024

jnsereko commented Oct 24, 2024

		@@ -0,0 +1,66 @@
		import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';

		gridTemplateColumns: `repeat(${numberOfLabelColumns}, 1fr)`,
		gridTemplateRows: `repeat(${numberOfLabelRowsPerPage}, auto)`,

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

Are you sure you want to change the base?

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

Conversation

jnsereko commented Jul 22, 2024 • edited Loading

Requirements

Summary

Screenshots

Video Preview

Related Issue

Other

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ibacher commented Aug 28, 2024

jnsereko commented Aug 28, 2024

denniskigen commented Oct 8, 2024 • edited Loading

brandones commented Oct 21, 2024

jnsereko commented Oct 23, 2024 • edited Loading

jnsereko commented Oct 24, 2024

jnsereko commented Oct 24, 2024

jnsereko commented Jul 22, 2024 •

edited

Loading

denniskigen commented Oct 8, 2024 •

edited

Loading

jnsereko commented Oct 23, 2024 •

edited

Loading