@vendure/admin-ui 1.9.5 → 1.9.6

package/bundles/vendure-admin-ui-catalog.umd.js

@@ -2650,14 +2650,14 @@
             // tslint:disable-next-line:no-non-null-assertion
             var $product = this.dataService.product.getProduct(this.id).mapSingle(function (data) { return data.product; });
             rxjs.combineLatest(this.entity$, this.languageCode$, $product)
-                .pipe(operators.take(1), operators.mergeMap(function (_f) {
-                var e_1, _g;
-                var _h = __read(_f, 3), optionGroups = _h[0].optionGroups, languageCode = _h[1], product = _h[2];
-                var _a, _b, _c, _d, _e;
+                .pipe(operators.take(1), operators.mergeMap(function (_g) {
+                var e_1, _h;
+                var _j = __read(_g, 3), optionGroups = _j[0].optionGroups, languageCode = _j[1], product = _j[2];
+                var _a;
                 var updateOperations = [];
                 var _loop_1 = function (optionGroupForm) {
-                    var e_2, _l;
-                    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)) {
+                    var e_2, _m;
+                    if (optionGroupForm.dirty) {
                         var optionGroupEntity = optionGroups.find(function (og) { return og.id === optionGroupForm.value.id; });
                         if (optionGroupEntity) {
                             var input = _this.getUpdatedOptionGroup(optionGroupEntity, optionGroupForm, languageCode);
@@ -2665,9 +2665,9 @@
                         }
                     }
                     var _loop_2 = function (optionForm) {
-                        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)) {
-                            var optionGroup = (_e = optionGroups
-                                .find(function (og) { return og.id === optionGroupForm.value.id; })) === null || _e === void 0 ? void 0 : _e.options.find(function (o) { return o.id === optionForm.value.id; });
+                        if (optionForm.dirty) {
+                            var optionGroup = (_a = optionGroups
+                                .find(function (og) { return og.id === optionGroupForm.value.id; })) === null || _a === void 0 ? void 0 : _a.options.find(function (o) { return o.id === optionForm.value.id; });
                             if (optionGroup) {
                                 var input = _this.getUpdatedOption(optionGroup, optionForm, languageCode);
                                 updateOperations.push(_this.productDetailService.updateProductOption(Object.assign(Object.assign({}, input), { autoUpdate: _this.autoUpdateVariantNames }), product, languageCode));
@@ -2675,29 +2675,29 @@
                         }
                     };
                     try {
-                        for (var _m = (e_2 = void 0, __values(_this.getOptions(optionGroupForm))), _o = _m.next(); !_o.done; _o = _m.next()) {
-                            var optionForm = _o.value;
+                        for (var _o = (e_2 = void 0, __values(_this.getOptions(optionGroupForm))), _p = _o.next(); !_p.done; _p = _o.next()) {
+                            var optionForm = _p.value;
                             _loop_2(optionForm);
                         }
                     }
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (_o && !_o.done && (_l = _m.return)) _l.call(_m);
+                            if (_p && !_p.done && (_m = _o.return)) _m.call(_o);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
                 };
                 try {
-                    for (var _j = __values(_this.getOptionGroups()), _k = _j.next(); !_k.done; _k = _j.next()) {
-                        var optionGroupForm = _k.value;
+                    for (var _k = __values(_this.getOptionGroups()), _l = _k.next(); !_l.done; _l = _k.next()) {
+                        var optionGroupForm = _l.value;
                         _loop_1(optionGroupForm);
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_k && !_k.done && (_g = _j.return)) _g.call(_j);
+                        if (_l && !_l.done && (_h = _k.return)) _h.call(_k);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -2732,7 +2732,7 @@
             var input = i2.createUpdatedTranslatable({
                 translatable: option,
                 updatedFields: optionFormGroup.value,
-                customFieldConfig: this.optionGroupCustomFields,
+                customFieldConfig: this.optionCustomFields,
                 languageCode: languageCode,
                 defaultTranslation: {
                     languageCode: languageCode,
@@ -2742,61 +2742,109 @@
             return input;
         };
         ProductOptionsEditorComponent.prototype.setFormValues = function (entity, languageCode) {
-            var e_3, _f, e_4, _g;
-            var groupsFormArray = new forms.FormArray([]);
+            var e_3, _g, e_4, _h;
+            var groupsForm = this.detailForm.get('optionGroups');
             try {
-                for (var _h = __values(entity.optionGroups), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var optionGroup = _j.value;
+                for (var _j = __values(entity.optionGroups), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var optionGroup = _k.value;
                     var groupTranslation = i2.findTranslation(optionGroup, languageCode);
-                    var group = {
-                        id: optionGroup.id,
-                        createdAt: optionGroup.createdAt,
-                        updatedAt: optionGroup.updatedAt,
-                        code: optionGroup.code,
-                        name: groupTranslation ? groupTranslation.name : '',
-                    };
-                    var optionsFormArray = new forms.FormArray([]);
+                    var groupForm = this.setOptionGroupForm(optionGroup, groupsForm, groupTranslation);
+                    this.setCustomFieldsForm(this.optionGroupCustomFields, groupForm, optionGroup, groupTranslation);
+                    var optionsForm = groupForm.get('options');
+                    if (!optionsForm) {
+                        optionsForm = this.formBuilder.array([]);
+                        groupForm.addControl('options', optionsForm);
+                    }
                     try {
-                        for (var _k = (e_4 = void 0, __values(optionGroup.options)), _l = _k.next(); !_l.done; _l = _k.next()) {
-                            var option = _l.value;
+                        for (var _l = (e_4 = void 0, __values(optionGroup.options)), _m = _l.next(); !_m.done; _m = _l.next()) {
+                            var option = _m.value;
                             var optionTranslation = i2.findTranslation(option, languageCode);
-                            var optionControl = this.formBuilder.group({
-                                id: option.id,
-                                createdAt: option.createdAt,
-                                updatedAt: option.updatedAt,
-                                code: option.code,
-                                name: optionTranslation ? optionTranslation.name : '',
-                            });
-                            optionsFormArray.push(optionControl);
+                            var optionForm = this.setOptionForm(option, optionsForm, optionTranslation);
+                            this.setCustomFieldsForm(this.optionCustomFields, optionForm, option, optionTranslation);
                         }
                     }
                     catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (_l && !_l.done && (_g = _k.return)) _g.call(_k);
+                            if (_m && !_m.done && (_h = _l.return)) _h.call(_l);
                         }
                         finally { if (e_4) throw e_4.error; }
                     }
-                    var groupControl = this.formBuilder.group(group);
-                    groupControl.addControl('options', optionsFormArray);
-                    groupsFormArray.push(groupControl);
                 }
             }
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_j && !_j.done && (_f = _h.return)) _f.call(_h);
+                    if (_k && !_k.done && (_g = _j.return)) _g.call(_j);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
-            this.detailForm.setControl('optionGroups', groupsFormArray);
+        };
+        ProductOptionsEditorComponent.prototype.setCustomFieldsForm = function (customFields, formGroup, entity, currentTranslation) {
+            if (customFields.length) {
+                var customValueFieldsGroup = formGroup.get(['customFields']);
+                if (!customValueFieldsGroup) {
+                    customValueFieldsGroup = this.formBuilder.group(customFields.reduce(function (hash, field) {
+                        var _g;
+                        return (Object.assign(Object.assign({}, hash), (_g = {}, _g[field.name] = '', _g)));
+                    }, {}));
+                    formGroup.addControl('customFields', customValueFieldsGroup);
+                }
+                this.setCustomFieldFormValues(customFields, customValueFieldsGroup, entity, currentTranslation);
+            }
+        };
+        ProductOptionsEditorComponent.prototype.setOptionGroupForm = function (entity, groupsForm, currentTranslation) {
+            var _a, _b, _c, _d, _e, _f;
+            var 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 : '',
+            };
+            var groupForm = groupsForm.controls.find(function (control) { return 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;
+        };
+        ProductOptionsEditorComponent.prototype.setOptionForm = function (entity, optionsForm, currentTranslation) {
+            var _a, _b, _c, _d, _e, _f;
+            var 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 : '',
+            };
+            var optionForm = optionsForm.controls.find(function (control) { return 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);
+            }
+            return optionForm;
         };
         return ProductOptionsEditorComponent;
     }(i2.BaseDetailComponent));
     ProductOptionsEditorComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".option-group-header{display:flex;align-items:baseline}\n"]
                 },] }