Skip to content

Commit

Permalink
feat(admin-ui): Display ProductVariant custom fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Aug 7, 2019
1 parent 8be0051 commit 32017f3
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 60 deletions.
1 change: 1 addition & 0 deletions admin-ui/src/app/catalog/components/product-detail/product-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
[optionGroups]="product.optionGroups"
[productVariantsFormArray]="detailForm.get('variants')"
[taxCategories]="taxCategories$ | async"
[customFields]="customVariantFields"
(assetChange)="variantAssetChange($event)"
(updateProductOption)="updateProductOption($event)"
(selectionChange)="selectedVariantIds = $event"
Expand Down
41 changes: 31 additions & 10 deletions admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface VariantFormValue {
stockOnHand: number;
trackInventory: boolean;
facetValueIds: string[];
customFields?: any;
}

export interface SelectedAssets {
Expand Down Expand Up @@ -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);
}
}
}
});
}
Expand Down
107 changes: 62 additions & 45 deletions ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
25 changes: 22 additions & 3 deletions ...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
}

Expand Down
6 changes: 6 additions & 0 deletions admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Subscription } from 'rxjs';
import { notNullOrUndefined } from 'shared/shared-utils';

import {
CustomFieldConfig,
FacetValue,
FacetWithValues,
ProductVariant,
Expand Down Expand Up @@ -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[]>();
Expand Down Expand Up @@ -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, {
Expand Down
1 change: 1 addition & 0 deletions admin-ui/src/app/data/providers/product-data.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export class ProductDataService {
'assetIds',
'trackInventory',
'stockOnHand',
'customFields',
]),
),
};
Expand Down
15 changes: 13 additions & 2 deletions admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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>
1 change: 1 addition & 0 deletions admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 32017f3

Please sign in to comment.