feat(admin-ui): Implement remove ProductOptionGroup

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

@@ -31,7 +31,14 @@
         <vdr-form-item [label]="'catalog.product-option-groups' | translate">
             <div class="option-groups-list">
                 <div *ngFor="let optionGroup of (product$ | async)?.optionGroups"
-                     class="option-group">{{ optionGroup.name }}</div>
+                     class="option-group">
+                    <div class="group-name">{{ optionGroup.name }}</div>
+                    <button type="button"
+                            class="btn remove-option-group"
+                            (click)="removeGroup(optionGroup.id)">
+                        <clr-icon shape="trash"></clr-icon>
+                    </button>
+                </div>
                 <clr-dropdown>
                     <button type="button" class="btn btn-outline-primary btn-sm" clrDropdownTrigger>
                         <clr-icon shape="add"></clr-icon>

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

@@ -9,4 +9,17 @@
     display: inline-block;
     padding: 0 6px;
     margin-right: 6px;
+    display: inline-flex;
+}
+.group-name {
+    padding-right: 6px;
+}
+.remove-option-group {
+    margin: 0 !important;
+    padding: 0;
+    min-width: 0;
+    height: 22px;
+    line-height: 1rem;
+    border: none;
+    color: $color-warning;
 }

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

@@ -2,8 +2,9 @@ import { Component, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable, Subject } from 'rxjs';
-import { map, mergeMap, take, takeUntil, tap } from 'rxjs/operators';
+import { filter, map, mergeMap, take, takeUntil, tap } from 'rxjs/operators';
 
+import { notNullOrUndefined } from '../../../../../../shared/shared-utils';
 import { getDefaultLanguage } from '../../../common/utilities/get-default-language';
 import { DataService } from '../../../data/providers/data.service';
 import { GetProductWithVariants_product, LanguageCode } from '../../../data/types/gql-generated-types';
