From 0c79fb7f4bce9c416958a0123f28ea76f7037bb1 Mon Sep 17 00:00:00 2001
From: Matija Obreza <matija.obreza@croptrust.org>
Date: Fri, 14 Sep 2018 20:37:15 +0200
Subject: [PATCH] Better listing of locations where evaluation took place

Signed-off-by: Matija Obreza <matija.obreza@croptrust.org>
---
 src/ui/catalog/Properties.tsx          |  6 ++---
 src/ui/pages/dataset/c/LocationMap.tsx | 31 +++++++++++++-------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/ui/catalog/Properties.tsx b/src/ui/catalog/Properties.tsx
index 47d5910..c8ba481 100644
--- a/src/ui/catalog/Properties.tsx
+++ b/src/ui/catalog/Properties.tsx
@@ -49,15 +49,15 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
 }
 
 interface IProps extends React.ClassAttributes<any> {
-    // classes: any;
+    className?: string;
     // children: any;
 }
 
 class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
     public render() {
-        const { children, classes} = this.props;
+        const { children, classes, className } = this.props;
         return (
-            <Grid container spacing={ 0 }>
+            <Grid container spacing={ 0 } className={ className }>
                 <Grid item xs={ 12 } className={ classes.propertiesContainer }>
                     { children }
                 </Grid>
diff --git a/src/ui/pages/dataset/c/LocationMap.tsx b/src/ui/pages/dataset/c/LocationMap.tsx
index cdaa62e..2951063 100644
--- a/src/ui/pages/dataset/c/LocationMap.tsx
+++ b/src/ui/pages/dataset/c/LocationMap.tsx
@@ -4,6 +4,8 @@ import Grid from '@material-ui/core/Grid';
 
 import {isNumeric} from 'utilities';
 import { Location, IGeoPoint } from 'model/location.model';
+import { Properties, PropertiesItem } from 'ui/catalog/Properties';
+import McpdDate from 'ui/common/time/McpdDate';
 
 let Map;
 let Marker;
@@ -108,21 +110,20 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
                         </div>
                     )
                 }
-                <ul>
-                    {
-                        locations
-                            .filter((location) => location.userCountry || location.stateProvince || location.verbatimLocality)
-                            .map((location, i) => (
-                                <li className="font-normal m-0" key={ i }>
-                                    {
-                                        [location.verbatimLocality, location.stateProvince, location.userCountry]
-                                            .filter((e) => e && e.trim())
-                                            .join(', ')
-                                    }
-                                </li>
-                            ))
-                    }
-                </ul>
+
+                { locations.filter((location) => location.userCountry || location.stateProvince || location.verbatimLocality)
+                        .map((location, i) => (
+                          <Properties key={ location.uuid } className="mt-20">
+                            <PropertiesItem title="Location" key={ location.uuid }>
+                                {
+                                    [location.verbatimLocality, location.stateProvince, location.userCountry]
+                                        .filter((e) => e && e.trim())
+                                        .join(', ')
+                                }
+                            </PropertiesItem>
+                            <PropertiesItem title="Date of evaluation:"><McpdDate value={ location.startDate }/> &mdash; <McpdDate value={ location.endDate }/></PropertiesItem>
+                          </Properties>
+                )) }
             </Grid>
         );
     }
-- 
GitLab