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

use observable context in workflow

Browse Source
This commit is contained in:
Dan Percic 2022-08-19 21:04:29 +03:00
parent 4c0e6d1bed
commit 4edb6bedc4
3 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/listing/listing-component.directive.ts
View File

@ -28,7 +28,6 @@ export abstract class ListingComponent<Class extends IListable<PrimaryKey>, Prim
abstract readonly tableHeaderLabel: string;
@ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
@ViewChild('workflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
get allEntities(): Class[] {
return this.entitiesService.all;

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

@ -1,9 +1,9 @@
<ng-container *ngIf="componentContext$ | async">
<iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow"> </iqser-table-header>
<ng-container *ngIf="componentContext$ | async as ctx">
<iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow"></iqser-table-header>
<iqser-empty-state
(action)="noDataAction.emit()"
*ngIf="entitiesService.noData$ | async"
*ngIf="ctx.noData"
[buttonIcon]="noDataButtonIcon"
[buttonLabel]="noDataButtonLabel"
[icon]="noDataIcon"
@ -11,11 +11,7 @@
[text]="noDataText"
></iqser-empty-state>
<div
*ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities"
cdkDropListGroup
class="columns-wrapper"
>
<div *ngIf="!ctx.noData" cdkDropListGroup class="columns-wrapper">
<div
*ngFor="let column of config.columns"
[class.dragging]="dragging"
@ -42,21 +38,21 @@
(click)="selectionColumn === column && listingService.select(entity)"
*ngFor="let entity of entities; trackBy: trackBy"
[cdkDragData]="entity"
[class.no-border]="dragging && draggingEntities.includes(entity)"
[class.no-border]="dragging && ctx.draggingEntities.includes(entity)"
[class.selected]="all[entity.id].isSelected$ | async"
[ngClass]="all[entity.id].classes$ | async"
cdkDrag
>
<ng-container *ngIf="!draggingEntities.includes(entity)">
<ng-container *ngIf="!ctx.draggingEntities.includes(entity)">
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
</ng-container>
<ng-template cdkDragPlaceholder>
<div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
<div *ngFor="let e of ctx.draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
</ng-template>
<ng-template cdkDragPreview>
<ng-container *ngFor="let e of draggingEntities">
<ng-container *ngFor="let e of ctx.draggingEntities">
<div
[class.selected]="all[e.id].isSelected$ | async"
[ngClass]="all[e.id].classes$ | async"

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

@ -25,7 +25,9 @@ import { WorkflowConfig } from './models/workflow-config.model';
import { WorkflowColumn } from './models/workflow-column.model';
import { EntityWrapper } from './models/entity-wrapper.model';
interface WorkflowContext {
interface WorkflowContext<T> {
noData: boolean;
draggingEntities: T[];
updateConfigItems: unknown;
setupResizeObserver: unknown;
}
@ -36,7 +38,7 @@ interface WorkflowContext {
styleUrls: ['./workflow.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowComponent<T extends IListable, K extends string> extends ContextComponent<WorkflowContext> implements OnInit {
export class WorkflowComponent<T extends IListable, K extends string> extends ContextComponent<WorkflowContext<T>> implements OnInit {
@Input() config!: WorkflowConfig<T, K>;
@Input() itemClasses!: Record<string, (e: T) => boolean>;
@Input() addElementIcon!: string;
@ -95,6 +97,8 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Co
this._setupResizeObserver();
super._initContext({
noData: this.entitiesService.noData$,
draggingEntities: this.draggingEntities$,
updateConfigItems: updateConfigItems$,
setupResizeObserver: setupResizeObserver$,
});