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

i18n/en.pot

@@ -553,6 +553,15 @@ msgstr "Program doesn't exist"
 msgid "Selected program is invalid for selected registering unit"
 msgstr "Selected program is invalid for selected registering unit"
 
+msgid "coordinates"
+msgstr "coordinates"
+
+msgid "area"
+msgstr "area"
+
+msgid "Set"
+msgstr "Set"
+
 msgid "Online"
 msgstr "Online"
 
@@ -1043,6 +1052,12 @@ msgstr "Enrollment actions"
 msgid "We are processing your request."
 msgstr "We are processing your request."
 
+msgid "Add coordinates"
+msgstr "Add coordinates"
+
+msgid "Add area"
+msgstr "Add area"
+
 msgid "Only one enrollment per {{tetName}} is allowed in this program"
 msgstr "Only one enrollment per {{tetName}} is allowed in this program"
 

src/core_modules/capture-core/components/MapCoordinates/MapCoordinates.js

@@ -0,0 +1,70 @@
+// @flow
+import React, { useState } from 'react';
+import { Map, TileLayer, Marker, Polygon } from 'react-leaflet';
+import { withStyles } from '@material-ui/core';
+import { dataElementTypes } from '../../metaData';
+import { MapCoordinatesModal } from './MapCoordinatesModal';
+import type { MiniMapProps } from './mapCoordinates.types';
+
+const styles = () => ({
+    mapContainer: {
+        width: 150,
+        height: 120,
+    },
+    map: {
+        width: '100%',
+        height: '100%',
+    },
+});
+
+const convertToClientCoordinates = (coordinates, type) => {
+    switch (type) {
+    case dataElementTypes.COORDINATE:
+        return [coordinates[1], coordinates[0]];
+    case dataElementTypes.POLYGON:
+        return coordinates[0].map(coord => [coord[1], coord[0]]);
+    default:
+        return coordinates;
+    }
+};
+
+
+const MapCoordinatesPlain = ({ coordinates, type, classes, onSetCoordinates }: MiniMapProps) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const clientValues = convertToClientCoordinates(coordinates, type);
+    const center = type === dataElementTypes.COORDINATE ? clientValues : clientValues[0];
+
+    return (
+        <>
+            <div className={classes.mapContainer}>
+                <Map
+                    center={center}
+                    className={classes.map}
+                    zoom={11}
+                    zoomControl={false}
+                    attributionControl={false}
+                    key="minimap"
+                    onClick={() => {
+                        setModalOpen(true);
+                    }}
+                >
+                    <TileLayer
+                        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+                        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+                    />
+                    {type === dataElementTypes.COORDINATE && <Marker position={clientValues} />}
+                    {type === dataElementTypes.POLYGON && <Polygon positions={clientValues} />}
+                </Map>
+            </div>
+            <MapCoordinatesModal
+                type={type}
+                center={center}
+                isOpen={isModalOpen}
+                setOpen={setModalOpen}
+                onSetCoordinates={onSetCoordinates}
+            />
+        </>
+    );
+};
+
+export const MapCoordinates = withStyles(styles)(MapCoordinatesPlain);

src/core_modules/capture-core/components/MapCoordinates/MapCoordinatesModal.js

@@ -0,0 +1,153 @@
+// @flow
+import React, { useState } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import log from 'loglevel';
+import { Modal, ModalTitle, ModalContent, ModalActions, Button, ButtonStrip } from '@dhis2/ui';
+import { Map, TileLayer, Marker, FeatureGroup } from 'react-leaflet';
+import { EditControl } from 'react-leaflet-draw';
+import { withStyles } from '@material-ui/core';
+import { dataElementTypes } from '../../metaData';
+import type { ModalProps } from './mapCoordinates.types';
+
+const styles = () => ({
+    modalContent: {
+        width: '100%',
+        height: '75vh',
+    },
+    map: {
+        width: '100%',
+        height: '100%',
+    },
+    title: {
+        textTransform: 'capitalize',
+    },
+});
+
+const convertToServerCoordinates = (coordinates, type) => {
+    if (!coordinates) { return null; }
+    switch (type) {
+    case dataElementTypes.COORDINATE:
+        return [coordinates[1], coordinates[0]];
+    case dataElementTypes.POLYGON:
+        return [coordinates[0]];
+    default:
+        return coordinates;
+    }
+};
+
+const MapCoordinatesModalPlain = ({ classes, center, isOpen, setOpen, type, onSetCoordinates }: ModalProps) => {
+    const [position, setPosition] = useState(null);
+    const [coordinates, setCoordinates] = useState(null);
+
+    const onHandleMapClicked = (mapCoordinates) => {
+        if (type === dataElementTypes.COORDINATE) {
+            const { lat, lng } = mapCoordinates.latlng;
+            const newPosition: [number, number] = [lat, lng];
+            // $FlowFixMe
+            setPosition(newPosition);
+        }
+    };
+
+    const onMapPolygonCreated = (e: any) => {
+        const polygonCoordinates = e.layer.toGeoJSON().geometry.coordinates;
+        setCoordinates(polygonCoordinates);
+    };
+
+    const onMapPolygonEdited = (e: any) => {
+        const polygonCoordinates = e.layers.getLayers()[0].toGeoJSON().geometry.coordinates;
+        setCoordinates(polygonCoordinates);
+    };
+    const onMapPolygonDelete = () => {
+        setCoordinates(null);
+    };
+
+    const renderMap = () => (<Map
+        center={center}
+        zoom={13}
+        ref={(ref) => {
+            if (ref?.leafletElement) {
+                setTimeout(() => { ref.leafletElement.invalidateSize(); }, 250);
+            }
+        }}
+        className={classes.map}
+        onClick={onHandleMapClicked}
+    >
+        <TileLayer
+            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+        />
+        {type === dataElementTypes.POLYGON && <FeatureGroup>
+            <EditControl
+                position="topright"
+                onEdited={onMapPolygonEdited}
+                onCreated={onMapPolygonCreated}
+                onDeleted={onMapPolygonDelete}
+                draw={{
+                    rectangle: false,
+                    polyline: false,
+                    circle: false,
+                    marker: false,
+                    circlemarker: false,
+                }}
+                edit={{
+                    remove: false,
+                }}
+            />
+        </FeatureGroup>}
+        {type === dataElementTypes.COORDINATE && position && <Marker position={position} />}
+    </Map>);
+
+    const getTitle = () => {
+        switch (type) {
+        case dataElementTypes.COORDINATE:
+            return i18n.t('coordinates');
+        case dataElementTypes.POLYGON:
+            return i18n.t('area');
+        default:
+            log.error(`${type} is not handled`);
+            return '';
+        }
+    };
+
+    const renderActions = () => (<ButtonStrip end>
+        <Button
+            onClick={() => {
+                setOpen(false);
+            }}
+            secondary
+        >
+            {i18n.t('Cancel')}
+        </Button>
+        <Button
+            onClick={() => {
+                if (position ?? coordinates) {
+                    const convertedCoordinates = convertToServerCoordinates(position ?? coordinates, type);
+                    // $FlowFixMe
+                    onSetCoordinates(convertedCoordinates);
+                    setOpen(false);
+                }
+            }}
+            primary
+        >
+            {`${i18n.t('Set')} ${getTitle()}`}
+        </Button>
+    </ButtonStrip>);
+
+    return (
+        <Modal
+            hide={!isOpen}
+            large
+        >
+            <ModalTitle>
+                <div className={classes.title}>{getTitle()}</div>
+            </ModalTitle>
+            <ModalContent>
+                <div className={classes.modalContent}>{renderMap()}</div>
+            </ModalContent>
+            <ModalActions>
+                {renderActions()}
+            </ModalActions>
+        </Modal>
+    );
+};
+export const MapCoordinatesModal = withStyles(styles)(MapCoordinatesModalPlain);

