07 Oct 10:32

bccfae8

v5.1.0

Highlights

React Hook Form and Zod

Following excellent work by @lumuchris256, we've migrated most of the vanilla React forms in the patient chart to use React Hook Form and Zod. This has allowed us to remove a lot of boilerplate code and make the forms more robust. The hope, moving forward, is that these tools will make form validation in React more efficient, maintainable, and less error-prone.

New lab order form and improvements to the order basket

Thanks to excellent work by @brandones, we now have a new lab order form that allows for the ordering of lab tests. Additionally, the medication order form has been improved to match the functionality described in the related design documentation. These changes pave the way for the introduction of various different types of orders in the patient chart.

Forms and Notes widget replaced by the Clinical Form workspace

The forms and notes widget has been replaced by the Clinical Form workspace, which is accessible by clicking its icon in the side rail. The workspace can be collapsed and expanded, and can also be hidden by clicking the "x" icon in the top right corner of the workspace if you have an active form open with unsaved changes.

The Test Results app is now the Labs app

In keeping with the next iteration of the Lab orders functionality, the Test Results frontend module got renamed to Labs. With even more iterations on the horizon for the Lab orders feature squad, the app's scope will change significantly.

Broader i18n coverage

Courtesy of great work by @vasharma05 and @icrc-jofrancisco, this release provides various enhancements to our i18n effort. The Angular form engine now loads locale data automatically from O3, amending elements in the form layout to match the selected locale, if translations are provided for it. Translations are now available for components in the common-lib app, which means we're nearing ever closer to a future where strings in the Patient Chart are fully translated.

Improved workspace implementation

We've iterated on the latest design documentation for the workspace to deliver a new and improved workspace experience. @vasharma05 has a handy guide if you want to learn more about all the possibilities available when registering a workspace.

Support for printing test results and vitals

Great work by @nanfuka means we now have the ability to print Vitals and Test Results data. The print button is a configurable property that can be toggled on in each of the frontend module's configuration schemas. Once turned on, a Print button appears in the widget header as the rightmost element. Clicking the button should show you a print preview with a summary of the data in the widget. Future work will involve centralizing the printing logic as well as extending printing support to other areas of O3.

Features

(feat) Rename test-results-app to labs-app by @brandones in #1360
(feat) Add an extension slot for additional visit summary items by @ibacher in #1286
(feat) Implement the print functionality for Vitals lists by @nanfuka in #1196
(feat) Put the Patient Flags feature behind a feature toggle by @denniskigen in #1283
(feat) Form entry app to use new API endpoint by @ibacher in #1300
(feat) Migrate appointments form to RHF and Zod by @lumuchris256 in #1295
(feat) Migrate programs form to use RHF and Zod by @lumuchris256 in #1250
(feat) Automatically load Angular locale data by @icrc-loliveira in #1320
(feat) Migrate Medications order form to use RHF and Zod by @lumuchris256 in #1309
(feat) O3-2195: Implement the print functionality for medications by @nanfuka in #1312
(feat) Fix Medications order form after RHF and Zod Migration by @lumuchris256 in #1332
(feat) O3-2196: Implement the print functionality for Test results by @nanfuka in #1306
(feat) O3-2325 Implement Lab Order form by @brandones in #1328
(feat) Migrate Vitals and Biometrics form to RHF and Zod by @lumuchris256 in #1310
(feat) Improved implementation for the siderail nav buttons by @vasharma05 in #1334
(feat) Migrate start visit form to use RHF and Zod by @lumuchris256 in #1278
(feat) Remove redundant translation configuration settings by @donaldkibet in #1331
(feat) Use patient-chart-app namespace for patient-common-lib translations by @vasharma05 in #1344
(feat) Migrate allergy form to RHF and Zod by @lumuchris256 in #1308
(feat) O3-2391: Ability to hide observations in encounters via config… by @elimm in #1353
(feat) Form app: add translations for form-engine strings by @icrc-jofrancisco in #1066
(feat) Launching workspaces should prompt user for unsaved forms, especially for workspaces that cannot be collapsed or workspaces with same type by @vasharma05 in #1364
(feat) Add side-nav scrolling in the patient chart on tablet by @Jexsie in #1230
(feat) Add current visit summary component by @donaldkibet in #1368
(feat) O3-2437: Restore a left border to the workspace by @njiddasalifu in #1379
(feat) Resolve template literals in the src prop of the logo config by @samuelmale in #1315
(feat) O3-2242: 'Retrospective Entry' label on Chart Header when doing RDE by @brandones in #1298
(feat) Update UI shell component to fix styling issue on workspace by @donaldkibet in #1387
(feat) O3-1678 Order basket medication search results should have two-button layout by @brandones in #1366
(feat) KH-372: Add Khmer translations for esm-patient-banner-app by @kazlaw in #1393
(feat) KH-372: Add Khmer translations for esm-patient-forms-app by @kazlaw in #1391
(feat) KH-356: Correct the Khmer translation for Actions by @kazlaw in #1392
(feat) Remove RXJS for launching form-entry by @donaldkibet in #1319
(feat) KH-372: Add Khmer translations for esm-form-entry-app by @kazlaw in #1384
(feat) O3-1825 Order Basket should have new v2 layout to support additional order types by @brandones in #1316
(feat) Remove unused forms code and updated forms config by @donaldkibet in #1354

