Mercurial > gemma
changeset 4302:b86f828df7d6
client: improve validation for morphology classbreaks
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 02 Sep 2019 17:05:17 +0200 |
parents | b333d48ae555 |
children | 3e0755af1177 |
files | client/src/components/systemconfiguration/MorphologyClassbreaks.vue |
diffstat | 1 files changed, 54 insertions(+), 38 deletions(-) [+] |
line wrap: on
line diff
--- 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"> - <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,