(feat) O3-2196: Implement the print functionality for Test results

[nanfuka]

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

In case the "Show Print Button" is enabled in the configurations, the print button becomes visible within the header of the test results section. Upon clicking this print button, a popup emerges, housing a data table that showcases the patient's test results. This popup incorporates another print button. Activating this button initiates the printing process.

Screenshots

The location of the print button

The print modal when there are no test results for the selected period

Appearance of print modal before any selections are made

When a range of dates is selected

Related Issue

None

Other

None

[brandones]

Nice work. Please make the requested changes and we'll get it in.

[brandones]

A few questions/requests:

1. Why does the datepicker look so weird? It should look like this:
   
   It should not have the drop-down overlaying the calendar. This seems obvious. Please don't commit things that have obvious problems without naming them explicitly. That introduces bugs, which wrecks the product.

2. It's O3, not 03. That's the letter "O." The link to the issue was broken because you typed O3 as zero-three. O like OpenMRS.

3. Your screen video doesn't show the actual Test Results dashboard with the new button on it. The button that you click to bring up the modal. Please show that so we can see what it looks like.

[denniskigen]

Which slot does this extension get rendered into?

[Jexsie]

Thanks, @nanfuka. The Tablet also looks good

[brandones]

Please provide an updated video once it looks right.

[denniskigen]

Suggested change

	const displayText = t('testReasults', 'Test results');
	const headerTitle = t('testReasults', 'Test results');
	const displayText = t('testResults', 'Test results');
	const headerTitle = t('testResults', 'Test results');

[nanfuka]

Am yet to convert the date picker into the date range picker as suggested by the design team.

[brandones]

Please @ me when ready for re-review, or hit the "request re-review" button if it is available to you

[nanfuka]

@brandones @denniskigen @hadijahkyampeire I've made the requested changes. Could you please re-review? Thank you!

[brandones]

Thanks for the updated images. Two notes:

1. Taking inspiration from the designs,
   
   I think that putting the print button to the left of the "Panel | Tree" switch would look better.

2. I don't really understand "The print modal when there are no test results for the selected period." If there is a selected period, i.e. this happens after the user selects some dates, why would the datepicker go away? They should be able to select a different date range. On the other hand, if this comes up only when there are no test results at all (I don't know why you would write "for the selected period," then) it should still be styled like the regular print modal, with "Print test results" at the top. It looks right now like maybe you're just rendering the empty results tile as a card? Anyway it doesn't look right.

[brandones]

Ok, just a few more suggestions.

[brandones]

Suggested change

"testReasults": "Test results",

When fixing typos, please use ctrl-shift-F global search to clean up. A global search of "testReasults" would have found this.

[brandones]

[nanfuka]

there is a CI build failure though. there is a failing test in esm common lib.

[brandones]

I rebased your branch on main and pushed. That fixed the problem. Your branch was not up to date. You should keep your branches for your PRs up to date.