From 89e613d44557233b75eddeadf2d1ee346a2dd523 Mon Sep 17 00:00:00 2001 From: dandds Date: Tue, 6 Nov 2018 15:27:42 -0500 Subject: [PATCH 1/3] control error display for options input component --- js/components/options_input.js | 18 +++++++++++++++++- styles/elements/_inputs.scss | 4 ++-- templates/components/options_input.html | 22 ++++++++++++---------- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/js/components/options_input.js b/js/components/options_input.js index eb16f706..5c965bd7 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -2,15 +2,31 @@ export default { name: 'optionsinput', props: { - name: String + name: String, + initialErrors: { + type: Array, + default: () => [] + }, }, + + data: function () { + return { + showError: (this.initialErrors && this.initialErrors.length) || false, + showValid: false, + validationError: this.initialErrors.join(' ') + } + }, + + methods: { onInput: function (e) { this.$root.$emit('field-change', { value: e.target.value, name: this.name }) + this.showError = false + this.showValid = true } } } diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index 2be9f2fe..d1cf89eb 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -46,13 +46,13 @@ fieldset { input[type='radio'] { + label::before { - box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red; + box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $state-color; } } input[type='checkbox'] { + label::before { - box-shadow: 0 0 0 2px $color-red; + box-shadow: 0 0 0 2px $state-color; } } } diff --git a/templates/components/options_input.html b/templates/components/options_input.html index 34c9a0da..0c3bd36a 100644 --- a/templates/components/options_input.html +++ b/templates/components/options_input.html @@ -2,8 +2,13 @@ {% from "components/tooltip.html" import Tooltip %} {% macro OptionsInput(field, tooltip, inline=False) -%} - -
+ +
@@ -16,18 +21,15 @@ {{ field.description | safe }} {% endif %} - {% if field.errors %} - {{ Icon('alert',classes="icon-validation") }} - {% endif %} + {{ Icon('alert',classes="icon-validation") }} + {{ Icon('ok',classes="icon-validation") }} {{ field() }} - {% if field.errors %} - {% for error in field.errors %} - {{ error }} - {% endfor %} - {% endif %} +
From d12bed4ef37848116e3b5e3120d8275c536592dd Mon Sep 17 00:00:00 2001 From: dandds Date: Thu, 8 Nov 2018 11:05:58 -0500 Subject: [PATCH 2/3] display valid state for option inputs that have an initial value --- js/components/options_input.js | 3 ++- templates/components/options_input.html | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/options_input.js b/js/components/options_input.js index 5c965bd7..cf1583a4 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -7,13 +7,14 @@ export default { type: Array, default: () => [] }, + initialValue: String, }, data: function () { return { showError: (this.initialErrors && this.initialErrors.length) || false, - showValid: false, + showValid: !!this.initialValue, validationError: this.initialErrors.join(' ') } }, diff --git a/templates/components/options_input.html b/templates/components/options_input.html index 0c3bd36a..8194623f 100644 --- a/templates/components/options_input.html +++ b/templates/components/options_input.html @@ -6,6 +6,7 @@ name='{{ field.name }}' inline-template {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %} + {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %} key='{{ field.name }}'>
From 5a98605ff19213405bf24ab78e3ebb3b9529d222 Mon Sep 17 00:00:00 2001 From: dandds Date: Thu, 8 Nov 2018 11:31:26 -0500 Subject: [PATCH 3/3] only show option input as valid if there are no errors --- js/components/options_input.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/components/options_input.js b/js/components/options_input.js index cf1583a4..a04ed230 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -12,9 +12,10 @@ export default { data: function () { + const showError = (this.initialErrors && this.initialErrors.length) || false return { - showError: (this.initialErrors && this.initialErrors.length) || false, - showValid: !!this.initialValue, + showError: showError, + showValid: !showError && !!this.initialValue, validationError: this.initialErrors.join(' ') } },