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; abstract readonly tableHeaderLabel: string;
@ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>; @ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
@ViewChild('workflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
get allEntities(): Class[] { get allEntities(): Class[] {
return this.entitiesService.all; return this.entitiesService.all;

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

@ -1,9 +1,9 @@
<ng-container *ngIf="componentContext$ | async"> <ng-container *ngIf="componentContext$ | async as ctx">
<iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow"> </iqser-table-header> <iqser-table-header [tableHeaderLabel]="listingComponent.tableHeaderLabel" listingMode="workflow"></iqser-table-header>
<iqser-empty-state <iqser-empty-state
(action)="noDataAction.emit()" (action)="noDataAction.emit()"
*ngIf="entitiesService.noData$ | async" *ngIf="ctx.noData"
[buttonIcon]="noDataButtonIcon" [buttonIcon]="noDataButtonIcon"
[buttonLabel]="noDataButtonLabel" [buttonLabel]="noDataButtonLabel"
[icon]="noDataIcon" [icon]="noDataIcon"
@ -11,11 +11,7 @@
[text]="noDataText" [text]="noDataText"
></iqser-empty-state> ></iqser-empty-state>
<div <div *ngIf="!ctx.noData" cdkDropListGroup class="columns-wrapper">
*ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities"
cdkDropListGroup
class="columns-wrapper"
>
<div <div
*ngFor="let column of config.columns" *ngFor="let column of config.columns"
[class.dragging]="dragging" [class.dragging]="dragging"
@ -42,21 +38,21 @@
(click)="selectionColumn === column && listingService.select(entity)" (click)="selectionColumn === column && listingService.select(entity)"
*ngFor="let entity of entities; trackBy: trackBy" *ngFor="let entity of entities; trackBy: trackBy"
[cdkDragData]="entity" [cdkDragData]="entity"
[class.no-border]="dragging && draggingEntities.includes(entity)" [class.no-border]="dragging && ctx.draggingEntities.includes(entity)"
[class.selected]="all[entity.id].isSelected$ | async" [class.selected]="all[entity.id].isSelected$ | async"
[ngClass]="all[entity.id].classes$ | async" [ngClass]="all[entity.id].classes$ | async"
cdkDrag 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 *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
</ng-container> </ng-container>
<ng-template cdkDragPlaceholder> <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>
<ng-template cdkDragPreview> <ng-template cdkDragPreview>
<ng-container *ngFor="let e of draggingEntities"> <ng-container *ngFor="let e of ctx.draggingEntities">
<div <div
[class.selected]="all[e.id].isSelected$ | async" [class.selected]="all[e.id].isSelected$ | async"
[ngClass]="all[e.id].classes$ | 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 { WorkflowColumn } from './models/workflow-column.model';
import { EntityWrapper } from './models/entity-wrapper.model'; import { EntityWrapper } from './models/entity-wrapper.model';
interface WorkflowContext { interface WorkflowContext<T> {
noData: boolean;
draggingEntities: T[];
updateConfigItems: unknown; updateConfigItems: unknown;
setupResizeObserver: unknown; setupResizeObserver: unknown;
} }
@ -36,7 +38,7 @@ interface WorkflowContext {
styleUrls: ['./workflow.component.scss'], styleUrls: ['./workflow.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, 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() config!: WorkflowConfig<T, K>;
@Input() itemClasses!: Record<string, (e: T) => boolean>; @Input() itemClasses!: Record<string, (e: T) => boolean>;
@Input() addElementIcon!: string; @Input() addElementIcon!: string;
@ -95,6 +97,8 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Co
this._setupResizeObserver(); this._setupResizeObserver();
super._initContext({ super._initContext({
noData: this.entitiesService.noData$,
draggingEntities: this.draggingEntities$,
updateConfigItems: updateConfigItems$, updateConfigItems: updateConfigItems$,
setupResizeObserver: setupResizeObserver$, setupResizeObserver: setupResizeObserver$,
}); });