@vendure/admin-ui 1.9.4 → 1.9.6

package/fesm2015/vendure-admin-ui-catalog.js

@@ -2049,10 +2049,10 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
         const $product = this.dataService.product.getProduct(this.id).mapSingle(data => data.product);
         combineLatest(this.entity$, this.languageCode$, $product)
             .pipe(take(1), mergeMap(([{ optionGroups }, languageCode, product]) => {
-            var _a, _b, _c, _d, _e;
+            var _a;
             const updateOperations = [];
             for (const optionGroupForm of this.getOptionGroups()) {
-                if (((_a = optionGroupForm.get('name')) === null || _a === void 0 ? void 0 : _a.dirty) || ((_b = optionGroupForm.get('code')) === null || _b === void 0 ? void 0 : _b.dirty)) {
+                if (optionGroupForm.dirty) {
                     const optionGroupEntity = optionGroups.find(og => og.id === optionGroupForm.value.id);
                     if (optionGroupEntity) {
                         const input = this.getUpdatedOptionGroup(optionGroupEntity, optionGroupForm, languageCode);
@@ -2060,9 +2060,9 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
                     }
                 }
                 for (const optionForm of this.getOptions(optionGroupForm)) {
-                    if (((_c = optionForm.get('name')) === null || _c === void 0 ? void 0 : _c.dirty) || ((_d = optionForm.get('code')) === null || _d === void 0 ? void 0 : _d.dirty)) {
-                        const optionGroup = (_e = optionGroups
-                            .find(og => og.id === optionGroupForm.value.id)) === null || _e === void 0 ? void 0 : _e.options.find(o => o.id === optionForm.value.id);
+                    if (optionForm.dirty) {
+                        const optionGroup = (_a = optionGroups
+                            .find(og => og.id === optionGroupForm.value.id)) === null || _a === void 0 ? void 0 : _a.options.find(o => o.id === optionForm.value.id);
                         if (optionGroup) {
                             const input = this.getUpdatedOption(optionGroup, optionForm, languageCode);
                             updateOperations.push(this.productDetailService.updateProductOption(Object.assign(Object.assign({}, input), { autoUpdate: this.autoUpdateVariantNames }), product, languageCode));
@@ -2101,7 +2101,7 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
         const input = createUpdatedTranslatable({
             translatable: option,
             updatedFields: optionFormGroup.value,
-            customFieldConfig: this.optionGroupCustomFields,
+            customFieldConfig: this.optionCustomFields,
             languageCode,
             defaultTranslation: {
                 languageCode,
@@ -2111,39 +2111,84 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
         return input;
     }
     setFormValues(entity, languageCode) {
-        const groupsFormArray = new FormArray([]);
+        const groupsForm = this.detailForm.get('optionGroups');
         for (const optionGroup of entity.optionGroups) {
             const groupTranslation = findTranslation(optionGroup, languageCode);
-            const group = {
-                id: optionGroup.id,
-                createdAt: optionGroup.createdAt,
-                updatedAt: optionGroup.updatedAt,
-                code: optionGroup.code,
-                name: groupTranslation ? groupTranslation.name : '',
-            };
-            const optionsFormArray = new FormArray([]);
+            const groupForm = this.setOptionGroupForm(optionGroup, groupsForm, groupTranslation);
+            this.setCustomFieldsForm(this.optionGroupCustomFields, groupForm, optionGroup, groupTranslation);
+            let optionsForm = groupForm.get('options');
+            if (!optionsForm) {
+                optionsForm = this.formBuilder.array([]);
+                groupForm.addControl('options', optionsForm);
+            }
             for (const option of optionGroup.options) {
                 const optionTranslation = findTranslation(option, languageCode);
-                const optionControl = this.formBuilder.group({
-                    id: option.id,
-                    createdAt: option.createdAt,
-                    updatedAt: option.updatedAt,
-                    code: option.code,
-                    name: optionTranslation ? optionTranslation.name : '',
-                });
-                optionsFormArray.push(optionControl);
+                const optionForm = this.setOptionForm(option, optionsForm, optionTranslation);
+                this.setCustomFieldsForm(this.optionCustomFields, optionForm, option, optionTranslation);
+            }
+        }
+    }
+    setCustomFieldsForm(customFields, formGroup, entity, currentTranslation) {
+        if (customFields.length) {
+            let customValueFieldsGroup = formGroup.get(['customFields']);
+            if (!customValueFieldsGroup) {
+                customValueFieldsGroup = this.formBuilder.group(customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {}));
+                formGroup.addControl('customFields', customValueFieldsGroup);
             }
-            const groupControl = this.formBuilder.group(group);
-            groupControl.addControl('options', optionsFormArray);
-            groupsFormArray.push(groupControl);
+            this.setCustomFieldFormValues(customFields, customValueFieldsGroup, entity, currentTranslation);
+        }
+    }
+    setOptionGroupForm(entity, groupsForm, currentTranslation) {
+        var _a, _b, _c, _d, _e, _f;
+        const group = {
+            id: entity.id,
+            createdAt: entity.createdAt,
+            updatedAt: entity.updatedAt,
+            code: entity.code,
+            name: (_a = currentTranslation === null || currentTranslation === void 0 ? void 0 : currentTranslation.name) !== null && _a !== void 0 ? _a : '',
+        };
+        let groupForm = groupsForm.controls.find(control => control.value.id === entity.id);
+        if (groupForm) {
+            (_b = groupForm.get('id')) === null || _b === void 0 ? void 0 : _b.setValue(group.id);
+            (_c = groupForm.get('code')) === null || _c === void 0 ? void 0 : _c.setValue(group.code);
+            (_d = groupForm.get('name')) === null || _d === void 0 ? void 0 : _d.setValue(group.name);
+            (_e = groupForm.get('createdAt')) === null || _e === void 0 ? void 0 : _e.setValue(group.name);
+            (_f = groupForm.get('updatedAt')) === null || _f === void 0 ? void 0 : _f.setValue(group.name);
+        }
+        else {
+            groupForm = this.formBuilder.group(group);
+            groupsForm.push(groupForm);
+        }
+        return groupForm;
+    }
+    setOptionForm(entity, optionsForm, currentTranslation) {
+        var _a, _b, _c, _d, _e, _f;
+        const group = {
+            id: entity.id,
+            createdAt: entity.createdAt,
+            updatedAt: entity.updatedAt,
+            code: entity.code,
+            name: (_a = currentTranslation === null || currentTranslation === void 0 ? void 0 : currentTranslation.name) !== null && _a !== void 0 ? _a : '',
+        };
+        let optionForm = optionsForm.controls.find(control => control.value.id === entity.id);
+        if (optionForm) {
+            (_b = optionForm.get('id')) === null || _b === void 0 ? void 0 : _b.setValue(group.id);
+            (_c = optionForm.get('code')) === null || _c === void 0 ? void 0 : _c.setValue(group.code);
+            (_d = optionForm.get('name')) === null || _d === void 0 ? void 0 : _d.setValue(group.name);
+            (_e = optionForm.get('createdAt')) === null || _e === void 0 ? void 0 : _e.setValue(group.name);
+            (_f = optionForm.get('updatedAt')) === null || _f === void 0 ? void 0 : _f.setValue(group.name);
+        }
+        else {
+            optionForm = this.formBuilder.group(group);
+            optionsForm.push(optionForm);
         }
-        this.detailForm.setControl('optionGroups', groupsFormArray);
+        return optionForm;
     }
 }
 ProductOptionsEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-product-options-editor',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-language-selector\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <div class=\"flex center\">\r\n            <div class=\"mr2\">\r\n                <clr-checkbox-wrapper>\r\n                    <input\r\n                        clrCheckbox\r\n                        type=\"checkbox\"\r\n                        id=\"auto-update\"\r\n                        [(ngModel)]=\"autoUpdateVariantNames\"\r\n                    />\r\n                    <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </div>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n    <div formGroupName=\"optionGroups\" class=\"clr-row\">\r\n        <div class=\"clr-col-12 clr-col-xl-6\" *ngFor=\"let optionGroup of getOptionGroups(); index as i\">\r\n            <section class=\"card\" [formArrayName]=\"i\">\r\n                <div class=\"card-header option-group-header\">\r\n                    <vdr-entity-info [entity]=\"optionGroup.value\"></vdr-entity-info>\r\n                    <div class=\"ml2\">{{ optionGroup.value.code }}</div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            [id]=\"'name-' + i\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            [id]=\"'code-' + i\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n                <section class=\"card-block\">\r\n                    <table class=\"facet-values-list table mt2 mb4\" formGroupName=\"options\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"let option of getOptions(optionGroup); let i = index\"\r\n                                [formGroupName]=\"i\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"option.value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" /></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </section>\r\n            </section>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-language-selector\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <div class=\"flex center\">\r\n            <div class=\"mr2\">\r\n                <clr-checkbox-wrapper>\r\n                    <input\r\n                        clrCheckbox\r\n                        type=\"checkbox\"\r\n                        id=\"auto-update\"\r\n                        [(ngModel)]=\"autoUpdateVariantNames\"\r\n                    />\r\n                    <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </div>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n    <div formGroupName=\"optionGroups\" class=\"clr-row\">\r\n        <div class=\"clr-col-12 clr-col-xl-6\" *ngFor=\"let optionGroup of getOptionGroups(); index as i\">\r\n            <section class=\"card\" [formArrayName]=\"i\">\r\n                <div class=\"card-header option-group-header\">\r\n                    <vdr-entity-info [entity]=\"optionGroup.value\"></vdr-entity-info>\r\n                    <div class=\"ml2\">{{ optionGroup.value.code }}</div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            [id]=\"'name-' + i\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            [id]=\"'code-' + i\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <section formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\r\n                        <label>{{ 'common.custom-fields' | translate }}</label>\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"ProductOptionGroup\"\r\n                            [customFields]=\"optionGroupCustomFields\"\r\n                            [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </section>\r\n                </div>\r\n                <section class=\"card-block\">\r\n                    <table class=\"facet-values-list table mt2 mb4\" formGroupName=\"options\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"optionCustomFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"let option of getOptions(optionGroup); let i = index\"\r\n                                [formGroupName]=\"i\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"option.value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" /></td>\r\n                                <td class=\"\" *ngIf=\"optionCustomFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductOption\"\r\n                                        [customFields]=\"optionCustomFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"option.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </section>\r\n            </section>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".option-group-header{display:flex;align-items:baseline}\n"]
             },] }