@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/reports/report-ref.ts

@@ -0,0 +1,41 @@
+import { Report, Dimentions } from '../core/models';
+import { filter, map, takeUntil } from 'rxjs/operators';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
+import { HubService } from '../core/hub.service';
+
+/** */
+export
+  class ReportRef<O = any> {
+  readonly _resize: BehaviorSubject<Dimentions>;
+  constructor(private _configuration: Report, private _hub: HubService, dim: Dimentions) {
+    this._resize = new BehaviorSubject(dim);
+  }
+  readonly _exporting = new Subject<ExportEventArgs>();
+  /** intercept user export */
+  exporting() {
+    return this._exporting.asObservable();
+  }
+  public get resize(): Observable<Dimentions> { return this._resize.asObservable(); }
+  /** listen to progress events reported by backend code */
+  public get progress(): Observable<number> {
+    return this._hub.reportProgress$.
+      pipe(
+        filter(e => e.name === this._configuration.name),
+        map(e => e.progress));
+  }
+  /** configuration options */
+  get options(): O {
+    return this._configuration.options || {}; }
+  /** configuration name */
+  get name(): string { return this._configuration.name; }
+  _destroy() {
+    this._resize.unsubscribe();
+  }
+}
+
+export interface ExportEventArgs {
+  cancel: boolean;
+  data: {
+    [key: string]: any;
+  }[];
+}

package/src/lib/reports/report-viewer.component.html

@@ -0,0 +1,2 @@
+<mat-progress-bar [mode]="progress === 0 ? 'query' : 'buffer'" [value]=progress [bufferValue]=0 [style.visibility]="progress > -1 ? 'visible':'hidden'"></mat-progress-bar>
+<ng-container #vc></ng-container>

package/src/lib/reports/report-viewer.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+
+  :last-child {
+    -ms-flex: 1 auto;
+    -webkit-flex: 1 auto;
+    flex: 1 auto;
+  }
+}

package/src/lib/reports/report-viewer.component.ts

