fix(admin-ui): Remove paging from CollectionList

Due to the way we display nested Collections, paging is not possible (e.g loading a child but not the parent Collection in the first 10 results will display an orphaned child Collection). Instead we need to fetch all and use other mechanisms to manage larger lists - filtering and expand/collapse.

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

@@ -9,7 +9,7 @@
 </vdr-action-bar>
 <div class="collection-wrapper">
     <vdr-collection-tree
-        [collections]="items$ | async | paginate: (paginationConfig$ | async) || {}"
+        [collections]="items$ | async"
         [activeCollectionId]="activeCollectionId$ | async"
         (rearrange)="onRearrange($event)"
         (deleteCollection)="deleteCollection($event)"
@@ -30,16 +30,3 @@
         </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>

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

@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { PaginationInstance } from 'ngx-pagination';
 import { combineLatest, EMPTY, Observable } from 'rxjs';
 import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
-import { BaseListComponent } from '../../../common/base-list.component';
-import { GetCollectionList } from '../../../common/generated-types';
+import { Collection, GetCollectionList } from '../../../common/generated-types';
 import { _ } from '../../../core/providers/i18n/mark-for-extraction';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
+import { QueryResult } from '../../../data/query-result';
 import { ModalService } from '../../../shared/providers/modal/modal.service';
 import { RearrangeEvent } from '../collection-tree/collection-tree.component';
 
@@ -18,34 +17,23 @@ import { RearrangeEvent } from '../collection-tree/collection-tree.component';
     styleUrls: ['./collection-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CollectionListComponent
-    extends BaseListComponent<GetCollectionList.Query, GetCollectionList.Items>
-    implements OnInit {
+export class CollectionListComponent implements OnInit {
     activeCollectionId$: Observable<string | null>;
     activeCollectionTitle$: Observable<string>;
-    paginationConfig$: Observable<PaginationInstance>;
+    items$: Observable<GetCollectionList.Items[]>;
+    private queryResult: QueryResult<any>;
 
     constructor(
         private dataService: DataService,
         private notificationService: NotificationService,
         private modalService: ModalService,
-        router: Router,
-        route: ActivatedRoute,
-    ) {
-        super(router, route);
-        super.setQueryFn(
-            (...args: any[]) => this.dataService.collection.getCollections(...args),
-            data => data.collections,
-        );
-    }
+        private router: Router,
+        private route: ActivatedRoute,
+    ) {}
 
     ngOnInit() {
-        super.ngOnInit();
-
-        this.paginationConfig$ = combineLatest(this.itemsPerPage$, this.currentPage$, this.totalItems$).pipe(
-            map(([itemsPerPage, currentPage, totalItems]) => ({ itemsPerPage, currentPage, totalItems })),
-        );
-
+        this.queryResult = this.dataService.collection.getCollections(99999, 0);
+        this.items$ = this.queryResult.mapStream(data => data.collections.items);
         this.activeCollectionId$ = this.route.paramMap.pipe(
             map(pm => pm.get('contents')),
             distinctUntilChanged(),
@@ -106,4 +94,8 @@ export class CollectionListComponent
         delete params.contents;
         this.router.navigate(['./', params], { relativeTo: this.route, queryParamsHandling: 'preserve' });
     }
+
+    private refresh() {
+        this.queryResult.ref.refetch();
+    }
 }

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

@@ -4,10 +4,8 @@ import { DataService } from '@vendure/admin-ui/src/app/data/providers/data.servi
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
-import { Collection } from '../../../common/generated-types';
-
 import { RootNode, TreeNode } from './array-to-tree';
-import { CollectionTreeComponent } from './collection-tree.component';
+import { CollectionPartial, CollectionTreeComponent } from './collection-tree.component';
 
 @Component({
     selector: 'vdr-collection-tree-node',
@@ -18,7 +16,7 @@ import { CollectionTreeComponent } from './collection-tree.component';
 export class CollectionTreeNodeComponent implements OnInit {
     depth = 0;
     parentName: string;
-    @Input() collectionTree: TreeNode<Collection.Fragment>;
+    @Input() collectionTree: TreeNode<CollectionPartial>;
     @Input() activeCollectionId: string;
     hasUpdatePermission$: Observable<boolean>;
     hasDeletePermission$: Observable<boolean>;
@@ -43,11 +41,11 @@ export class CollectionTreeNodeComponent implements OnInit {
         this.hasDeletePermission$ = permissions$.pipe(map(perms => perms.includes('DeleteCatalog')));
     }
 
-    trackByFn(index: number, item: Collection.Fragment) {
+    trackByFn(index: number, item: CollectionPartial) {
         return item.id;
     }
 
-    getMoveListItems(collection: Collection.Fragment): Array<{ path: string; id: string }> {
+    getMoveListItems(collection: CollectionPartial): Array<{ path: string; id: string }> {
         const visit = (
             node: TreeNode<any>,
             parentPath: string[],
@@ -66,7 +64,7 @@ export class CollectionTreeNodeComponent implements OnInit {
         return visit(this.root.collectionTree, [], []);
     }
 
-    move(collection: Collection.Fragment, parentId: string) {
+    move(collection: CollectionPartial, parentId: string) {
         this.root.onMove({
             index: 0,
             parentId,
@@ -74,7 +72,7 @@ export class CollectionTreeNodeComponent implements OnInit {
         });
     }
 
-    moveUp(collection: Collection.Fragment, currentIndex: number) {
+    moveUp(collection: CollectionPartial, currentIndex: number) {
         if (!collection.parent) {
             return;
         }
@@ -85,7 +83,7 @@ export class CollectionTreeNodeComponent implements OnInit {
         });
     }
 
-    moveDown(collection: Collection.Fragment, currentIndex: number) {
+    moveDown(collection: CollectionPartial, currentIndex: number) {
         if (!collection.parent) {
             return;
         }
@@ -96,7 +94,7 @@ export class CollectionTreeNodeComponent implements OnInit {
         });
     }
 
-    drop(event: CdkDragDrop<Collection.Fragment | RootNode<Collection.Fragment>>) {
+    drop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>) {
         moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex);
         this.root.onDrop(event);
     }

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

@@ -14,6 +14,7 @@ import { Collection } from '../../../common/generated-types';
 import { arrayToTree, HasParent, RootNode } from './array-to-tree';
 
 export type RearrangeEvent = { collectionId: string; parentId: string; index: number };
+export type CollectionPartial = Pick<Collection.Fragment, 'id' | 'parent' | 'name'>;
 
 @Component({
     selector: 'vdr-collection-tree',
@@ -22,11 +23,11 @@ export type RearrangeEvent = { collectionId: string; parentId: string; index: nu
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollectionTreeComponent implements OnChanges {
-    @Input() collections: Collection.Fragment[];
+    @Input() collections: CollectionPartial[];
     @Input() activeCollectionId: string;
     @Output() rearrange = new EventEmitter<RearrangeEvent>();
     @Output() deleteCollection = new EventEmitter<string>();
-    collectionTree: RootNode<Collection.Fragment>;
+    collectionTree: RootNode<CollectionPartial>;
 
     ngOnChanges(changes: SimpleChanges) {
         if ('collections' in changes && this.collections) {
@@ -34,8 +35,8 @@ export class CollectionTreeComponent implements OnChanges {
         }
     }
 
-    onDrop(event: CdkDragDrop<Collection.Fragment | RootNode<Collection.Fragment>>) {
-        const item = event.item.data as Collection.Fragment;
+    onDrop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>) {
+        const item = event.item.data as CollectionPartial;
         const newParent = event.container.data;
         const newParentId = newParent.id;
         if (newParentId == null) {