fix(admin-ui): Paginate Collections list

Closes #114

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

@@ -8,7 +8,7 @@
 </vdr-action-bar>
 <div class="collection-wrapper">
     <vdr-collection-tree
-        [collections]="items$ | async"
+        [collections]="items$ | async | paginate: (paginationConfig$ | async) || {}"
         [activeCollectionId]="activeCollectionId$ | async"
         (rearrange)="onRearrange($event)"
     ></vdr-collection-tree>
@@ -28,3 +28,16 @@
         </vdr-collection-contents>
     </div>
 </div>
+<div class="paging-controls">
+    <vdr-items-per-page-controls
+        [itemsPerPage]="itemsPerPage$ | async"
+        (itemsPerPageChange)="setItemsPerPage($event)"
+    ></vdr-items-per-page-controls>
+    <vdr-pagination-controls
+        *ngIf="totalItems$ | async"
+        [currentPage]="currentPage$ | async"
+        [itemsPerPage]="itemsPerPage$ | async"
+        [totalItems]="totalItems$ | async"
+        (pageChange)="setPageNumber($event)"
+    ></vdr-pagination-controls>
+</div>

admin-ui/src/app/catalog/components/collection-list/collection-list.component.scss

@@ -12,6 +12,8 @@
 
     vdr-collection-tree {
         flex: 1;
+        height: 100%;
+        overflow: auto;
     }
 
     .collection-contents {
@@ -38,3 +40,10 @@
         }
     }
 }
+
+.paging-controls {
+    padding-top: 6px;
+    border-top: 1px solid $color-grey-200;
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { PaginationInstance } from 'ngx-pagination';
 import { combineLatest, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 
@@ -21,6 +22,7 @@ export class CollectionListComponent
     implements OnInit {
     activeCollectionId$: Observable<string | null>;
     activeCollectionTitle$: Observable<string>;
+    paginationConfig$: Observable<PaginationInstance>;
 
     constructor(
         private dataService: DataService,
@@ -30,14 +32,18 @@ export class CollectionListComponent
     ) {
         super(router, route);
         super.setQueryFn(
-            (...args: any[]) => this.dataService.collection.getCollections(99999, 0),
+            (...args: any[]) => this.dataService.collection.getCollections(...args),
             data => data.collections,
         );
     }
 
     ngOnInit() {
         super.ngOnInit();
 
+        this.paginationConfig$ = combineLatest(this.itemsPerPage$, this.currentPage$, this.totalItems$).pipe(
+            map(([itemsPerPage, currentPage, totalItems]) => ({ itemsPerPage, currentPage, totalItems })),
+        );
+
         this.activeCollectionId$ = this.route.paramMap.pipe(
             map(pm => pm.get('contents')),
             distinctUntilChanged(),
@@ -69,6 +75,6 @@ export class CollectionListComponent
     closeContents() {
         const params = { ...this.route.snapshot.params };
         delete params.contents;
-        this.router.navigate(['./', params], { relativeTo: this.route });
+        this.router.navigate(['./', params], { relativeTo: this.route, queryParamsHandling: 'preserve' });
     }
 }

admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

@@ -24,7 +24,11 @@
             </div>
             <div class="flex-spacer"></div>
             <vdr-chip *ngIf="collection.isPrivate">{{ 'catalog.private' | translate }}</vdr-chip>
-            <a class="btn btn-link btn-sm" [routerLink]="['./', { contents: collection.id }]">
+            <a
+                class="btn btn-link btn-sm"
+                [routerLink]="['./', { contents: collection.id }]"
+                queryParamsHandling="preserve"
+            >
                 <clr-icon shape="view-list"></clr-icon>
                 {{ 'catalog.view-contents' | translate }}
             </a>

admin-ui/src/app/core/components/main-nav/main-nav.component.html

@@ -17,7 +17,12 @@
                     </a>
                 </li>
                 <li>
-                    <a class="nav-link" [routerLink]="['/catalog', 'collections']" routerLinkActive="active">
+                    <a
+                        class="nav-link"
+                        [routerLink]="['/catalog', 'collections']"
+                        [queryParams]="{ perPage: 25 }"
+                        [class.active]="isLinkActive('/catalog/collections')"
+                    >
                         <clr-icon shape="folder-open" size="20"></clr-icon>
                         {{ 'nav.collections' | translate }}
                     </a>
@@ -27,7 +32,7 @@
                         class="nav-link"
                         [routerLink]="['/catalog', 'assets']"
                         [queryParams]="{ perPage: 25 }"
-                        routerLinkActive="active"
+                        [class.active]="isLinkActive('/catalog/assets')"
                     >
                         <clr-icon shape="image-gallery" size="20"></clr-icon>
                         {{ 'nav.assets' | translate }}

admin-ui/src/app/core/components/main-nav/main-nav.component.ts

@@ -1,8 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'vdr-main-nav',
     templateUrl: './main-nav.component.html',
     styleUrls: ['./main-nav.component.scss'],
 })
-export class MainNavComponent {}
+export class MainNavComponent {
+    constructor(private route: ActivatedRoute, private router: Router) {}
+
+    /**
+     * Work-around for routerLinkActive on links which include queryParams.
+     * See https://github.com/angular/angular/issues/13205
+     */
+    isLinkActive(route: string): boolean {
+        return this.router.url.startsWith(route);
+    }
+}