workflow table state sort

Sorts the Workflow table to be more predictable

Adds new shared SCSS table rules.
Adds a default with as 100% (there have never been half tables)
Overwrites the rules for sticky tables

client/src/app/core/repositories/motions/workflow-repository.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { auditTime } from 'rxjs/operators';
 
 import { Workflow } from 'app/shared/models/motions/workflow';
 import { ViewWorkflow } from 'app/site/motions/models/view-workflow';
@@ -50,12 +51,31 @@ export class WorkflowRepositoryService extends BaseRepository<ViewWorkflow, Work
         private translate: TranslateService
     ) {
         super(DS, mapperService, viewModelStoreService, Workflow);
+        this.viewModelListSubject.pipe(auditTime(1)).subscribe(models => {
+            if (models && models.length > 0) {
+                this.initSorting(models);
+            }
+        });
     }
 
     public getVerboseName = (plural: boolean = false) => {
         return this.translate.instant(plural ? 'Workflows' : 'Workflow');
     };
 
+    /**
+     * Sort the states of custom workflows. Ignores simple and complex workflows.
+     * Implying the default workflows always have the IDs 1 und 2
+     *
+     * TODO: Temp Solution. Should be replaced by general sorting over repositories after PR 4411
+     *       This is an abstract to prevent further collisions. Real sorting is then done in 4411
+     *       For now this "just" sorts the Workflow states of all custom workflows
+     */
+    private initSorting(workflows: ViewWorkflow[]): void {
+        for (const workflow of workflows) {
+            workflow.sortStates();
+        }
+    }
+
     /**
      * Creates a ViewWorkflow from a given Workflow
      *

client/src/app/shared/components/media-upload-content/media-upload-content.component.scss

@@ -1,9 +1,9 @@
+@import '~assets/styles/tables.scss';
+
 .table-container {
     overflow: auto;
 
     table {
-        width: 100%;
-
         /** Title */
         .mat-column-title {
             min-width: 100px;

client/src/app/shared/models/motions/workflow.ts

@@ -32,6 +32,13 @@ export class Workflow extends BaseModel<Workflow> {
         return this.states.some(state => state.id === id);
     }
 
+    /**
+     * Sorts the states of this workflow
+     */
+    public sortStates(): void {
+        this.states.sort((a, b) => (a.id > b.id ? 1 : -1));
+    }
+
     public deserialize(input: any): void {
         Object.assign(this, input);
 

client/src/app/site/motions/models/view-workflow.ts

@@ -57,6 +57,10 @@ export class ViewWorkflow extends BaseViewModel {
         return this.name;
     };
 
+    public sortStates(): void {
+        this.workflow.sortStates();
+    }
+
     /**
      * Updates the local objects if required
      *

client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.scss

@@ -1,10 +1,10 @@
+@import '~assets/styles/tables.scss';
+
 .title-line {
     margin: 20px 25px;
 }
 
 table {
-    width: 100%;
-
     .mat-header-cell {
         min-width: 150px;
         position: relative;

client/src/app/site/users/components/group-list/group-list.component.scss

@@ -1,6 +1,6 @@
-table {
-    width: 100%;
+@import '~assets/styles/tables.scss';
 
+table {
     .mat-cell {
         min-width: 80px;
     }
@@ -24,7 +24,7 @@ table {
     padding-left: 25px;
 }
 
-.new-group-form {
+.new-group-forrm {
     text-align: center;
     padding-top: 10px;
     background-color: #ffffff; // put in theme later

client/src/assets/styles/tables.scss

@@ -0,0 +1,10 @@
+// shared definition for most (if not all) used tables
+.mat-table {
+    width: 100%;
+
+    // important is necessary, since the "sticky" attribute does not alter the real `.mat-table-sticky-class`
+    // but rather "patches" the DOM tree.
+    .mat-table-sticky {
+        z-index: 3 !important;
+    }
+}