src/app/shared/directives/agGrid/server-side.directive.ts

import { PaginatorComponent } from '@shared/components/paginator/paginator.component';
import { PageEvent } from '@app/shared/models/PageEvent';
import { PageModel } from './../../models/page/page.model';
import { AgGridAngular } from 'ag-grid-angular';
import { take, map } from 'rxjs/operators';
import { ServerSideModel } from '@shared/models/server-side.model';
import { Directive, Input, AfterViewInit, ComponentFactoryResolver, ViewContainerRef, ComponentFactory, OnInit } from '@angular/core';
import { Store, ActionsSubject } from '@ngrx/store';

import * as store from '@shared/store';
import { PageRequestInterface } from '@shared/models/page/page-request.interface';
import { ofType } from '@ngrx/effects';

/**
 * Realises serverside paging
 *
 * @author Martin Gardyan <martin.gardyan@pta.de>
 * @export
 * @class ServerSideDirective
 * @implements {OnInit}
 */
@Directive({
  selector: 'ag-grid-angular[serverside]',
  host: {},
})
export class ServerSideDirective implements OnInit {

  private _queryParameter: any;

  private _matPaginator: PaginatorComponent;
  @Input()
  public serverside: ServerSideModel;

  @Input()
  public set queryParameter(v: any) {
    if (!!v) {
      this.appState$.dispatch(
        this.serverside.loadAction({
          payload: {
            queryParameter: v,
            pageSize: this.serverside.pageSize,
          } as PageRequestInterface,
        }));
    }
    this._queryParameter = v;
  }


  /**
   * Creates an instance of ServerSideDirective.
   * 
   * @author Martin Gardyan <martin.gardyan@pta.de>
   * @param {Store<store.State>} appState$
   * @param {ComponentFactoryResolver} _resolver
   * @param {ViewContainerRef} _viewContainerRef
   * @param {ActionsSubject} _actionsSubject
   * @param {AgGridAngular} _agGrid
   * @memberof ServerSideDirective
   */
  constructor(
    protected appState$: Store<store.State>,
    private _resolver: ComponentFactoryResolver,
    private _viewContainerRef: ViewContainerRef,
    private _actionsSubject: ActionsSubject,
    private _agGrid: AgGridAngular
  ) { }

  /**
   * Initiates component
   *
   * @author Martin Gardyan <martin.gardyan@pta.de>
   * @memberof ServerSideDirective
   */
  ngOnInit() {
    this._actionsSubject
      .pipe(
        ofType(this.serverside.successAction.type),
        map(item => item.payload)
      )
      .subscribe((pagedItem: PageModel<any>) => {
        if (!this._matPaginator) {
          const paginator: ComponentFactory<PaginatorComponent> = this._resolver.resolveComponentFactory(PaginatorComponent);
          this._matPaginator = this._viewContainerRef.createComponent(paginator).instance;
        }

        this._matPaginator.length = pagedItem.totalElements;

        if (this._matPaginator.totalPages != pagedItem.totalPages) {
          this._matPaginator.totalPages = pagedItem.totalPages;
        }

        this._matPaginator.pageSize = pagedItem.pageable.pageSize || 1;
        this._matPaginator.hidePageSize = false;

        this._matPaginator.page.subscribe((selectedpage: PageEvent) => {
          this._retrievePage(selectedpage);
        });

        if (!!this._agGrid.api) {
          this._agGrid.api.setRowData(pagedItem.content)
        } else {
          this._agGrid.rowData = pagedItem.content;
        }

      });

    this._retrievePage();
  }

  /**
   * Retrieves paged data
   *
   * @author Martin Gardyan <martin.gardyan@pta.de>
   * @private
   * @param {PageEvent} [event]
   * @memberof ServerSideDirective
   */
  private _retrievePage(event?: PageEvent) {
    this.appState$.dispatch(
      this.serverside.loadAction({
        payload: {
          pageNumber: (event && event.pageIndex) || 0,
          pageSize: this.serverside.pageSize,
          queryParameter: this._queryParameter
        } as PageRequestInterface,
      })
    );
  }
}