fix: [DHIS2-6335] use custom map center point

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentDataEntry.component.js

@@ -239,6 +239,7 @@ const getGeometrySettings = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -249,6 +250,7 @@ const getGeometrySettings = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',
@@ -371,7 +373,6 @@ class FinalEnrollmentDataEntry extends React.Component<FinalTeiDataEntryProps> {
     }
 }
 
-
 const AOCFieldBuilderHOC = withAOCFieldBuilder(getAOCSettingsFn())(
     withDataEntryFields(
         getCategoryOptionsSettingsFn(),
@@ -431,7 +432,6 @@ export class EnrollmentDataEntryComponent extends React.Component<PreEnrollmentD
 
     render() {
         const {
-            orgUnit,
             onUpdateField,
             onUpdateDataEntryField,
             onStartAsyncUpdateField,

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentWithFirstStageDataEntry/EnrollmentWithFirstStageDataEntry.component.js

@@ -126,6 +126,7 @@ const getStageGeometrySettings = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -136,6 +137,7 @@ const getStageGeometrySettings = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => stageMainDataIds.GEOMETRY,

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/DataEntry.component.js

@@ -231,6 +231,7 @@ const buildGeometrySettingsFn = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -241,6 +242,7 @@ const buildGeometrySettingsFn = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',
@@ -579,6 +581,7 @@ class NewEventDataEntry extends Component<Props> {
                         fieldOptions={this.fieldOptions}
                         dataEntrySections={this.dataEntrySections}
                         relationshipsRef={this.setRelationshipsInstance}
+                        orgUnit={orgUnit}
                         {...passOnProps}
                     />
                 </div>

src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js

@@ -4,6 +4,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import { CoordinateField as UICoordinateField } from 'capture-ui';
 import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
+import { withCenterPoint } from '../../HOC';
 
 const getStyles = (theme: Theme) => ({
     inputWrapperFocused: {
@@ -93,4 +94,4 @@ class CoordinateFieldPlain extends React.Component<Props> {
     }
 }
 
-export const CoordinateField = withStyles(getStyles)(CoordinateFieldPlain);
+export const CoordinateField = withStyles(getStyles)(withCenterPoint()(CoordinateFieldPlain));

src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js

@@ -4,6 +4,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import { PolygonField as UIPolygonField } from 'capture-ui';
 import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
+import { withCenterPoint } from '../../HOC';
 
 const getStyles = () => ({
     dialogPaper: {
@@ -57,4 +58,4 @@ class PolygonFieldPlain extends React.Component<Props> {
     }
 }
 
-export const PolygonField = withStyles(getStyles)(PolygonFieldPlain);
+export const PolygonField = withStyles(getStyles)(withCenterPoint()(PolygonFieldPlain));

src/core_modules/capture-core/components/FormFields/New/HOC/index.js

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

src/core_modules/capture-core/components/FormFields/New/HOC/withCenterPoint.js

@@ -0,0 +1,56 @@
+// @flow
+import React, { type ComponentType, useMemo, useState } from 'react';
+import { useApiMetadataQuery } from 'capture-core/utils/reactQueryHelpers';
+
+const DEFAULT_CENTER = [51.505, -0.09];
+
+const convertToClientCoordinates = ({ coordinates, type }: { coordinates: any[], type: string }) => {
+    switch (type) {
+    case 'Point':
+        return [coordinates[1], coordinates[0]];
+    case 'Polygon':
+        return coordinates[0][0];
+    default:
+        return DEFAULT_CENTER;
+    }
+};
+
+const getCenterPoint = (InnerComponent: ComponentType<any>) => (props: Object) => {
+    const { orgUnit, ...passOnProps } = props;
+    const [orgUnitKey, setOrgUnitKey] = useState(orgUnit.id);
+    const [shouldFetch, setShouldFetch] = useState(false);
+    const queryKey = ['organisationUnit', orgUnitKey];
+    const queryFn = {
+        resource: 'organisationUnits',
+        id: () => orgUnitKey,
+        params: {
+            fields: 'geometry,parent',
+        },
+    };
+    const queryOptions = useMemo(
+        () => ({ enabled: Boolean(orgUnit.id) && shouldFetch }),
+        [shouldFetch, orgUnit.id],
+    );
+    const { data } = useApiMetadataQuery<any>(queryKey, queryFn, queryOptions);
+
+    const center = useMemo(() => {
+        if (data) {
+            const { geometry, parent } = data;
+            if (geometry) {
+                return convertToClientCoordinates(geometry);
+            } else if (parent?.id) {
+                setOrgUnitKey(parent.id);
+            }
+            return DEFAULT_CENTER;
+        }
+        return undefined;
+    }, [data]);
+
+    const onOpenMap = (hasValue) => {
+        setShouldFetch(!hasValue);
+    };
+
+    return <InnerComponent {...passOnProps} center={center} onOpenMap={onOpenMap} />;
+};
+
+export const withCenterPoint = () => (InnerComponent: ComponentType<any>) => getCenterPoint(InnerComponent);

src/core_modules/capture-core/components/FormFields/New/index.js

@@ -33,6 +33,7 @@ export { withLabel } from './HOC/withLabel';
 export { withStyledContainer } from './HOC/withStyledContainer';
 export { withOptionsIconElement } from './HOC/withOptionsIconElement';
 export { withFocusSaver, withInternalChangeHandler } from 'capture-ui';
+export { withCenterPoint } from './HOC/withCenterPoint';
 
 // OrgUnit HOCs
 export {

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/Coordinates/Coordinates.component.js

@@ -48,7 +48,7 @@ const CoordinatesPlain = ({
     onSetCoordinates,
 }: CoordinatesProps) => {
     const [position, setPosition] = useState(defaultValues);
-    const [center, setCenter] = useState(initialCenter);
+    const [center, setCenter] = useState();
     const [tempLatitude, setTempLatitude] = useState(position?.[0]);
     const [tempLongitude, setTempLongitude] = useState(position?.[1]);
     const [isEditing, setEditing] = useState(!defaultValues);
@@ -92,7 +92,7 @@ const CoordinatesPlain = ({
 
     const renderMap = () => (
         <Map
-            center={center}
+            center={center ?? initialCenter}
             zoom={13}
             ref={(ref) => {
                 if (ref?.leafletElement) {

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

@@ -3,17 +3,17 @@ import React, { useCallback } from 'react';
 import { useGeometry } from '../hooks/useGeometry';
 import type { MapModalProps } from './MapModal.types';
 import { MapModal as MapModalComponent } from './MapModal.component';
-
-const DEFAULT_CENTER = [51.505, -0.09];
+import { useCenterPoint } from './hooks';
 
 export const MapModal = ({
     enrollment,
     onUpdate,
     setOpenMap,
     defaultValues,
-    center,
+    center: storedCenter,
 }: MapModalProps) => {
     const { geometryType, dataElementType } = useGeometry(enrollment);
+    const { center } = useCenterPoint(enrollment.orgUnit, storedCenter);
 
     const onSetCoordinates = useCallback((coordinates) => {
         const geometry = coordinates ? { type: geometryType, coordinates } : null;
@@ -22,7 +22,7 @@ export const MapModal = ({
 
     return (
         <MapModalComponent
-            center={center || DEFAULT_CENTER}
+            center={center}
             type={dataElementType}
             setOpen={setOpenMap}
             onSetCoordinates={onSetCoordinates}

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/Polygon/Polygon.component.js

@@ -61,7 +61,7 @@ const PolygonPlain = ({
     onSetCoordinates,
 }: PolygonProps) => {
     const [polygonArea, setPolygonArea] = useState(defaultValues);
-    const [center, setCenter] = useState(initialCenter);
+    const [center, setCenter] = useState();
     const [drawingState, setDrawingState] = useState(undefined);
     const prevDrawingState = useRef(undefined);
 
@@ -91,7 +91,7 @@ const PolygonPlain = ({
 
     const renderMap = () => (
         <Map
-            center={center}
+            center={center ?? initialCenter}
             zoom={13}
             ref={(ref) => {
                 if (ref?.leafletElement) {

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/hooks/index.js

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

src/core_modules/capture-core/components/WidgetEnrollment/MapModal/hooks/useCenterPoint.js

@@ -0,0 +1,54 @@
+// @flow
+import { useMemo, useState } from 'react';
+import { useApiMetadataQuery } from 'capture-core/utils/reactQueryHelpers';
+
+const DEFAULT_CENTER = [51.505, -0.09];
+
+const convertToClientCoordinates = ({ coordinates, type }: { coordinates: any[], type: string }) => {
+    switch (type) {
+    case 'Point':
+        return [coordinates[1], coordinates[0]];
+    case 'Polygon':
+        return coordinates[0][0];
+    default:
+        return DEFAULT_CENTER;
+    }
+};
+
+export const useCenterPoint = (orgUnitId: string, storedCenter: ?[number, number]) => {
+    const [orgUnitKey, setOrgUnitKey] = useState(orgUnitId);
+    const queryKey = ['organisationUnit', orgUnitKey];
+    const queryFn = {
+        resource: 'organisationUnits',
+        id: () => orgUnitKey,
+        params: {
+            fields: 'geometry,parent',
+        },
+    };
+    const queryOptions = { enabled: !storedCenter && Boolean(orgUnitId) };
+    const { data, isLoading } = useApiMetadataQuery<any>(queryKey, queryFn, queryOptions);
+
+    const center = useMemo(() => {
+        if (data) {
+            const { geometry, parent } = data;
+            if (geometry) {
+                return convertToClientCoordinates(geometry);
+            } else if (parent?.id) {
+                setOrgUnitKey(parent.id);
+            }
+            return DEFAULT_CENTER;
+        }
+        return undefined;
+    }, [data]);
+
+    if (storedCenter) {
+        return {
+            center: storedCenter,
+        };
+    }
+
+    return {
+        center,
+        loading: isLoading,
+    };
+};

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.component.js

@@ -223,6 +223,7 @@ const buildGeometrySettingsFn = () => ({
                 dialogLabel: i18n.t('Area'),
                 required: false,
                 orientation: getOrientation(props.formHorizontal),
+                orgUnit: props.orgUnit,
             });
         }
 
@@ -233,6 +234,7 @@ const buildGeometrySettingsFn = () => ({
             required: false,
             orientation: getOrientation(props.formHorizontal),
             shrinkDisabled: props.formHorizontal,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/DataEntry/DataEntry.container.js

@@ -69,6 +69,7 @@ export const DataEntry = ({ orgUnit, rulesExecutionDependenciesClientFormatted,
     return (
         <DataEntryComponent
             {...passOnProps}
+            orgUnit={orgUnit}
             orgUnitId={orgUnitId}
             programId={programId}
             onUpdateDataEntryField={onUpdateDataEntryField}

src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.js

@@ -253,13 +253,15 @@ const buildGeometrySettingsFn = () => ({
                 label: i18n.t('Area'),
                 dialogLabel: i18n.t('Area'),
                 required: false,
+                orgUnit: props.orgUnit,
             });
         }
         return createComponentProps(props, {
             width: props && props.formHorizontal ? 150 : '100%',
             label: i18n.t('Coordinate'),
             dialogLabel: i18n.t('Coordinate'),
             required: false,
+            orgUnit: props.orgUnit,
         });
     },
     getPropName: () => 'geometry',
@@ -517,6 +519,7 @@ class EditEventDataEntryPlain extends Component<Props, State> {
                 onSave={onSave(orgUnit)}
                 fieldOptions={this.fieldOptions}
                 dataEntrySections={this.dataEntrySections}
+                orgUnit={orgUnit}
                 programId={programId}
                 selectedOrgUnitId={orgUnit?.id}
                 {...passOnProps}

src/core_modules/capture-core/components/WidgetProfile/DataEntry/DataEntry.component.js

@@ -21,6 +21,7 @@ export const DataEntryComponent = ({
     onGetValidationContext,
     errorsMessages,
     warningsMessages,
+    orgUnit,
 }: PlainProps) => (
     <Modal large onClose={onCancel} dataTest="modal-edit-profile">
         <ModalTitle>{i18n.t(`Edit ${trackedEntityName}`)}</ModalTitle>
@@ -36,6 +37,7 @@ export const DataEntryComponent = ({
                 onUpdateFormField={onUpdateFormField}
                 onUpdateFormFieldAsync={onUpdateFormFieldAsync}
                 onGetValidationContext={onGetValidationContext}
+                orgUnit={orgUnit}
             />
             <NoticeBoxes
                 dataEntryId={dataEntryId}

src/core_modules/capture-core/components/WidgetProfile/DataEntry/DataEntry.container.js

@@ -107,6 +107,7 @@ export const DataEntry = ({
                 onGetValidationContext={getValidationContext}
                 errorsMessages={errorsMessages}
                 warningsMessages={warningsMessages}
+                orgUnit={{ id: orgUnitId }}
             />
         )
     );

src/core_modules/capture-core/components/WidgetProfile/DataEntry/dataEntry.types.js

@@ -16,6 +16,8 @@ export type PlainProps = {|
     modalState: string,
     errorsMessages: Array<{ id: string, message: string }>,
     warningsMessages: Array<{ id: string, message: string }>,
+    center?: ?Array<number>,
+    orgUnit: { id: string },
 |};
 
 export type Props = {|