feat: [DHIS2-13237] Enrollment coordinates in enrollment widget (#3141)

Co-authored-by: Simona Domnisoru <[email protected]>

i18n/en.pot

@@ -1176,6 +1176,33 @@ msgstr "Mark for follow-up"
 msgid "Existing dates for auto-generated events will not be updated."
 msgstr "Existing dates for auto-generated events will not be updated."
 
+msgid "Latitude"
+msgstr "Latitude"
+
+msgid "Longitude"
+msgstr "Longitude"
+
+msgid "Edit"
+msgstr "Edit"
+
+msgid "Set coordinates"
+msgstr "Set coordinates"
+
+msgid "Coordinates"
+msgstr "Coordinates"
+
+msgid "Delete polygon"
+msgstr "Delete polygon"
+
+msgid "Close without saving"
+msgstr "Close without saving"
+
+msgid "Finish drawing before saving"
+msgstr "Finish drawing before saving"
+
+msgid "Set area"
+msgstr "Set area"
+
 msgid "Enrollment date"
 msgstr "Enrollment date"
 
@@ -1200,6 +1227,12 @@ msgstr "Last updated {{date}}"
 msgid "Cancelled"
 msgstr "Cancelled"
 
+msgid "Add coordinates"
+msgstr "Add coordinates"
+
+msgid "Add area"
+msgstr "Add area"
+
 msgid "Comments about this enrollment"
 msgstr "Comments about this enrollment"
 
@@ -1323,9 +1356,6 @@ msgstr "Profile widget could not be loaded. Please try again later"
 msgid "{{TETName}} profile"
 msgstr "{{TETName}} profile"
 
-msgid "Edit"
-msgstr "Edit"
-
 msgid "tracked entity instance"
 msgstr "tracked entity instance"
 
@@ -1572,12 +1602,6 @@ msgstr "To time"
 msgid "Page {{currentPage}}"
 msgstr "Page {{currentPage}}"
 
-msgid "Delete polygon"
-msgstr "Delete polygon"
-
-msgid "Set area"
-msgstr "Set area"
-
 msgid "Area on map saved"
 msgstr "Area on map saved"
 

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData/useCommonEnrollmentDomainData.types.js

@@ -39,6 +39,7 @@ export type EnrollmentData = {|
     scheduledAt: string,
     trackedEntity: string,
     trackedEntityType: string,
+    geometry?: ?{ type: string, coordinates: [number, number] | Array<[number, number]>}
 |};
 
 export type AttributeValue = {|

src/core_modules/capture-core/components/WidgetEnrollment/Actions/Actions.component.js

@@ -8,8 +8,10 @@ import { Complete } from './Complete';
 import { Delete } from './Delete';
 import { Followup } from './Followup';
 import { AddNew } from './AddNew';
+import { AddLocation } from './AddLocation';
 import type { PlainProps } from './actions.types';
 import { LoadingMaskForButton } from '../../LoadingMasks';
+import { MapModal } from '../MapModal';
 
 const styles = {
     actions: {
@@ -35,13 +37,14 @@ export const ActionsPlain = ({
     onlyEnrollOnce,
     classes,
 }: PlainProps) => {
-    const [open, setOpen] = useState(false);
+    const [isOpenActions, setOpenActions] = useState(false);
+    const [isOpenMap, setOpenMap] = useState(false);
     const handleOnUpdate = (arg) => {
-        setOpen(prev => !prev);
+        setOpenActions(false);
         onUpdate(arg);
     };
     const handleOnDelete = (arg) => {
-        setOpen(prev => !prev);
+        setOpenActions(false);
         onDelete(arg);
     };
 
@@ -53,8 +56,8 @@ export const ActionsPlain = ({
                 small
                 disabled={loading}
                 className={classes.actions}
-                open={open}
-                onClick={() => setOpen(prev => !prev)}
+                open={isOpenActions}
+                onClick={() => setOpenActions(prev => !prev)}
                 component={
                     loading ? null : (
                         <FlyoutMenu dense maxWidth="250px">
@@ -72,6 +75,13 @@ export const ActionsPlain = ({
                                 enrollment={enrollment}
                                 onUpdate={handleOnUpdate}
                             />
+                            <AddLocation
+                                enrollment={enrollment}
+                                setOpenMap={() => {
+                                    setOpenMap(true);
+                                    setOpenActions(false);
+                                }}
+                            />
                             <MenuDivider />
                             <Cancel
                                 enrollment={enrollment}
@@ -81,6 +91,7 @@ export const ActionsPlain = ({
                                 enrollment={enrollment}
                                 onDelete={handleOnDelete}
                             />
+
                         </FlyoutMenu>
                     )
                 }
@@ -94,6 +105,11 @@ export const ActionsPlain = ({
                     {i18n.t('We are processing your request.')}
                 </div>
             )}
+            {isOpenMap && <MapModal
+                enrollment={enrollment}
+                onUpdate={handleOnUpdate}
+                setOpenMap={setOpenMap}
+            />}
         </>
     );
 };

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

@@ -1,24 +1,8 @@
 // @flow
-import { useDataMutation } from '@dhis2/app-runtime';
 import React from 'react';
 import { ActionsComponent } from './Actions.component';
 import type { Props } from './actions.types';
-import { processErrorReports } from '../processErrorReports';
-
-const enrollmentUpdate = {
-    resource: 'tracker?async=false&importStrategy=UPDATE',
-    type: 'create',
-    data: enrollment => ({
-        enrollments: [enrollment],
-    }),
-};
-const enrollmentDelete = {
-    resource: 'tracker?async=false&importStrategy=DELETE',
-    type: 'create',
-    data: enrollment => ({
-        enrollments: [enrollment],
-    }),
-};
+import { useUpdateEnrollment, useDeleteEnrollment } from '../dataMutation/dataMutation';
 
 export const Actions = ({
     enrollment = {},
@@ -29,31 +13,8 @@ export const Actions = ({
     onSuccess,
     ...passOnProps
 }: Props) => {
-    const [updateMutation, { loading: updateLoading }] = useDataMutation(
-        enrollmentUpdate,
-        {
-            onComplete: () => {
-                refetchEnrollment();
-                refetchTEI();
-                onSuccess && onSuccess();
-            },
-            onError: (e) => {
-                onError && onError(processErrorReports(e));
-            },
-        },
-    );
-    const [deleteMutation, { loading: deleteLoading }] = useDataMutation(
-        enrollmentDelete,
-        {
-            onComplete: () => {
-                onDelete();
-                onSuccess && onSuccess();
-            },
-            onError: (e) => {
-                onError && onError(processErrorReports(e));
-            },
-        },
-    );
+    const { updateMutation, updateLoading } = useUpdateEnrollment(refetchEnrollment, refetchTEI, onError);
+    const { deleteMutation, deleteLoading } = useDeleteEnrollment(onDelete, onError);
 
     return (
         <ActionsComponent

src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddLocation/AddLocation.component.js

@@ -0,0 +1,23 @@
+// @flow
+import { IconLocation16, MenuItem } from '@dhis2/ui';
+import React from 'react';
+import { useGeometryLabel } from '../../hooks/useGeometry';
+import type { Props } from './addLocation.types';
+
+export const AddLocation = ({ enrollment, setOpenMap }: Props) => {
+    const label = useGeometryLabel(enrollment);
+
+    if (!label) {
+        return null;
+    }
+
+    return (
+        <MenuItem
+            dense
+            dataTest="widget-enrollment-actions-add-location"
+            icon={<IconLocation16 />}
+            label={label}
+            onClick={() => setOpenMap(true)}
+        />
+    );
+};

src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddLocation/addLocation.types.js

@@ -0,0 +1,6 @@
+// @flow
+
+export type Props = {|
+    enrollment: Object,
+    setOpenMap: (toogle: boolean) => void,
+|};

src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddLocation/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { AddLocation } from './AddLocation.component';