refactor(admin-ui): Pull out generate variants button into component

admin-ui/src/app/catalog/catalog.module.ts

@@ -8,6 +8,7 @@ import { CreateOptionGroupDialogComponent } from './components/create-option-gro
 import { CreateOptionGroupFormComponent } from './components/create-option-group-form/create-option-group-form.component';
 import { FacetDetailComponent } from './components/facet-detail/facet-detail.component';
 import { FacetListComponent } from './components/facet-list/facet-list.component';
+import { GenerateProductVariantsComponent } from './components/generate-product-variants/generate-product-variants.component';
 import { ProductDetailComponent } from './components/product-detail/product-detail.component';
 import { ProductListComponent } from './components/product-list/product-list.component';
 import { ProductVariantsWizardComponent } from './components/product-variants-wizard/product-variants-wizard.component';
@@ -29,6 +30,7 @@ import { ProductResolver } from './providers/routing/product-resolver';
         SelectOptionGroupComponent,
         FacetListComponent,
         FacetDetailComponent,
+        GenerateProductVariantsComponent,
     ],
     entryComponents: [CreateOptionGroupDialogComponent, SelectOptionGroupDialogComponent],
     providers: [ProductResolver, FacetResolver],

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

@@ -0,0 +1,18 @@
+<clr-dropdown>
+    <button type="button" class="btn btn-primary" clrDropdownTrigger>
+        <clr-icon shape="add"></clr-icon>
+        {{ 'catalog.generate-product-variants' | translate }}
+        <clr-icon shape="caret down"></clr-icon>
+    </button>
+    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+        <button type="button"
+                clrDropdownItem
+                (click)="generateProductVariants()">{{ 'catalog.generate-variants-default-only' | translate }}</button>
+        <button type="button"
+                clrDropdownItem
+                (click)="startProductVariantsWizard()">{{ 'catalog.generate-variants-with-options' | translate }}</button>
+    </clr-dropdown-menu>
+</clr-dropdown>
+
+<vdr-product-variants-wizard #productVariantsWizard
+                             [product]="product"></vdr-product-variants-wizard>

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

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

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

@@ -0,0 +1,28 @@
+import { Component, Input, ViewChild } from '@angular/core';
+
+import { DataService } from '../../../data/providers/data.service';
+import { ProductWithVariants } from '../../../data/types/gql-generated-types';
+import { ProductVariantsWizardComponent } from '../product-variants-wizard/product-variants-wizard.component';
+
+@Component({
+    selector: 'vdr-generate-product-variants',
+    templateUrl: './generate-product-variants.component.html',
+    styleUrls: ['./generate-product-variants.component.scss'],
+})
+export class GenerateProductVariantsComponent {
+    @Input() product: ProductWithVariants;
+    @ViewChild('productVariantsWizard') productVariantsWizard: ProductVariantsWizardComponent;
+    constructor(private dataService: DataService) {}
+
+    startProductVariantsWizard() {
+        this.productVariantsWizard.start().subscribe(({ defaultPrice, defaultSku }) => {
+            this.generateProductVariants(defaultPrice, defaultSku);
+        });
+    }
+
+    generateProductVariants(defaultPrice?: number, defaultSku?: string) {
+        this.dataService.product
+            .generateProductVariants(this.product.id, defaultPrice, defaultSku)
+            .subscribe();
+    }
+}

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

@@ -44,32 +44,14 @@
 
     <section class="form-block" *ngIf="!(isNew$ | async)">
 
-
         <label>{{ 'catalog.product-variants' | translate }}</label>
 
-        <div *ngIf="(variants$ | async)?.length === 0; else variants">
-            <clr-dropdown>
-                <button type="button" class="btn btn-primary" clrDropdownTrigger>
-                    <clr-icon shape="add"></clr-icon>
-                    {{ 'catalog.generate-product-variants' | translate }}
-                    <clr-icon shape="caret down"></clr-icon>
-                </button>
-                <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-                    <button type="button"
-                            clrDropdownItem
-                            (click)="generateProductVariants()">{{ 'catalog.generate-variants-default-only' | translate }}</button>
-                    <button type="button"
-                            clrDropdownItem
-                            (click)="startProductVariantsWizard()">{{ 'catalog.generate-variants-with-options' | translate }}</button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
-
-            <vdr-product-variants-wizard #productVariantsWizard
-                                         [product]="product$ | async"></vdr-product-variants-wizard>
-        </div>
+        <vdr-generate-product-variants *ngIf="(variants$ | async)?.length === 0; else variants"
+                                       [product]="product$ | async"></vdr-generate-product-variants>
 
         <ng-template #variants>
-            <vdr-form-item [label]="'catalog.product-option-groups' | translate">
+            <vdr-form-item *ngIf="(product$ | async)?.optionGroups.length"
+                           [label]="'catalog.product-option-groups' | translate">
                 <div class="option-groups-list">
                     <div *ngFor="let optionGroup of (product$ | async)?.optionGroups"
                          class="option-group">

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

@@ -37,7 +37,6 @@ export class ProductDetailComponent implements OnInit, OnDestroy {
     languageCode$: Observable<LanguageCode>;
     isNew$: Observable<boolean>;
     productForm: FormGroup;
-    @ViewChild('productVariantsWizard') productVariantsWizard: ProductVariantsWizardComponent;
     private destroy$ = new Subject<void>();
 
     constructor(
@@ -178,28 +177,6 @@ export class ProductDetailComponent implements OnInit, OnDestroy {
             );
     }
 
-    startProductVariantsWizard() {
-        this.product$
-            .pipe(
-                take(1),
-                mergeMap(product => this.productVariantsWizard.start()),
-            )
-            .subscribe(({ defaultPrice, defaultSku }) => {
-                this.generateProductVariants(defaultPrice, defaultSku);
-            });
-    }
-
-    generateProductVariants(defaultPrice?: number, defaultSku?: string) {
-        this.product$
-            .pipe(
-                take(1),
-                mergeMap(product =>
-                    this.dataService.product.generateProductVariants(product.id, defaultPrice, defaultSku),
-                ),
-            )
-            .subscribe();
-    }
-
     /**
      * Sets the values of the form on changes to the product or current language.
      */