From 6739c755ebbbcfe1f8a6ccc0db4f1d4d95ff416b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 20 Dec 2022 12:13:48 -0300
Subject: [PATCH] New updates to geo coordinate input. #692.

---
 .../geocoordinate/GeoCoordinate.vue           | 87 ++++++++++++++-----
 .../class-tainacan-geocoordinate.php          |  5 +-
 src/views/tainacan-i18n.php                   |  1 +
 3 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
index 67f30cfc7..abc9625bc 100644
--- a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
+++ b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
@@ -22,16 +22,18 @@
                     <b-input
                             v-if="editingMarkerIndex >= 0"
                             expanded 
-                            type="number"
+                            :placeholder="-14.408656999999"
+                            type="text"
                             :step="0.000000000001"
-                            @input="onUpdateFromLatitudeInput"
+                            @input.native="onUpdateFromLatitudeInput"
                             :value="latitude" />
                     <b-input 
                             v-if="editingMarkerIndex >= 0"
                             expanded
-                            type="number"
+                            :placeholder="-51.316689999999"
+                            type="text"
                             :step="0.000000000001"
-                            @input="onUpdateFromLongitudeInput"
+                            @input.native="onUpdateFromLongitudeInput"
                             :value="longitude" />
                     <b-button
                             v-if="editingMarkerIndex >= 0"
@@ -62,11 +64,14 @@
                     @dragend="($event) => onDragMarker($event, index)"
                     @click="($event) => onMarkerEditingClick($event)" />
             <l-marker 
-                    v-if="editingMarkerIndex < 0 && shouldAddMore"
+                    v-if="editingLatLng && editingMarkerIndex < 0 && shouldAddMore"
                     :draggable="true"
                     :lat-lng="editingLatLng"
                     @dragend="($event) => onDragEditingMarker($event)"
                     @click="addLocation(latitude + ',' + longitude)">
+                <l-tooltip :options="{ offset: [16, 0] }">
+                    {{ $i18n.get('instruction_click_to_add_a_point') }}
+                </l-tooltip>
                 <l-icon class-name="tainacan-location-marker-add">
                     <span class="icon">
                         <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
@@ -78,7 +83,7 @@
 </template>
 
 <script>
