diff client/src/components/ImportStretches.vue @ 1816:199fa7e759aa

define stretches: more userfriendly errormessage behaviour
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 16 Jan 2019 10:08:41 +0100
parents b16a6db0008f
children 7d37d9f5f272
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Wed Jan 16 01:07:26 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Wed Jan 16 10:08:41 2019 +0100
@@ -17,7 +17,7 @@
             v-model="id"
           />
           <span class="text-left text-danger">
-            <small v-if="!id">
+            <small v-if="idError && !id">
               <translate>Please enter an id</translate>
             </small>
           </span>
@@ -29,7 +29,7 @@
             <option value="stretch"><translate>Stretch</translate></option>
           </select>
           <span class="text-left text-danger">
-            <small v-if="!funktion">
+            <small v-if="funktionError && !funktion">
               <translate>Please enter a function</translate>
             </small>
           </span>
@@ -56,7 +56,7 @@
             </span>
           </div>
           <span class="text-left text-danger">
-            <small v-if="!startrhm">
+            <small v-if="startrhmError && !startrhm">
               <translate>Please enter a start point</translate>
             </small>
           </span>
@@ -81,7 +81,7 @@
             </span>
           </div>
           <span class="text-left text-danger">
-            <small v-if="!endrhm">
+            <small v-if="endrhmError && !endrhm">
               <translate>Please enter an end point</translate>
             </small>
           </span>
@@ -99,7 +99,7 @@
             v-model="objbn"
           />
           <span class="text-left text-danger">
-            <small v-if="!objbn">
+            <small v-if="objbnError && !objbn">
               <translate>Please enter an objectname</translate>
             </small>
           </span>
@@ -117,7 +117,7 @@
             v-model="nobjbn"
           />
           <span class="text-left text-danger">
-            <small v-if="!nobjbn">
+            <small v-if="nobjbnError && !nobjbn">
               <translate>Please enter an objectname</translate>
             </small>
           </span>
@@ -135,7 +135,7 @@
             v-model="date_info"
           />
           <span class="text-left text-danger">
-            <small v-if="!date_info">
+            <small v-if="date_infoError && !date_info">
               <translate>Please enter a date</translate>
             </small>
           </span>
@@ -151,14 +151,14 @@
             v-model="source"
           />
           <span class="text-left text-danger">
-            <small v-if="!source">
+            <small v-if="sourceError && !source">
               <translate>Please enter a source</translate>
             </small>
           </span>
         </div>
       </div>
     </div>
-    <div class="text-right mr-3 mb-3">
+    <div class="text-right mt-3 mr-3 mb-3">
       <button
         @click="submit"
         type="submit"
@@ -200,11 +200,39 @@
       date_info: new Date().toISOString().split("T")[0],
       source: "",
       pipetteStart: false,
-      pipetteEnd: false
+      pipetteEnd: false,
+      idError: false,
+      funktionError: false,
+      startrhmError: false,
+      endrhmError: false,
+      objbnError: false,
+      nobjbnError: false,
+      date_infoError: false,
+      sourceError: false
     };
   },
   methods: {
+    validate() {
+      const fields = [
+        "id",
+        "funktion",
+        "startrhm",
+        "endrhm",
+        "objbn",
+        "nobjbn",
+        "date_info",
+        "source"
+      ];
+      fields.forEach(field => {
+        if (!this[field]) {
+          this[field + "Error"] = true;
+        } else {
+          this[field + "Error"] = false;
+        }
+      });
+    },
     submit() {
+      this.validate();
       displayInfo({
         title: this.$gettext("Sections"),
         message: this.$gettext("Not implemented!")