feat(admin-ui): Implement deletion of Collections

vendure-ecommerce · Jul 10, 2019 · 1d7ab26 · 1d7ab26
1 parent 051f2f3
commit 1d7ab26
Show file tree

Hide file tree

Showing 11 changed files with 293 additions and 206 deletions.
diff --git a/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html b/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html
@@ -11,6 +11,7 @@
         [collections]="items$ | async | paginate: (paginationConfig$ | async) || {}"
         [activeCollectionId]="activeCollectionId$ | async"
         (rearrange)="onRearrange($event)"
+        (deleteCollection)="deleteCollection($event)"
     ></vdr-collection-tree>
 
     <div class="collection-contents" [class.expanded]="activeCollectionId$ | async">

diff --git a/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts b/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts
@@ -1,14 +1,15 @@
 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';
+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 { _ } from '../../../core/providers/i18n/mark-for-extraction';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
+import { ModalService } from '../../../shared/providers/modal/modal.service';
 import { RearrangeEvent } from '../collection-tree/collection-tree.component';
 
 @Component({
@@ -27,6 +28,7 @@ export class CollectionListComponent
     constructor(
         private dataService: DataService,
         private notificationService: NotificationService,
+        private modalService: ModalService,
         router: Router,
         route: ActivatedRoute,
     ) {
@@ -72,6 +74,33 @@ export class CollectionListComponent
         });
     }
 
+    deleteCollection(id: string) {
+        this.modalService
+            .dialog({
+                title: _('catalog.confirm-delete-collection'),
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(response => (response ? this.dataService.collection.deleteCollection(id) : EMPTY)),
+            )
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'ProductVariant',
+                    });
+                    this.refresh();
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'ProductVariant',
+                    });
+                },
+            );
+    }
+
     closeContents() {
         const params = { ...this.route.snapshot.params };
         delete params.contents;

diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
@@ -80,6 +80,11 @@ <h4 class="dropdown-header">{{ 'catalog.move-to' | translate }}</h4>
                         <clr-icon shape="child-arrow"></clr-icon>
                         {{ item.path }}
                     </button>
+                    <div class="dropdown-divider"></div>
+                    <button class="button" vdrDropdownItem (click)="delete(collection.id)">
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
+                    </button>
                 </vdr-dropdown-menu>
             </vdr-dropdown>
         </div>

diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts
@@ -83,4 +83,8 @@ export class CollectionTreeNodeComponent implements OnInit {
     drop(event: CdkDragDrop<Collection.Fragment | RootNode<Collection.Fragment>>) {
         this.root.onDrop(event);
     }
+
+    delete(id: string) {
+        this.root.onDelete(id);
+    }
 }
diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts b/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts
@@ -25,6 +25,7 @@ export class CollectionTreeComponent implements OnChanges {
     @Input() collections: Collection.Fragment[];
     @Input() activeCollectionId: string;
     @Output() rearrange = new EventEmitter<RearrangeEvent>();
+    @Output() deleteCollection = new EventEmitter<string>();
     collectionTree: RootNode<Collection.Fragment>;
 
     ngOnChanges(changes: SimpleChanges) {
@@ -51,6 +52,10 @@ export class CollectionTreeComponent implements OnChanges {
         this.rearrange.emit(event);
     }
 
+    onDelete(id: string) {
+        this.deleteCollection.emit(id);
+    }
+
     private isRootNode<T extends HasParent>(node: T | RootNode<T>): node is RootNode<T> {
         return !node.hasOwnProperty('parent');
     }

diff --git a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html
@@ -26,7 +26,7 @@
         <td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.name }}</td>
         <td class="left align-middle" [class.private]="facet.isPrivate">
             <vdr-facet-value-chip
-                *ngFor="let value of (facet.values | slice: 0:displayLimit[facet.id] || 3)"
+                *ngFor="let value of facet.values | slice: 0:displayLimit[facet.id] || 3"
                 [facetValue]="value"
                 [removable]="false"
                 [displayFacetName]="false"
@@ -70,6 +70,7 @@
                         (click)="deleteFacet(facet.id)"
                         vdrDropdownItem
                     >
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
                         {{ 'common.delete' | translate }}
                     </button>
                 </vdr-dropdown-menu>

diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/admin-ui/src/app/catalog/components/product-list/product-list.component.html
@@ -82,6 +82,7 @@
                         (click)="deleteProduct(result.productId)"
                         vdrDropdownItem
                     >
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
                         {{ 'common.delete' | translate }}
                     </button>
                 </vdr-dropdown-menu>