new project Vue component handles redundant env name validation

This commit is contained in:
dandds 2018-09-24 14:50:54 -04:00
parent 729c96de3a
commit 97f3816627
2 changed files with 28 additions and 13 deletions

View File

@ -32,7 +32,8 @@ export default {
).map(createEnvironment)
return {
showError: false,
showMissingError: false,
showUniqueError: false,
environments,
name,
}
@ -44,7 +45,11 @@ export default {
updated: function() {
if (this.environmentsHaveNames()) {
this.showError = false
this.showMissingError = false
}
if (this.envNamesAreUnique()) {
this.showUniqueError = false
}
},
@ -63,8 +68,13 @@ export default {
return this.environments.every((e) => e.name !== "")
},
envNamesAreUnique: function () {
const names = this.environments.map((e) => e.name)
return [...new Set(names)].length == this.environments.length
},
validateAndOpenModal: function (modalName) {
const textInputs = this.$children.reduce((previous, newVal) => {
const childrenValid = this.$children.reduce((previous, newVal) => {
// display textInput error if it is not valid
if (!newVal.showValid) {
newVal.showError = true
@ -73,12 +83,19 @@ export default {
return newVal.showValid && previous
}, true)
const isValid = textInputs && this.environmentsHaveNames()
const hasNames = this.environmentsHaveNames()
const uniqNames = this.envNamesAreUnique()
if (isValid) {
if (!hasNames) {
this.showMissingError = true
}
if (!uniqNames) {
this.showUniqueError = true
}
if (childrenValid && hasNames && uniqNames) {
this.openModal(modalName)
} else {
this.showError = true
}
}
}

View File

@ -42,14 +42,12 @@
</div>
</div>
{% if form.environment_names.errors %}
{% for error in form.environment_names.errors %}
{{ Alert(error, level="error") }}
{% endfor %}
{% endif %}
<div v-if="showError">
<div v-if="showMissingError">
{{ Alert("Provide at least one environment name.", level="error") }}
</div>
<div v-if="showUniqueError">
{{ Alert("Environment names must be unique.", level="error") }}
</div>
<div class="block-list project-list-item">
<header class="block-list__header block-list__header--grow">