Autofocus new filter and display proper error messages

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

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 96d686341fe14118a5759afcaa4c17cb742e7ad1..e447fbeb4bdb7837dd3fabd9e75afa0837efac1b 100644 (file)
--- 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 bdcd4bfc0f0610afd63e7264e9848b8f46c1f95e..5285005f53bd93f800478c68b9dae93b2f089b28 100644 (file)
--- 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 70b8b550053850106f9196f2b4fca50eff48b294..a8be467193de6f86aeb39e8b752c3b603610b83e 100644 (file)
--- 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 || '',
                        })
                },