Workflow UI

src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss

@@ -37,6 +37,7 @@
         }
     }
 }
+
 .step {
     & {
         margin-bottom: 1rem;
@@ -45,5 +46,4 @@
     &-inner {
         padding-left: 1rem;
     }
-
 }

src/Squidex/app/features/settings/pages/workflows/workflow-transition.component.html

@@ -11,38 +11,24 @@
         <span class="text-decent">when</span>
     </div>
     <div class="col">
-        <ng-container *ngIf="elementsActive['expression']; else noExpression">
-            <input class="form-control" sqxFocusOnInit (focus)="focusElement('expression')" (blur)="blurElement('expression')" spellcheck="false"
-                [ngModelOptions]="onBlur"
-                [ngModel]="transition.expression"
-                (ngModelChange)="changeExpression($event)" /> 
-        </ng-container>
-
-        <ng-template #noExpression>
-            <button class="btn btn-block btn-outline-secondary dashed" (click)="showElement('expression')">
-                Add Expression
-            </button>
-        </ng-template>
+        <input class="form-control" [class.dashed]="!transition.expression" spellcheck="false"
+            [ngModelOptions]="onBlur"
+            [ngModel]="transition.expression"
+            (ngModelChange)="changeExpression($event)"
+            placeholder="Add Expression" /> 
     </div>
     <div class="col-auto col-label">
         <span class="text-decent">for</span>
     </div>
     <div class="col">
-        <ng-container *ngIf="elementsActive['role']; else noRole">
-            <select class="form-control" sqxFocusOnInit (focus)="focusElement('role')" (blur)="blurElement('role')" 
-                [ngModelOptions]="onBlur"
-                [ngModel]="transition.role"
-                (ngModelChange)="changeRole($event)">
-                <option *ngFor="let role of roles; trackBy: trackByRole" [ngValue]="role.name">{{role.name}}</option>
-                <option [ngValue]="null">- All Roles -</option>
-            </select>
-        </ng-container>
+        <select class="form-control" [class.dashed]="!transition.role || transition.role === ''"
+            [ngModel]="transition.role"
+            (ngModelChange)="changeRole($event)">
+            <option></option>
+            <option *ngFor="let role of roles; trackBy: trackByRole" [ngValue]="role.name">{{role.name}}</option>
+        </select>
 
-        <ng-template #noRole>
-            <button class="btn btn-block btn-outline-secondary dashed" (click)="showElement('role')">
-                Add Role
-            </button>
-        </ng-template>
+        <span class="select-placeholder" *ngIf="!transition.role || transition.role === ''">Add Role</span>
     </div>
     <div class="col-auto pl-2">
         <button type="button" class="btn btn-text-danger" (click)="remove.emit()">

src/Squidex/app/features/settings/pages/workflows/workflow-transition.component.scss

@@ -2,5 +2,16 @@
 @import '_mixins';
 
 .dashed {
+    @include placeholder-color($color-theme-secondary);
     border-style: dashed;
+    border-width: 1px;
+}
+
+.select-placeholder {
+    @include absolute(0, 0, 0, 0);
+    color: $color-theme-secondary;
+    padding: .5rem .75rem;
+    pointer-events: none;
+    line-height: 1.2rem;
+    border: 1px solid transparent;
 }

src/Squidex/app/features/settings/pages/workflows/workflow-transition.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import {
     RoleDto,
@@ -18,7 +18,7 @@ import {
     styleUrls: ['./workflow-transition.component.scss'],
     templateUrl: './workflow-transition.component.html'
 })
-export class WorkflowTransitionComponent implements OnChanges {
+export class WorkflowTransitionComponent {
     @Input()
     public transition: WorkflowTransitionView;
 
@@ -31,50 +31,14 @@ export class WorkflowTransitionComponent implements OnChanges {
     @Output()
     public remove = new EventEmitter();
 
-    public elementsActive: { [name: string]: boolean } = {};
-    public elementsFocused: { [name: string]: boolean } = {};
-    public elementsValid: { [name: string]: boolean } = {};
-
     public onBlur = { updateOn: 'blur' };
 
-    public ngOnChanges(changes: SimpleChanges) {
-        if (changes['transition']) {
-            if (this.transition.expression) {
-                this.elementsValid['expression'] = true;
-                this.elementsActive['expression'] = true;
-            }
-
-            if (this.transition.role) {
-                this.elementsValid['role'] = true;
-                this.elementsActive['role'] = true;
-            }
-        }
-    }
-
     public changeExpression(expression: string) {
         this.update.emit({ expression });
     }
 
     public changeRole(role: string) {
-        this.update.emit({ role });
-    }
-
-    public showElement(name: string) {
-        this.elementsActive[name] = true;
-    }
-
-    public focusElement(name: string) {
-        this.elementsFocused[name] = true;
-    }
-
-    public blurElement(name: string) {
-        this.elementsFocused[name] = false;
-
-        setTimeout(() => {
-            if (!this.elementsFocused[name] && !this.elementsValid[name]) {
-                this.elementsActive[name] = false;
-             }
-        }, 2000);
+        this.update.emit({ role: role || '' });
     }
 
     public trackByRole(index: number, role: RoleDto) {

src/Squidex/app/shared/services/workflows.service.ts

@@ -65,8 +65,8 @@ export class WorkflowDto extends Model<WorkflowDto> {
 
         const transitions =
             steps.length !== this.steps.length ?
-            this.transitions.filter(t => t.from !== name && t.to !== name) :
-            this.transitions;
+                this.transitions.filter(t => t.from !== name && t.to !== name) :
+                this.transitions;
 
         return this.with({ steps, transitions });
     }
@@ -125,7 +125,7 @@ export class WorkflowDto extends Model<WorkflowDto> {
         if (found) {
             const { from: _, to: __, ...existing } = found;
 
-            values = { ...values, ...existing };
+            values = { ...existing, ...values };
         }
 
         const transitions = [...this.transitions.filter(t => t !== found), { from, to, ...values }];