| /******************************************************************************** |
| * Copyright (c) 2020 Contributors to the Eclipse Foundation |
| * |
| * See the NOTICE file(s) distributed with this work for additional |
| * information regarding copyright ownership. |
| * |
| * This program and the accompanying materials are made available under the |
| * terms of the Eclipse Public License v. 2.0 which is available at |
| * http://www.eclipse.org/legal/epl-2.0. |
| * |
| * SPDX-License-Identifier: EPL-2.0 |
| ********************************************************************************/ |
| 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(query: any) { |
| if (!!query) { |
| this.appState$.dispatch( |
| this.serverside.loadAction({ |
| payload: { |
| queryParameter: query, |
| pageSize: this.serverside.pageSize, |
| } as PageRequestInterface, |
| })); |
| } |
| this._queryParameter = query; |
| } |
| |
| |
| /** |
| * 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, |
| }) |
| ); |
| } |
| } |