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
This commit is contained in:
Sean 2019-03-13 15:54:35 +01:00 committed by Sean Engelhardt
parent 7734a502d8
commit ae3ce54f57
7 changed files with 48 additions and 7 deletions

View File

@ -1,4 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { auditTime } from 'rxjs/operators';
import { Workflow } from 'app/shared/models/motions/workflow'; import { Workflow } from 'app/shared/models/motions/workflow';
import { ViewWorkflow } from 'app/site/motions/models/view-workflow'; import { ViewWorkflow } from 'app/site/motions/models/view-workflow';
@ -50,12 +51,31 @@ export class WorkflowRepositoryService extends BaseRepository<ViewWorkflow, Work
private translate: TranslateService private translate: TranslateService
) { ) {
super(DS, mapperService, viewModelStoreService, Workflow); 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) => { public getVerboseName = (plural: boolean = false) => {
return this.translate.instant(plural ? 'Workflows' : 'Workflow'); 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 * Creates a ViewWorkflow from a given Workflow
* *

View File

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

View File

@ -32,6 +32,13 @@ export class Workflow extends BaseModel<Workflow> {
return this.states.some(state => state.id === id); 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 { public deserialize(input: any): void {
Object.assign(this, input); Object.assign(this, input);

View File

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

View File

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

View File

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

View File

@ -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;
}
}