feat(admin-ui): Display ProductVariant custom fields

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

@@ -151,6 +151,7 @@
                         [optionGroups]="product.optionGroups"
                         [productVariantsFormArray]="detailForm.get('variants')"
                         [taxCategories]="taxCategories$ | async"
+                        [customFields]="customVariantFields"
                         (assetChange)="variantAssetChange($event)"
                         (updateProductOption)="updateProductOption($event)"
                         (selectionChange)="selectedVariantIds = $event"

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

@@ -46,6 +46,7 @@ export interface VariantFormValue {
     stockOnHand: number;
     trackInventory: boolean;
     facetValueIds: string[];
+    customFields?: any;
 }
 
 export interface SelectedAssets {
@@ -429,17 +430,37 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 facetValueIds,
             };
 
-            const existing = variantsFormArray.at(i);
-            if (existing) {
-                existing.setValue(group);
+            let variantFormGroup = variantsFormArray.at(i) as FormGroup | undefined;
+            if (variantFormGroup) {
+                variantFormGroup.patchValue(group);
             } else {
-                variantsFormArray.insert(
-                    i,
-                    this.formBuilder.group({
-                        ...group,
-                        facetValueIds: this.formBuilder.control(facetValueIds),
-                    }),
-                );
+                variantFormGroup = this.formBuilder.group({
+                    ...group,
+                    facetValueIds: this.formBuilder.control(facetValueIds),
+                });
+                variantsFormArray.insert(i, variantFormGroup);
+            }
+            if (this.customVariantFields.length) {
+                let customFieldsGroup = variantFormGroup.get(['customFields']) as FormGroup | undefined;
+
+                if (!customFieldsGroup) {
+                    customFieldsGroup = this.formBuilder.group(
+                        this.customVariantFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
+                    );
+                    variantFormGroup.addControl('customFields', customFieldsGroup);
+                }
+
+                for (const fieldDef of this.customVariantFields) {
+                    const key = fieldDef.name;
+                    const value =
+                        fieldDef.type === 'localeString'
+                            ? (variantTranslation as any).customFields[key]
+                            : (variant as any).customFields[key];
+                    const control = customFieldsGroup.get(key);
+                    if (control) {
+                        control.patchValue(value);
+                    }
+                }
             }
         });
     }

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

@@ -62,57 +62,74 @@
                         ></vdr-product-assets>
                     </div>
                     <div class="variant-form-inputs">
