feat: update clienttolist

src/core_modules/capture-core/components/MinimalCoordinates/MinimalCoordinates.js → 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) =>
-    (<div>
-        lat: {toSixDecimal(latitude)} <br />
-        long: {toSixDecimal(longitude)}
-    </div>);
+export const MinimalCoordinates = ({ latitude, longitude }: Props) => {
+    console.log('MinimalCoordinates.js:', latitude);
+    return (
+        <div>
+            lat: {toSixDecimal(latitude)} <br />
+            long: {toSixDecimal(longitude)}
+        </div>
+    );
+};
 

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<Array<number>>,
+    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 (
+        <>
+            <div>
+                {coordinates.slice(0, showMore ? coordinates.length : 1).map((coordinatePair, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <div key={index}>
+                        {`lat: ${coordinatePair[1]} long: ${coordinatePair[0]}`}
+                    </div>
+                ))}
+            </div>
+            {coordinates.length > 3 && (
+                <button className={classes.viewButton} onClick={() => setShowMore(!showMore)}>
+                    {showMore ? 'Show Less' : 'Show More'}
+                    {showMore ? <IconChevronUp16 /> : <IconChevronDown16 />}
+                </button>
+            )}
+        </>
+    );
+};
+
+export const PolygonCoordinates = withStyles(styles)(PolygonCoordinatesPlain);

src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/index.js

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

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

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

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 (
         <TooltipOrgUnit orgUnitId={orgUnitId} />
     );
 }
 
+function convertPolygonForDisplay(clientValue: Object) {
+    return <PolygonCoordinates coordinates={clientValue} />;
+}
 
 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<typeof dataElementTypes>, dataElement?: ?DataElement) {

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';