From 8ec66d1e954d84900f3f1bdd5cd958aef5abd3eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 23 Dec 2019 12:22:22 +0100
Subject: [PATCH] Autofocus new filter and display proper error messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/workflowengine/src/components/Check.vue |  7 ++++++-
 apps/workflowengine/src/components/Rule.vue  | 13 ++++++++++---
 apps/workflowengine/src/store.js             |  4 +++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 96d686341f..e447fbeb4b 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/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() {
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index bdcd4bfc0f..5285005f53 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/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;
diff --git a/apps/workflowengine/src/store.js b/apps/workflowengine/src/store.js
index 70b8b55005..a8be467193 100644
--- a/apps/workflowengine/src/store.js
+++ b/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 || '',
 			})
 		},