From ae3ce54f57ceda20239cc276c43034b2c36c4fe1 Mon Sep 17 00:00:00 2001 From: Sean Date: Wed, 13 Mar 2019 15:54:35 +0100 Subject: [PATCH] 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 --- .../motions/workflow-repository.service.ts | 20 +++++++++++++++++++ .../media-upload-content.component.scss | 4 ++-- .../src/app/shared/models/motions/workflow.ts | 7 +++++++ .../app/site/motions/models/view-workflow.ts | 4 ++++ .../workflow-detail.component.scss | 4 ++-- .../group-list/group-list.component.scss | 6 +++--- client/src/assets/styles/tables.scss | 10 ++++++++++ 7 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 client/src/assets/styles/tables.scss diff --git a/client/src/app/core/repositories/motions/workflow-repository.service.ts b/client/src/app/core/repositories/motions/workflow-repository.service.ts index 4155866ab..170f1b5d2 100644 --- a/client/src/app/core/repositories/motions/workflow-repository.service.ts +++ b/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 { + 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 * diff --git a/client/src/app/shared/components/media-upload-content/media-upload-content.component.scss b/client/src/app/shared/components/media-upload-content/media-upload-content.component.scss index 2ebb80aad..fd7b7e88f 100644 --- a/client/src/app/shared/components/media-upload-content/media-upload-content.component.scss +++ b/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; diff --git a/client/src/app/shared/models/motions/workflow.ts b/client/src/app/shared/models/motions/workflow.ts index 4f50f71c8..ea42883fa 100644 --- a/client/src/app/shared/models/motions/workflow.ts +++ b/client/src/app/shared/models/motions/workflow.ts @@ -32,6 +32,13 @@ export class Workflow extends BaseModel { 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); diff --git a/client/src/app/site/motions/models/view-workflow.ts b/client/src/app/site/motions/models/view-workflow.ts index 583959fcf..5699dc1b5 100644 --- a/client/src/app/site/motions/models/view-workflow.ts +++ b/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 * diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.scss b/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.scss index 623b819b9..9911623c8 100644 --- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.scss +++ b/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; diff --git a/client/src/app/site/users/components/group-list/group-list.component.scss b/client/src/app/site/users/components/group-list/group-list.component.scss index 041ccca6f..0dcaee684 100644 --- a/client/src/app/site/users/components/group-list/group-list.component.scss +++ b/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 diff --git a/client/src/assets/styles/tables.scss b/client/src/assets/styles/tables.scss new file mode 100644 index 000000000..86a16ffbc --- /dev/null +++ b/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; + } +}