feat(admin-ui): Can specify default price & sku when creating variants

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

@@ -206,16 +206,18 @@ export class ProductDetailComponent implements OnDestroy {
                 take(1),
                 mergeMap(product => this.productVariantsWizard.start()),
             )
-            .subscribe(() => {
-                this.generateProductVariants();
+            .subscribe(({ defaultPrice, defaultSku }) => {
+                this.generateProductVariants(defaultPrice, defaultSku);
             });
     }
 
-    generateProductVariants() {
+    generateProductVariants(defaultPrice?: number, defaultSku?: string) {
         this.product$
             .pipe(
                 take(1),
-                mergeMap(product => this.dataService.product.generateProductVariants(product.id)),
+                mergeMap(product =>
+                    this.dataService.product.generateProductVariants(product.id, defaultPrice, defaultSku),
+                ),
             )
             .subscribe();
     }

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

@@ -28,6 +28,12 @@
 
     <clr-wizard-page>
         <ng-template clrPageTitle>{{ 'common.confirm' | translate }}</ng-template>
+        <vdr-form-field [label]="'catalog.default-price'">
+            <vdr-currency-input [(ngModel)]="defaultPrice"></vdr-currency-input>
+        </vdr-form-field>
+        <vdr-form-field [label]="'catalog.default-sku'">
+            <input type="text" [(ngModel)]="defaultSku">
+        </vdr-form-field>
         <h4>{{ 'catalog.selected-option-groups' | translate }}:</h4>
         <vdr-chip *ngFor="let selectedGroup of selectedOptionGroups">
             {{ selectedGroup.code }}

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

@@ -1,10 +1,11 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { TestingCommonModule } from '../../../../testing/testing-common.module';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { MockNotificationService } from '../../../core/providers/notification/notification.service.mock';
 import { ChipComponent } from '../../../shared/components/chip/chip.component';
+import { CurrencyInputComponent } from '../../../shared/components/currency-input/currency-input.component';
 import { SelectToggleComponent } from '../../../shared/components/select-toggle/select-toggle.component';
 import { CreateOptionGroupFormComponent } from '../create-option-group-form/create-option-group-form.component';
 import { SelectOptionGroupComponent } from '../select-option-group/select-option-group.component';
@@ -17,13 +18,14 @@ describe('ProductVariantsWizardComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [TestingCommonModule, ReactiveFormsModule],
+            imports: [TestingCommonModule, ReactiveFormsModule, FormsModule],
             declarations: [
                 ProductVariantsWizardComponent,
                 SelectOptionGroupComponent,
                 CreateOptionGroupFormComponent,
                 SelectToggleComponent,
                 ChipComponent,
+                CurrencyInputComponent,
             ],
             providers: [{ provide: NotificationService, useClass: MockNotificationService }],
         }).compileComponents();

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

@@ -23,6 +23,8 @@ export class ProductVariantsWizardComponent implements OnChanges {
     @ViewChild('selectOptionGroup') selectOptionGroup: SelectOptionGroupComponent;
     selectedOptionGroups: Array<Partial<ProductOptionGroup>> = [];
     productVariantPreviewList: string[] = [];
+    defaultPrice = 0;
+    defaultSku = '';
 
     constructor(private notificationService: NotificationService, private dataService: DataService) {}
 
@@ -35,7 +37,7 @@ export class ProductVariantsWizardComponent implements OnChanges {
     /**
      * Opens the wizard and begins the steps.
      */
-    start(): Observable<ProductWithVariants> {
+    start(): Observable<{ defaultPrice: number; defaultSku: string }> {
         this.wizard.open();
 
         return this.wizard.wizardFinished.pipe(
@@ -55,7 +57,10 @@ export class ProductVariantsWizardComponent implements OnChanges {
 
                 return forkJoin(addOptionsOperations);
             }),
-            map(() => this.product),
+            map(() => ({
+                defaultPrice: this.defaultPrice,
+                defaultSku: this.defaultSku,
+            })),
         );
     }
 

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

@@ -25,8 +25,12 @@ export const CREATE_PRODUCT = gql`
 `;
 
 export const GENERATE_PRODUCT_VARIANTS = gql`
-    mutation GenerateProductVariants($productId: ID!) {
-        generateVariantsForProduct(productId: $productId) {
+    mutation GenerateProductVariants($productId: ID!, $defaultPrice: Int, $defaultSku: String) {
+        generateVariantsForProduct(
+            productId: $productId
+            defaultPrice: $defaultPrice
+            defaultSku: $defaultSku
+        ) {
             ...ProductWithVariants
         }
     }

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

@@ -88,10 +88,14 @@ export class ProductDataService {
         return this.baseDataService.mutate<UpdateProduct, UpdateProductVariables>(UPDATE_PRODUCT, input);
     }
 
-    generateProductVariants(productId: string): Observable<GenerateProductVariants> {
+    generateProductVariants(
+        productId: string,
+        defaultPrice?: number,
+        defaultSku?: string,
+    ): Observable<GenerateProductVariants> {
         return this.baseDataService.mutate<GenerateProductVariants, GenerateProductVariantsVariables>(
             GENERATE_PRODUCT_VARIANTS,
-            { productId },
+            { productId, defaultPrice, defaultSku },
         );
     }
 

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

@@ -287,6 +287,8 @@ export interface GenerateProductVariants {
 
 export interface GenerateProductVariantsVariables {
     productId: string;
+    defaultPrice?: number | null;
+    defaultSku?: string | null;
 }
 
 /* tslint:disable */

admin-ui/src/app/shared/components/currency-input/currency-input.component.scss

@@ -13,8 +13,10 @@
     top: 1px;
     padding: 3px;
     border-radius: 3px;
+    line-height: .58333rem;
 }
 input {
     max-width: 115px;
     padding-left: 40px;
+    line-height: .58333rem;
 }

admin-ui/src/app/shared/components/form-field/form-field-control.directive.ts

@@ -5,6 +5,7 @@ import {
     FormControlName,
     FormGroup,
     FormGroupDirective,
+    NgControl,
     NgForm,
 } from '@angular/forms';
 
@@ -12,7 +13,7 @@ import {
 @Directive({ selector: 'input, textarea, select' })
 export class FormFieldControlDirective {
     formControl: FormControl;
-    constructor(@Optional() private formControlName: FormControlName) {}
+    constructor(@Optional() private formControlName: NgControl) {}
 
     get valid(): boolean {
         return !!this.formControlName.valid;

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -10,7 +10,7 @@
     <label [for]="for"
            aria-haspopup="true"
            role="tooltip"
-           [class.invalid]="formFieldControl.touched && !formFieldControl.valid"
+           [class.invalid]="formFieldControl?.touched && !formFieldControl?.valid"
            class="tooltip tooltip-validation tooltip-sm tooltip-top-left">
         <ng-content></ng-content>
         <span class="tooltip-content">

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

@@ -20,7 +20,7 @@
     "notify-create-new-option-group": "Created new option group",
     "notify-create-product-error": "An error occured, could not create product",
     "notify-create-product-success": "Created new product",
-    "notify-update-product-error": "An error occurred, could not update product",
+    "notify-update-product-error": "An error occurred, could not update product\n\n { error }",
     "notify-update-product-success": "Updated product",
     "option-group-code": "Code",
     "option-group-name": "Option group name",