feat(admin-ui): Implement delete for Products

Relates to #21

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

@@ -39,6 +39,7 @@
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-result="item">
         <td class="left align-middle">
             <div class="image-placeholder">
@@ -61,5 +62,23 @@
                 [linkTo]="['./', result.productId]"
             ></vdr-table-row-action>
         </td>
+        <td class="right align-middle">
+            <clr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+                    {{ 'common.actions' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                    <button
+                        type="button"
+                        class="delete-button"
+                        (click)="deleteProduct(result.productId)"
+                        clrDropdownItem
+                    >
+                        {{ 'common.delete' | translate }}
+                    </button>
+                </clr-dropdown-menu>
+            </clr-dropdown>
+        </td>
     </ng-template>
 </vdr-data-table>

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

@@ -1,12 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import { GetProductList, SearchProducts } from 'shared/generated-types';
+import { EMPTY, Observable } from 'rxjs';
+import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
+import { DeletionResult, GetProductList, SearchProducts } from 'shared/generated-types';
 
 import { BaseListComponent } from '../../../common/base-list.component';
+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';
 
 @Component({
     selector: 'vdr-products-list',
@@ -18,7 +21,13 @@ export class ProductListComponent
     implements OnInit {
     searchForm: FormGroup | undefined;
     groupByProduct = true;
-    constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
+    constructor(
+        private dataService: DataService,
+        private modalService: ModalService,
+        private notificationService: NotificationService,
+        router: Router,
+        route: ActivatedRoute,
+    ) {
         super(router, route);
         super.setQueryFn(
             (...args: any[]) =>
@@ -49,6 +58,33 @@ export class ProductListComponent
             .subscribe(() => this.refresh());
     }
 
+    deleteProduct(productId: string) {
+        this.modalService
+            .dialog({
+                title: _('catalog.confirm-delete-product'),
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(response => (response ? this.dataService.product.deleteProduct(productId) : EMPTY)),
+            )
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'Product',
+                    });
+                    this.refresh();
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'Product',
+                    });
+                },
+            );
+    }
+
     private getFormValue<T>(controlName: string, defaultValue: T): T {
         if (!this.searchForm) {
             return defaultValue;

admin-ui/src/app/data/definitions/product-definitions.ts

@@ -142,6 +142,15 @@ export const CREATE_PRODUCT = gql`
     ${PRODUCT_WITH_VARIANTS_FRAGMENT}
 `;
 
+export const DELETE_PRODUCT = gql`
+    mutation DeleteProduct($id: ID!) {
+        deleteProduct(id: $id) {
+            result
+            message
+        }
+    }
+`;
+
 export const GENERATE_PRODUCT_VARIANTS = gql`
     mutation GenerateProductVariants(
         $productId: ID!

admin-ui/src/app/data/providers/product-data.service.ts

@@ -1,5 +1,5 @@
-import { forkJoin, from } from 'rxjs';
-import { bufferCount, concatMap, mergeMap } from 'rxjs/operators';
+import { from } from 'rxjs';
+import { bufferCount, concatMap } from 'rxjs/operators';
 import {
     AddOptionGroupToProduct,
     CreateAssets,
@@ -9,6 +9,7 @@ import {
     CreateProductInput,
     CreateProductOptionGroup,
     CreateProductOptionGroupInput,
+    DeleteProduct,
     GenerateProductVariants,
     GetAssetList,
     GetProductCategory,
@@ -36,6 +37,7 @@ import {
     CREATE_PRODUCT,
     CREATE_PRODUCT_CATEGORY,
     CREATE_PRODUCT_OPTION_GROUP,
+    DELETE_PRODUCT,
     GENERATE_PRODUCT_VARIANTS,
     GET_ASSET_LIST,
     GET_PRODUCT_CATEGORY,
@@ -120,6 +122,12 @@ export class ProductDataService {
         );
     }
 
+    deleteProduct(id: string) {
+        return this.baseDataService.mutate<DeleteProduct.Mutation, DeleteProduct.Variables>(DELETE_PRODUCT, {
+            id,
+        });
+    }
+
     generateProductVariants(productId: string, defaultPrice?: number, defaultSku?: string) {
         return this.baseDataService.mutate<
             GenerateProductVariants.Mutation,

admin-ui/src/i18n-messages/en.json

@@ -30,6 +30,7 @@
     "assets-selected-count": "{ count } assets selected",
     "confirm-delete-facet": "Delete facet?",
     "confirm-delete-facet-value": "Delete facet value?",
+    "confirm-delete-product": "Delete product?",
     "confirm-generate-product-variants": "Click 'Finish' to generate {count} product variants.",
     "create-group": "Create option group",
     "create-new-facet": "Create new facet",