Mercurial > gemma

diff client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 4282:5d6a4dd3efa1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve input validation in sys-config for Bottleneck Morphology Classbreaks * deactivate the html built-in validation * add input validation which meets our demands * adjust code to send only valid values.
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 29 Aug 2019 17:12:03 +0200
parents 851c0ccba59b
children 69f46e9c44e2
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Thu Aug 29 16:59:47 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Thu Aug 29 17:12:03 2019 +0200
@@ -52,11 +52,14 @@
               />
             </div>
           </div>
+          <!-- deactivate the built-in validation -->
+          <form id="novalidatedform" novalidate />
           <input
-            v-model="morphologyClassbreaks[i][0]"
+            v-model.number="morphologyClassbreaks[i][0]"
             type="number"
             min="0"
             step="0.1"
+            form="novalidatedform"
             class="form-control form-control-sm"
           />
           <div class="input-group-append">
@@ -87,7 +90,10 @@
     <div class="mb-4 px-3">
       <a
         @click.prevent="submitClassbreaks"
-        class="btn btn-info btn-sm text-white"
+        :class="[
+          'btn btn-info btn-sm text-white',
+          { disabled: !checkValidity || hasNegativValue }
+        ]"
       >
         <translate>Send</translate>
       </a>
@@ -97,6 +103,12 @@
       >
         <translate>Reset to defaults</translate>
       </a>
+      <span class="text-danger" v-if="!checkValidity">
+        &nbsp;<translate>Same value is used in multiple fields.</translate>
+      </span>
+      <span class="text-danger" v-if="hasNegativValue">
+        &nbsp;<translate>Negative value is not allowed.</translate>
+      </span>
     </div>
     <div class="px-3">
       <h6 class="font-weight-bold">
@@ -155,9 +167,10 @@
             </div>
           </div>
           <input
-            v-model="morphologyClassbreaksCompare[i][0]"
+            v-model.number="morphologyClassbreaksCompare[i][0]"
             type="number"
             step="0.1"
+            form="novalidatedform"
             class="form-control form-control-sm"
           />
           <div class="input-group-append">
@@ -188,7 +201,10 @@
     <div class="px-3">
       <a
         @click.prevent="submitClassbreaksCompare"
-        class="btn btn-info btn-sm text-white"
+        :class="[
+          'btn btn-info btn-sm text-white',
+          { disabled: !checkValidityForMCCompare }
+        ]"
       >
         <translate>Send</translate>
       </a>
@@ -198,6 +214,9 @@
       >
         <translate>Reset to defaults</translate>
       </a>
+      <span class="text-danger" v-if="!checkValidityForMCCompare">
+        &nbsp;<translate>Same value is used in multiple fields.</translate>
+      </span>
     </div>
   </div>
 </template>
@@ -273,6 +292,29 @@
     ...mapState("application", ["config"]),
     colorPickerTitle() {
       return this.$gettext("Choose color");
+    },
+    // check if the same value is used for more than one field.
+    checkValidity() {
+      let values = [];
+      for (let i = 0; i < this.morphologyClassbreaks.length; i++) {
+        values[i] = Number(this.morphologyClassbreaks[i][0]);
+      }
+      return new Set(values).size === values.length;
+    },
+    // check if there is a negative value
+    hasNegativValue() {
+      return this.morphologyClassbreaks
+        .map(m => {
+          return m[0];
+        })
+        .some(v => v < 0);
+    },
+    checkValidityForMCCompare() {
+      let values = [];
+      for (let i = 0; i < this.morphologyClassbreaksCompare.length; i++) {
+        values[i] = Number(this.morphologyClassbreaksCompare[i][0]);
+      }
+      return new Set(values).size === values.length;
     }
   },
   methods: {