Empty state, fixes

src/lib/listing/workflow/workflow.component.html

@@ -1,11 +1,21 @@
 <iqser-table-header
-    [listingMode]="listingModes.workflow"
     [tableHeaderLabel]="tableHeaderLabel"
+    listingMode="workflow"
 >
     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
 </iqser-table-header>
 
-<div cdkDropListGroup class="columns-wrapper">
+<iqser-empty-state
+    (action)="noDataAction.emit()"
+    *ngIf="listingComponent.entitiesService.noData$ | async"
+    [buttonIcon]="noDataButtonIcon"
+    [buttonLabel]="noDataButtonLabel"
+    [icon]="noDataIcon"
+    [showButton]="showNoDataButton"
+    [text]="noDataText"
+></iqser-empty-state>
+
+<div *ngIf="(listingComponent.entitiesService.noData$ | async) === false" cdkDropListGroup class="columns-wrapper">
     <div *ngFor="let column of config.columns" [class.dragging]="dragging"
          [class.list-can-receive]="isReceiving(column)"
          [class.list-dragging]="isDragging(column)"

src/lib/listing/workflow/workflow.component.ts

@@ -12,7 +12,7 @@ import {
     ViewChildren
 } from '@angular/core';
 import { ListingComponent } from '../listing-component.directive';
-import { Listable, ListingModes } from '../models';
+import { Listable } from '../models';
 import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import { Required } from '../../utils';
 import { LoadingService } from '../../loading';
@@ -27,7 +27,7 @@ interface WorkflowColumn<T, K> {
 }
 
 export interface WorkflowConfig<T, K> {
-    key: string;
+    columnIdentifierFn: (entity: T) => K;
     itemVersionFn: (entity: T) => string;
     columns: WorkflowColumn<T, K>[];
 }
@@ -39,7 +39,6 @@ export interface WorkflowConfig<T, K> {
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WorkflowComponent<T extends Listable, K extends string> implements OnInit {
-    readonly listingModes = ListingModes;
     @Input() headerTemplate?: TemplateRef<unknown>;
     @Input() @Required() itemTemplate!: TemplateRef<T>;
     @Input() @Required() config!: WorkflowConfig<T, K>;
@@ -47,6 +46,12 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
     @Input() itemClasses?: { [key: string]: (e: T) => boolean };
     @Input() addElementIcon?: string;
     @Input() addElementColumn?: K;
+    @Input() noDataText?: string;
+    @Input() noDataIcon?: string;
+    @Input() noDataButtonIcon?: string;
+    @Input() noDataButtonLabel?: string;
+    @Input() showNoDataButton = false;
+    @Output() readonly noDataAction = new EventEmitter<void>();
     @Output() readonly addElement = new EventEmitter<void>();
 
     dragging = false;
@@ -145,24 +150,23 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
                 this._addEntity(entity);
             }
         });
-
-        // this._computeItemHeight();
     }
 
     private _addEntity(entity: T): void {
-        this._existingEntities[entity.id] = entity;
-        const column = this._getColumnByKey(entity[this.config.key] as K);
-        if (column) {
-            if (!column.entities) {
-                column.entities = [];
-            }
-            column.entities.push(entity);
+        const column = this._getColumnByKey(this.config.columnIdentifierFn(entity));
+        if (!column) {
+            return;
         }
+        if (!column.entities) {
+            column.entities = [];
+        }
+        this._existingEntities[entity.id] = entity;
+        column.entities.push(entity);
     }
 
     private _removeEntity(entity: T): void {
         const existingEntity = this._existingEntities[entity.id];
-        const column = this._getColumnByKey(existingEntity[this.config.key] as K);
+        const column = this._getColumnByKey(this.config.columnIdentifierFn(existingEntity));
         if (column) {
             const idx = (column.entities as T[]).findIndex(item => item.id === entity.id);
             column.entities?.splice(idx, 1);