@@ -0,0 +1,159 @@
+import { Component, ViewChild, OnDestroy, ViewContainerRef, Injector, HostListener, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { debounceTime, takeUntil, filter, tap } from 'rxjs/operators';
+import { Workbook } from '@syncfusion/ej2-excel-export';
+import { Worksheet } from '@syncfusion/ej2-excel-export/src/worksheet';
+import { Row } from '@syncfusion/ej2-excel-export/src/row';
+import { Column } from '@syncfusion/ej2-excel-export/src/column';
+import { ReportComponent } from '../core/base';
+import { Report } from '../core/models';
+import { ParamMap } from '../core/configuration';
+import { ReportRef, ExportEventArgs } from './report-ref';
+import { HubService } from '../core/hub.service';
+import { PromptService } from '../core/prompt.service';
+import { TranslateService } from '../core/translate.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { TableViewComponent } from './table/table-view.component';
+import { SessionService } from '../core/session.service';
+
+@Component({
+  selector: 'bizdoc-report-viewer',
+  templateUrl: './report-viewer.component.html',
+  styleUrls: ['./report-viewer.component.scss']
+})
+/** reportviewer component*/
+export class ReportViewerComponent implements OnChanges, OnDestroy {
+  @Input() report!: Report;
+  @Input() args: ParamMap;
+  progress = -1;
+  public get reportRef(): ReportRef {
+    return this._reportRef;
+  }
+  @ViewChild('vc', { static: true, read: ViewContainerRef }) viewContainer: ViewContainerRef;
+  @ViewChild(TableViewComponent) table: TableViewComponent;
+  private _data: any[];
+  private _instance: ReportComponent<any, any>;
+  private _reportRef: ReportRef;
+  private readonly _resizing = new BehaviorSubject({});
+  private readonly _destroy = new Subject<void>();
+  /** reportviewer ctor */
+  constructor(
+    private _http: HttpClient,
+    private _sb: PromptService,
+    private _injector: Injector,
+    private _hub: HubService,
+    private _translate: TranslateService,
+    private _session: SessionService,
+    private _factoryResolver: BizDocComponentFactoryResolver) {
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['report']) {
+      this._destroy.next();
+      this._reportRef && this._reportRef._destroy();
+      this._reportRef = new ReportRef(this.report, this._hub, this._dim());
+      if (this.report.template)
+        this._createView();
+      else
+        this._instance = this.table;
+      // listen to progress
+      this._hub.reportProgress$.
+        pipe(filter(e =>
+          e.name === this.report.name),
+          takeUntil(this._destroy),
+          debounceTime(50)).
+        subscribe(i => {
+          if (this.progress > 0) this.progress = i.progress;
+        });
+      this._resizing.pipe(debounceTime(150)).subscribe(() => this._reportRef._resize.next(this._dim()));
+    }
+  }
+  /** */
+  private _createView() {
+    const componentFactory = this._factoryResolver.resolve(this.report.template);
+    this.viewContainer.clear();
+    const injector = Injector.create([{ provide: ReportRef, useValue: this._reportRef }], this._injector);
+    const componentRef = this.viewContainer.createComponent(componentFactory, 0, injector);
+
+    this._instance = componentRef.instance as ReportComponent<any, any>;
+  }
+  @HostListener('window:resize')
+  resize() {
+    this._resizing.next({}); 
+  }
+  private _dim(): { height: number; width: number } {
+    const { width, height } = (this.viewContainer.element.nativeElement as HTMLDivElement).parentElement.getBoundingClientRect();
+    return { width: Math.floor(width - 2), height: Math.floor(height) };
+  }
+  /** */
+  execute() {
+    this.progress = 0;
+    return this._http.post<any[]>(`/api/report/${this.report.name}`, this.args).
+      pipe(tap(r => {
+        this._instance.onBind(r, this.args);
+        this._data = r;
+        this.progress = -1;
+      }, () => {
+        this._sb.error();
+        this.progress = -1;
+      })).toPromise()
+  }
+
+  explore(item: any) {
+    const args = {};
+    const keys = this.report.fields.filter(f => f.key);
+    if (keys.length === 0)
+      throw `report ${this.report.name} item model missing key attribute`;
+    keys.forEach(f => args[f.name] = item[f.name]);
+    return this._http.put<any[]>(`/api/report/${this.report.name}`, args).toPromise();
+  }
+
+  /** */
+  exportExcel() {
+    const args = { data: this._data.map(r => { return { ...r } }) } as ExportEventArgs;
+    this._reportRef._exporting.next(args);
+    if (args.cancel) return;
+    const rows = [{
+      index: 1,
+      cells: this.report.columns.map((c, j) => ({
+        index: j + 1, value: c.label || c.name,
+        style: {
+          bold: true,
+          hAlign: c.type === 'Number' || c.type === 'Currency' ? 'right' : 'general'
+        }
+      } as Cell))
+    }] as Row[];
+    args.data.forEach((r, i) => rows.push(
+      {
+        index: i + 2,
+        cells: this.report.columns.map((c, j) => ({
+          index: j + 1, value: r[c.name],
+          style: {
+            hAlign: c.type === 'Number' || c.type === 'Currency' ? 'right' : 'general'
+          }
+        }))
+      } as Row));
+    const book = new Workbook(
+      {
+        worksheets: [
+          {
+          enableRtl: this._session.inverse,
+            name: this._translate.get('SheetN', 1),
+            columns: this.report.columns.map((_, i) => ({ index: i + 1, width: 250 } as Column)),
+            rows
+          } as Worksheet
+        ],
+      },
+      'xlsx'
+    );
+    book.save(`${this.report.title}.xlsx`);
+  }
+
+  ngOnDestroy(): void {
+    this._reportRef._destroy();
+    this._resizing.complete();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Cell { }

package/src/lib/reports/report.mobile.component.html

@@ -0,0 +1,17 @@
+<mat-toolbar>
+  <button mat-icon-button (click)="viewer.execute()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="viewer.exportExcel()" bizdocTooltip="{{'Download' | translate}}"><mat-icon>save_alt</mat-icon></button>
+  <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate" *ngIf="report.guide"><mat-icon>help_outline</mat-icon></button>
+  <button mat-icon-button (click)="clearFilter()" [bizdocTooltip]="'Clear' | translate" *ngIf="hasFilters" [disabled]="!anyFilters"><mat-icon>clear_all</mat-icon></button>
+  <button mat-icon-button (click)="filter($event)" bizdocTooltip="{{'Filter' | translate}}" *ngIf="hasFilters"><mat-icon [class.filled]="anyFilters">filter_list</mat-icon></button>
+</mat-toolbar>
+<mat-sidenav-container class="page-container">
+  <mat-sidenav-content>
+    <bizdoc-report-viewer [report]="report" [args]="args"></bizdoc-report-viewer>
+  </mat-sidenav-content>
+  <mat-sidenav mode="over" opened="false" #filter position="end">
+    <bizdoc-report-arguments *ngIf="viewer.reportRef" [args]="args" (argsChange)="argsChange($event)" [reportRef]="viewer.reportRef"
+                             [template]="report.argumentsTemplate" [arguments]="report.arguments"></bizdoc-report-arguments>
+  </mat-sidenav>
+</mat-sidenav-container>

package/src/lib/reports/report.mobile.component.scss

@@ -0,0 +1,7 @@
+.contents {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+

package/src/lib/reports/report.mobile.component.ts

@@ -0,0 +1,117 @@
+import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Report, FieldType } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { PromptService } from '../core/prompt.service';
+import { WindowTitleService } from '../core/window-title.service';
+import { GuideService } from '../core/guide/guide.service';
+import { ReportViewerComponent } from './report-viewer.component';
+import { ParamMap } from '../core/configuration';
+
+@Component({
+  selector: 'bizdoc-report',
+  templateUrl: './report.mobile.component.html',
+  styleUrls: ['./report.mobile.component.scss']
+})
+/** reportviewer component*/
+export class ReportComponent implements OnInit, OnDestroy {
+  report: Report;
+  item?: any;
+  args: ParamMap = {};
+  mode: 'explore' | 'filter' = 'filter';
+  @ViewChild(MatSidenav, { static: true }) filter: MatSidenav;
+  @ViewChild(ReportViewerComponent, { static: true }) viewer: ReportViewerComponent;
+  hasFilters: boolean;
+  anyFilters: boolean;
+  private _navigating: boolean;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _title: WindowTitleService,
+    private _route: ActivatedRoute,
+    private _session: SessionService,
+    private _cd: ChangeDetectorRef,
+    private _sb: PromptService,
+    private _guide: GuideService) { }
+  ngOnInit(): void {
+    this._route.params.pipe(takeUntil(this._destroy)).subscribe(p => {
+      const id = p['id'];
+      this.report = this._session.profile.reports.find(r => r.name === id);
+      this.hasFilters = (this.report.arguments && this.report.arguments.length > 0) || this.report.argumentsTemplate !== undefined;
+      this._cd.detectChanges();
+      this._title.set(this.report.title);
+      this.args = this._fromQueryArgs(this._route.snapshot.queryParams);
+      this.anyFilters = Object.keys(this.args).length > 0;
+      this._navigating = true;
+      this.viewer.execute();
+    });
+    this._route.queryParams.pipe(takeUntil(this._destroy)).subscribe(p => {
+      if (!this._navigating) {
+        this.args = this._fromQueryArgs(p);
+        this.viewer.execute();
+      } else
+        this._navigating = false;
+    });
+  }
+  guide() {
+    this._guide.start(this.report.guide);
+  }
+  clearFilter() {
+    this.args = {};
+    this.anyFilters = false;
+    this._cd.detectChanges();
+    this.viewer.execute();
+  }
+  /**
+   *
+   * @param qargs
+   */
+  private _fromQueryArgs(qargs: any): any {
+    const args = {};
+    Object.keys(qargs).forEach(k => {
+      const val = qargs[k];
+      if (val) {
+        const argument = this.report.arguments.find(a => a.name === k);
+        if (argument)
+          switch (argument.type) {
+            case FieldType.Date:
+              args[k] = new Date(val);
+              break;
+            case FieldType.Checkbox:
+              args[k] = val === 'true';
+              break;
+            default:
+              args[k] = val;
+          }
+        else
+          args[k] = val;
+      }
+    });
+    return args;
+  }
+  filterToggle() {
+    this.mode = 'filter';
+    this.filter.toggle().then(() => this.viewer.resize());
+  }
+  /**
+   *
+   * @param item
+   */
+  click(item: any) {
+    this.viewer.explore(item).then(r => {
+      this.item = r;
+      this.mode = 'explore';
+    }, () => this._sb.error()
+    );
+  }
+  argsChange(args) {
+    this.args = args;
+    this.viewer.execute();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/reports/report.pane.component.html

@@ -0,0 +1,9 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="viewer.execute()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="viewer.exportExcel()" bizdocTooltip="{{'Download' | translate}}"><mat-icon>save_alt</mat-icon></button>
+  <button mat-icon-button (click)="guide($event)" [bizdocTooltip]="'Help' | translate" *ngIf="report.guide"><mat-icon>help_outline</mat-icon></button>
+  <button mat-icon-button (click)="clearFilter()" [bizdocTooltip]="'Clear' | translate" *ngIf="hasFilters" [disabled]="!anyFilters"><mat-icon>clear_all</mat-icon></button>
+  <button mat-icon-button (click)="filter($event)" bizdocTooltip="{{'Filter' | translate}}" *ngIf="hasFilters"><mat-icon [class.filled]="anyFilters">filter_list</mat-icon></button>
+</mat-toolbar>
+<bizdoc-report-viewer [report]="report" [args]="args" fxFlex></bizdoc-report-viewer>

package/src/lib/reports/report.pane.component.scss

@@ -0,0 +1,9 @@
+:host {
+  min-width: 560px;
+  display: block;
+  height: 100%;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}

package/src/lib/reports/report.pane.component.ts

@@ -0,0 +1,88 @@
+import { Component, OnInit, OnDestroy, ViewChild, HostListener, ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { GuideService } from '../core/guide/guide.service';
+import { Report } from '../core/models';
+import { PromptService } from '../core/prompt.service';
+import { SessionService } from '../core/session.service';
+import { PaneRef } from '../core/slots/pane-ref';
+import { ParamMap } from '../core/configuration';
+import { ReportViewerComponent } from './report-viewer.component';
+import { Popup } from '../core/popup/popup.service';
+import { ReportArgumentsComponent } from './arguments-component';
+
+@Component({
+  selector: 'bizdoc-report.pane',
+  templateUrl: './report.pane.component.html',
+  styleUrls: ['./report.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }})
+/** report slot component*/
+export class ReportPaneComponent implements OnInit, OnDestroy {
+  report: Report;
+  args: ParamMap = {};
+  @ViewChild(ReportViewerComponent, { static: true }) viewer: ReportViewerComponent;
+  hasFilters: boolean;
+  anyFilters: boolean;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _session: SessionService,
+    private _pane: PaneRef<ReportPaneComponent>,
+    private _popup: Popup,
+    private _cd: ChangeDetectorRef,
+    private _sb: PromptService,
+    private _guide: GuideService) {
+  }
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      const id = p['id'];
+      this.report = this._session.profile.reports.find(r => r.name === id);
+      this.hasFilters = (this.report.arguments && this.report.arguments.length > 0) || this.report.argumentsTemplate !== undefined;
+      this._pane.title = this.report.title;
+      this._cd.detectChanges();
+    });
+    this._pane.queryParamsChange.subscribe(() =>
+      this.viewer.execute());
+    this._pane.resized.subscribe(() => this.viewer.resize());
+  }
+  filter(evt: Event) {
+    this._popup.open(ReportArgumentsComponent, evt.currentTarget as HTMLElement).opened.
+      subscribe(f => {
+        f.arguments = this.report.arguments;
+        f.template = this.report.argumentsTemplate;
+        f.reportRef = this.viewer.reportRef;
+        f.args = this.args;
+        f.argsChange.pipe(takeUntil(this._destroy), debounceTime(150)).subscribe(a => {
+          this.args = a;
+          this.anyFilters = Object.keys(a).length > 0;
+          this._cd.detectChanges();
+          this.viewer.execute();
+        });
+      });
+  }
+  clearFilter() {
+    this.args = {};
+    this.anyFilters = false;
+    this._cd.detectChanges(); 
+    this.viewer.execute();
+  }
+  /**
+   *
+   * @param item
+   */
+  click(item: any) {
+    this.viewer.explore(item).then(r => {
+    }, () => this._sb.error()
+    );
+  }
+  @HostListener('window:keydown.f1', ['$event'])
+  guide(evt?: Event | KeyboardEvent) {
+    this._guide.start(this.report.guide);
+    evt && evt.preventDefault();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/reports/reports-menu.component.html

@@ -0,0 +1,9 @@
+<!--<span class="mat-subheader">BizDoc</span>
+<h1 class="mat-display-1">{{'Reports' | translate}}</h1>-->
+
+<mat-nav-list>
+  <mat-list-item *ngFor="let r of reports" (click)="change.emit()" [slotRouterLink]='["reports", r.name]' slotRouterLinkActive="active">
+    <mat-icon matListIcon [bizdocTooltip]="r.title" bizdocTooltipPosition="end" [bizdocTooltipDisabled]="!collapsed">{{r.icon}}</mat-icon>
+    <span matLine>{{r.title}}</span>
+  </mat-list-item>
+</mat-nav-list>

package/src/lib/reports/reports-menu.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Report } from '../core/models';
+import { SessionService } from '../core/session.service';
+
+
+@Component({
+  selector: 'bizdoc-reports-menu',
+  templateUrl: './reports-menu.component.html',
+  animations: []
+})
+export
+  class ReportsMenuComponent {
+  @Input() collapsed: boolean;
+  @Output() readonly change = new EventEmitter();
+  readonly reports: Report[];
+  constructor(session: SessionService) {
+    this.reports = session.profile.reports;
+
+  }
+}

package/src/lib/reports/substitution/substitution.component.html

@@ -0,0 +1,26 @@
+<table mat-table matSort [dataSource]="dataSource" style="width: 100%" @list>
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.number}} </td>
+  </ng-container>
+  <ng-container matColumnDef="substituteId">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Who' | translate}}</th>
+    <td mat-cell *matCellDef="let element">
+        <bizdoc-identity-name [identity]="element.substituteId" [by]="element.byId"></bizdoc-identity-name>
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Action' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> <span *ngIf="element.action">{{element.actionId | action : 'past'}} {{element.replied | amTimeAgo}}</span></td>
+  </ng-container>
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Status' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.stateId | state}} </td>
+  </ng-container>
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Value' | translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.value}} </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
+  <tr mat-row [@item]="dataSource.data.length" *matRowDef="let element; columns: displayColumns;"></tr>
+</table>

package/src/lib/reports/substitution/substitution.component.ts

@@ -0,0 +1,34 @@
+import { Component, ViewChild } from "@angular/core";
+import { ReportComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import { listAnimation } from "../../core/animations";
+
+@Component({
+  templateUrl: 'substitution.component.html',
+  animations: [listAnimation]
+})
+@BizDoc({
+  selector: 'bizdoc-substitution'
+})
+export
+  class SubstitutionComponent implements ReportComponent<Item, any> {
+  readonly displayColumns = ['number', 'substituteId', 'action', 'state'];
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  dataSource: MatTableDataSource<any>;
+  onBind(result: any) {
+    this.dataSource = new MatTableDataSource(result);
+    this.dataSource.sort = this.sort;
+  }
+}
+interface Item {
+  number: string;
+  substituteId: string;
+  value?: number;
+  replied?: Date;
+  subject?: string;
+  action?: string;
+  state: string;
+  byId?: string;
+}

package/src/lib/reports/table/table-view.component.html

@@ -0,0 +1,8 @@
+<table mat-table matSort [dataSource]="dataSource" @list>
+  <ng-container *ngFor="let c of columns" [matColumnDef]="c.name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label || c.name}}</th>
+    <td mat-cell *matCellDef="let element"> {{element[c.name]}} </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row @item *matRowDef="let element; columns: displayedColumns;" (click)="rowClick(element)"></tr>
+</table>

package/src/lib/reports/table/table-view.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { FieldInfo } from '../../core/models';
+import { ReportComponent } from '../../core/base';
+import { listAnimation } from '../../core/animations';
+
+@Component({
+  selector: 'bizdoc-table-view',
+  templateUrl: './table-view.component.html',
+  styleUrls: ['./table-view.component.scss'],
+  animations: [listAnimation]
+})
+/** table-view component*/
+export class TableViewComponent implements ReportComponent<any, any>, OnInit {
+  @Input() columns!: FieldInfo[];
+  @Input() selectable: boolean;
+  @Output() readonly itemClick = new EventEmitter();
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  dataSource: MatTableDataSource<any>;
+  displayedColumns: string[];
+  ngOnInit(): void {
+    this.displayedColumns = this.columns.filter(c => !c.hidden).map(c => c.name);
+  }
+  onBind(result: any) {
+    this.dataSource = new MatTableDataSource(result);
+    this.dataSource.sort = this.sort;
+  }
+  rowClick(item: any) {
+    if (this.selectable)
+      this.itemClick.emit(item);
+  }
+}

package/src/lib/reports/tasks/tasks.component.html

@@ -0,0 +1,21 @@
+<ejs-kanban (dragStop)="drag($event)" [allowDragAndDrop]="allowDragAndDrop" [swimlaneSettings]="swimlaneSettings"
+            [cardSettings]="cardSettings" [dataSource]="dataSource" keyField="stateId" [columns]="columns"
+            height="auto"
+            (cardRendered)='cardRendered($event)'>
+</ejs-kanban>
+<ng-template #cardTemplate let-data>
+  <div class='card-template'>
+    <div class='e-card-header'>
+      <div class='e-card-header-caption'>
+        <div class='e-card-header-title e-tooltip-text'><a (click)="preview(data.id)">#{{data.number}}</a></div>
+      </div>
+    </div>
+    <div class='e-card-content e-tooltip-text'>
+      <div class='e-text'>{{data.subject}}</div>
+    </div>
+    <!--<div class='e-card-custom-footer'>
+      <div class="e-card-tag-field e-tooltip-text" *ngFor="let tag of data.tags"></div>
+      <div class='e-card-avatar'></div>
+    </div>-->
+  </div>
+</ng-template>