Location and timing

locales/en/translations.json

@@ -684,7 +684,7 @@
           "excel": "Copy and paste the table from Excel into the text field \"List of accessions described in the dataset\".",
           "listDescribed": "List of accessions described in the dataset",
           "placeholder": "Paste accessions data here (comma separated)",
-          "rowCount": "Accessions {{row, numeric}} rows"
+          "rowCount": "Accessions {{rows, numeric}} rows"
         },
         "pastingTraits": {
           "title": "Select descriptors in batch",

src/datasets/ui/dataset-stepper/steps/location/CountryCodePicker.tsx

@@ -11,7 +11,6 @@ import GeoService from 'service/GeoService';
 // actions
 import {autocompleteGeoTerm} from 'vocabulary/actions/dashboard';
 // ui
-import Markdown from 'ui/catalog/markdown';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import Input from '@material-ui/core/Input';
@@ -73,17 +72,15 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
 
     public componentWillMount() {
         if (this.props.input.value) {
-            GeoService.get(this.props.input.value).then((dl) => {
-                this.setState({pickerList: {code: dl.code, title: dl.title}});
-            });
+            this.setState({pickerList: {code: this.props.input.value}});
         }
-        this.props.autocomplete('').then((data) => {
-            this.setState({suggestions: data});
-        });
     }
 
     public componentWillReceiveProps(nextProps) {
-        if (nextProps.input.value) {
+        if (! nextProps.input.value) {
+            return this.setState({pickerList: null});
+        }
+        if (nextProps.input.value !== this.props.input.value) {
             const code = nextProps.input.value;
             const countryCodeTerm = this.state.suggestions.find((dl) => dl.code === code);
             if (countryCodeTerm) {
@@ -93,8 +90,6 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
                     this.setState({pickerList: {code: dl.code, title: dl.title}});
                 });
             }
-        } else {
-            this.setState({pickerList: null});
         }
     }
 
@@ -112,10 +107,7 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
                     } }
                 >
                     {
-                        this.state.pickerList ? (
-                            <MenuItem value={ inputValue }>
-                                <Markdown basic source={ this.state.pickerList.title }/>
-                            </MenuItem>) : null
+                        this.state.pickerList ? <MenuItem value={ inputValue }>{ this.state.pickerList.code }</MenuItem> : null
                     }
                 </Select>
                 <Menu
@@ -132,9 +124,7 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
                     </MenuItem>
                     {
                         this.state.suggestions.map((cCT, index) => (
-                            <MenuItem onClick={ this.select(cCT.code) } key={ `country-iso3-${index}` }>
-                                <Markdown basic source={ cCT.title }/>
-                            </MenuItem>
+                            <MenuItem onClick={ this.select(cCT.code) } key={ `country-iso3-${index}` }>{ `${cCT.code} - ${cCT.title}` }</MenuItem>
                         ))
                     }
                 </Menu>

src/datasets/ui/dataset-stepper/steps/location/FormMap.tsx

@@ -19,9 +19,10 @@ interface IFormMapProps extends React.ClassAttributes<any> {
         userCountry: any,
         stateProvince: any,
         verbatimLocality: any,
+        countryCode: any,
     }];
     onMouseOut: () => any;
