feat(admin-ui): Implement deletion of ProductVariants

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -155,6 +155,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         (updateProductOption)="updateProductOption($event)"
                         (selectionChange)="selectedVariantIds = $event"
                         (selectFacetValueClick)="selectVariantFacetValue($event)"
+                        (deleteVariant)="deleteVariant($event)"
                     ></vdr-product-variants-list>
                 </section>
             </clr-tab-content>

admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts

@@ -2,8 +2,8 @@ import { Location } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { combineLatest, merge, Observable } from 'rxjs';
-import { distinctUntilChanged, map, mergeMap, take, withLatestFrom } from 'rxjs/operators';
+import { combineLatest, EMPTY, merge, Observable } from 'rxjs';
+import { distinctUntilChanged, map, mergeMap, switchMap, take, withLatestFrom } from 'rxjs/operators';
 import { normalizeString } from 'shared/normalize-string';
 import { CustomFieldConfig } from 'shared/shared-types';
 import { notNullOrUndefined } from 'shared/shared-utils';
@@ -253,6 +253,34 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         );
     }
 
+    deleteVariant(id: string) {
+        this.modalService
+            .dialog({
+                title: _('catalog.confirm-delete-product-variant'),
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(response =>
+                    response ? this.productDetailService.deleteProductVariant(id, this.id) : EMPTY,
+                ),
+            )
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'ProductVariant',
+                    });
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'ProductVariant',
+                    });
+                },
+            );
+    }
+
     private displayFacetValueModal(): Observable<string[] | undefined> {
         return this.productDetailService.getFacets().pipe(
             mergeMap(facets =>

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

@@ -28,11 +28,27 @@
                         </clr-input-container>
                     </vdr-title-input>
                 </div>
-                <div>
+                <div class="right-controls">
                     <clr-toggle-wrapper>
                         <input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
                         <label>{{ 'common.enabled' | translate }}</label>
                     </clr-toggle-wrapper>
+                    <vdr-dropdown>
+                        <button class="icon-button" vdrDropdownTrigger>
+                            <clr-icon shape="ellipsis-vertical"></clr-icon>
+                        </button>
+                        <vdr-dropdown-menu vdrPosition="bottom-right">
+                            <button
+                                type="button"
+                                class="delete-button"
+                                (click)="deleteVariantClick(variant.id)"
+                                vdrDropdownItem
+                            >
+                                <clr-icon shape="trash" class="is-danger"></clr-icon>
+                                {{ 'common.delete' | translate }}
+                            </button>
+                        </vdr-dropdown-menu>
+                    </vdr-dropdown>
                 </div>
             </div>
             <div class="card-block">

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

@@ -59,6 +59,10 @@
         }
     }
 
+    .right-controls {
+        display: flex;
+    }
+
     .variant-form-input-row {
         display: flex;
         flex-wrap: wrap;

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

@@ -48,6 +48,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
     @Output() selectionChange = new EventEmitter<string[]>();
     @Output() selectFacetValueClick = new EventEmitter<string[]>();
     @Output() updateProductOption = new EventEmitter<UpdateProductOptionInput>();
+    @Output() deleteVariant = new EventEmitter<string>();
     selectedVariantIds: string[] = [];
     private facetValues: FacetValue.Fragment[];
     private formSubscription: Subscription;
@@ -163,6 +164,10 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
             });
     }
 
+    deleteVariantClick(id: string) {
+        this.deleteVariant.emit(id);
+    }
+
     private getFacetValueIds(index: number): string[] {
         const formValue: VariantFormValue = this.formArray.at(index).value;
         return formValue.facetValueIds;

admin-ui/src/app/catalog/providers/product-detail.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, forkJoin, Observable, of } from 'rxjs';
-import { map, mergeMap, shareReplay, skip } from 'rxjs/operators';
+import { BehaviorSubject, forkJoin, Observable, of, throwError } from 'rxjs';
+import { map, mergeMap, shareReplay, skip, switchMap } from 'rxjs/operators';
 import { normalizeString } from 'shared/normalize-string';
 
 import {
     CreateProductInput,
     CreateProductVariantInput,
+    DeletionResult,
     FacetWithValues,
     LanguageCode,
     UpdateProductInput,
@@ -145,4 +146,16 @@ export class ProductDetailService {
     updateProductOption(input: UpdateProductOptionInput) {
         return this.dataService.product.updateProductOption(input);
     }
+
+    deleteProductVariant(id: string, productId: string) {
+        return this.dataService.product.deleteProductVariant(id).pipe(
+            switchMap(result => {
+                if (result.deleteProductVariant.result === DeletionResult.DELETED) {
+                    return this.dataService.product.getProduct(productId).single$;
+                } else {
+                    return throwError(result.deleteProductVariant.message);
+                }
+            }),
+        );
+    }
 }