feat: [DHIS2-14334] edit enrollment date #3350

superskip · 2023-06-26T16:31:56Z

Don't be scared by the large number of line changes, a lot of them comes from yarn.lock.

@cooper-joe Could you please have a look at the style-object in EnrollmentDate.component? I think the units of measurement might be wrong.

Todo: - Run program rules after updating enrollment date - Hide edit button if user lacks data capture access to selected program - Show warning message if selected program has auto generated events - Proper recreation of the designed UI layout - Validate date before posting to server

cooper-joe

LGTM

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.component.js

Co-authored-by: Joe Cooper <[email protected]>

simonadomnisoru · 2023-06-28T08:32:49Z

...re-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js

    const onUpdateTeiAttributeValues = useCallback((updatedAttributeValues, teiDisplayName) => {
        dispatch(updateEnrollmentAttributeValues(updatedAttributeValues
            .map(({ attribute, value }) => ({ id: attribute, value })),
        ));
        dispatch(updateTeiDisplayName(teiDisplayName));
    }, [dispatch]);

+    const onUpdateEnrollmentDate = useCallback(enrollmentDate =>
+        dispatch(updateEnrollmentDate(enrollmentDate)), [dispatch]);


Hey @superskip,
IMHO the enrollment date in the top ScopeSelector should be updated without requiring a page refresh. The WidgetProfile currently handles it inonUpdateTeiAttributeValues and updateTeiDisplayName(teiDisplayName). Does it make sense to implement something similar for the enrollment date?

Screen.Recording.2023-06-28.at.10.15.11.mov

Thanks you!

Good observation! Will fix :)

github-actions · 2023-07-18T09:59:32Z

🚀 Deployed on https://deploy-preview-3350--dhis2-capture.netlify.app

JoakimSM

Thanks @superskip.

Some comments in the code, but in addition we should implement the same for "incident date" (you might have mentioned that you wanted a review first). The incident date should have the same information regarding auto-generated events.

JoakimSM · 2023-07-18T11:06:53Z

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.component.js

+                dense
+                className={classes.calendar}
+                label={enrollmentDateLabel}
+                inputWidth="50%"


Can we do a maxWidth of 200 instead of this? Not sure what styles we can send to the CalendarInput component, but an option is to wrap the CalendarInput in a div and set maxWidth on this.

There is no maxWidth prop, but there is already lower bound on how narrow the enrollment widget can get. If we use inputWidth="200px" then this lower bound will increase by a little. If we instead say inputWidth="180px" then the lower bound will increase even less (if at all) while at the same time we will get a width matching better with the width shown in the pictures in the jira ticket.

I think a maxWidth of 200 would be best. Let's go for a wrapping div with a maxWidth of 200.

JoakimSM · 2023-07-19T12:28:56Z

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.container.js

