From 517fcd009bac52855138ce4e899616af16434c46 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Fri, 18 Oct 2019 15:46:26 +0200 Subject: [PATCH] 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. --- .../collection-list.component.html | 15 +------- .../collection-list.component.ts | 36 ++++++++----------- .../collection-tree-node.component.ts | 18 +++++----- .../collection-tree.component.ts | 9 ++--- 4 files changed, 28 insertions(+), 50 deletions(-) diff --git a/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html b/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html index 88b1774bab..576cd84d58 100644 --- a/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html +++ b/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html @@ -9,7 +9,7 @@
-
- - -
diff --git a/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts b/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts index 5bb824818a..27d0696eeb 100644 --- a/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts +++ b/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 - implements OnInit { +export class CollectionListComponent implements OnInit { activeCollectionId$: Observable; activeCollectionTitle$: Observable; - paginationConfig$: Observable; + items$: Observable; + private queryResult: QueryResult; 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(); + } } diff --git a/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts b/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts index 61212fa2b9..574cadf715 100644 --- a/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts +++ b/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; + @Input() collectionTree: TreeNode; @Input() activeCollectionId: string; hasUpdatePermission$: Observable; hasDeletePermission$: Observable; @@ -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, 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>) { + drop(event: CdkDragDrop>) { moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex); this.root.onDrop(event); } diff --git a/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts b/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts index b74cbee2ac..6c5b90c720 100644 --- a/packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts +++ b/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; @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(); @Output() deleteCollection = new EventEmitter(); - collectionTree: RootNode; + collectionTree: RootNode; ngOnChanges(changes: SimpleChanges) { if ('collections' in changes && this.collections) { @@ -34,8 +35,8 @@ export class CollectionTreeComponent implements OnChanges { } } - onDrop(event: CdkDragDrop>) { - const item = event.item.data as Collection.Fragment; + onDrop(event: CdkDragDrop>) { + const item = event.item.data as CollectionPartial; const newParent = event.container.data; const newParentId = newParent.id; if (newParentId == null) {