Fixed compatiblity with Nova 3.8.4.

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.2.2] - 2020-09-04
+### Fixed
+- compatibility with Nova 3.8.4.
+
 ## [0.2.1] - 2020-09-03
 ### Added
 - max version constraint due to Nova 3.8.4 having breaking changes.

composer.json

@@ -14,9 +14,13 @@
     ],
     "require": {
         "illuminate/support": "^7.0",
-        "laravel/nova": "<3.8.4",
+        "laravel/nova": "*",
         "symfony/thanks": "^1.1"
     },
+    "require-dev": {
+        "sebastian/phpcpd": "^5.0",
+        "squizlabs/php_codesniffer": "^3.4"
+    },
     "autoload": {
         "psr-4": {
             "GeneaLabs\\NovaMapMarkerField\\": "src/"

dist/mix-manifest.json

@@ -1,4 +1,3 @@
 {
-    "/js/field.js": "/js/field.js",
-    "/css/field.css": "/css/field.css"
+    "/js/field.js": "/js/field.js"
 }

phpcs.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="PHP_CodeSniffer" xsi:noNamespaceSchemaLocation="phpcs.xsd">
+    <description>GeneaLabs coding standards.</description>
+
+    <rule ref="PSR1"></rule>
+    <rule ref="PSR2"></rule>
+    <rule ref="PSR12">
+        <exclude name="PSR12.Classes.ClassInstantiation.MissingParentheses"/>
+        <exclude name="PSR12.Functions.ReturnTypeDeclaration.SpaceBeforeColon"/>
+    </rule>
+</ruleset>

resources/js/components/DetailField.vue

@@ -18,11 +18,11 @@
         data: function () {
             return {
                 iconRetina: this.field.iconRetinaUrl
-                    || require('leaflet/dist/images/marker-icon-2x.png'),
+                    || '/vendor/leaflet/dist/images/marker-icon-2x.png',
                 icon: this.field.iconUrl
-                    || require('leaflet/dist/images/marker-icon.png'),
+                    || '/vendor/leaflet/dist/images/marker-icon.png',
                 shadow: this.field.shadowUrl
-                    || require('leaflet/dist/images/marker-shadow.png'),
+                    || '/vendor/leaflet/dist/images/marker-shadow.png',
                 tileUrl: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
                 mapOptions: {
                     boxZoom: false,
@@ -39,7 +39,7 @@
 
         created: function () {
             delete L.Icon.Default.prototype._getIconUrl;
-            
+
             L.Icon.Default.mergeOptions({
                 iconRetinaUrl: this.iconRetina,
                 iconUrl: this.icon,
@@ -81,26 +81,30 @@
             },
 
             locationIsSet: function () {
-                if (this.value.latitude === undefined) {
+                if (this.value.length === 0) {
                     this.setInitialValue();
                 }
 
-                return this.value.latitude > 0
-                    || this.value.longitude > 0;
+                let value = JSON.parse(this.value);
+
+                return value.latitude > 0
+                    || value.longitude > 0;
             },
 
             locationIsNotSet: function () {
                 return !this.locationIsSet;
             },
 
             mapCenter: function () {
-                if (this.value.latitude === undefined) {
+                if (this.value.length === 0) {
                     this.setInitialValue();
                 }
 
+                let value = JSON.parse(this.value);
+
                 return [
-                    this.value.latitude,
-                    this.value.longitude,
+                    (value.latitude || this.field.defaultLatitude || 0),
+                    (value.longitude || this.field.defaultLongitude || 0),
                 ];
             },
         },
@@ -124,10 +128,21 @@
             },
 
             setInitialValue: function () {
-                this.value = {
-                    latitude: this.field.value[this.field.latitude || "latitude"] || 0,
-                    longitude: this.field.value[this.field.longitude || "longitude"] || 0,
-                };
+                let value = JSON.parse(this.value || this.field.value);
+
+                this.setValue(value.latitude, value.longitude);
+            },
+
+            setValue: function (latitude, longitude) {
+                this.value = '{"latitude_field":'
+                    + '"' + (this.field.latitude || 'latitude') + '"'
+                    + ',"longitude_field":'
+                    + '"' + (this.field.longitude || 'longitude') + '"'
+                    + ',"latitude":'
+                    + (latitude || 0)
+                    + ',"longitude":'
+                    + (longitude || 0)
+                    + '}';
             },
         },
     };

resources/js/components/FormField.vue

@@ -54,6 +54,7 @@
         mounted: function () {
             this.$nextTick(() => {
                 this.map = this.$refs.map.mapObject;
+                this.setInitialValue();
             });
         },
 
@@ -122,26 +123,8 @@
                 return ((this.field.centerCircle || {}).border || 0);
             },
 
-            firstLocationError: function () {
-                if (this.hasLocationError) {
-                    return (this.errors.first(this.latitudeFieldName)
-                        || this.errors.first(this.longitudeFieldName));
-                }
-            },
-
             hasLocationError: function () {
-                return (this.errors.has(this.latitudeFieldName)
-                    || this.errors.has(this.longitudeFieldName));
-            },
-
-            latitudeFieldName: function () {
-                return this.field.latitude
-                    || "latitude";
-            },
-
-            longitudeFieldName: function () {
-                return this.field.longitude
-                    || "longitude";
+                return this.errors.has(this.field.attribute);
             },
 
             listenToEventName: function () {
@@ -156,55 +139,59 @@
             },
 
             showErrors: function () {
-                console.log(this.errors);
+                // console.error(this.errors);
             },
 
             mapCenter: function () {
-                if (this.value.latitude === undefined) {
+                if (this.value.length === 0) {
                     this.setInitialValue();
                 }
 
+                let value = JSON.parse(this.value);
+
                 return [
-                    this.value.latitude
-                        || this.defaultLatitude,
-                    this.value.longitude
-                        || this.defaultLongitude,
+                    (value.latitude || this.field.defaultLatitude || 0),
+                    (value.longitude || this.field.defaultLongitude || 0),
                 ];
             },
         },
 
         methods: {
             fill: function (formData) {
-                formData.append((this.field.latitude || "latitude"), this.value.latitude);
-                formData.append((this.field.longitude || "longitude"), this.value.longitude);
+                formData.append(this.field.attribute, this.value || '');
             },
 
             handleChange: function (value) {
-                this.value.latitude = value.latitude;
-                this.value.longitude = value.longitude;
+                this.setValue(value.latitude, value.longitude);
             },
 
             mapMoved: function (event) {
                 let coordinates = event.target.getCenter();
 
-                this.value.latitude = coordinates.lat;
-                this.value.longitude = coordinates.lng;
+                this.setValue(coordinates.lat, coordinates.lng);
             },
 
             setInitialValue: function () {
-                this.value = {
-                    latitude: this.field.value[this.field.latitude || "latitude"]
-                        || 0,
-                    longitude: this.field.value[this.field.longitude || "longitude"]
-                        || 0,
-                };
+                let value = JSON.parse(this.value || this.field.value);
+
+                this.setValue(value.latitude, value.longitude);
+            },
+
+            setValue: function (latitude, longitude) {
+                this.value = '{"latitude_field":'
+                    + '"' + (this.field.latitude || 'latitude') + '"'
+                    + ',"longitude_field":'
+                    + '"' + (this.field.longitude || 'longitude') + '"'
+                    + ',"latitude":'
+                    + (latitude || 0)
+                    + ',"longitude":'
+                    + (longitude || 0)
+                    + '}';
             },
 
             mapNewCenter: function (event) {
                 var center = [event.lat, event.long];
-
-                this.value.latitude = event.lat;
-                this.value.longitude = event.long;
+                this.setValue(event.lat, event.long);
                 this.map.panTo(center, {animate:true});
             },
         },
@@ -250,9 +237,6 @@
                     />
                 </l-map>
             </div>
-            <p v-if="hasLocationError" class="my-2 text-danger">
-                {{ firstLocationError }}
-            </p>
         </template>
     </default-field>
 </template>

resources/js/components/IndexField.vue

@@ -4,23 +4,30 @@ export default {
 
     data: function () {
         return {
-            latitude: this.field.value[this.field.latitude || "latitude"] || 0,
-            longitude: this.field.value[this.field.longitude || "longitude"] || 0,
+            value: JSON.parse(this.field.value || {}),
         };
     },
 
     computed: {
+        latitude: function () {
+            return this.value.latitude;
+        },
+
+        longitude: function () {
+            return this.value.longitude;
+        },
+
         hasLatitude: function () {
-            return (this.latitude.length > 0);
+            return (this.latitude != 0);
         },
 
         hasLongitude: function () {
-            return (this.longitude.length > 0);
+            return (this.longitude != 0);
         },
 
         locationIsSet: function () {
-            return this.latitude > 0
-                || this.longitude > 0;
+            return this.hasLatitude
+                || this.hasLongitude;
         },
 
         locationIsNotSet: function () {
@@ -59,4 +66,3 @@ export default {
         white-space: nowrap;
     }
 </style>
-