+    onUpdateDate,
+    classes,
+}: Props) => {
+    const [updateMutation] = useDataMutation(enrollmentUpdate);


Let's implement a simple UI-rollback if the request fails. Simple as in; let's not consider that the user can do simultaneous requests for changing the enrollment date. The useDataMutation takes an onError callback that we can utilise.

JoakimSM · 2023-07-19T12:46:18Z

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.container.js

+    const saveHandler = (selectedDate: string) => {
+        enrollment.enrolledAt = convertValueClientToServer(selectedDate, dataElementTypes.DATE);
+        updateMutation(enrollment);
+        onUpdateDate && onUpdateDate(enrollment.enrolledAt);


(Putting this comment here, even though it is not directly related to the code line)

At the moment we update enrolledAt by mutating the enrollment object, but we don't actually set the state (to trigger a re-render). The UI currently updates because of some side-effects in the useDataMutation hook. We should follow best practice here and update the enrollment by setting the state.

Which part of the UI are you thinking of here? The date in the enrollment widget is rendered when the states editMode and selectedDate (in enrollmentDate.compontent) changes. Anyway, I think perhaps the change you had in mind got implemented in the error handling commit 🙂

Not exactly what I was looking for.

We should use optimistic UI and update the enrollment date instantly when the user changes it. Meaning; Before we get confirmation from the api, the enrollment date in the Widget UI should update and we should invoke the external onUpdate callback. If the request fails, we should revert the value to the original one. Also, in your saveHandler (EnrollmentDate.container) it is fine to invoke updateMutation directly, don't need to use an useEffect.

I think it makes most sense to update the enrollment object from useEnrollment (EnrollmentDate.container) instead of using a local component state.

...re-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js

JoakimSM · 2023-08-29T10:09:33Z

src/core_modules/capture-core/components/WidgetEnrollment/WidgetEnrollment.container.js

            program={program}
            refetchEnrollment={refetchEnrollment}
            refetchTEI={refetchTEI}
            ownerOrgUnit={{ id: ownerOrgUnit, displayName }}
            loading={!(enrollment && program && displayName)}
            onDelete={onDelete}
            onAddNew={onAddNew}
+            onUpdateEnrollmentDate={onUpdateEnrollmentDate}
+            onUpdateIncidentDate={onUpdateIncidentDate}
            error={error}


can we change this to initError? (hard to keep track of the errors now when we also have error callbacks when updating)

JoakimSM · 2023-08-29T10:28:35Z

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.component.js

@@ -0,0 +1,151 @@
+// @flow


NIT: Can we change the name of this file since we are using it for both enrollment date and incident date? A bit hard since it is the enrollment Widget (so EnrollmentDate makes some sense). EnrollmentWidgetDate maybe? (feel free to come up with something better)

superskip · 2023-08-31T17:02:43Z

Renamed EnrollmentDate -> Date.

@JoakimSM - I didn't like how the code turned out after doing the thing we discussed (exposing setEnrollment).
Instead I made it so that enrollment gets refetched once the update request succeeds. As a consequence, the enrolledAt and occurredAt values are not up to date while the request is being processed. Therefore, to display the new date value while the request gets processed I had to introduce a state variable (in Date.container.js).

JoakimSM

Good job 👍

geethaalwan

Tested successfully on 2.41,2.40.2,2.38.5,2.39.3 versions

# [100.38.0](v100.37.0...v100.38.0) (2023-09-06) ### Features * [DHIS2-14334] edit enrollment date ([#3350](#3350)) ([9dd1b6a](9dd1b6a))

dhis2-bot · 2023-09-06T09:10:52Z

🎉 This PR is included in version 100.38.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [100.38.0](v100.37.0...v100.38.0) (2023-09-06) ### Features * [DHIS2-14334] edit enrollment date ([#3350](#3350)) ([9dd1b6a](9dd1b6a))

superskip added 10 commits June 19, 2023 11:29

build: upgrade @dhis2/ui version to get calendar

1804300

feat: run rules after updating enrollment date

51c1ee3

feat: enrollment date edit button enable condition

3a7907b

feat: auto generated event warning message

9907855

feat: use CalendarInput component from @dhis2/ui

732ee9f

fix: fix UI layout

2130e8f

fix: always use input format YYYY-MM-DD in CalendarInput

e3addc1

chore: add translation string

d275c0f

chore: linter errors

da78f8b

superskip requested a review from cooper-joe June 26, 2023 16:31

superskip requested a review from a team as a code owner June 26, 2023 16:31

superskip and others added 5 commits June 26, 2023 18:34

Merge branch 'master' into DHIS2-14334

6c1d7c8

fix: cypress tests

8afb762

Merge branch 'master' into DHIS2-14334

7abb823

fix: missing comma

983988d

refactor: remove unused class name

3827ee9

cooper-joe approved these changes Jun 27, 2023

View reviewed changes

..._modules/capture-core/components/WidgetEnrollment/EnrollmentDate/EnrollmentDate.component.js Outdated Show resolved Hide resolved

superskip and others added 2 commits June 27, 2023 20:38

fix: change color

7102bf3

Co-authored-by: Joe Cooper <[email protected]>

Merge branch 'master' into DHIS2-14334

da5de9b

simonadomnisoru reviewed Jun 28, 2023

View reviewed changes

fix: update enrollment date in top bar

1743436

superskip requested a review from simonadomnisoru June 30, 2023 10:53

simonadomnisoru approved these changes Jul 3, 2023

View reviewed changes

JoakimSM added the testing label Jul 18, 2023

JoakimSM reviewed Jul 19, 2023

View reviewed changes

superskip added 3 commits August 9, 2023 15:15

feat: simple error handling

a17138b

fix: adjust width of input field

4da0ea7

refactor: rename mayEditDate -> readOnlyMode

a2b4f0d

JoakimSM reviewed Aug 29, 2023

View reviewed changes

superskip added 9 commits August 30, 2023 11:10

Merge branch 'master' into DHIS2-14334

c983799

refactor: rename prop error -> initError

449577b

refactor: change to optimistic gui

62a2578

refactor: refetch enrollment from api rather than maintaining it locally

82d3e94

refactor: rename EnrollmentDate -> Date

6125de4

feat: use maxWidth

5ca6205

fix: error in the date equality check

3628742

style: further renaming of enrollmentDate -> date

ba03879

fix: display selected date immediately after saving

3d81bc3

refactor: move enrollment update logic into useEnrollment

a02ea61

JoakimSM approved these changes Sep 1, 2023

View reviewed changes

superskip added the testing label Sep 1, 2023

superskip added 2 commits September 5, 2023 11:31

fix: condition for displaying auto-generated events warning

8f6cadc

fix: condition for displaying auto-generated events warning

6d89fd0

superskip added testing and removed testing labels Sep 5, 2023

fix: use same date format as server

e3ad11d

superskip added testing and removed testing labels Sep 5, 2023

geethaalwan approved these changes Sep 6, 2023

View reviewed changes

superskip merged commit 9dd1b6a into master Sep 6, 2023

superskip deleted the DHIS2-14334 branch September 6, 2023 08:59

dhis2-bot added a commit that referenced this pull request Sep 6, 2023

chore(release): cut 100.38.0 [skip release]

85a67db

# [100.38.0](v100.37.0...v100.38.0) (2023-09-06) ### Features * [DHIS2-14334] edit enrollment date ([#3350](#3350)) ([9dd1b6a](9dd1b6a))

dhis2-bot added the released label Sep 6, 2023

superskip added a commit that referenced this pull request Oct 27, 2023

feat: [DHIS2-14334] edit enrollment date (#3350)

189c577

superskip pushed a commit that referenced this pull request Oct 27, 2023

chore(release): cut 100.38.0 [skip release]

3dc47c0

# [100.38.0](v100.37.0...v100.38.0) (2023-09-06) ### Features * [DHIS2-14334] edit enrollment date ([#3350](#3350)) ([9dd1b6a](9dd1b6a))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [DHIS2-14334] edit enrollment date #3350

feat: [DHIS2-14334] edit enrollment date #3350

superskip commented Jun 26, 2023 •

edited

Loading

cooper-joe left a comment

simonadomnisoru Jun 28, 2023

superskip Jun 28, 2023

github-actions bot commented Jul 18, 2023 •

edited

Loading

JoakimSM left a comment

JoakimSM Jul 18, 2023

superskip Aug 7, 2023 •

edited

Loading

JoakimSM Aug 29, 2023

JoakimSM Jul 19, 2023 •

edited

Loading

JoakimSM Jul 19, 2023

superskip Aug 10, 2023

JoakimSM Aug 29, 2023

JoakimSM Aug 29, 2023

JoakimSM Aug 29, 2023

superskip commented Aug 31, 2023 •

edited

Loading

JoakimSM left a comment

geethaalwan left a comment

dhis2-bot commented Sep 6, 2023

feat: [DHIS2-14334] edit enrollment date #3350

feat: [DHIS2-14334] edit enrollment date #3350

Conversation

superskip commented Jun 26, 2023 • edited Loading

cooper-joe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 18, 2023 • edited Loading

JoakimSM left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

superskip Aug 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoakimSM Jul 19, 2023 • edited Loading

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

superskip commented Aug 31, 2023 • edited Loading

JoakimSM left a comment

Choose a reason for hiding this comment

geethaalwan left a comment

Choose a reason for hiding this comment

dhis2-bot commented Sep 6, 2023

superskip commented Jun 26, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

superskip Aug 7, 2023 •

edited

Loading

JoakimSM Jul 19, 2023 •

edited

Loading

superskip commented Aug 31, 2023 •

edited

Loading