Skip to content

Commit

Permalink
feat(admin-ui): Enable adding options to single-variant Products
Browse files Browse the repository at this point in the history
Relates to #162
  • Loading branch information
michaelbromley committed Sep 18, 2019
1 parent fefe0ea commit 7303171
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
productGroup as FormGroup,
languageCode,
) as CreateProductInput;
return this.productDetailService.createProduct(
return this.productDetailService.createProductWithVariants(
newProduct,
this.createVariantsConfig,
languageCode,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
clrInput
[(ngModel)]="group.name"
name="name"
readonly
[readonly]="!group.isNew"
/>
</div>
<div class="values">
Expand All @@ -31,7 +31,7 @@
></vdr-option-value-input>
</div>
</div>
<button class="btn btn-primary-outline btn-sm" (click)="addOption()">
<button class="btn btn-primary-outline btn-sm" (click)="addOption()" *ngIf="product.variants.length === 1">
<clr-icon shape="plus"></clr-icon>
{{ 'catalog.add-option' | translate }}
</button>
Expand All @@ -49,7 +49,7 @@
</tr>
</thead>
<tr
*ngFor="let variant of variants; trackBy: trackByFn"
*ngFor="let variant of variants"
[class.disabled]="!variantFormValues[variant.id].enabled || variantFormValues[variant.id].existing"
>
<td>
Expand All @@ -59,7 +59,7 @@
[(ngModel)]="variantFormValues[variant.id].enabled"
name="enabled"
clrCheckbox
(ngModelChange)="onFormChanged(variantFormValues[variant.id])"
(ngModelChange)="formValueChanged = true"
/>
</td>
<td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
}>;
}>;
variantFormValues: { [id: string]: VariantInfo } = {};
product: GetProductVariantOptions.Product;
private currencyCode: CurrencyCode;
private languageCode: LanguageCode;
private product: GetProductVariantOptions.Product;

constructor(
private route: ActivatedRoute,
Expand Down Expand Up @@ -195,9 +195,11 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
values: [],
}));

this.productDetailService
.createProductOptionGroups(newOptionGroups, this.languageCode)
this.confirmDeletionOfDefault()
.pipe(
mergeMap(() =>
this.productDetailService.createProductOptionGroups(newOptionGroups, this.languageCode),
),
mergeMap(createdOptionGroups => this.addOptionGroupsToProduct(createdOptionGroups)),
mergeMap(createdOptionGroups => this.addNewOptionsToGroups(createdOptionGroups)),
mergeMap(groupsIds => this.fetchOptionGroups(groupsIds)),
Expand All @@ -216,6 +218,27 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
});
}

private confirmDeletionOfDefault(): Observable<boolean> {
if (this.product.variants.length === 1) {
return this.modalService
.dialog({
title: _('catalog.confirm-adding-options-delete-default-title'),
body: _('catalog.confirm-adding-options-delete-default-body'),
buttons: [
{ type: 'seconday', label: _('common.cancel') },
{ type: 'danger', label: _('catalog.delete-default-variant'), returnValue: true },
],
})
.pipe(
mergeMap(res => {
return res === true ? of(true) : EMPTY;
}),
);
} else {
return of(true);
}
}

private addOptionGroupsToProduct(
createdOptionGroups: CreateProductOptionGroup.CreateProductOptionGroup[],
): Observable<CreateProductOptionGroup.CreateProductOptionGroup[]> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,32 +53,17 @@ export class ProductDetailService {
.pipe(shareReplay(1));
}

createProduct(
createProductWithVariants(
input: CreateProductInput,
createVariantsConfig: CreateProductVariantsConfig,
languageCode: LanguageCode,
) {
const createProduct$ = this.dataService.product.createProduct(input);

const nonEmptyOptionGroups = createVariantsConfig.groups.filter(g => 0 < g.values.length);
const createOptionGroups$ = nonEmptyOptionGroups.length
? forkJoin(
createVariantsConfig.groups.map(c => {
return this.dataService.product.createProductOptionGroups({
code: normalizeString(c.name, '-'),
translations: [{ languageCode, name: c.name }],
options: c.values.map(v => ({
code: normalizeString(v, '-'),
translations: [{ languageCode, name: v }],
})),
});
}),
)
: of([]);
const createOptionGroups$ = this.createProductOptionGroups(nonEmptyOptionGroups, languageCode);

return forkJoin(createProduct$, createOptionGroups$).pipe(
mergeMap(([{ createProduct }, createOptionGroups]) => {
const optionGroups = createOptionGroups.map(g => g.createProductOptionGroup);
mergeMap(([{ createProduct }, optionGroups]) => {
const addOptionsToProduct$ = optionGroups.length
? forkJoin(
optionGroups.map(optionGroup => {
Expand Down Expand Up @@ -119,6 +104,25 @@ export class ProductDetailService {
);
}

createProductOptionGroups(groups: Array<{ name: string; values: string[] }>, languageCode: LanguageCode) {
return groups.length
? forkJoin(
groups.map(c => {
return this.dataService.product
.createProductOptionGroups({
code: normalizeString(c.name, '-'),
translations: [{ languageCode, name: c.name }],
options: c.values.map(v => ({
code: normalizeString(v, '-'),
translations: [{ languageCode, name: v }],
})),
})
.pipe(map(data => data.createProductOptionGroup));
}),
)
: of([]);
}

createProductVariants(
product: { name: string; id: string },
variantData: Array<{ price: number; sku: string; stock: number; optionIds: string[] }>,
Expand Down
4 changes: 4 additions & 0 deletions packages/admin-ui/src/i18n-messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
"add-option": "Add option",
"assets-selected-count": "{ count } assets selected",
"collection-contents": "Collection contents",
"confirm-adding-options-delete-default-body": "Adding options to this product will cause the existing default variant to be deleted. Do you wish to proceed?",
"confirm-adding-options-delete-default-title": "Delete default variant?",
"confirm-delete-collection": "Delete collection?",
"confirm-delete-country": "Delete country?",
"confirm-delete-facet": "Delete facet?",
Expand All @@ -41,6 +43,8 @@
"create-new-facet": "Create new facet",
"create-new-product": "New product",
"created-new-variants-success": "Successfully created {count} new {count, plural, one {variant} other {variants}}",
"default-variant": "Default variant",
"delete-default-variant": "Delete default variant",
"display-variant-cards": "View details",
"display-variant-table": "View as table",
"drop-files-to-upload": "Drop files to upload",
Expand Down

0 comments on commit 7303171

Please sign in to comment.