feat(admin-ui): Handle paging settings for ProductList via url

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -1,9 +1,9 @@
 <vdr-data-table [items]="products$ | async"
-                [itemsPerPage]="itemsPerPage"
-                [totalItems]="totalItems"
-                [currentPage]="currentPage"
-                (pageChange)="getPage($event)"
-                (itemsPerPageChange)="itemsPerPageChange($event)">
+                [itemsPerPage]="itemsPerPage$ | async"
+                [totalItems]="totalItems$ | async"
+                [currentPage]="currentPage$ | async"
+                (pageChange)="setPageNumber($event)"
+                (itemsPerPageChange)="setItemsPerPage($event)">
     <vdr-dt-column>ID</vdr-dt-column>
     <vdr-dt-column>Name</vdr-dt-column>
     <vdr-dt-column>Slug</vdr-dt-column>

admin-ui/src/app/catalog/components/product-list/product-list.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { map, takeUntil, tap } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { DataService } from '../../../data/providers/data.service';
-import { GetProductList, GetProductListVariables } from '../../../data/types/gql-generated-types';
-import { QueryResult } from '../../../data/types/query-result';
 
 @Component({
     selector: 'vdr-products-list',
@@ -13,21 +12,38 @@ import { QueryResult } from '../../../data/types/query-result';
 export class ProductListComponent implements OnInit, OnDestroy {
 
     products$: Observable<any[]>;
-    totalItems: number;
-    itemsPerPage = 10;
-    currentPage = 1;
-    private productsQuery: QueryResult<GetProductList, GetProductListVariables>;
+    totalItems$: Observable<number>;
+    itemsPerPage$: Observable<number>;
+    currentPage$: Observable<number>;
     private destroy$ = new Subject<void>();
 
-    constructor(private dataService: DataService) { }
+    constructor(private dataService: DataService,
+                private router: Router,
+                private route: ActivatedRoute) { }
 
     ngOnInit() {
-        this.productsQuery = this.dataService.product.getProducts(this.itemsPerPage, 0);
-        this.products$ = this.productsQuery.stream$.pipe(
-            takeUntil(this.destroy$),
-            tap(val => { this.totalItems = val.products.totalItems; }),
-            map(val => val.products.items),
+        const productsQuery = this.dataService.product.getProducts(10, 0);
+
+        const fetchPage = ([currentPage, itemsPerPage]: [number, number]) => {
+            const take = itemsPerPage;
+            const skip = (currentPage - 1) * itemsPerPage;
+            productsQuery.ref.refetch({ skip, take });
+        };
+
+        this.products$ = productsQuery.stream$.pipe(map(data => data.products.items));
+        this.totalItems$ = productsQuery.stream$.pipe(map(data => data.products.totalItems));
+        this.currentPage$ = this.route.queryParamMap.pipe(
+            map(qpm => qpm.get('page')),
+            map(page => !page ? 1 : +page),
+        );
+        this.itemsPerPage$ = this.route.queryParamMap.pipe(
+            map(qpm => qpm.get('perPage')),
+            map(perPage => !perPage ? 10 : +perPage),
         );
+
+        combineLatest(this.currentPage$, this.itemsPerPage$)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(fetchPage);
     }
 
     ngOnDestroy() {
@@ -35,15 +51,15 @@ export class ProductListComponent implements OnInit, OnDestroy {
         this.destroy$.complete();
     }
 
-    async getPage(pageNumber: number) {
-        const take = this.itemsPerPage;
-        const skip = (pageNumber - 1) * this.itemsPerPage;
-        await this.productsQuery.ref.refetch({ skip, take });
-        this.currentPage = pageNumber;
+    setPageNumber(page: number) {
+        this.setQueryParam('page', page);
+    }
+
+    setItemsPerPage(perPage: number) {
+        this.setQueryParam('perPage', perPage);
     }
 
-    itemsPerPageChange(itemsPerPage: number) {
-        this.itemsPerPage = itemsPerPage;
-        this.getPage(this.currentPage);
+    private setQueryParam(key: string, value: any) {
+        this.router.navigate(['./'], { queryParams: { [key]: value }, relativeTo: this.route, queryParamsHandling: 'merge' });
     }
 }

admin-ui/src/app/shared/components/data-table/data-table.component.ts

@@ -1,17 +1,15 @@
 import {
-    AfterViewInit,
     ChangeDetectionStrategy,
     Component,
     ContentChild,
     ContentChildren,
     EventEmitter,
     Input,
-    OnInit,
     Output,
     QueryList,
     TemplateRef,
 } from '@angular/core';
-import { PaginationInstance, PaginationService } from 'ngx-pagination';
+import { PaginationService } from 'ngx-pagination';
 import { DataTableColumnComponent } from './data-table-column.component';
 
 @Component({
@@ -21,7 +19,7 @@ import { DataTableColumnComponent } from './data-table-column.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [PaginationService],
 })
-export class DataTableComponent implements OnInit, AfterViewInit {
+export class DataTableComponent {
 
     @Input() items: any[];
     @Input() itemsPerPage: number;
@@ -31,24 +29,4 @@ export class DataTableComponent implements OnInit, AfterViewInit {
     @Output() itemsPerPageChange = new EventEmitter<number>();
     @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;
     @ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;
-    paginationConfig: PaginationInstance;
-
-    ngOnInit() {
-        this.paginationConfig = {
-            itemsPerPage: this.itemsPerPage,
-            currentPage: this.currentPage,
-            totalItems: this.totalItems,
-        };
-    }
-
-    ngOnChanges() {
-        if (this.paginationConfig) {
-            this.paginationConfig.itemsPerPage = this.itemsPerPage;
-            this.paginationConfig.currentPage = this.currentPage;
-            this.paginationConfig.totalItems = this.totalItems;
-        }
-    }
-
-    ngAfterViewInit(): void {
-    }
 }