Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disabled workflow items

Browse Source
This commit is contained in:
Adina Țeudan 2021-09-27 23:16:51 +03:00
parent ba4fbdabe6
commit 5973631a1d
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/listing/workflow/workflow.component.html
View File

@ -20,7 +20,8 @@
[id]="column.key"
cdkDropList cdkDropListSortingDisabled>
<div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column)" *ngFor="let entity of column.entities"
[cdkDragData]="entity" [style.--height]="itemHeight" cdkDrag>
[cdkDragData]="entity" [ngClass]="getItemClasses(entity)" [style.--height]="itemHeight" cdkDrag
>
<div *cdkDragPlaceholder [style.--height]="itemHeight"></div>
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
</div>

5
src/lib/listing/workflow/workflow.component.scss
View File

@ -86,6 +86,11 @@
margin-bottom: 8px;
}
&.disabled {
background-color: var(--iqser-grey-6);
color: var(--iqser-disabled);
}
&:hover {
background-color: var(--iqser-grey-6);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);

15
src/lib/listing/workflow/workflow.component.ts
View File

@ -30,6 +30,7 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
@Input() headerTemplate?: TemplateRef<unknown>;
@Input() @Required() itemTemplate!: TemplateRef<T>;
@Input() @Required() config!: WorkflowConfig<T, K>;
@Input() itemClasses?: { [key: string]: (e: T) => boolean };
dragging = false;
sourceColumn?: WorkflowColumn<T, K>;
@ -54,6 +55,16 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
return this.listingComponent.tableHeaderLabel;
}
getItemClasses(entity: T): { [key: string]: boolean } {
const classes: { [key: string]: boolean } = {};
for (const key in this.itemClasses) {
if (Object.prototype.hasOwnProperty.call(this.itemClasses, key)) {
classes[key] = this.itemClasses[key](entity);
}
}
return classes;
}
async move(event: CdkDragDrop<(T | number)[]>): Promise<void> {
if (event.previousContainer !== event.container) {
const column = this._getColumnByKey((<unknown>event.container.id) as K);
@ -69,12 +80,12 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
return (item: CdkDrag<T>) => column.enterPredicate(item.data);
}
startDragging(column: WorkflowColumn<T, K>) {
startDragging(column: WorkflowColumn<T, K>): void {
this.dragging = true;
this.sourceColumn = column;
}
stopDragging() {
stopDragging(): void {
this.dragging = false;
this.sourceColumn = undefined;
}