# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1567436717 -7200
# Node ID b86f828df7d6207440efdde76679e3b4a1c511ad
# Parent  b333d48ae555a010a15a5098b28503e8f86dde4a
client: improve validation for morphology classbreaks

diff -r b333d48ae555 -r b86f828df7d6 client/src/components/systemconfiguration/MorphologyClassbreaks.vue
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Mon Sep 02 16:00:16 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Mon Sep 02 17:05:17 2019 +0200
@@ -52,7 +52,6 @@
               />
             </div>
           </div>
-          <!-- deactivate the built-in validation -->
           <form id="novalidatedform" />
           <input
             v-model.number="morphologyClassbreaks[i][0]"
@@ -91,7 +90,7 @@
         @click.prevent="submitClassbreaks"
         :class="[
           'btn btn-info btn-sm text-white',
-          { disabled: !classbreaksAreValid || hasDoublettes }
+          { disabled: !checkClassbreaks }
         ]"
       >
         <translate>Send</translate>
@@ -102,7 +101,7 @@
       >
         <translate>Reset to defaults</translate>
       </a>
-      <span class="text-danger" v-if="hasDoublettes || !classbreaksAreValid">
+      <span class="text-danger" v-if="!checkClassbreaks">
         {{ validationMessage }}
       </span>
     </div>
@@ -198,7 +197,7 @@
         @click.prevent="submitClassbreaksCompare"
         :class="[
           'btn btn-info btn-sm text-white',
-          { disabled: !checkValidityForMCCompare }
+          { disabled: !checkClassbreaksCompare }
         ]"
       >
         <translate>Send</translate>
@@ -209,8 +208,8 @@
       >
         <translate>Reset to defaults</translate>
       </a>
-      <span class="text-danger" v-if="!checkValidityForMCCompare">
-        &nbsp;<translate>Same value is used in multiple fields.</translate>
+      <span class="text-danger" v-if="!checkClassbreaksCompare">
+        {{ validationMessageForCompare }}
       </span>
     </div>
   </div>
@@ -284,7 +283,9 @@
       morphologyClassbreaks: [],
       morphologyClassbreaksCompare: [],
       activeColorPicker: null,
-      closeColorPickerListener: null
+      closeColorPickerListener: null,
+      validationMessage: "",
+      validationMessageForCompare: ""
     };
   },
   computed: {
@@ -292,50 +293,65 @@
     colorPickerTitle() {
       return this.$gettext("Choose color");
     },
-    validationMessage() {
-      const doublettes = this.$gettext(
-        "Same value is used in multiple fields."
+    checkClassbreaks() {
+      return (
+        this.valuesAreValid(this.morphologyClassbreaks) &&
+        !this.hasDoublettes(this.morphologyClassbreaks)
+      );
+    },
+    checkClassbreaksCompare() {
+      return (
+        this.valuesAreValid(this.morphologyClassbreaksCompare, "compare") &&
+        !this.hasDoublettes(this.morphologyClassbreaksCompare, "compare")
       );
-      const invalidForm = this.$gettext(
+    }
+  },
+  methods: {
+    // check if the same value is used for more than one field.
+    hasDoublettes(m, compare) {
+      const errorMessage = this.$gettext(
+        "Same value is used in multiple fields.  Please check"
+      );
+      let values = [];
+      for (let i = 0; i < m.length; i++) {
+        values[i] = Number(m[i][0]);
+      }
+      if (new Set(values).size !== values.length) {
+        //  determine which message to change
+        if (compare !== "compare") {
+          this.validationMessage = errorMessage;
+        } else {
+          this.validationMessageForCompare = errorMessage;
+        }
+        return true;
+      }
+      return false;
+    },
+    valuesAreValid(m, compare) {
+      const errorMessage = this.$gettext(
         "There are invalid classbreak values. Please check"
       );
-      if (this.hasDoublettes && !this.classbreaksAreValid)
-        return `${doublettes} ${invalidForm}`;
-      if (this.hasDoublettes) return doublettes;
-      if (!this.classbreaksAreValid) return invalidForm;
-      return "";
-    },
-    classbreaksAreValid() {
-      let values = this.morphologyClassbreaks.map(e => {
+      let values = m.map(e => {
         const element = e[0];
         if (!isNaN(element)) {
-          if (element === "") return false;
+          if (element === "") return false; // check if the field is empty
           if (!isNaN(element)) {
-            const numberParts = String(element).split(".");
+            const numberParts = String(element).split("."); // check number of decimal places
             return numberParts.length == 2 ? numberParts[1].length < 3 : true;
           }
         }
         return false;
       });
-      return values.every(e => e === true);
-    },
-    // check if the same value is used for more than one field.
-    hasDoublettes() {
-      let values = [];
-      for (let i = 0; i < this.morphologyClassbreaks.length; i++) {
-        values[i] = Number(this.morphologyClassbreaks[i][0]);
+      if (values.every(e => e === true)) {
+        return true;
       }
-      return new Set(values).size !== values.length;
+      if (compare !== "compare") {
+        this.validationMessage = errorMessage;
+      } else {
+        this.validationMessageForCompare = errorMessage;
+      }
+      return false;
     },
-    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: {
     addClassbreak(classbreaks, i) {
       classbreaks.splice(
         i,