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

[jnsereko]

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

Related Issue

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

Other

With a configuration like below

{
  "@openmrs/esm-patient-banner-app": {
    "printPatientSticker": {
      "printStickerFields": {
        "fields": [
          "name",
          "dob",
          "gender",
          "identifier",
          "age"
        ],
        "fieldsTableGroups": [
          [
            "age",
            "dob",
            "gender"
          ]
        ],
        "fieldsContainerStyleOverrides": {
          "grid-template-columns": "auto"
        }
      }
    }
  }
}

you get the following result

[vasharma05]

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]

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

[ibacher]

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]

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]

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

[brandones]

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

[brandones]

@jnsereko is this ready for re-review? Please request re-reviews when it is.

[jnsereko]

@jnsereko is this ready for re-review? Please request re-reviews when it is.

i surely will @brandones.
This is working but needs some improvements before we can move forward.
The main problem right now is the delay, like i had shared here, html-to-image is taking a-lot of time to render images causing a delay. At the same time the barcode is not at its best quality.

The best option is to pass a json schema as config and render the sticker as a pdf. I have logic for the first part but haven't found a good library to translate html to pdf. Such a library should have the following qualities.

1. support multiple languages
2. maintain a good quality of images so that a barcode is easily readable
3. have no delays
4. support multiple page sizes