@nghacks/ngmat-table-query-reflector/fesm2015/nghacks-ngmat-table-query-reflector.js

Stores and retrieves mat table states (sorting, pagination) with url query params

import { __awaiter } from 'tslib';
import { Directive, Input, NgModule } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

class NgMatTableQueryReflectorDirective {
    constructor(_router, _activatedRoute) {
        this._router = _router;
        this._activatedRoute = _activatedRoute;
        this.unsubscribeAll$ = new Subject();
    }
    ngOnInit() {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.waitForDatasourceToLoad();
            this._initialSetup();
            this.listenToStateChangeEvents();
        });
    }
    _initialSetup() {
        const activePageQuery = this.isPageQueryActive();
        if (activePageQuery) {
            this.dataSource.paginator.pageIndex = activePageQuery.page_index;
            this.dataSource.paginator.pageSize = activePageQuery.page_size;
        }
        // Activating initial Sort
        const activeSortQuery = this.isSortQueryActive();
        if (activeSortQuery) {
            const sortActiveColumn = activeSortQuery ? (activeSortQuery.sort_direction ? activeSortQuery.sort_active : null) : this.matSortActive;
            const sortable = {
                id: sortActiveColumn,
                start: activeSortQuery ? (activeSortQuery.sort_direction || null) : this.matSortDirection,
                disableClear: true
            };
            this.dataSource.sort.sort(sortable);
            if (!sortActiveColumn) {
                return;
            }
            // Material Sort Issue: https://github.com/angular/components/issues/10242
            // Picked a hack from: https://github.com/angular/components/issues/10242#issuecomment-421490991
            const activeSortHeader = this.dataSource.sort.sortables.get(sortActiveColumn);
            activeSortHeader['_setAnimationTransitionState']({
                fromState: this.dataSource.sort.direction,
                toState: 'active',
            });
        }
    }
    isSortQueryActive() {
        const queryParams = this._activatedRoute.snapshot.queryParams;
        if (queryParams.hasOwnProperty('sort_active') || queryParams.hasOwnProperty('sort_direction')) {
            return {
                sort_active: queryParams.sort_active,
                sort_direction: queryParams.sort_direction
            };
        }
        return;
    }
    isPageQueryActive() {
        const queryParams = this._activatedRoute.snapshot.queryParams;
        if (queryParams.hasOwnProperty('page_size') || queryParams.hasOwnProperty('page_index')) {
            return {
                page_size: queryParams.page_size,
                page_index: queryParams.page_index
            };
        }
        return;
    }
    listenToStateChangeEvents() {
        this.dataSource.sort.sortChange
            .pipe(takeUntil(this.unsubscribeAll$))
            .subscribe((sortChange) => {
            this._applySortChangesToUrlQueryParams(sortChange);
        });
        this.dataSource.paginator.page
            .pipe(takeUntil(this.unsubscribeAll$))
            .subscribe((pageChange) => {
            this._applyPageStateChangesToUrlQueryParams(pageChange);
        });
    }
    _applySortChangesToUrlQueryParams(sortChange) {
        const sortingAndPaginationQueryParams = {
            sort_active: sortChange.active,
            sort_direction: sortChange.direction,
        };
        this._router.navigate([], { queryParams: sortingAndPaginationQueryParams, queryParamsHandling: 'merge' });
    }
    _applyPageStateChangesToUrlQueryParams(pageChange) {
        const sortingAndPaginationQueryParams = {
            page_size: pageChange.pageSize,
            page_index: pageChange.pageIndex,
        };
        this._router.navigate([], { queryParams: sortingAndPaginationQueryParams, queryParamsHandling: 'merge' });
    }
    waitForDatasourceToLoad() {
        const titleCheckingInterval$ = interval(500);
        return new Promise((resolve) => {
            this._dataSourceChecker$ = titleCheckingInterval$.subscribe(val => {
                var _a, _b;
                if (((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.sort) && ((_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.paginator)) {
                    this._dataSourceChecker$.unsubscribe();
                    return resolve();
                }
            });
        });
    }
    ngOnDestroy() {
        this.unsubscribeAll$.next();
        this.unsubscribeAll$.complete();
    }
}
NgMatTableQueryReflectorDirective.decorators = [
    { type: Directive, args: [{
                selector: '[NgMatTableQueryReflector]'
            },] }
];
NgMatTableQueryReflectorDirective.ctorParameters = () => [
    { type: Router },
    { type: ActivatedRoute }
];
NgMatTableQueryReflectorDirective.propDecorators = {
    matSortActive: [{ type: Input }],
    matSortDirection: [{ type: Input }],
    dataSource: [{ type: Input }]
};

class NgmatTableQueryReflectorModule {
}
NgmatTableQueryReflectorModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NgMatTableQueryReflectorDirective],
                exports: [NgMatTableQueryReflectorDirective]
            },] }
];

/*
 * Public API Surface of ngmat-table-query-reflector
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgMatTableQueryReflectorDirective, NgmatTableQueryReflectorModule };
//# sourceMappingURL=nghacks-ngmat-table-query-reflector.js.map