@@ -84,6 +85,7 @@ export class ProductDetailComponent implements OnDestroy {
                             },
                         })
                         .pipe(
+                            filter(notNullOrUndefined),
                             mergeMap(({ createProductOptionGroup }) => {
                                 return this.dataService.product.addOptionGroupToProduct({
                                     productId: product.id,
@@ -110,6 +112,7 @@ export class ProductDetailComponent implements OnDestroy {
                             },
                         })
                         .pipe(
+                            filter(notNullOrUndefined),
                             mergeMap(optionGroup => {
                                 return this.dataService.product.addOptionGroupToProduct({
                                     productId: product.id,
@@ -122,6 +125,20 @@ export class ProductDetailComponent implements OnDestroy {
             .subscribe();
     }
 
+    removeGroup(optionGroupId: string) {
+        this.product$
+            .pipe(
+                take(1),
+                mergeMap(product => {
+                    return this.dataService.product.removeOptionGroupFromProduct({
+                        productId: product.id,
+                        optionGroupId,
+                    });
+                }),
+            )
+            .subscribe();
+    }
+
     save() {
         combineLatest(this.product$, this.languageCode$)
             .pipe(take(1))

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

@@ -38,3 +38,19 @@ export const ADD_OPTION_GROUP_TO_PRODUCT = gql`
         }
     }
 `;
+
+export const REMOVE_OPTION_GROUP_FROM_PRODUCT = gql`
+    mutation RemoveOptionGroupFromProduct($productId: ID!, $optionGroupId: ID!) {
+        removeOptionGroupFromProduct(productId: $productId, optionGroupId: $optionGroupId) {
+            id
+            optionGroups {
+                id
+                code
+                options {
+                    id
+                    code
+                }
+            }
+        }
+    }
+`;

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

@@ -46,6 +46,7 @@ export class MockDataService implements DataServiceMock {
         updateProduct: spyObservable('updateProduct'),
         createProductOptionGroups: spyObservable('createProductOptionGroups'),
         addOptionGroupToProduct: spyObservable('addOptionGroupToProduct'),
+        removeOptionGroupFromProduct: spyObservable('removeOptionGroupFromProduct'),
         getProductOptionGroups: spyQueryResult('getProductOptionGroups'),
     };
     user = {

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

@@ -4,6 +4,7 @@ import { getDefaultLanguage } from '../../common/utilities/get-default-language'
 import {
     ADD_OPTION_GROUP_TO_PRODUCT,
     CREATE_PRODUCT_OPTION_GROUP,
+    REMOVE_OPTION_GROUP_FROM_PRODUCT,
     UPDATE_PRODUCT,
 } from '../mutations/product-mutations';
 import {
@@ -23,6 +24,8 @@ import {
     GetProductOptionGroupsVariables,
     GetProductWithVariants,
     GetProductWithVariantsVariables,
+    RemoveOptionGroupFromProduct,
+    RemoveOptionGroupFromProductVariables,
     UpdateProduct,
     UpdateProductInput,
     UpdateProductVariables,
@@ -84,6 +87,15 @@ export class ProductDataService {
         );
     }
 
+    removeOptionGroupFromProduct(
+        variables: RemoveOptionGroupFromProductVariables,
+    ): Observable<RemoveOptionGroupFromProduct> {
+        return this.baseDataService.mutate<
+            RemoveOptionGroupFromProduct,
+            RemoveOptionGroupFromProductVariables
+        >(REMOVE_OPTION_GROUP_FROM_PRODUCT, variables);
+    }
+
     getProductOptionGroups(
         filterTerm?: string,
     ): QueryResult<GetProductOptionGroups, GetProductOptionGroupsVariables> {

admin-ui/src/app/data/types/gql-generated-types.ts

@@ -228,6 +228,41 @@ export interface AddOptionGroupToProductVariables {
 /* tslint:disable */
 // This file was automatically generated and should not be edited.
 
+// ====================================================
+// GraphQL mutation operation: RemoveOptionGroupFromProduct
+// ====================================================
+
+export interface RemoveOptionGroupFromProduct_removeOptionGroupFromProduct_optionGroups_options {
+    __typename: 'ProductOption';
+    id: string;
+    code: string | null;
+}
+
+export interface RemoveOptionGroupFromProduct_removeOptionGroupFromProduct_optionGroups {
+    __typename: 'ProductOptionGroup';
+    id: string;
+    code: string;
+    options: RemoveOptionGroupFromProduct_removeOptionGroupFromProduct_optionGroups_options[];
+}
+
+export interface RemoveOptionGroupFromProduct_removeOptionGroupFromProduct {
+    __typename: 'Product';
+    id: string;
+    optionGroups: RemoveOptionGroupFromProduct_removeOptionGroupFromProduct_optionGroups[];
+}
+
+export interface RemoveOptionGroupFromProduct {
+    removeOptionGroupFromProduct: RemoveOptionGroupFromProduct_removeOptionGroupFromProduct; // Remove an OptionGroup from a Product
+}
+
+export interface RemoveOptionGroupFromProductVariables {
+    productId: string;
+    optionGroupId: string;
+}
+
+/* tslint:disable */
+// This file was automatically generated and should not be edited.
+
 // ====================================================
 // GraphQL query operation: GetNetworkStatus
 // ====================================================

admin-ui/src/app/shared/providers/modal/modal.service.ts

@@ -94,7 +94,7 @@ export class ModalService {
     fromComponent<T extends Dialog<any>, R>(
         component: Type<T> & Type<Dialog<R>>,
         options?: ModalOptions<T>,
-    ): Observable<R> {
+    ): Observable<R | undefined> {
         const modalFactory = this.componentFactoryResolver.resolveComponentFactory(ModalDialogComponent);
         const modalComponentRef = this.hostView.createComponent(modalFactory);
         const modalInstance: ModalDialogComponent<any> = modalComponentRef.instance;