Refactor multi_checkbox_input

This component was made when having an "other" value as a check option
also meant typing in a custom value into an input field. Since this is no
longer needed, we were able to remove the markup / vue code for that
feature.
This commit is contained in:
graham-dds 2019-12-11 15:51:55 -05:00
parent f4f3e3dee3
commit 80f028540c
2 changed files with 6 additions and 27 deletions

View File

@ -13,22 +13,14 @@ export default {
type: Array,
default: () => [],
},
initialOtherValue: String,
optional: Boolean,
},
data: function() {
const showError = (this.initialErrors && this.initialErrors.length) || false
return {
showError: showError,
showValid: !showError && this.initialValue.length > 0,
showError: this.initialErrors.length > 0,
showValid: false,
validationError: this.initialErrors.join(' '),
otherChecked: this.initialValue.includes('other')
? true
: this.otherChecked,
otherText: this.initialValue.includes('other')
? this.initialOtherValue
: '',
selections: this.initialValue,
}
},
@ -36,17 +28,15 @@ export default {
methods: {
onInput: function(e) {
emitFieldChange(this)
this.showError = false
this.showValid = true
},
otherToggle: function() {
this.otherChecked = !this.otherChecked
this.showError = !this.valid
this.showValid = !this.showError
this.validationError = 'This field is required.'
},
},
computed: {
valid: function() {
return this.optional || this.showValid
return this.optional || this.selections.length > 0
},
},
}

View File

@ -45,19 +45,8 @@
<ul>
{% for choice in field.choices %}
<li>
{% if choice[0] != 'other' %}
<input type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='{{ choice[0] }}' v-model="selections"/>
<label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
{% else %}
<input @click="otherToggle" type='checkbox' name='{{ field.name }}' id='{{ field.name }}-{{ loop.index0 }}' value='other' v-model="selections"/>
<label for='{{ field.name }}-{{ loop.index0 }}'>{{ choice[1] | safe }}</label>
{% if other_input_field %}
<div v-show="otherChecked">
<input type='text' name='{{ other_input_field.name}}' id='{{ field.name }}-other' v-model:value="otherText" aria-expanded='false' />
</div>
{% endif %}
{% endif %}
</li>
{% endfor %}
</ul>