Workflow-state.

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

@@ -1,7 +1,10 @@
 <div class="step">
     <div class="row no-gutters step-header">
         <div class="col-auto">
-            <button class="btn btn-initial mr-1" (click)="makeInitial.emit()" [disabled]="step.name === workflow.initial || step.isLocked">
+            <button class="btn btn-initial mr-1" (click)="makeInitial.emit()"
+                [class.enabled]="step.name !== workflow.initial && step.isLocked"
+                [class.active]="step.name === workflow.initial"
+                [disabled]="step.name === workflow.initial || step.isLocked || disabled">
                 <i class="icon-arrow-right text-decent" *ngIf="!step.isLocked"></i>
             </button>
         </div>
@@ -10,14 +13,14 @@
                 [ngModelOptions]="onBlur"
                 [ngModel]="step.color"
                 (ngModelChange)="changeColor($event)"
-                [disabled]="step.isLocked">
+                [disabled]="step.isLocked || disabled">
             </sqx-color-picker>
         </div>
         <div class="col">
             <sqx-editable-title 
                 [name]="step.name"
                 (nameChanged)="changeName($event)"
-                [disabled]="step.isLocked">
+                [disabled]="step.isLocked || transitionAdd">
             </sqx-editable-title>
         </div>
         <div class="col">
@@ -26,7 +29,7 @@
             <small class="text-decent">(Cannot be removed)</small>
         </div>
         <div class="col-auto">
-            <button type="button" class="btn btn-text-danger" (click)="remove.emit()" *ngIf="!step.isLocked">
+            <button type="button" class="btn btn-text-danger" (click)="remove.emit()" *ngIf="!step.isLocked" [disabled]="disabled">
                 <i class="icon-bin2"></i>
             </button>
         </div>
@@ -35,12 +38,13 @@
     <div class="step-inner">
         <sqx-workflow-transition *ngFor="let transition of transitions; trackBy: trackByTransition" 
             [transition]="transition"
+            [disabled]="disabled"
             [roles]="roles"
             (remove)="transitionRemove.emit(transition)"
             (update)="changeTransition(transition, $event)">
         </sqx-workflow-transition>
             
-        <div class="row transition no-gutters" *ngIf="openSteps.length > 0">
+        <div class="row transition no-gutters" *ngIf="openSteps.length > 0 && !disabled">
             <div class="col-auto">
                 <i class="icon-corner-down-right text-decent"></i>
             </div>
@@ -60,6 +64,7 @@
 
         <div class="form-check">
             <input class="form-check-input" type="checkbox" id="preventUpdates_{{step.name}}"
+                [disabled]="disabled"
                 [ngModel]="step.noUpdate"
                 (ngModelChange)="changeNoUpdate($event)" />
 

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