-    import { LMap, LIcon, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
+    import { LMap, LIcon, LTooltip, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
     import 'leaflet/dist/leaflet.css';
     import { Icon, latLng } from 'leaflet';
     import iconUrl from 'leaflet/dist/images/marker-icon.png';
@@ -97,6 +102,7 @@
         components: {
             LMap,
             LIcon,
+            LTooltip,
             LTileLayer,
             LMarker,
             LControl
@@ -124,7 +130,10 @@
             },
             selectedLatLng() {
                 if ( this.selected && Array.isArray(this.selected) ) {
-                    return this.selected.map((aSelected) => {
+                    return this.selected.filter((aSelected) => {
+                        const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
+                        return ( !isNaN(Number(coordinates[0])) && !isNaN(Number(coordinates[1])) );
+                    }).map((aSelected) => {
                         const coordinates = aSelected.indexOf(',') && aSelected.split(',').length == 2 ? aSelected.split(',') : [-14.4086569, -51.31668];
                         return latLng(Number(coordinates[0]), Number(coordinates[1]));
                     }); 
@@ -132,7 +141,10 @@
                 return [];
             },
             editingLatLng() {
-                return latLng(Number(this.latitude), Number(this.longitude));
+                if ( !isNaN(this.latitude) && !isNaN(this.longitude) )
+                    return latLng(Number(this.latitude), Number(this.longitude));
+                else 
+                    return null;
             },
             maxMultipleValues() {
                 return (
@@ -155,7 +167,7 @@
                 this.$nextTick(() => {
                     const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
                     if ( this.selectedLatLng.length && this.$refs[mapComponentRef] && this.$refs[mapComponentRef].mapObject )
-                        this.$refs[mapComponentRef].mapObject.panInsideBounds(this.selectedLatLng,  { animate: true });
+                        this.$refs[mapComponentRef].mapObject.flyToBounds(this.selectedLatLng,  { animate: true });
                 });
             }
         },
@@ -182,20 +194,51 @@
             eventBusItemMetadata.$off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
         },
         methods: {
-            onUpdateFromLatitudeInput: _.debounce( function(newLatitude) {
-                this.latitude = newLatitude;
-                if (this.editingMarkerIndex >= 0) {
-                    this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
-                    this.$emit('input', this.selected);
-                }
-            }, 350),
-            onUpdateFromLongitudeInput: _.debounce( function(newLongitude) {
-                this.longitude = newLongitude;
-                if (this.editingMarkerIndex >= 0) {
-                    this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
-                    this.$emit('input', this.selected);
+            onUpdateFromLatitudeInput: _.debounce( function($event) {
+                let newLatitude = $event.target.value;
+                if ( !isNaN(newLatitude) ) {
+                    this.latitude = newLatitude;
+                    this.onUpdateFromLatitudeAndLongitude();
+                } else {
+                    const splitValue = newLatitude.split(',');
+                    if (
+                        splitValue && 
+                        splitValue.length == 2 &&
+                        !isNaN(splitValue[0]) &&
+                        !isNaN(splitValue[1])
+                    ) {
+                        this.latitude = splitValue[0];
+                        this.longitude = splitValue[1];
+                        this.onUpdateFromLatitudeAndLongitude();
+                    }
                 }
             }, 250),
+            onUpdateFromLongitudeInput: _.debounce( function($event) {
+                let newLongitude = $event.target.value;
+
+                if ( !isNaN(newLongitude) ) {
+                    this.longitude = newLongitude;
+                    this.onUpdateFromLatitudeAndLongitude();
+                } else {
+                    const splitValue = newLongitude.split(',');
+                    if (
+                        splitValue && 
+                        splitValue.length == 2 &&
+                        !isNaN(splitValue[0]) &&
+                        !isNaN(splitValue[1])
+                    ) {
+                        this.latitude = splitValue[0];
+                        this.longitude = splitValue[1];
+                        this.onUpdateFromLatitudeAndLongitude();
+                    }
+                }
+            }, 250),
+            onUpdateFromLatitudeAndLongitude() {
+                if (this.editingMarkerIndex >= 0) {
+                    this.selected.splice(this.editingMarkerIndex, 1, this.latitude + ',' + this.longitude);
+                    this.$emit('input', this.selected);
+                }
+            },
             onDragMarker($event, index) {
                 if ( $event.target && $event.target['_latlng'] ) {
                     if (this.editingMarkerIndex == index) {
@@ -249,7 +292,7 @@
             },
             onMarkerRemove(index) {
                 this.editingMarkerIndex = -1;
-                console.log(this.selectedLatLng[index])
+                
                 this.latitude = this.selectedLatLng[index].lat;
                 this.longitude = this.selectedLatLng[index].lng;
 
diff --git a/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php b/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php
index 13c1f0563..c049de74f 100644
--- a/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php
+++ b/src/views/admin/components/metadata-types/geocoordinate/class-tainacan-geocoordinate.php
@@ -36,6 +36,9 @@ class GeoCoordinate extends Metadata_Type {
 	 * @return bool `true` if the coordinate is valid, `false` if not
 	 */
 	private function validateLatLong($lat, $long) {
+		if ( !is_numeric($lat) || !is_numeric($long) )
+			return false;
+			
 		$validataLat = ($lat + 0) >= -90.0 && ($lat + 0) <= 90.0;
 		$validataLong = ($long + 0) >= -180.0 && ($long + 0) <= 180.0;
 		return $validataLat & $validataLong;
@@ -46,7 +49,7 @@ class GeoCoordinate extends Metadata_Type {
 		$value = is_array($value) ? $value : [$value];
 		foreach ($value as $coordinate) {
 			$arr_coordinate = explode(",", $coordinate);
-			if( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) {
+			if ( count($arr_coordinate) != 2 || !$this->validateLatLong($arr_coordinate[0], $arr_coordinate[1])) {
 				$this->add_error( sprintf(__('The value (%s) is not a valid geo coordinate', 'tainacan'), $coordinate ) );
 				return false;
 			}
diff --git a/src/views/tainacan-i18n.php b/src/views/tainacan-i18n.php
index ec9a631a5..c0c8fecab 100644
--- a/src/views/tainacan-i18n.php
+++ b/src/views/tainacan-i18n.php
@@ -740,6 +740,7 @@ return apply_filters( 'tainacan-i18n', [
 	/* translators: At the end of this sentence there will be a search query typed by the user wrapped in quotes. */
 	'instruction_press_enter_to_search_for'			 => __( 'Press <kbd>ENTER</kbd> to search for', 'tainacan' ),
 	'instruction_type_geocoordinate'				 => __( 'Type a geo coordinate in the form of lat,lng', 'tainacan' ),
+	'instruction_click_to_add_a_point'				 => __( 'Drag to reposition or click to insert a marker', 'tainacan' ),
 
 	// Info. Other feedback to user.
 	'info_items_tab_all'                			 => __( 'Every item, except by those sent to trash.', 'tainacan' ),