-                        <div class="variant-form-input-row">
-                            <div class="tax-category">
-                                <clr-select-container>
-                                    <label>{{ 'catalog.tax-category' | translate }}</label>
-                                    <select clrSelect name="options" formControlName="taxCategoryId">
-                                        <option
-                                            *ngFor="let taxCategory of taxCategories"
-                                            [value]="taxCategory.id"
-                                        >
-                                            {{ taxCategory.name }}
-                                        </option>
-                                    </select>
-                                </clr-select-container>
+                        <div class="standard-fields">
+                            <div class="variant-form-input-row">
+                                <div class="tax-category">
+                                    <clr-select-container>
+                                        <label>{{ 'catalog.tax-category' | translate }}</label>
+                                        <select clrSelect name="options" formControlName="taxCategoryId">
+                                            <option
+                                                *ngFor="let taxCategory of taxCategories"
+                                                [value]="taxCategory.id"
+                                            >
+                                                {{ taxCategory.name }}
+                                            </option>
+                                        </select>
+                                    </clr-select-container>
+                                </div>
+                                <div class="price">
+                                    <clr-input-container>
+                                        <label>{{ 'catalog.price' | translate }}</label>
+                                        <vdr-currency-input
+                                            clrInput
+                                            [currencyCode]="variant.currencyCode"
+                                            formControlName="price"
+                                        ></vdr-currency-input>
+                                    </clr-input-container>
+                                </div>
+                                <vdr-variant-price-detail
+                                    [price]="formArray.get([i, 'price'])!.value"
+                                    [currencyCode]="variant.currencyCode"
+                                    [priceIncludesTax]="variant.priceIncludesTax"
+                                    [taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
+                                ></vdr-variant-price-detail>
                             </div>
-                            <div class="price">
+                            <div class="variant-form-input-row">
                                 <clr-input-container>
-                                    <label>{{ 'catalog.price' | translate }}</label>
-                                    <vdr-currency-input
+                                    <label>{{ 'catalog.stock-on-hand' | translate }}</label>
+                                    <input
                                         clrInput
-                                        [currencyCode]="variant.currencyCode"
-                                        formControlName="price"
-                                    ></vdr-currency-input>
+                                        type="number"
+                                        min="0"
+                                        step="1"
+                                        formControlName="stockOnHand"
+                                    />
                                 </clr-input-container>
+                                <clr-checkbox-wrapper class="track-inventory-toggle">
+                                    <input
+                                        type="checkbox"
+                                        clrCheckbox
+                                        name="trackInventory"
+                                        formControlName="trackInventory"
+                                    />
+                                    <label>{{ 'catalog.track-inventory' | translate }}</label>
+                                </clr-checkbox-wrapper>
                             </div>
-                            <vdr-variant-price-detail
-                                [price]="formArray.get([i, 'price'])!.value"
-                                [currencyCode]="variant.currencyCode"
-                                [priceIncludesTax]="variant.priceIncludesTax"
-                                [taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
-                            ></vdr-variant-price-detail>
                         </div>
-                        <div class="variant-form-input-row">
-                            <clr-input-container>
-                                <label>{{ 'catalog.stock-on-hand' | translate }}</label>
-                                <input
-                                    clrInput
-                                    type="number"
-                                    min="0"
-                                    step="1"
-                                    formControlName="stockOnHand"
-                                />
-                            </clr-input-container>
-                            <clr-checkbox-wrapper class="track-inventory-toggle">
-                                <input
-                                    type="checkbox"
-                                    clrCheckbox
-                                    name="trackInventory"
-                                    formControlName="trackInventory"
-                                />
-                                <label>{{ 'catalog.track-inventory' | translate }}</label>
-                            </clr-checkbox-wrapper>
+                        <div class="custom-fields">
+                            <div class="variant-form-input-row">
+                                <section formGroupName="customFields" *ngIf="customFields.length">
+                                    <!--<label>{{ 'common.custom-fields' | translate }}</label>-->
+                                    <ng-container *ngFor="let customField of customFields">
+                                        <vdr-custom-field-control
+                                            *ngIf="customFieldIsSet(i, customField.name)"
+                                            [compact]="true"
+                                            [customFieldsFormGroup]="formArray.at(i).get(['customFields'])"
+                                            [customField]="customField"
+                                        ></vdr-custom-field-control>
+                                    </ng-container>
+                                </section>
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -30,14 +30,21 @@
 
     .variant-body {
         display: flex;
+        flex-direction: column;
+        @media screen and (min-width: $breakpoint-small) {
+            flex-direction: row;
+        }
     }
 
     .details {
         display: flex;
+        flex-direction: column;
         flex: 1;
-        height: 36px;
         margin-right: 12px;
-
+        @media screen and (min-width: $breakpoint-small) {
+            flex-direction: row;
+            height: 36px;
+        }
         .name {
             flex: 1;
             ::ng-deep .clr-control-container {
@@ -63,13 +70,25 @@
         display: flex;
     }
 
+    .variant-form-inputs {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        @media screen and (min-width: $breakpoint-small) {
+            flex-direction: row;
+        }
+    }
+
     .variant-form-input-row {
         display: flex;
         flex-wrap: wrap;
-        margin: 0 6px 32px 24px;
+        @media screen and (min-width: $breakpoint-small) {
+            margin: 0 6px 8px 24px;
+        }
 
         > * {
             margin-right: 24px;
+            margin-bottom: 24px;
         }
     }
 

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

@@ -15,6 +15,7 @@ import { Subscription } from 'rxjs';
 import { notNullOrUndefined } from 'shared/shared-utils';
 
 import {
+    CustomFieldConfig,
     FacetValue,
     FacetWithValues,
     ProductVariant,
@@ -44,6 +45,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
     @Input() taxCategories: TaxCategory[];
     @Input() facets: FacetWithValues.Fragment[];
     @Input() optionGroups: ProductWithVariants.OptionGroups[];
+    @Input() customFields: CustomFieldConfig[];
     @Output() assetChange = new EventEmitter<VariantAssetChange>();
     @Output() selectionChange = new EventEmitter<string[]>();
     @Output() selectFacetValueClick = new EventEmitter<string[]>();
@@ -149,6 +151,10 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
         return -1 < this.selectedVariantIds.indexOf(variantId);
     }
 
+    customFieldIsSet(index: number, name: string): boolean {
+        return !!this.formArray.at(index).get(['customFields', name]);
+    }
+
     editOption(option: ProductVariant.Options) {
         this.modalService
             .fromComponent(UpdateProductOptionDialogComponent, {

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

@@ -149,6 +149,7 @@ export class ProductDataService {
                     'assetIds',
                     'trackInventory',
                     'stockOnHand',
+                    'customFields',
                 ]),
             ),
         };

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

@@ -1,4 +1,15 @@
-<vdr-form-field [label]="label" [for]="customField.name">
+<div class="clr-form-control" *ngIf="compact">
+    <label for="basic" class="clr-control-label">{{ label }}</label>
+    <div class="clr-control-container">
+        <div class="clr-input-wrapper">
+            <ng-container *ngTemplateOutlet="inputs"></ng-container>
+        </div>
+    </div>
+</div>
+<vdr-form-field [label]="label" [for]="customField.name" *ngIf="!compact">
+    <ng-container *ngTemplateOutlet="inputs"></ng-container>
+</vdr-form-field>
+<ng-template #inputs>
     <input
         *ngIf="isTextInput"
         type="text"
@@ -38,4 +49,4 @@
         [value]="formGroup.get(customField.name).value | date: 'yyyy-MM-ddTHH:mm:ss'"
         (change)="updateDateTime(formGroup.get(customField.name), $event)"
     />
-</vdr-form-field>
+</ng-template>

admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.ts

@@ -23,6 +23,7 @@ import { DataService } from '../../../data/providers/data.service';
 export class CustomFieldControlComponent implements OnInit, OnDestroy {
     @Input('customFieldsFormGroup') formGroup: FormGroup;
     @Input() customField: CustomFieldsFragment;
+    @Input() compact = false;
     @Input() showLabel = true;
     private uiLanguageCode: LanguageCode;
     private sub: Subscription;