Fixed display of validation errors

mikebronner · Aug 2, 2019 · 6a8fd23 · 6a8fd23
1 parent 2b7e2b1
commit 6a8fd23
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.1.8] - 2019-08-02
+### Fixed
+- display or validation failure border and message.
+
 ## [0.1.7] - 2019-07-26
 ### Fixed
 - display of existing location coordinates on map when editing and not using

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -68,6 +68,36 @@ export default {
     },
 
     computed: {
+        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";
+        },
+
+        mapErrorClasses() {
+            return this.hasLocationError
+                ? this.errorClass
+                : '';
+        },
+
+        showErrors: function () {
+            console.log(this.errors);
+        },
+
         mapCenter: function () {
             if (this.value.latitude === undefined) {
                 this.setInitialValue();
@@ -122,30 +152,37 @@ export default {
 
 <template>
     <default-field
-        :field="field"
         :errors="errors"
+        :field="field"
         :full-width-content="true"
     >
         <template slot="field">
-            <l-map
-                class="z-10 map-field w-full form-control form-input-bordered overflow-hidden relative"
-                ref="map"
-                :center="mapCenter"
-                :options="mapOptions"
-                :zoom="zoom"
-                @move="mapMoved"
+            <div class="map-field z-10 p-0 w-full form-control form-input-bordered overflow-hidden relative"
+                :class="mapErrorClasses"
             >
-                <l-tile-layer
-                    :url="tileUrl"
-                ></l-tile-layer>
-                <l-marker
-                    :options="markerOptions"
-                    :lat-lng="mapCenter"
-                ></l-marker>
-                <v-geosearch
-                    :options="geosearchOptions"
-                ></v-geosearch>
-            </l-map>
+                <l-map
+                    :id="field.name"
+                    ref="map"
+                    :center="mapCenter"
+                    :options="mapOptions"
+                    :zoom="zoom"
+                    @move="mapMoved"
+                >
+                    <l-tile-layer
+                        :url="tileUrl"
+                    ></l-tile-layer>
+                    <l-marker
+                        :options="markerOptions"
+                        :lat-lng="mapCenter"
+                    ></l-marker>
+                    <v-geosearch
+                        :options="geosearchOptions"
+                    ></v-geosearch>
+                </l-map>
+            </div>
+            <p v-if="hasLocationError" class="my-2 text-danger">
+                {{ firstLocationError }}
+            </p>
         </template>
     </default-field>
 </template>