(feat) O3-2825: Add "Discontinued" label for discontinued medications #2037

jwnasambu · 2024-09-26T16:04:54Z

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

I modified the tableRows mapping function to conditionally add the "Discontinued" label based on when medication is discontinued. To achieve this, I added a new constant isDiscontinued to check if the medication is discontinued then conditionally render the "Discontinued" label only when isDiscontinued is true. This way, the label will be displayed only for discontinued medications.

Screenshots

screencast.2024-10-01.6.PM-44-09.mp4

Related Issue

Other

…scontinued label

jwnasambu · 2024-09-26T16:19:19Z

@brandones, @denniskigen, @dkayiwa, @ibacher , @njiddasalifu kindly this is the new PR. Ref #1691

…-chart into fix/O3-2825

ibacher · 2024-09-27T18:50:45Z

Code seems fine. However, I think we want to make this more prominent. Instead of just saying "— DISCONTINUED" at the end of the block, I think we should put the text "Discontinued" in a grey pill in the first line (using the Carbon Tag element IIRC).

jwnasambu · 2024-09-30T15:36:27Z

@ibacher Kindly feel free to confirm the position of the tag, please!

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

denniskigen · 2024-09-30T18:24:10Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

+                <Tag type="gray" className={styles.tag}>
+                  {t('discontinued', 'Discontinued').toUpperCase()}
+                </Tag>


@ibacher should this tag also contain the discontinued date?

Maybe as a tooltip? I think the goal here was just to better flag that these requests are discontinued. PS, I'd probably leave out the toUpperCase() and either change the translation here to t('discontinued_Caps', 'DISCONTINUED') or just drop it altogether (my preference).

denniskigen · 2024-09-30T18:25:18Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

                </span>
-                {formatDate(new Date(medication.dateStopped))}
+                <Tag type="gray" className={styles.tag}>


Add some left margin to the tag so it has some breathing room from the rest of the content.

denniskigen · 2024-09-30T18:28:13Z

packages/esm-patient-medications-app/src/api/api.ts

@@ -23,7 +23,7 @@ export function usePatientOrders(patientUuid: string, status: 'ACTIVE' | 'any')
    'commentToFulfiller,drug:(uuid,display,strength,dosageForm:(display,uuid),concept),dose,doseUnits:ref,' +
    'frequency:ref,asNeeded,asNeededCondition,quantity,quantityUnits:ref,numRefills,dosingInstructions,' +
    'duration,durationUnits:ref,route:ref,brandName,dispenseAsWritten)';
-  const ordersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&status=${status}&orderType=${drugOrderTypeUUID}&v=${customRepresentation}`;
+  const ordersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&orderTypes=${drugOrderTypeUUID}&v=${customRepresentation}`;


Is it right for the URL param here to change from orderType={drugOrderTypeUUID} to orderTypes={drugOrderTypeUUID}, @ibacher @dkayiwa?

Missed that... orderType... orderTypes won't do anything.

@ibacher, @denniskigen When I switch to orderType, we will primarily be requesting orders of a specific type (active medications) based on the UUID provided in drugOrderTypeUUID, which excludes other order types such as discontinued or past orders. However, the orderTypes parameter allows querying multiple types of orders (e.g., active, discontinued, or past orders). Since we are retrieving past medications, the API may expect multiple orderType values, such as both active and discontinued orders, with the plural form likely indicating an array of possible order types. I will therefore request we user orderTypes Please feel free to correct me.

Active / Discontinue is separate from order type. orderType=${drugOrderTypeUUID} restricts things to drug orders, whether active or discontinued. There is no orderTypes parameter (here is the code that parses it), so removing this now doesn't correctly filter things to just drug orders.

Actually looking at the code removing the status parameter is also the wrong thing. It should actually be set to "any".

denniskigen · 2024-10-01T20:22:29Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

