fix: format coordinate values in event popups (#178)

* Format coordinate values in event popups * JSON.parse in try catch * Show scrollbar in event popups
dhis2 · Sep 18, 2019 · 8fb9b96 · 8fb9b96
1 parent 0c1dc6b
commit 8fb9b96
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -4,6 +4,7 @@ body {
 /* Scrollbar width */
 ::-webkit-scrollbar {
     width: 6px;
+    height: 6px;
 }
 
 /* Scrollbar handle */

diff --git a/src/components/map/EventLayer.js b/src/components/map/EventLayer.js
@@ -4,7 +4,11 @@ import { apiFetch } from '../../util/api';
 import { getAnalyticsRequest } from '../../loaders/eventLoader';
 import { EVENT_COLOR, EVENT_RADIUS } from '../../constants/layers';
 import Layer from './Layer';
-import { getDisplayPropertyUrl, removeLineBreaks } from '../../util/helpers';
+import {
+    getDisplayPropertyUrl,
+    removeLineBreaks,
+    formatCoordinate,
+} from '../../util/helpers';
 
 class EventLayer extends Layer {
     createLayer() {
@@ -105,7 +109,7 @@ class EventLayer extends Layer {
         const data = await d2.models.programStage.get(props.programStage.id, {
             fields: `programStageDataElements[displayInReports,dataElement[id,${getDisplayPropertyUrl(
                 d2
-            )},optionSet]]`,
+            )},optionSet,valueType]]`,
             paging: false,
         });
 
@@ -153,7 +157,7 @@ class EventLayer extends Layer {
                 ' ' +
                 data.eventDate.substring(11, 16);
             const dataValues = data.dataValues;
-            let content = '<table><tbody>';
+            let content = '<div style="overflow-x:auto"><table><tbody>';
 
             // Output value if styled by data item, and item is not included in display elements
             if (styleDataItem && !this.displayElements[styleDataItem.id]) {
@@ -169,13 +173,16 @@ class EventLayer extends Layer {
                     ];
 
                     if (displayEl) {
-                        let value = dataValue.value;
+                        const { valueType, optionSet, name } = displayEl;
+                        let { value } = dataValue;
 
-                        if (displayEl.optionSet) {
-                            value = displayEl.optionSet[value];
+                        if (valueType === 'COORDINATE' && value) {
+                            value = formatCoordinate(value);
+                        } else if (optionSet) {
+                            value = optionSet[value];
                         }
 
-                        content += `<tr><th>${displayEl.name}</th><td>${value ||
+                        content += `<tr><th>${name}</th><td>${value ||
                             i18n.t('Not set')}</td></tr>`;
                     }
                 });
@@ -202,7 +209,7 @@ class EventLayer extends Layer {
                 <td>${time}</td>
               </tr>`;
 
-            content += '</tbody></table>';
+            content += '</tbody></table></div>';
 
             // Remove all line breaks as it's not working for map download
             this.context.map.openPopup(removeLineBreaks(content), coordinates);

diff --git a/src/util/helpers.js b/src/util/helpers.js
@@ -141,3 +141,13 @@ export const getSplitViewLayer = layers =>
 
 // Checks if split view map
 export const isSplitViewMap = layers => !!getSplitViewLayer(layers);
+
+export const formatCoordinate = value => {
+    try {
+        return JSON.parse(value)
+            .map(v => v.toFixed(6))
+            .join(', ');
+    } catch (e) {
+        return value;
+    }
+};