ferngully-aurelia-tools/dist/es2015/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";
let FormSchemaCollection = class FormSchemaCollection {
    constructor(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;
    }
    get disableNew() {
        return !!this.controller.disableNew || !!this.externalInsertButton;
    }
    get disableDelete() {
        return !!this.controller.disableDelete;
    }
    get showKeyColumn() {
        return !!this.controller.showKeyColumn;
    }
    disableSorting() {
        this.sortColumnService.sortEnabled = false;
    }
    enableSorting() {
        setTimeout(() => { this.sortColumnService.sortEnabled = true; }, 0);
    }
    setInstances(value) {
        this.disableSorting();
        this.clearInstances();
        for (let instance of value) {
            this.initInstance(instance);
            this.javaScriptService.yield();
        }
        this.instances = value;
        this.enableSorting();
        if (this.onNewInstances) {
            this.onNewInstances(this.instances);
        }
    }
    clearInstances() {
        if (this.instances) {
            for (let instance of this.instances) {
                this.unInitInstance(instance);
            }
            this.instances = [];
        }
    }
    bind() {
        this.subscriptions.push(this.controller.subscribe('loaded', () => { this.initializeOnLoad(); }));
        this.subscriptions.push(this.controller.subscribe('refetched', () => { this.setInstances(this.controller.instances); }));
    }
    unbind() {
        if (this.instances.length) {
            this.clearInstances();
            this.subscriptions.dispose();
            if (this.validationService) {
                for (let renderer of this.renderers) {
                    this.validationService.removeValidationRenderer(renderer);
                }
                this.renderers = [];
            }
        }
    }
    initializeOnLoad() {
        this.sortColumnService = this.controller.sortColumnService;
        this.formSchema = this.controller.formSchema;
        this.properties = this.formSchema.properties
            .filter((p) => { return !p.isKey || this.showKeyColumn; });
        if (this.externalInsertButton) {
            $(this.externalInsertButton).on('click.formSchemaCollection', () => {
                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;
        let renderer = this.aureliaHelperService.getInstanceOf(FormSchemaCollectionValidationRenderer);
        this.renderers.push(renderer);
        let 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", (parms) => { this.handleValidationChanged(parms.instance, parms.errors); }));
        }
        if (this.controller.instances) {
            this.setInstances(this.controller.instances);
            setTimeout(() => this.controller.revalidateAll(), 0);
        }
    }
    initInstance(instance) {
        this.watchPropertyValues(instance);
        this.controller.registerInstances([instance]);
    }
    unInitInstance(instance) {
        this.unwatchPropertyValues(instance);
        this.controller.unRegisterInstances([instance]);
    }
    unwatchPropertyValues(instance) {
        instance._propertyChangeSubscriptions.emptyAndDispose();
        this.controller.unRegisterInstances([instance]);
    }
    watchPropertyValues(instance) {
        if (!instance._propertyChangeSubscriptions) {
            instance._propertyChangeSubscriptions = new DisposableCollection();
        }
        else {
            this.unwatchPropertyValues(instance);
        }
        for (let propertySchema of this.properties) {
            instance._propertyChangeSubscriptions.push(this.aureliaHelperService.createPropertyWatch(instance, propertySchema.name, (newValue, oldValue) => {
                if (!instance._pendingInsert) {
                    this.updateInstance(instance, propertySchema.name, newValue, oldValue);
                }
                else {
                    this.controller.validate(instance, propertySchema.name, newValue, oldValue);
                }
            }));
        }
    }
    deleteInstance(instance) {
        this.controller.handleDelete(instance)
            .then((ok) => {
            if (ok) {
                this.deleteRow(instance);
            }
        });
    }
    createInstance() {
        this.controller.handleCreate()
            .then((instance) => {
            if (instance) {
                if (this.insertOnNew) {
                    this.saveNewInstance(instance);
                }
                else {
                    instance._pendingInsert = true;
                    this.newRow(instance);
                }
            }
        });
    }
    saveNewInstance(instance) {
        this.controller.handleNew(instance)
            .then((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(() => { this.animateRowChanged(newInstance); }, 0);
            }
        });
    }
    cancelNewInstance(instance) {
        this.deleteRow(instance);
    }
    updateInstance(instance, propertyName, newValue, oldValue) {
        this.controller.handleUpdate(instance, propertyName, newValue, oldValue)
            .then((success) => {
            if (success) {
                this.animateRowChanged(instance);
            }
        });
    }
    deleteRow(instance) {
        this.unInitInstance(instance);
        let ndx = this.instances.findIndex((i) => { return i === instance; });
        if (ndx !== -1) {
            this.instances.splice(ndx, 1);
        }
        if (instance._ordinalPosition !== undefined) {
            this.normalizeOrdinalPositions();
        }
    }
    newRow(instance) {
        this.initInstance(instance);
        let hardCodedInstances = this.instances.filter((i) => { return i._ordinalPosition !== undefined; });
        for (let instance of hardCodedInstances) {
            instance._ordinalPosition = instance._ordinalPosition + 1;
        }
        instance._ordinalPosition = 0;
        this.instances.splice(0, 0, instance);
    }
    replaceRow(oldInstance, newInstance) {
        let ndx = this.instances.findIndex((i) => { return i === oldInstance; });
        this.unInitInstance(oldInstance);
        this.initInstance(newInstance);
        newInstance._ordinalPosition = oldInstance._ordinalPosition;
        this.instances.splice(ndx, 1, newInstance);
    }
    handleValidationChanged(instance, errors) {
        instance._validationHtml = this.getValidationMessageHtml(instance, errors);
    }
    animateRowChanged(instance) {
        let theRow = $(this.theTable).find("#" + instance[this.formSchema.key]);
        theRow.css("animation-name", "none");
        setTimeout(() => {
            theRow.css("animation-name", 'animateOnUpdate');
            setTimeout(() => {
                theRow.css("animation-name", "none");
            }, this.animationDuration * 1000 + .5);
        }, 10);
    }
    normalizeOrdinalPositions() {
        let hardCodedInstances = this.instances.filter((i) => { return i._ordinalPosition !== undefined; })
            .sort((a, b) => { return (a._ordinalPosition - b._ordinalPosition); });
        let ndx = 0;
        for (let instance of hardCodedInstances) {
            instance._ordinalPosition = ndx++;
        }
    }
    revert(ndx) {
        let instance = this.instances[ndx];
        this.controller.fetchInstance(instance)
            .then((freshInstance) => {
            this.replaceRow(instance, freshInstance);
        });
    }
    getValidationMessageHtml(instance, errors) {
        let html;
        if (errors && errors.length) {
            html = "<div id='validationMessagesPopup'><div class='validationMessagesPopup'>";
            errors.forEach((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;
    }
    dropdownTextFromValue(items, value) {
        return EditableInlineSelect.dropdownTextFromValue(items, value);
    }
    computeSelectedItemsString(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);
export { FormSchemaCollection };
//# sourceMappingURL=form-schema-collection.js.map