Bug fixes

(fix) O3-2282: Show phone number in contact details panel by @denniskigen in #1285
(fix) Fix improper stacking for recurring appointment inputs on tablet by @Jexsie in #1284
(fix) resolves valid route with grouped chart dashboards by @pirupius in #1287
(fix) Fix the appearance of the start date column in the medications table by @denniskigen in #1291
(fix) Fix test script indentation by @denniskigen in #1293
(fix) Fix broken styles in form view component search by @CynthiaKamau in #1296
(fix) Restore configurable logo to print preview by @denniskigen in #1299
(fix) Setting the correct Form UUID in the encounter payload when saving a form by @vasharma05 in #1303
(fix) O3-2305 + O3-521 Various minor medication order bugs by @brandones in #1302
(fix) Medications refactor by @brandones in #1307
(fix) O3-2161: Encounter view doesn't work with multiple pages by @jwnasambu in #1247
(Fix) full widt...

Contributors

brandones, mogoodrich, and 23 other contributors

Assets 2

18 Jul 21:36

denniskigen

v5.0.0

5f917b7

v5.0.0

Patient Chart v5.0.0 is a major release that introduces a BREAKING change. It migrates all the frontend modules in this monorepo to leverage the new module loading mechanism introduced in Core v5. Additionally, this release includes performance improvements plus a host of new features and bug fixes.

Highlights

Performance improvements

We have migrated all the frontend modules in Patient Chart to leverage the new module loading mechanism introduced in Core v5. Frontend modules now declare their static and dynamic metadata upfront, and the framework uses this information to load only the static bits when the application gets loaded for the first time while loading the dynamic bits is deferred to later when they are needed. This change delivers significant improvements to initial load time. Check out the migration guide to get a closer look at the internals of the new module loading mechanism.

Translation support for the left nav menu

v5.0.0 adds support for internationalising dashboard titles in the left nav. Each dashboard can specify a title string property that represents the dashboard's name. This title then gets passed to the DashboardExtension component which invokes the t function from the useTranslation hook, passing in the title. To round things off, the frontend module's moduleName gets passed as the namespace argument of useTranslation, letting it know where to look for the corresponding translations. This mechanism makes it easy to translate your dashboard names.

Migrating React forms to use RHF and Zod for schema validation

v5.0.0 ushers in React Hook Forms (RHF) for handling forms. RHF is a performant forms solution that reduces the boilerplate code you need to write when constructing forms. RHF is also performant and supports a host of schema validation solutions. Zod is a schema validation library that integrates well with RHF and TypeScript. RHF's simple API and Zod’s declarative schema approach make your code easier to read and maintain. RHF and Zod present a robust approach to handling forms in React. v5.0.0 ports the Conditions and Visit notes forms to use RHF and Zod, with more custom React forms in the pipeline. Ultimately, we plan to migrate away from Formik and Yup to RHF and Zod.

Initial support for patient flags and improved RDE capabilities

This release establishes the groundwork for patient flags and improved RDE capabilities. Patient flags are visual components that enable healthcare providers to see relevant patient information with a glance in the Patient chart. v5.0.0 also adds improved retrospective data entry capabilities to the Patient Chart. Both patient flags and RDE improvements are a work in progress, and we will be adding more features to them in subsequent releases.

Breaking changes

(BREAKING) Migrate esm-patient-chart-app to use routes.json by @denniskigen in #1231

Features

(feat) Add translations for the left menu in patient chart by @jwnasambu in #1183
(feat) Include location provider by @icrc-agomes in #1187
(feat) Add ability to pass formEntrySub and patient workspace to exte… by @CynthiaKamau in #1219
(feat) Add ability to enroll and discontinue patient from a program for simple use case by @donaldkibet in #1199
(feat) Show add buttons on widgets by default by @denniskigen in #1236
(feat) Update start visit and visit notes forms to the new tablet design by @Jexsie in #1245
(feat) O3-2177: Tweak the patient banner details section to match designs by @Jexsie in #1197
(feat) Automatically update translation files for all locales when keys and strings change by @vasharma05 in #1228
(feat) KHP3-3708 Add ability to populate form with already existing patient identifiers. by @donaldkibet in #1252
(feat) Migrating conditions form to use RHF and Zod by @lumuchris256 in #1248
(feat) Migrating Visit notes form to use RHF and Zod by @lumuchris256 in #1253
(feat) Add support for patient flags on the patient chart and flags side panel by @jnsereko in #1178
(feat) KHP3-3791: Add ability to create an identifier once a form is submitted by @donaldkibet in #1259
(feat) O3-2239: Add an extension slot to the visit component by @AlexanderMizgirev in #1260
(feat) KHP3-3811 Add validation logic to check if an identifier has already been assigned by @donaldkibet in #1262
(feat) Dashboard Extension uses the moduleName as the namespace for translation by @vasharma05 in #1227
(feat) KH-241: Add Khmer translations for patient chart by @kdaud in #1263
(feat) O3-2258: Put RDE behind a feature flag by @brandones in #1282

Refactors

(refactor) Extract patient flags into a frontend module by @denniskigen in #1275
(refactor): Remove startVisitLabel and endVisitLabel translation configurations by @donaldkibet in #1266