feat: earth engine layer json [ee-dev]

src/actions/layerEdit.js

@@ -179,10 +179,15 @@ export const setPeriodName = (periodName) => ({
 })
 
 // Set period type (thematic)
-export const setPeriodType = (periodType, clearPeriod = true) => ({
+export const setPeriodType = (periodType, keepPeriod) => ({
     type: types.LAYER_EDIT_PERIOD_TYPE_SET,
     periodType,
-    clearPeriod,
+    keepPeriod,
+})
+
+export const setPeriodReducer = (payload) => ({
+    type: types.LAYER_EDIT_PERIOD_REDUCER_SET,
+    payload,
 })
 
 // Set period (event & thematic)
@@ -234,10 +239,10 @@ export const setOrgUnitMode = (mode) => ({
     payload: mode,
 })
 
-// Set layer params (EE)
-export const setParams = (params) => ({
-    type: types.LAYER_EDIT_PARAMS_SET,
-    payload: params,
+// Set layer style (EE)
+export const setStyle = (payload) => ({
+    type: types.LAYER_EDIT_STYLE_SET,
+    payload,
 })
 
 // Set collection filter (EE)
@@ -358,3 +363,9 @@ export const setNoDataColor = (color) => ({
     type: types.LAYER_EDIT_NO_DATA_COLOR_SET,
     payload: color,
 })
+
+// Set period for EE layer
+export const setEarthEnginePeriod = (payload) => ({
+    type: types.LAYER_EDIT_EARTH_ENGINE_PERIOD_SET,
+    payload,
+})

src/components/classification/Classification.js

@@ -68,7 +68,7 @@ Classification.propTypes = {
     setClassification: PropTypes.func.isRequired,
     setColorScale: PropTypes.func.isRequired,
     classes: PropTypes.number,
-    colorScale: PropTypes.string,
+    colorScale: PropTypes.array,
     method: PropTypes.number,
 }
 

src/components/core/ColorScaleSelect.js

@@ -14,12 +14,11 @@ const ColorScaleSelect = ({ palette, width, onChange, className }) => {
     const [isOpen, setIsOpen] = useState(false)
     const anchorRef = useRef()
 
-    const bins = palette.split(',').length
+    const bins = palette.length
     const scale = getColorScale(palette)
 
     const onColorScaleSelect = (scale) => {
-        const classes = palette.split(',').length
-        onChange(getColorPalette(scale, classes))
+        onChange(getColorPalette(scale, bins))
         setIsOpen(false)
     }
 
@@ -61,7 +60,7 @@ const ColorScaleSelect = ({ palette, width, onChange, className }) => {
 }
 
 ColorScaleSelect.propTypes = {
-    palette: PropTypes.string.isRequired,
+    palette: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
     className: PropTypes.string,
     width: PropTypes.number,

src/components/core/NumberField.js

@@ -25,7 +25,7 @@ const NumberField = ({
             label={label}
             value={Number.isNaN(value) ? '' : String(value)}
             disabled={disabled}
-            onChange={({ value }) => onChange(value)}
+            onChange={({ value }) => onChange(Number(value))}
         />
     </div>
 )

src/components/datatable/DataTable.js

@@ -124,7 +124,13 @@ class DataTable extends Component {
                 return sortDirection === 'ASC' ? a - b : b - a
             }
 
-            if (a !== undefined) {
+            // Some values are null
+            if (
+                a !== undefined &&
+                a !== null &&
+                b !== undefined &&
+                b !== null
+            ) {
                 return sortDirection === 'ASC'
                     ? a.localeCompare(b)
                     : b.localeCompare(a)
@@ -192,7 +198,6 @@ class DataTable extends Component {
             aggregationType,
             legend,
         } = layer
-
         const isThematic = layerType === THEMATIC_LAYER
         const isOrgUnit = layerType === ORG_UNIT_LAYER
         const isEvent = layerType === EVENT_LAYER

src/components/datatable/EarthEngineColumns.js

@@ -11,10 +11,10 @@ const EarthEngineColumns = ({ aggregationType, legend, data }) => {
     if (hasClasses(aggregationType) && items) {
         const valueFormat = numberPrecision(2)
 
-        return items.map(({ id, name }) => (
+        return items.map(({ value, name }) => (
             <Column
-                key={id}
-                dataKey={String(id)}
+                key={value}
+                dataKey={String(value)}
                 label={name}
                 width={100}
                 className="right"
@@ -43,7 +43,9 @@ const EarthEngineColumns = ({ aggregationType, legend, data }) => {
                         <ColumnHeader type="number" {...props} />
                     )}
                     cellRenderer={(d) =>
-                        d.cellData !== undefined ? valueFormat(d.cellData) : ''
+                        d.cellData !== undefined && d.cellData !== null
+                            ? valueFormat(d.cellData)
+                            : ''
                     }
                 />
             )

src/components/earthEngine/EarthEngineLayer.js

@@ -0,0 +1,35 @@
+import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Checkbox } from '../core/index.js'
+import styles from './styles/EarthEngineLayer.module.css'
+
+const EarthEngineLayer = ({ layer, isAdded, onShow, onHide }) => {
+    const { layerId, name, img, description, source } = layer
+
+    return (
+        <div
+            className={styles.layer}
+            onClick={() => (isAdded ? onHide(layerId) : onShow(layerId))}
+        >
+            <Checkbox checked={isAdded} dense={false} onChange={() => {}} />
+            <img src={img} className={styles.image} />
+            <div className={styles.layerInfo}>
+                <h2>{name}</h2>
+                <p>{description}</p>
+                <div className={styles.source}>
+                    {i18n.t('Source')}: {source}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+EarthEngineLayer.propTypes = {
+    isAdded: PropTypes.bool.isRequired,
+    layer: PropTypes.object.isRequired,
+    onHide: PropTypes.func.isRequired,
+    onShow: PropTypes.func.isRequired,
+}
+
+export default EarthEngineLayer

src/components/earthEngine/EarthEngineModal.js

@@ -0,0 +1,58 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    Modal,
+    ModalTitle,
+    ModalContent,
+    ModalActions,
+    Button,
+    ButtonStrip,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import useEarthEngineLayers from '../../hooks/useEarthEngineLayersStore.js'
+import EarthEngineLayer from './EarthEngineLayer.js'
+import earthEngineLayers from '../../constants/earthEngineLayers/index.js'
+import styles from './styles/EarthEngineModal.module.css'
+
+const layers = earthEngineLayers
+    .filter((l) => !l.legacy)
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+const EarthEngineModal = ({ onClose }) => {
+    const { addedLayers, addLayer, removeLayer } = useEarthEngineLayers()
+
+    return (
+        <Modal large position="middle" dataTest="earthenginemodal">
+            <ModalTitle>{i18n.t('Configure available layers')}</ModalTitle>
+            <ModalContent>
+                <div className={styles.description}>
+                    {i18n.t(
+                        'Choose which layers are available to add to maps. This setting applies to all users.'
+                    )}
+                </div>
+                {layers.map((layer) => (
+                    <EarthEngineLayer
+                        key={layer.layerId}
+                        layer={layer}
+                        isAdded={addedLayers.includes(layer.layerId)}
+                        onShow={addLayer}
+                        onHide={removeLayer}
+                    />
+                ))}
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button secondary onClick={() => onClose()}>
+                        {i18n.t('Close')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}
+
+EarthEngineModal.propTypes = {
+    onClose: PropTypes.func.isRequired,
+}
+
+export default EarthEngineModal

src/components/earthEngine/ManageLayersButton.js

@@ -0,0 +1,30 @@
+import { useCachedDataQuery } from '@dhis2/analytics'
+import i18n from '@dhis2/d2-i18n'
+import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { MAPS_ADMIN_AUTHORITY_ID } from '../../constants/settings.js'
+import styles from './styles/ManageLayersButton.module.css'
+
+const ManageLayersButton = ({ onClick }) => {
+    const { currentUser } = useCachedDataQuery()
+    const isMapsAdmin = currentUser.authorities.has(MAPS_ADMIN_AUTHORITY_ID)
+
+    if (!isMapsAdmin) {
+        return null
+    }
+
+    return (
+        <div className={styles.button}>
+            <Button small secondary onClick={onClick}>
+                {i18n.t('Manage available layers')}
+            </Button>
+        </div>
+    )
+}
+
+ManageLayersButton.propTypes = {
+    onClick: PropTypes.func.isRequired,
+}
+
+export default ManageLayersButton

src/components/earthEngine/styles/EarthEngineLayer.module.css

@@ -0,0 +1,52 @@
+.layer {
+    display: flex;
+    align-items: center;
+    color: var(--colors-grey800);
+    font-size: 0.9rem;
+    border: 1px solid var(--colors-grey300);
+    border-radius: 4px;
+    padding: var(--spacers-dp16) var(--spacers-dp8);
+    margin-bottom: var(--spacers-dp8);
+    margin-right: var(--spacers-dp8);
+    cursor: pointer;
+}
+
+.layer:hover {
+    border-color: var(--colors-grey400);
+}
+
+.layer input {
+    cursor: pointer;
+}
+
+.layer img {
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid var(--colors-grey400);
+    width: 120px;
+    height: 120px;
+    margin-left: var(--spacers-dp16);
+    margin-right: var(--spacers-dp16);
+}
+
+.layerInfo {
+    align-self: start;
+}
+
+.layerInfo h2 {
+    margin: 0;
+    padding-top: 2px;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.layerInfo p {
+    color: var(--colors-grey700);
+    margin: var(--spacers-dp8) 0;
+    line-height: 1.2rem;
+}
+
+.layerInfo .source {
+    color: var(--colors-grey600);
+    padding-top: var(--spacers-dp8);
+}

src/components/earthEngine/styles/EarthEngineModal.module.css

@@ -0,0 +1,10 @@
+.description {
+    font-size: 0.9rem;
+    line-height: 1.5rem;
+    padding-bottom: var(--spacers-dp12);
+}
+
+.layersTable {
+    border-collapse: collapse;
+    width: 100%;
+}

src/components/earthEngine/styles/ManageLayersButton.module.css

@@ -0,0 +1,4 @@
+.button {
+    margin-left: var(--spacers-dp16);
+    margin-bottom: var(--spacers-dp12);
+}

src/components/edit/LayerEdit.js

@@ -32,12 +32,11 @@ const layerType = {
 }
 
 const layerName = () => ({
-    event: i18n.t('event'),
-    trackedEntity: i18n.t('tracked entity'),
-    facility: i18n.t('facility'),
-    thematic: i18n.t('thematic'),
-    orgUnit: i18n.t('org unit'),
-    earthEngine: i18n.t('Earth Engine'),
+    event: i18n.t('Event'),
+    trackedEntity: i18n.t('Tracked entity'),
+    facility: i18n.t('Facility'),
+    thematic: i18n.t('Thematic'),
+    orgUnit: i18n.t('Org unit'),
 })
 
 const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
@@ -80,19 +79,11 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         return null
     }
 
-    let name = layerName()[type]
-
-    if (type === EARTH_ENGINE_LAYER) {
-        name = layer.name.toLowerCase()
-    }
-
-    const title = layer.id
-        ? i18n.t('Edit {{name}} layer', { name })
-        : i18n.t('Add new {{name}} layer', { name })
+    const name = type === EARTH_ENGINE_LAYER ? layer.name : layerName()[type]
 
     return (
         <Modal position="middle" dataTest="layeredit">
-            <ModalTitle>{title}</ModalTitle>
+            <ModalTitle>{i18n.t('{{name}} layer', { name })}</ModalTitle>
             <ModalContent>
                 <div className={styles.content}>
                     <LayerDialog