Просмотр исходного кода

fix(admin-ui): Fix collection list "expand all" behaviour when toggling

Fixes #513
Michael Bromley 5 лет назад
Родитель
Сommit
c77af2b41f

+ 22 - 5
packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.ts

@@ -1,10 +1,18 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, SkipSelf } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+    Optional,
+    SimpleChanges,
+    SkipSelf,
+} from '@angular/core';
 import { Permission } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
 
 import { RootNode, TreeNode } from './array-to-tree';
 import { CollectionPartial, CollectionTreeComponent } from './collection-tree.component';
@@ -15,7 +23,7 @@ import { CollectionPartial, CollectionTreeComponent } from './collection-tree.co
     styleUrls: ['./collection-tree-node.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CollectionTreeNodeComponent implements OnInit {
+export class CollectionTreeNodeComponent implements OnInit, OnChanges {
     depth = 0;
     parentName: string;
     @Input() collectionTree: TreeNode<CollectionPartial>;
@@ -44,6 +52,15 @@ export class CollectionTreeNodeComponent implements OnInit {
         this.hasDeletePermission$ = permissions$.pipe(map(perms => perms.includes(Permission.DeleteCatalog)));
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        const expandAllChange = changes['expandAll'];
+        if (expandAllChange) {
+            if (expandAllChange.previousValue === true && expandAllChange.currentValue === false) {
+                this.collectionTree.children.forEach(c => (c.expanded = false));
+            }
+        }
+    }
+
     trackByFn(index: number, item: CollectionPartial) {
         return item.id;
     }