Autofocus new filter and display proper error messages

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2019-12-23 12:22:22 +01:00
parent e7ad044826
commit 8ec66d1e95
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
3 changed files with 19 additions and 5 deletions

View File

@ -72,7 +72,7 @@ export default {
currentOption: null, currentOption: null,
currentOperator: null, currentOperator: null,
options: [], options: [],
valid: true, valid: false,
} }
}, },
computed: { computed: {
@ -107,6 +107,11 @@ export default {
this.options = Object.values(this.checks) this.options = Object.values(this.checks)
this.currentOption = this.checks[this.check.class] this.currentOption = this.checks[this.check.class]
this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator) this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
if (this.check.class === null) {
this.$nextTick(() => this.$refs.checkSelector.$el.focus())
}
this.check.invalid = !this.validate()
}, },
methods: { methods: {
showDelete() { showDelete() {

View File

@ -30,8 +30,7 @@
@input="updateOperation" /> @input="updateOperation" />
</Operation> </Operation>
<div class="buttons"> <div class="buttons">
<button v-tooltip="ruleStatus.tooltip" <button class="status-button icon"
class="status-button icon"
:class="ruleStatus.class" :class="ruleStatus.class"
@click="saveRule"> @click="saveRule">
{{ ruleStatus.title }} {{ ruleStatus.title }}
@ -43,6 +42,7 @@
{{ t('workflowengine', 'Delete') }} {{ t('workflowengine', 'Delete') }}
</button> </button>
</div> </div>
<p v-if="error" class="error-message">{{ error }}</p>
</div> </div>
</div> </div>
</template> </template>
@ -84,7 +84,7 @@ export default {
return this.$store.getters.getOperationForRule(this.rule) return this.$store.getters.getOperationForRule(this.rule)
}, },
ruleStatus() { ruleStatus() {
if (this.error || !this.rule.valid || this.rule.checks.some((check) => check.invalid === true)) { if (this.error || !this.rule.valid || this.rule.checks.length === 0 || this.rule.checks.some((check) => check.invalid === true)) {
return { return {
title: t('workflowengine', 'The configuration is invalid'), title: t('workflowengine', 'The configuration is invalid'),
class: 'icon-close-white invalid', class: 'icon-close-white invalid',
@ -174,12 +174,19 @@ export default {
.buttons { .buttons {
display: block; display: block;
overflow: hidden;
button { button {
float: right; float: right;
height: 34px; height: 34px;
} }
} }
.error-message {
float: right;
margin-right: 10px;
}
.status-button { .status-button {
transition: 0.5s ease all; transition: 0.5s ease all;
display: block; display: block;

View File

@ -98,7 +98,9 @@ const store = new Vuex.Store({
entity: entity ? entity.id : rule.fixedEntity, entity: entity ? entity.id : rule.fixedEntity,
events, events,
name: '', // unused in the new ui, there for legacy reasons name: '', // unused in the new ui, there for legacy reasons
checks: [], checks: [
{ class: null, operator: null, value: '' }
],
operation: rule.operation || '', operation: rule.operation || '',
}) })
}, },