ferngully-aurelia-tools/dist/native-modules/resources/customElements/form-schema-collection/form-schema-collection.js

Ferngully Tools for Aurelia

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { customElement, bindable, autoinject, computedFrom } from "aurelia-framework";
import { bindingMode as BindingMode } from "aurelia-binding";
import { DisposableCollection } from "../../../services/disposable-collection";
import { AureliaHelperService } from "../../../services/aurelia-helper-service";
import { validateTrigger as ValidateTrigger } from "aurelia-validation";
import { FormSchemaCollectionValidationRenderer } from "./form-schema-collection-validation-renderer";
import { ValidationEventAggregator } from "../../../services/validation/validation-event-aggregator";
import "./form-schema-collection.css";
import { JavaScriptService } from "../../../services/javascript-service";
import { EditableInlineDropdownCheckbox } from "../editable-inline-dropdown-checkbox/editable-inline-dropdown-checkbox";
import { EditableInlineSelect } from "../editable-inline-select/editable-inline-select";
var FormSchemaCollection = (function () {
    function FormSchemaCollection(aureliaHelperService, javaScriptService) {
        this.aureliaHelperService = aureliaHelperService;
        this.javaScriptService = javaScriptService;
        this.externalInsertButton = null;
        this.tableClass = null;
        this.renderers = [];
        this.insertOnNew = false;
        this.binding = false;
        this.subscriptions = new DisposableCollection();
        this.instances = [];
        this.animationDuration = 2;
    }
    Object.defineProperty(FormSchemaCollection.prototype, "disableNew", {
        get: function () {
            return !!this.controller.disableNew || !!this.externalInsertButton;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSchemaCollection.prototype, "disableDelete", {
        get: function () {
            return !!this.controller.disableDelete;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(FormSchemaCollection.prototype, "showKeyColumn", {
        get: function () {
            return !!this.controller.showKeyColumn;
        },
        enumerable: true,
        configurable: true
    });
    FormSchemaCollection.prototype.disableSorting = function () {
        this.sortColumnService.sortEnabled = false;
    };
    FormSchemaCollection.prototype.enableSorting = function () {
        var _this = this;
        setTimeout(function () { _this.sortColumnService.sortEnabled = true; }, 0);
    };
    FormSchemaCollection.prototype.setInstances = function (value) {
        this.disableSorting();
        this.clearInstances();
        for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
            var instance = value_1[_i];
            this.initInstance(instance);
            this.javaScriptService.yield();
        }
        this.instances = value;
        this.enableSorting();
        if (this.onNewInstances) {
            this.onNewInstances(this.instances);
        }
    };
    FormSchemaCollection.prototype.clearInstances = function () {
        if (this.instances) {
            for (var _i = 0, _a = this.instances; _i < _a.length; _i++) {
                var instance = _a[_i];
                this.unInitInstance(instance);
            }
            this.instances = [];
        }
    };
    FormSchemaCollection.prototype.bind = function () {
        var _this = this;
        this.subscriptions.push(this.controller.subscribe('loaded', function () { _this.initializeOnLoad(); }));
        this.subscriptions.push(this.controller.subscribe('refetched', function () { _this.setInstances(_this.controller.instances); }));
    };
    FormSchemaCollection.prototype.unbind = function () {
        if (this.instances.length) {
            this.clearInstances();
            this.subscriptions.dispose();
            if (this.validationService) {
                for (var _i = 0, _a = this.renderers; _i < _a.length; _i++) {
                    var renderer = _a[_i];
                    this.validationService.removeValidationRenderer(renderer);
                }
                this.renderers = [];
            }
        }
    };
    FormSchemaCollection.prototype.initializeOnLoad = function () {
        var _this = this;
        this.sortColumnService = this.controller.sortColumnService;
        this.formSchema = this.controller.formSchema;
        this.properties = this.formSchema.properties
            .filter(function (p) { return !p.isKey || _this.showKeyColumn; });
        if (this.externalInsertButton) {
            $(this.externalInsertButton).on('click.formSchemaCollection', function () {
                _this.createInstance();
            });
        }
        this.handleDelete = this.controller.handleDelete;
        this.handleNew = this.controller.handleNew;
        this.handleCreate = this.controller.handleCreate;
        this.handleUpdate = this.controller.handleUpdate;
        this.insertOnNew = this.controller.insertOnNew;
        var renderer = this.aureliaHelperService.getInstanceOf(FormSchemaCollectionValidationRenderer);
        this.renderers.push(renderer);
        var validationEventRenderer = this.aureliaHelperService.getInstanceOf(ValidationEventAggregator);
        this.renderers.push(validationEventRenderer);
        this.validationService = this.controller.validationService;
        if (this.validationService) {
            this.validationController = this.validationService.validationController;
            this.validationService.validateTrigger = ValidateTrigger.manual;
            this.validationService.addValidationRenderer(renderer);
            this.validationService.addValidationRenderer(validationEventRenderer);
            this.subscriptions.push(validationEventRenderer.subscribe("validationChanged", function (parms) { _this.handleValidationChanged(parms.instance, parms.errors); }));
        }
        if (this.controller.instances) {
            this.setInstances(this.controller.instances);
            setTimeout(function () { return _this.controller.revalidateAll(); }, 0);
        }
    };
    FormSchemaCollection.prototype.initInstance = function (instance) {
        this.watchPropertyValues(instance);
        this.controller.registerInstances([instance]);
    };
    FormSchemaCollection.prototype.unInitInstance = function (instance) {
        this.unwatchPropertyValues(instance);
        this.controller.unRegisterInstances([instance]);
    };
    FormSchemaCollection.prototype.unwatchPropertyValues = function (instance) {
        instance._propertyChangeSubscriptions.emptyAndDispose();
        this.controller.unRegisterInstances([instance]);
    };
    FormSchemaCollection.prototype.watchPropertyValues = function (instance) {
        var _this = this;
        if (!instance._propertyChangeSubscriptions) {
            instance._propertyChangeSubscriptions = new DisposableCollection();
        }
        else {
            this.unwatchPropertyValues(instance);
        }
        var _loop_1 = function (propertySchema) {
            instance._propertyChangeSubscriptions.push(this_1.aureliaHelperService.createPropertyWatch(instance, propertySchema.name, function (newValue, oldValue) {
                if (!instance._pendingInsert) {
                    _this.updateInstance(instance, propertySchema.name, newValue, oldValue);
                }
                else {
                    _this.controller.validate(instance, propertySchema.name, newValue, oldValue);
                }
            }));
        };
        var this_1 = this;
        for (var _i = 0, _a = this.properties; _i < _a.length; _i++) {
            var propertySchema = _a[_i];
            _loop_1(propertySchema);
        }
    };
    FormSchemaCollection.prototype.deleteInstance = function (instance) {
        var _this = this;
        this.controller.handleDelete(instance)
            .then(function (ok) {
            if (ok) {
                _this.deleteRow(instance);
            }
        });
    };
    FormSchemaCollection.prototype.createInstance = function () {
        var _this = this;
        this.controller.handleCreate()
            .then(function (instance) {
            if (instance) {
                if (_this.insertOnNew) {
                    _this.saveNewInstance(instance);
                }
                else {
                    instance._pendingInsert = true;
                    _this.newRow(instance);
                }
            }
        });
    };
    FormSchemaCollection.prototype.saveNewInstance = function (instance) {
        var _this = this;
        this.controller.handleNew(instance)
            .then(function (newInstance) {
            if (newInstance) {
                if (instance._pendingInsert) {
                    instance._pendingInsert = false;
                    instance._ordinalPosition = undefined;
                    _this.disableSorting();
                    _this.replaceRow(instance, newInstance);
                    _this.enableSorting();
                }
                else {
                    newInstance._newlyInserted = true;
                    _this.newRow(newInstance);
                }
                setTimeout(function () { _this.animateRowChanged(newInstance); }, 0);
            }
        });
    };
    FormSchemaCollection.prototype.cancelNewInstance = function (instance) {
        this.deleteRow(instance);
    };
    FormSchemaCollection.prototype.updateInstance = function (instance, propertyName, newValue, oldValue) {
        var _this = this;
        this.controller.handleUpdate(instance, propertyName, newValue, oldValue)
            .then(function (success) {
            if (success) {
                _this.animateRowChanged(instance);
            }
        });
    };
    FormSchemaCollection.prototype.deleteRow = function (instance) {
        this.unInitInstance(instance);
        var ndx = this.instances.findIndex(function (i) { return i === instance; });
        if (ndx !== -1) {
            this.instances.splice(ndx, 1);
        }
        if (instance._ordinalPosition !== undefined) {
            this.normalizeOrdinalPositions();
        }
    };
    FormSchemaCollection.prototype.newRow = function (instance) {
        this.initInstance(instance);
        var hardCodedInstances = this.instances.filter(function (i) { return i._ordinalPosition !== undefined; });
        for (var _i = 0, hardCodedInstances_1 = hardCodedInstances; _i < hardCodedInstances_1.length; _i++) {
            var instance_1 = hardCodedInstances_1[_i];
            instance_1._ordinalPosition = instance_1._ordinalPosition + 1;
        }
        instance._ordinalPosition = 0;
        this.instances.splice(0, 0, instance);
    };
    FormSchemaCollection.prototype.replaceRow = function (oldInstance, newInstance) {
        var ndx = this.instances.findIndex(function (i) { return i === oldInstance; });
        this.unInitInstance(oldInstance);
        this.initInstance(newInstance);
        newInstance._ordinalPosition = oldInstance._ordinalPosition;
        this.instances.splice(ndx, 1, newInstance);
    };
    FormSchemaCollection.prototype.handleValidationChanged = function (instance, errors) {
        instance._validationHtml = this.getValidationMessageHtml(instance, errors);
    };
    FormSchemaCollection.prototype.animateRowChanged = function (instance) {
        var _this = this;
        var theRow = $(this.theTable).find("#" + instance[this.formSchema.key]);
        theRow.css("animation-name", "none");
        setTimeout(function () {
            theRow.css("animation-name", 'animateOnUpdate');
            setTimeout(function () {
                theRow.css("animation-name", "none");
            }, _this.animationDuration * 1000 + .5);
        }, 10);
    };
    FormSchemaCollection.prototype.normalizeOrdinalPositions = function () {
        var hardCodedInstances = this.instances.filter(function (i) { return i._ordinalPosition !== undefined; })
            .sort(function (a, b) { return (a._ordinalPosition - b._ordinalPosition); });
        var ndx = 0;
        for (var _i = 0, hardCodedInstances_2 = hardCodedInstances; _i < hardCodedInstances_2.length; _i++) {
            var instance = hardCodedInstances_2[_i];
            instance._ordinalPosition = ndx++;
        }
    };
    FormSchemaCollection.prototype.revert = function (ndx) {
        var _this = this;
        var instance = this.instances[ndx];
        this.controller.fetchInstance(instance)
            .then(function (freshInstance) {
            _this.replaceRow(instance, freshInstance);
        });
    };
    FormSchemaCollection.prototype.getValidationMessageHtml = function (instance, errors) {
        var html;
        if (errors && errors.length) {
            html = "<div id='validationMessagesPopup'><div class='validationMessagesPopup'>";
            errors.forEach(function (error) {
                html += "<div class='message'>" + error.message + "</div>";
            });
            if (!instance._pendingInsert) {
                html += "<div class='revert'><button class='btn btn-xs btn-primary' click.delegate='revert(" + this.instances.indexOf(instance) + ")'>Revert</button></div>";
            }
            html += "</div></div>";
        }
        return html;
    };
    FormSchemaCollection.prototype.dropdownTextFromValue = function (items, value) {
        return EditableInlineSelect.dropdownTextFromValue(items, value);
    };
    FormSchemaCollection.prototype.computeSelectedItemsString = function (items, selectedItems) {
        return EditableInlineDropdownCheckbox.computeSelectedItemsString(items, selectedItems);
    };
    __decorate([
        bindable({ defaultBindingMode: BindingMode.oneWay }),
        __metadata("design:type", Function)
    ], FormSchemaCollection.prototype, "onNewInstances", void 0);
    __decorate([
        bindable({ defaultBindingMode: BindingMode.oneWay }),
        __metadata("design:type", Object)
    ], FormSchemaCollection.prototype, "externalInsertButton", void 0);
    __decorate([
        bindable({ defaultBindingMode: BindingMode.oneWay }),
        __metadata("design:type", Object)
    ], FormSchemaCollection.prototype, "tableClass", void 0);
    __decorate([
        bindable({ defaultBindingMode: BindingMode.oneWay }),
        __metadata("design:type", Object)
    ], FormSchemaCollection.prototype, "controller", void 0);
    __decorate([
        computedFrom("controller.disableNew", "externalInsertButton"),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [])
    ], FormSchemaCollection.prototype, "disableNew", null);
    __decorate([
        computedFrom("controller.disableDelete"),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [])
    ], FormSchemaCollection.prototype, "disableDelete", null);
    __decorate([
        computedFrom("controller.showKeyColumn"),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [])
    ], FormSchemaCollection.prototype, "showKeyColumn", null);
    FormSchemaCollection = __decorate([
        autoinject,
        customElement('form-schema-collection'),
        __metadata("design:paramtypes", [AureliaHelperService,
            JavaScriptService])
    ], FormSchemaCollection);
    return FormSchemaCollection;
}());
export { FormSchemaCollection };
//# sourceMappingURL=form-schema-collection.js.map