Mercurial > gemma
changeset 4282:5d6a4dd3efa1
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 | c470d2202823 |
children | c811d5da69bd |
files | client/src/components/systemconfiguration/MorphologyClassbreaks.vue |
diffstat | 1 files changed, 46 insertions(+), 4 deletions(-) [+] |
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"> + <translate>Same value is used in multiple fields.</translate> + </span> + <span class="text-danger" v-if="hasNegativValue"> + <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"> + <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: {