Autofocus new filter and display proper error messages

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/workflowengine/src/components/Check.vue

@@ -72,7 +72,7 @@ export default {
 			currentOption: null,
 			currentOperator: null,
 			options: [],
-			valid: true,
+			valid: false,
 		}
 	},
 	computed: {
@@ -107,6 +107,11 @@ export default {
 		this.options = Object.values(this.checks)
 		this.currentOption = this.checks[this.check.class]
 		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: {
 		showDelete() {

apps/workflowengine/src/components/Rule.vue

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

apps/workflowengine/src/store.js

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