src/core_modules/capture-core/components/MapCoordinates/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { MapCoordinates } from './MapCoordinates';
+export { MapCoordinatesModal } from './MapCoordinatesModal';

src/core_modules/capture-core/components/MapCoordinates/mapCoordinates.types.js

@@ -0,0 +1,17 @@
+// @flow
+
+export type MiniMapProps = {
+    coordinates: any,
+    type: string,
+    classes: Object,
+    onSetCoordinates: (coordinates: ?[number, number] | ?Array<[number, number]>) => void,
+}
+
+export type ModalProps = {
+    center: ?[number, number],
+    isOpen: boolean,
+    type: string,
+    setOpen: (open: boolean) => void,
+    onSetCoordinates: (coordinates: ?[number, number] | ?Array<[number, number]>) => void,
+    classes: Object
+}

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

@@ -42,6 +42,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,6 +8,7 @@ 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';
 
@@ -72,6 +73,10 @@ export const ActionsPlain = ({
                                 enrollment={enrollment}
                                 onUpdate={handleOnUpdate}
                             />
+                            <AddLocation
+                                enrollment={enrollment}
+                                onUpdate={handleOnUpdate}
+                            />
                             <MenuDivider />
                             <Cancel
                                 enrollment={enrollment}
@@ -81,6 +86,7 @@ export const ActionsPlain = ({
                                 enrollment={enrollment}
                                 onDelete={handleOnDelete}
                             />
+
                         </FlyoutMenu>
                     )
                 }

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

@@ -1,31 +1,9 @@
 // @flow
-import { useDataMutation } from '@dhis2/app-runtime';
 import React from 'react';
+import { useDeleteEnrollment, useUpdateEnrollment } from '../dataMutation/dataMutation';
 import { ActionsComponent } from './Actions.component';
 import type { Props } from './actions.types';
 
-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],
-    }),
-};
-const processErrorReports = (error) => {
-    // $FlowFixMe[prop-missing]
-    const errorReports = error?.details?.validationReport?.errorReports;
-    return errorReports?.length > 0
-        ? errorReports.reduce((acc, errorReport) => `${acc} ${errorReport.message}`, '')
-        : error.message;
-};
-
 export const Actions = ({
     enrollment = {},
     refetchEnrollment,
@@ -34,27 +12,8 @@ export const Actions = ({
     onError,
     ...passOnProps
 }: Props) => {
-    const [updateMutation, { loading: updateLoading }] = useDataMutation(
-        enrollmentUpdate,
-        {
-            onComplete: () => {
-                refetchEnrollment();
-                refetchTEI();
-            },
-            onError: (e) => {
-                onError && onError(processErrorReports(e));
-            },
-        },
-    );
-    const [deleteMutation, { loading: deleteLoading }] = useDataMutation(
-        enrollmentDelete,
-        {
-            onComplete: onDelete,
-            onError: (e) => {
-                onError && onError(processErrorReports(e));
-            },
-        },
-    );
+    const { updateMutation, updateLoading } = useUpdateEnrollment(refetchEnrollment, refetchTEI, onError);
+    const { deleteMutation, deleteLoading } = useDeleteEnrollment(onDelete, onError);
 
     return (
         <ActionsComponent