feat: [DHIS2-13237] Enrollment coordinates in enrollment widget

[jasminenguyennn]

DHIS2-13237

Tech summary
AddLocation.component.js

1. toggle the MapModal
2. show either Add Coordinates or Add Area based on the geometryType

MiniMap.component

1. displays the minimap
2. converts data to client format using convertToClientCoordinates and pass it as defaultValues to MapModal

MapModal.container.js

1. onSetCoordinates uses the useUpdateEnrollment hook to update the geometry

Coordinates.component.js

1. displays the map for a point
2. renderLatitude and renderLongitude display the coordinates of the point under the map
3. manage the validation of the coordinates using isValidCoordinate
4. convert the data to API format usingconvertCoordinatesToServer

Polygon.component.js

1. displays the map for a polygon
2. convert the data to API format usingconvertPolygonToServer

DeleteControl.component

1. refactor the logic of the capture-ui component into a functional component
2. builds and adds to the map a custom delete control button

[JoakimSM]

I see a map, that's good 🙂 Tried to register a new TEI and enroll, but the marker is not placed in the right spot. Maybe a mixup of Latitude and Longitude? (or are we been inconsistent here somehow) Also, we should be able to update or set a new coordinate/polygon somehow, started a thread on slack for this since the design is incomplete it seems.

[github-actions]

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

[simonadomnisoru]

Hey @superskip,

I've rollback the disabled buttons logic and implemented the same design we currently have when the polygon is created/edited/deleted when enrolling a TEI. This fixes the original issue you reported:

• Click on a MiniMap containing a polygon. Click the edit polygon button and close modal without first clicking 'Save|Cancel'. Click on the MiniMap again. The 'Save|Cancel' buttons are still displayed. The same is also true for the create and delete buttons.

IMHO I would rather merge the enrollment map with the same design as the existing one (just as the Jira ticket description mentions). Afterward, if it needs improvements, we can focus on changing all the maps at the same time, not just the enrollment widget map. Let me know if you strongly disagree or find any difference between how the polygons modal works in both places.

Thank you for the review!

[superskip]

The inviting blue button is definitely evil now.. I don't think this feels very releasable at the moment, even if the profile widget does the same. If we're in a hurry with releasing this, maybe we should make it look like a useless feature like in the profile widget, by not showing the polygon any more as soon as the page gets reloaded.

If we can make a common map modal component for both widgets, then I agree it would make sense to improve both simultaneously. I also imagine much can be done by improving the enrollment widget first, if one focuses on making the component reusable.

This issue wasn't yours from the start, so we might consider passing it on to me for a while if you're tired of working with it 😛

[superskip]

Ah, nice solution :)

[JoakimSM]

@superskip gave me an overview of the problems he saw. Based on this I suggest the following:

• When opening the modal, before any changes have been made, don't display the 'Set area' button at all. We should keep the cancel button, but change the text to 'Close'.
• When starting to draw an area, display 'Close without saving' (same behaviour as current 'Cancel') and 'Set area'. 'Set area' should be disabled (also show a tooltip, 'finish drawing before saving')
• After an area has been drawn, display the buttons we have today (but replace 'Cancel' button text with 'Close without saving')
• Clicking 'cancel' in the drawing should get you back to the previous state (If no changes have been made earlier, we will only display 'Close' for example)
• Remove the option to edit the current polygon (the button that says "edit layers"). If you need to make changes, you will have to draw a new one. We need a proper design here ( https://dhis2.atlassian.net/browse/DHIS2-15970), so we will implement in different ticket.

Also, we should consolidate the map code at a later point: https://dhis2.atlassian.net/browse/TECH-1660

Let's talk if you have questions / concerns

[simonadomnisoru]

• When opening the modal, before any changes have been made, don't display the 'Set area' button at all. We should keep the cancel button, but change the text to 'Close'.
• When starting to draw an area, display 'Close without saving' (same behaviour as current 'Cancel') and 'Set area'. 'Set area' should be disabled (also show a tooltip, 'finish drawing before saving')
• After an area has been drawn, display the buttons we have today (but replace 'Cancel' button text with 'Close without saving')
• Clicking 'cancel' in the drawing should get you back to the previous state (If no changes have been made earlier, we will only display 'Close' for example)
• Remove the option to edit the current polygon (the button that says "edit layers"). If you need to make changes, you will have to draw a new one. We need a proper design here ( https://dhis2.atlassian.net/browse/DHIS2-15970), so we will implement in different ticket.

Also, we should consolidate the map code at a later point: https://dhis2.atlassian.net/browse/TECH-1660

Hey @JoakimSM,
I implemented the changes you suggested in the latest commits. Let me know if you find other issues.
Thanks!

[JoakimSM]

Much better! Sometimes when I'm deleting (see video), it doesn't actually get deleted. I think the problem always occurs when: First editing an existing area and saving (set area), then clicking the minimap again and deleting (no browser refresh in between).

Skjermopptak.2023-11-10.kl.15.24.49.mov

This is hopefully the last hurdle.

[simonadomnisoru]

Much better! Sometimes when I'm deleting (see video), it doesn't actually get deleted. I think the problem always occurs when: First editing an existing area and saving (set area), then clicking the minimap again and deleting (no browser refresh in between).

Skjermopptak.2023-11-10.kl.15.24.49.mov
This is hopefully the last hurdle.

Hey @JoakimSM,
I fixed the delete bug with the latest commit. Let me know if you find other issues.
Thank you!

[JoakimSM]

🎉

[geethaalwan]

Tested successfully on 2.41,2.40.3,2.39.4,2.38.6 versions

[dhis2-bot]

🎉 This PR is included in version 100.45.0 🎉

The release is available on:

• AppHub release
• v100.45.0
• GitHub release

Your semantic-release bot 📦🚀