diff --git a/src/core_modules/capture-core/components/MinimalCoordinates/MinimalCoordinates.js b/src/core_modules/capture-core/components/Coordinates/MinimalCoordinates/MinimalCoordinates.js
similarity index 51%
rename from src/core_modules/capture-core/components/MinimalCoordinates/MinimalCoordinates.js
rename to src/core_modules/capture-core/components/Coordinates/MinimalCoordinates/MinimalCoordinates.js
index 36af51e4f5..7c9d38279d 100644
--- a/src/core_modules/capture-core/components/MinimalCoordinates/MinimalCoordinates.js
+++ b/src/core_modules/capture-core/components/Coordinates/MinimalCoordinates/MinimalCoordinates.js
@@ -3,14 +3,18 @@ import React from 'react';
type Props = $ReadOnly<{|
latitude: number | string,
- longitude: number | string,
+ longitude: number | string,
|}>;
const toSixDecimal = value => (parseFloat(value) ? parseFloat(value).toFixed(6) : null);
-export const MinimalCoordinates = ({ latitude, longitude }: Props) =>
- (
- lat: {toSixDecimal(latitude)}
- long: {toSixDecimal(longitude)}
-
);
+export const MinimalCoordinates = ({ latitude, longitude }: Props) => {
+ console.log('MinimalCoordinates.js:', latitude);
+ return (
+
+ lat: {toSixDecimal(latitude)}
+ long: {toSixDecimal(longitude)}
+
+ );
+};
diff --git a/src/core_modules/capture-core/components/MinimalCoordinates/index.js b/src/core_modules/capture-core/components/Coordinates/MinimalCoordinates/index.js
similarity index 100%
rename from src/core_modules/capture-core/components/MinimalCoordinates/index.js
rename to src/core_modules/capture-core/components/Coordinates/MinimalCoordinates/index.js
diff --git a/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/PolygonCoordinates.js b/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/PolygonCoordinates.js
new file mode 100644
index 0000000000..187ce98956
--- /dev/null
+++ b/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/PolygonCoordinates.js
@@ -0,0 +1,50 @@
+// @flow
+import React, { useState } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { IconChevronUp16, IconChevronDown16, colors, spacers } from '@dhis2/ui';
+
+type Props = $ReadOnly<{|
+ coordinates: Array>,
+ classes: { viewButton: string },
+|}>;
+
+const styles = {
+ viewButton: {
+ background: 'none',
+ border: 'none',
+ cursor: 'pointer',
+ color: colors.grey800,
+ marginTop: spacers.dp8,
+ display: 'flex',
+ alignItems: 'center',
+ '&:hover': {
+ textDecoration: 'underline',
+ color: 'black',
+ },
+ },
+};
+
+const PolygonCoordinatesPlain = ({ coordinates, classes }: Props) => {
+ const [showMore, setShowMore] = useState(false);
+
+ return (
+ <>
+
+ {coordinates.slice(0, showMore ? coordinates.length : 1).map((coordinatePair, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ {`lat: ${coordinatePair[1]} long: ${coordinatePair[0]}`}
+
+ ))}
+
+ {coordinates.length > 3 && (
+
+ )}
+ >
+ );
+};
+
+export const PolygonCoordinates = withStyles(styles)(PolygonCoordinatesPlain);
diff --git a/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/index.js b/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/index.js
new file mode 100644
index 0000000000..0c85230d28
--- /dev/null
+++ b/src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { PolygonCoordinates } from './PolygonCoordinates';
diff --git a/src/core_modules/capture-core/components/Coordinates/index.js b/src/core_modules/capture-core/components/Coordinates/index.js
new file mode 100644
index 0000000000..a7549a63b6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Coordinates/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { MinimalCoordinates } from './MinimalCoordinates';
+export { PolygonCoordinates } from './PolygonCoordinates';
diff --git a/src/core_modules/capture-core/converters/clientToList.js b/src/core_modules/capture-core/converters/clientToList.js
index e72b837179..abbfbf6975 100644
--- a/src/core_modules/capture-core/converters/clientToList.js
+++ b/src/core_modules/capture-core/converters/clientToList.js
@@ -7,7 +7,7 @@ import { PreviewImage } from 'capture-ui';
import { dataElementTypes, type DataElement } from '../metaData';
import { convertMomentToDateFormatString } from '../utils/converters/date';
import { stringifyNumber } from './common/stringifyNumber';
-import { MinimalCoordinates } from '../components/MinimalCoordinates';
+import { MinimalCoordinates, PolygonCoordinates } from '../components/Coordinates';
import { TooltipOrgUnit } from '../components/Tooltips/TooltipOrgUnit';
function convertDateForListDisplay(rawValue: string): string {
@@ -87,41 +87,45 @@ function convertStatusForDisplay(clientValue: Object) {
);
}
-function convertOrgUnitForDisplay(clientValue: string | {id: string}) {
+function convertOrgUnitForDisplay(clientValue: string | { id: string }) {
const orgUnitId = typeof clientValue === 'string' ? clientValue : clientValue.id;
return (
);
}
+function convertPolygonForDisplay(clientValue: Object) {
+ return ;
+}
const valueConvertersForType = {
- [dataElementTypes.NUMBER]: stringifyNumber,
- [dataElementTypes.INTEGER]: stringifyNumber,
- [dataElementTypes.INTEGER_POSITIVE]: stringifyNumber,
- [dataElementTypes.INTEGER_ZERO_OR_POSITIVE]: stringifyNumber,
- [dataElementTypes.INTEGER_NEGATIVE]: stringifyNumber,
- [dataElementTypes.INTEGER_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
- [dataElementTypes.INTEGER_POSITIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
- [dataElementTypes.INTEGER_ZERO_OR_POSITIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
- [dataElementTypes.INTEGER_NEGATIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
- [dataElementTypes.PERCENTAGE]: (value: number) => `${stringifyNumber(value)} %`,
+ [dataElementTypes.AGE]: convertDateForListDisplay,
+ [dataElementTypes.ASSIGNEE]: (rawValue: Object) => `${rawValue.name} (${rawValue.username})`,
+ [dataElementTypes.BOOLEAN]: (rawValue: boolean) => (rawValue ? i18n.t('Yes') : i18n.t('No')),
+ [dataElementTypes.COORDINATE]: MinimalCoordinates,
[dataElementTypes.DATE]: convertDateForListDisplay,
[dataElementTypes.DATE_RANGE]: value => convertRangeForDisplay(convertDateForListDisplay, value),
[dataElementTypes.DATETIME]: convertDateTimeForListDisplay,
[dataElementTypes.DATETIME_RANGE]: value => convertRangeForDisplay(convertDateTimeForListDisplay, value),
- [dataElementTypes.TIME]: convertTimeForListDisplay,
- [dataElementTypes.TIME_RANGE]: value => convertRangeForDisplay(convertTimeForListDisplay, value),
- [dataElementTypes.TRUE_ONLY]: () => i18n.t('Yes'),
- [dataElementTypes.BOOLEAN]: (rawValue: boolean) => (rawValue ? i18n.t('Yes') : i18n.t('No')),
- [dataElementTypes.COORDINATE]: MinimalCoordinates,
- [dataElementTypes.AGE]: convertDateForListDisplay,
[dataElementTypes.FILE_RESOURCE]: convertFileForDisplay,
[dataElementTypes.IMAGE]: convertImageForDisplay,
- [dataElementTypes.ORGANISATION_UNIT]: convertOrgUnitForDisplay,
- [dataElementTypes.ASSIGNEE]: (rawValue: Object) => `${rawValue.name} (${rawValue.username})`,
+ [dataElementTypes.INTEGER]: stringifyNumber,
+ [dataElementTypes.INTEGER_NEGATIVE]: stringifyNumber,
+ [dataElementTypes.INTEGER_NEGATIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
+ [dataElementTypes.INTEGER_POSITIVE]: stringifyNumber,
+ [dataElementTypes.INTEGER_POSITIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
+ [dataElementTypes.INTEGER_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
+ [dataElementTypes.INTEGER_ZERO_OR_POSITIVE]: stringifyNumber,
+ [dataElementTypes.INTEGER_ZERO_OR_POSITIVE_RANGE]: value => convertRangeForDisplay(stringifyNumber, value),
+ [dataElementTypes.NUMBER]: stringifyNumber,
[dataElementTypes.NUMBER_RANGE]: convertNumberRangeForDisplay,
+ [dataElementTypes.ORGANISATION_UNIT]: convertOrgUnitForDisplay,
+ [dataElementTypes.PERCENTAGE]: (value: number) => `${stringifyNumber(value)} %`,
+ [dataElementTypes.POLYGON]: convertPolygonForDisplay,
[dataElementTypes.STATUS]: convertStatusForDisplay,
+ [dataElementTypes.TIME]: convertTimeForListDisplay,
+ [dataElementTypes.TIME_RANGE]: value => convertRangeForDisplay(convertTimeForListDisplay, value),
+ [dataElementTypes.TRUE_ONLY]: () => i18n.t('Yes'),
};
export function convertValue(value: any, type: $Keys, dataElement?: ?DataElement) {
diff --git a/src/core_modules/capture-core/converters/clientToView.js b/src/core_modules/capture-core/converters/clientToView.js
index 2849a02b01..220e1906ef 100644
--- a/src/core_modules/capture-core/converters/clientToView.js
+++ b/src/core_modules/capture-core/converters/clientToView.js
@@ -6,7 +6,7 @@ import { PreviewImage } from 'capture-ui';
import { dataElementTypes, type DataElement } from '../metaData';
import { convertMomentToDateFormatString } from '../utils/converters/date';
import { stringifyNumber } from './common/stringifyNumber';
-import { MinimalCoordinates } from '../components/MinimalCoordinates';
+import { MinimalCoordinates } from '../components/Coordinates';
import { TooltipOrgUnit } from '../components/Tooltips/TooltipOrgUnit';