@@ -40,16 +40,16 @@
 
 .step {
     & {
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
     }
 
     &-inner {
-        padding-left: 2rem;
+        padding-left: 2.4rem;
     }
 
     &-header {
         &:hover {
-            .btn-initial {
+            .enabled {
                 visibility: visible;
             }
         }
@@ -68,6 +68,9 @@
 
     &:disabled {
         @include opacity(1);
+    }
+
+    &.active {
         visibility: visible;
     }
 }

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

@@ -32,6 +32,9 @@ export class WorkflowStepComponent implements OnChanges {
     @Input()
     public roles: RoleDto[];
 
+    @Input()
+    public disabled: boolean;
+
     @Output()
     public makeInitial = new EventEmitter();
 

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

@@ -12,6 +12,7 @@
     </div>
     <div class="col">
         <input class="form-control" [class.dashed]="!transition.expression" spellcheck="false"
+            [disabled]="disabled"
             [ngModelOptions]="onBlur"
             [ngModel]="transition.expression"
             (ngModelChange)="changeExpression($event)"
@@ -22,6 +23,7 @@
     </div>
     <div class="col">
         <select class="form-control" [class.dashed]="!transition.role || transition.role === ''"
+            [disabled]="disabled"
             [ngModel]="transition.role"
             (ngModelChange)="changeRole($event)">
             <option></option>
@@ -31,7 +33,7 @@
         <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()">
+        <button type="button" class="btn btn-text-danger" (click)="remove.emit()" [disabled]="disabled">
             <i class="icon-bin2"></i>
         </button>
     </div>

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

@@ -14,4 +14,11 @@
     pointer-events: none;
     line-height: 1.2rem;
     border: 1px solid transparent;
+}
+
+.form-control {
+    &:disabled,
+    &.disabled {
+        background: $panel-light-background;
+    }
 }

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

@@ -1,6 +1,8 @@
+<sqx-title message="{app} | Workflows | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
+
 <sqx-panel desiredWidth="50rem" isBlank="true" [isLazyLoaded]="false">
     <ng-container title>
-        Workflows
+        Workflow
     </ng-container>
 
     <ng-container menu>
@@ -20,12 +22,13 @@
     </ng-container>
 
     <ng-container content>
-        <ng-component *ngIf="workflow">
+        <ng-container *ngIf="workflow">
             <ng-container *ngIf="rolesState.roles | async; let roles">
                 <sqx-workflow-step *ngFor="let step of workflow.steps; trackBy: trackByStep"
                     [workflow]="workflow"
-                    [step]="step"
+                    [disabled]="!workflow.canUpdate"
                     [roles]="roles"
+                    [step]="step"
                     (makeInitial)="setInitial(step)"
                     (rename)="renameStep(step, $event)"
                     (remove)="removeStep(step)"
@@ -39,6 +42,6 @@
             <button class="btn btn-success" (click)="addStep()" *ngIf="workflow.canUpdate">
                 Add Step
             </button>
-        </ng-component>
+        </ng-container>
     </ng-container>
 </sqx-panel>

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

@@ -8,6 +8,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import {
+    AppsState,
     MathHelper,
     RolesState,
     WorkflowDto,
@@ -29,6 +30,7 @@ export class WorkflowsPageComponent implements OnInit {
     public workflow: WorkflowDto;
 
     constructor(
+        public readonly appsState: AppsState,
         public readonly rolesState: RolesState,
         public readonly workflowsState: WorkflowsState
     ) {

src/Squidex/app/features/settings/settings-area.component.html

@@ -45,7 +45,7 @@
             </li>
             <li class="nav-item" *ngIf="selectedApp.canReadWorkflows">
                 <a class="nav-link" routerLink="workflows" routerLinkActive="active">
-                    Workflows
+                    Workflow
                     <i class="icon-angle-right"></i>
                 </a>
             </li>

src/Squidex/app/framework/utils/immutable-array.ts

@@ -197,7 +197,7 @@ export function compareStringsAsc(a: string, b: string) {
 }
 
 export function compareStringsDesc(a: string, b: string) {
-    return a.localeCompare(b, undefined, { sensitivity: 'base' });
+    return b.localeCompare(a, undefined, { sensitivity: 'base' });
 }
 
 export function compareNumbersAsc(a: number, b: number) {

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

@@ -27,8 +27,8 @@ export class WorkflowDto {
 
     public static DEFAULT =
         new WorkflowDto()
-            .setStep('Archived', { color: '#eb3142', noUpdate: true })
             .setStep('Draft', { color: '#8091a5' })
+            .setStep('Archived', { color: '#eb3142', noUpdate: true })
             .setStep('Published', { color: '#4bb958', isLocked: true })
             .setTransition('Archived', 'Draft')
             .setTransition('Draft', 'Archived')

src/Squidex/app/shared/state/workflows.state.spec.ts

@@ -84,7 +84,7 @@ describe('WorkflowsState', () => {
 
             const request = oldWorkflow.workflow.serialize();
 
-            workflowsService.setup(x => x.putWorkflow(app, oldWorkflow, request, version))
+            workflowsService.setup(x => x.putWorkflow(app, oldWorkflow.workflow, request, version))
                 .returns(() => of(versioned(newVersion, updated))).verifiable();
 
             workflowsState.save(oldWorkflow.workflow).subscribe();