-            ) : null}
-            {medication.dateStopped ? (
+            )}
+            {(medication.dateStopped || medication.autoStopDate) && (


Why the inclusion of medication.autoStopDate here?

@denniskigen It was one of the comments left by Ian on this PR this and I Quote @[ibacher](https://github.com/ibacher) ibacher [on Jul 5](https://github.com/openmrs/openmrs-esm-patient-chart/pull/1691#discussion_r1667011209) I don't know that it's guaranteed that dateStopped will always be set. That is, it will be set for medications that have been discontinued, but maybe not for those with a autoStopDate (sp. of property).

However, if we're adding it to the condition, it should also be added to the tooltip.

denniskigen · 2024-10-01T20:22:54Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

+                <Tooltip
+                  content={`${t('discontinuedDate', 'Discontinued date')}: ${formatDate(
+                    new Date(medication.dateStopped || medication.autoStopDate),
+                  )}`}
+                >
+                  <Tag type="gray" className={styles.tag}>
+                    {t('discontinued_Caps', 'DISCONTINUED')}
+                  </Tag>
+                </Tooltip>


Suggested change

<Tooltip

content={`${t('discontinuedDate', 'Discontinued date')}: ${formatDate(

new Date(medication.dateStopped || medication.autoStopDate),

)}`}

>

<Tag type="gray" className={styles.tag}>

{t('discontinued_Caps', 'DISCONTINUED')}

</Tag>

</Tooltip>

<Tooltip align="top" label={formatDate(new Date(medication.dateStopped))}>

<Tag type="gray" className={styles.tag}>

{t('discontinued', 'Discontinued')}

</Tag>

</Tooltip>

packages/esm-patient-medications-app/src/components/medications-details-table.scss

denniskigen · 2024-10-01T20:29:46Z

This PR

Same screen on dev3

Why is there a discrepancy with the extra orders with indefinite durations with this PR vs on dev3?

jwnasambu · 2024-10-01T21:24:14Z

Why is there a discrepancy with the extra orders with indefinite durations with this PR vs on dev3?

@denniskigen I believe this issue is occurring because of how the orders are fetched and rendered. After removing the 'ACTIVE' filter(on the api), When a medication is active, it is stored in the system as an active order. When it is discontinued, the same order might get updated or create a new record that reflects its discontinued status. This means: One entry represents the medication when it was active. Another entry represents the medication when it was discontinued. I think applying filtering to ensure that only the correct version (discontinued) is displayed in the past medications section will solve the issue if that is the way to go.

denniskigen · 2024-10-02T07:35:38Z

I wouldn't expect to see discontinued medications in the active medications list:

ibacher · 2024-10-02T15:43:59Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

-            ) : null}
-            {medication.dateStopped ? (
+            )}
+            {(medication.dateStopped || medication.autoStopDate) && (


However, if we're adding it to the condition, it should also be added to the tooltip.

ibacher · 2024-10-02T15:44:27Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

-                <span className={styles.label01}>
-                  &mdash; {t('discontinuedDate', 'Discontinued date').toUpperCase()}
-                </span>


We should leave this in. Again, we're not trying to change the display, just make discontinued orders more prominent.

ibacher · 2024-10-02T15:45:11Z

packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx

+                <Tooltip align="top" label={formatDate(new Date(medication.dateStopped))}>
+                  <Tag type="gray" className={styles.tag}>
+                    {t('discontinued', 'Discontinued')}
+                  </Tag>
+                </Tooltip>


I specifically think this should go at the start of the card, at the end of the first line.

packages/esm-patient-common-lib/src/orders/types.ts

packages/esm-patient-medications-app/src/active-medications/active-medications.component.tsx

denniskigen · 2024-10-09T11:23:51Z

packages/esm-patient-medications-app/src/active-medications/active-medications.component.tsx

+  const activeMedications = activePatientOrders?.filter((order) => {
+    const isActive = !order.dateStopped && order.action !== 'DISCONTINUE';
+    return isActive || (!order.autoExpireDate && order.action !== 'DISCONTINUE');
+  });


Shouldn't this bit of logic factor in the order's:

dateStopped

action (should not be DISCONTINUE)

autoExpireDate (should not have elapsed)

And if those are the conditions, should the logic be closer to something like:

const activeMedications = orders?.filter((order) => { const currentDate = new Date(); const hasNotExpired = !order.autoExpireDate || new Date(order.autoExpireDate) > currentDate; return !order.dateStopped && order.action !== 'DISCONTINUE' && hasNotExpired; });

This should also explain the discrepancy between the number of orders in the active medications table on the Summary page with this PR vs on dev3.

Additionally, because we're no longer leveraging the ACTIVE parameter to do the filtering on the backend, perhaps we could move the filtering logic to the hook so that it knows to return both activeOrders and pastOrders so that consuming components can just focus on rendering what they want.

...patient-chart-app/src/visit/visits-widget/past-visits-components/tests-summary.component.tsx

…-chart into fix/O3-2825

fix/03-2825: Medications that have been discontinued should have a Di…

03d3de2

…scontinued label

jwnasambu closed this Sep 26, 2024

jwnasambu reopened this Sep 26, 2024

jwnasambu added 2 commits September 26, 2024 20:10

Merge branch 'main' of https://github.com/openmrs/openmrs-esm-patient…

9f69d69

…-chart into fix/O3-2825

fix build error

5ffaf90

jwnasambu added 2 commits September 30, 2024 14:24

DISCONTINUED' should be a grey Carbon Tag

9487c7f

Add margin on Discontinued Label

3eb9c80

denniskigen reviewed Sep 30, 2024

View reviewed changes

jwnasambu added 2 commits October 1, 2024 00:19

Code refactor

eb76988

Remove the black borders on Tag

e0a51a9

denniskigen changed the title ~~fix/03-2825: Medications that have been discontinued should have a "Discontinued" label~~ (feat) O3-2825: Add "Discontinued" label for discontinued medications Oct 1, 2024

jwnasambu added 2 commits October 1, 2024 15:34

Flag discontinued requests with a tooltip

ab98f8b

Discontinued date appears in the tooltip

754f57b

denniskigen reviewed Oct 1, 2024

View reviewed changes

Display Discontinued date in the tooltip

9ee1057

ibacher reviewed Oct 2, 2024

View reviewed changes

packages/esm-patient-common-lib/src/orders/types.ts Outdated Show resolved Hide resolved

Add the Discontinued Date Label Inside the Tooltip

023d267

jwnasambu force-pushed the fix/O3-2825 branch from 616be61 to 023d267 Compare October 2, 2024 22:47

denniskigen requested a review from dkayiwa October 3, 2024 11:55

jwnasambu added 2 commits October 7, 2024 20:33

Only discontinued medication to display the tag

e9ee19d

Active medication to be displayed on all the Active tables

467c87c

denniskigen reviewed Oct 8, 2024

View reviewed changes

fix build error

2feca97

denniskigen reviewed Oct 9, 2024

View reviewed changes

...patient-chart-app/src/visit/visits-widget/past-visits-components/tests-summary.component.tsx Outdated Show resolved Hide resolved

jwnasambu and others added 3 commits October 9, 2024 15:33

Fix Active medications conditions

0c59911

Merge branch 'main' of https://github.com/openmrs/openmrs-esm-patient…

39aded7

…-chart into fix/O3-2825

Merge branch 'main' into fix/O3-2825

36f5541

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) O3-2825: Add "Discontinued" label for discontinued medications #2037

(feat) O3-2825: Add "Discontinued" label for discontinued medications #2037

jwnasambu commented Sep 26, 2024 •

edited

Loading

jwnasambu commented Sep 26, 2024

ibacher commented Sep 27, 2024

jwnasambu commented Sep 30, 2024

denniskigen Sep 30, 2024

ibacher Sep 30, 2024

denniskigen Sep 30, 2024

denniskigen Sep 30, 2024

ibacher Sep 30, 2024

jwnasambu Sep 30, 2024 •

edited

Loading

ibacher Oct 2, 2024

denniskigen Oct 1, 2024

jwnasambu Oct 1, 2024 •

edited

Loading

ibacher Oct 2, 2024

denniskigen Oct 1, 2024

denniskigen commented Oct 1, 2024 •

edited

Loading

jwnasambu commented Oct 1, 2024

denniskigen commented Oct 2, 2024

ibacher Oct 2, 2024

ibacher Oct 2, 2024

ibacher Oct 2, 2024

denniskigen Oct 9, 2024 •

edited

Loading

denniskigen Oct 9, 2024 •

edited

Loading

(feat) O3-2825: Add "Discontinued" label for discontinued medications #2037

Are you sure you want to change the base?

(feat) O3-2825: Add "Discontinued" label for discontinued medications #2037

Conversation

jwnasambu commented Sep 26, 2024 • edited Loading

Requirements

Summary

Screenshots

Related Issue

Other

jwnasambu commented Sep 26, 2024

ibacher commented Sep 27, 2024

jwnasambu commented Sep 30, 2024

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

jwnasambu Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwnasambu Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denniskigen commented Oct 1, 2024 • edited Loading

This PR

Same screen on dev3

jwnasambu commented Oct 1, 2024

denniskigen commented Oct 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denniskigen Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

denniskigen Oct 9, 2024 • edited Loading

Choose a reason for hiding this comment

jwnasambu commented Sep 26, 2024 •

edited

Loading

jwnasambu Sep 30, 2024 •

edited

Loading

jwnasambu Oct 1, 2024 •

edited

Loading

denniskigen commented Oct 1, 2024 •

edited

Loading

denniskigen Oct 9, 2024 •

edited

Loading

denniskigen Oct 9, 2024 •

edited

Loading