From 2cc1be85e58037366c3fca0d4ab7cbce8343e518 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Thu, 28 Nov 2024 14:59:14 +0100 Subject: [PATCH] feat: update clienttolist --- .../MinimalCoordinates/MinimalCoordinates.js | 16 +++--- .../MinimalCoordinates/index.js | 0 .../PolygonCoordinates/PolygonCoordinates.js | 50 +++++++++++++++++++ .../Coordinates/PolygonCoordinates/index.js | 2 + .../components/Coordinates/index.js | 3 ++ .../capture-core/converters/clientToList.js | 44 ++++++++-------- .../capture-core/converters/clientToView.js | 2 +- 7 files changed, 90 insertions(+), 27 deletions(-) rename src/core_modules/capture-core/components/{ => Coordinates}/MinimalCoordinates/MinimalCoordinates.js (51%) rename src/core_modules/capture-core/components/{ => Coordinates}/MinimalCoordinates/index.js (100%) create mode 100644 src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/PolygonCoordinates.js create mode 100644 src/core_modules/capture-core/components/Coordinates/PolygonCoordinates/index.js create mode 100644 src/core_modules/capture-core/components/Coordinates/index.js 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';