-    checkGeonames: (lat, lng) => Promise<{userCountry: string, stateProvince: string, verbatimLocality?: string}>;
+    checkGeonames: (lat, lng) => Promise<{countryCode: string, userCountry: string, stateProvince: string, verbatimLocality?: string}>;
 }
 
 const styleSheet = {
@@ -65,7 +66,7 @@ class FormMap extends React.Component<IFormMapProps, any> {
 
     protected onMapClick = (e) => {
         const {checkGeonames} = this.props;
-        const {decimalLatitude, decimalLongitude, userCountry, stateProvince, verbatimLocality} = this.getCurrentLocation();
+        const {decimalLatitude, decimalLongitude, userCountry, countryCode, stateProvince, verbatimLocality} = this.getCurrentLocation();
 
         const {lat, lng} = e.latlng;
 
@@ -74,6 +75,7 @@ class FormMap extends React.Component<IFormMapProps, any> {
 
         checkGeonames(lat, lng)
             .then((value) => {
+                countryCode.input.onChange(value.countryCode);
                 userCountry.input.onChange(value.userCountry);
                 stateProvince.input.onChange(value.stateProvince);
 

src/datasets/ui/dataset-stepper/steps/location/LocationForm.tsx

@@ -19,6 +19,7 @@ import Validators from 'utilities/Validators';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
 import GeoNamesService from 'service/GeoNamesService';
+import GeoService from 'service/GeoService';
 import CountryCodePicker from './CountryCodePicker';
 
 
@@ -44,7 +45,8 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
         if (value[property] !== location[property]) {
 
             this.checkGeonames(value.decimalLatitude, value.decimalLongitude)
-                .then(({userCountry, stateProvince, verbatimLocality}) => {
+                .then(({countryCode, userCountry, stateProvince, verbatimLocality}) => {
+                    changeFieldValue(`locations[${index}].countryCode`, countryCode);
                     changeFieldValue(`locations[${index}].userCountry`, userCountry);
                     changeFieldValue(`locations[${index}].stateProvince`, stateProvince);
                     changeFieldValue(`locations[${index}].verbatimLocality`, verbatimLocality);
@@ -63,12 +65,13 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
         this.props.createLocation(this.props.dataset.uuid);
     }
 
-    protected checkGeonames = (lat, lng): Promise<{userCountry: string, stateProvince: string, verbatimLocality?: string}> => {
+    protected checkGeonames = (lat, lng): Promise<{countryCode: string, userCountry: string, stateProvince: string, verbatimLocality?: string}> => {
 
         if (!isNumeric(lat) || !isNumeric(lng)) {
             return Promise.resolve({
                 userCountry: null,
                 stateProvince: null,
+                countryCode: null,
             });
         }
 
@@ -82,11 +85,15 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
 
                 const description = [name, adminName5, adminName4, adminName3].filter(Boolean).join(', ');
 
-                return Promise.resolve({
-                    userCountry: values[0].data.countryName,
-                    stateProvince: adminName1,
-                    verbatimLocality: description,
-                });
+                return GeoService.getCountry(values[0].data.countryCode)
+                    .then((country) => {
+                        return Promise.resolve({
+                            countryCode: country.code3,
+                            userCountry: values[0].data.countryName,
+                            stateProvince: adminName1,
+                            verbatimLocality: description,
+                        });
+                    });
             });
     }
 
@@ -119,6 +126,13 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
                             checkGeonames={ this.checkGeonames }
                             component={ FormMap }
                         />
+                        <Field
+                            name={ `${location}.countryCode` }
+                            component={ CountryCodePicker }
+                            label={ t('datasets.dashboard.p.stepper.location.iso') }
+                            placeholder={ t('datasets.dashboard.p.stepper.location.isoPlaceholder') }
+                            validate={ [ Validators.maxLength(3) ] }
+                        />
                         <Field
                             required
                             name={ `${location}.userCountry` }
@@ -181,13 +195,6 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
                             component={ MarkdownField }
                             label={ t('datasets.dashboard.p.stepper.location.description') }
                         />
-                        <Field
-                            name={ `${location}.countryCode` }
-                            component={ CountryCodePicker }
-                            label={ t('datasets.dashboard.p.stepper.location.iso') }
-                            placeholder={ t('datasets.dashboard.p.stepper.location.isoPlaceholder') }
-                            validate={ [ Validators.maxLength(3) ] }
-                        />
                     </div>
                 )) }
                 <div className="back-white m-20">

src/service/GeoService.ts

@@ -4,9 +4,11 @@ import * as UrlTemplate from 'url-template';
 import {axiosBackend} from 'utilities/requestUtils';
 
 import VocabularyTerm from 'model/vocabulary/VocabularyTerm';
+import Country from 'model/geo/Country';
 
 const URL_AUTOCOMPLETE_GEO_TERM = `/api/v1/geo/iso3166/autocomplete`;
 const URL_GET = UrlTemplate.parse(`/api/v1/geo/iso3166/{code}`);
+const URL_GET_COUNTRY = UrlTemplate.parse(`/api/v1/geo/country/{iso3code}`);
 
 /*
 * Defined in Swagger as 'geo'
@@ -52,6 +54,24 @@ class GeoService {
         }).then(({ data }) => data as any);
     }
 
+    /**
+     * getCountry at /api/v1/geo/country/{iso3code}
+     *
+     * @param iso3code iso3code
+     */
+    public static getCountry(iso3code: string): Promise<Country> {
+
+        const apiUrl = URL_GET_COUNTRY.expand({iso3code});
+        // console.log(`Fetching from ${apiUrl}`);
+        const content = { /* No content in request body */ };
+
+        return axiosBackend.request({
+            url: apiUrl,
+            method: 'GET',
+            ...content,
+        }).then(({ data }) => data as Country);
+    }
+
 }
 
 export default GeoService;