nakedobjects.spa/lib/app/object/object.component.js

Single Page Application client for a Naked Objects application.

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 { Component, ViewChildren, QueryList } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as Models from '../models';
import { UrlManagerService } from '../url-manager.service';
import { ContextService } from '../context.service';
import { ViewModelFactoryService } from '../view-model-factory.service';
import { ErrorService } from '../error.service';
import { InteractionMode } from '../route-data';
import { FormBuilder } from '@angular/forms';
import { wrapAction } from '../action/action.component';
import { ColorService } from '../color.service';
import { ConfigService } from '../config.service';
import { PropertiesComponent } from '../properties/properties.component';
import * as Msg from '../user-messages';
import * as Helpers from '../view-models/helpers-view-models';
import filter from 'lodash/filter';
import forEach from 'lodash/forEach';
import map from 'lodash/map';
import flatten from 'lodash/flatten';
import zipObject from 'lodash/zipObject';
import mapValues from 'lodash/mapValues';
import some from 'lodash/some';
import { safeUnsubscribe } from '../helpers-components';
var ObjectComponent = (function () {
    function ObjectComponent(activatedRoute, urlManager, context, viewModelFactory, colorService, error, formBuilder, configService) {
        var _this = this;
        this.activatedRoute = activatedRoute;
        this.urlManager = urlManager;
        this.context = context;
        this.viewModelFactory = viewModelFactory;
        this.colorService = colorService;
        this.error = error;
        this.formBuilder = formBuilder;
        this.configService = configService;
        // template API
        this.expiredTransient = false;
        this.disableActions = function () {
            var obj = _this.object;
            return obj && obj.noActions() ? true : null;
        };
        this.actionsTooltip = function () {
            var obj = _this.object;
            return obj ? obj.actionsTooltip() : "";
        };
        this.unsaved = function () {
            var obj = _this.object;
            return !!obj && obj.unsaved;
        };
        this.toggleActionMenu = function () {
            _this.do(function (o) { return o.toggleActionMenu(); });
        };
        this.doEdit = function () {
            _this.do(function (o) { return o.doEdit(); });
        };
        this.doEditCancel = function () {
            _this.do(function (o) { return o.doEditCancel(); });
        };
        this.showEdit = function () {
            var obj = _this.object;
            return !!obj && !obj.hideEdit();
        };
        this.doReload = function () {
            _this.do(function (o) { return o.doReload(); });
        };
        this.message = function () {
            var obj = _this.object;
            return obj ? obj.getMessage() : "";
        };
        this.showActions = function () {
            var obj = _this.object;
            return !!obj && obj.showActions();
        };
        this.menuItems = function () {
            var obj = _this.object;
            return obj ? obj.menuItems : [];
        };
        this.actionButton = {
            value: "Actions",
            doClick: function () { return _this.toggleActionMenu(); },
            show: function () { return true; },
            disabled: function () { return _this.disableActions(); },
            tempDisabled: function () { return null; },
            title: function () { return _this.actionsTooltip(); },
            accesskey: "a"
        };
        this.editButton = {
            value: "Edit",
            doClick: function () { return _this.doEdit(); },
            show: function () { return _this.showEdit(); },
            disabled: function () { return null; },
            tempDisabled: function () { return null; },
            title: function () { return ""; },
            accesskey: null
        };
        this.reloadButton = {
            value: "Reload",
            doClick: function () { return _this.doReload(); },
            show: function () { return true; },
            disabled: function () { return null; },
            tempDisabled: function () { return null; },
            title: function () { return ""; },
            accesskey: null
        };
        this.saveButton = {
            value: "Save",
            doClick: function () { return _this.onSubmit(true); },
            show: function () { return true; },
            disabled: function () { return _this.form && !_this.form.valid ? true : null; },
            tempDisabled: function () { return null; },
            title: function () { return _this.tooltip; },
            accesskey: null
        };
        this.saveAndCloseButton = {
            value: "Save & Close",
            doClick: function () { return _this.onSubmit(false); },
            show: function () { return _this.unsaved(); },
            disabled: function () { return _this.form && !_this.form.valid ? true : null; },
            tempDisabled: function () { return null; },
            title: function () { return _this.tooltip; },
            accesskey: null
        };
        this.cancelButton = {
            value: "Cancel",
            doClick: function () { return _this.doEditCancel(); },
            show: function () { return true; },
            disabled: function () { return null; },
            tempDisabled: function () { return null; },
            title: function () { return ""; },
            accesskey: null
        };
        this.viewButtons = [this.actionButton, this.editButton, this.reloadButton];
        this.saveButtons = [this.saveButton, this.saveAndCloseButton, this.cancelButton];
        this.pendingColor = "" + configService.config.objectColor + this.colorService.getDefault();
    }
    Object.defineProperty(ObjectComponent.prototype, "viewMode", {
        get: function () {
            return this.mode == null ? "" : InteractionMode[this.mode];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ObjectComponent.prototype, "friendlyName", {
        // must be properties as object may change - eg be reloaded
        get: function () {
            var obj = this.object;
            return obj ? obj.friendlyName : "";
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ObjectComponent.prototype, "color", {
        get: function () {
            var obj = this.object;
            return obj ? obj.color : this.pendingColor;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ObjectComponent.prototype, "properties", {
        get: function () {
            var obj = this.object;
            return obj ? obj.properties : "";
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ObjectComponent.prototype, "collections", {
        get: function () {
            var obj = this.object;
            return obj ? obj.collections : [];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ObjectComponent.prototype, "tooltip", {
        get: function () {
            var obj = this.object;
            return obj ? obj.tooltip() : "";
        },
        enumerable: true,
        configurable: true
    });
    ObjectComponent.prototype.onSubmit = function (viewObject) {
        var _this = this;
        var obj = this.object;
        if (obj) {
            // if save OK we will want to null object and form as returned object may differ
            // and redrawing in current form can fail. If save not OK don't null as
            // will redraw and display errors.
            var onSuccess = function () { return _this.clearCurrentObject(); };
            obj.doSave(viewObject, onSuccess);
        }
    };
    ObjectComponent.prototype.copy = function (event) {
        var obj = this.object;
        if (obj) {
            Helpers.copy(event, obj, this.context);
        }
    };
    ObjectComponent.prototype.title = function () {
        var obj = this.object;
        var prefix = this.mode === InteractionMode.Edit || this.mode === InteractionMode.Transient ? Msg.editing + " - " : "";
        return obj ? "" + prefix + obj.title : "";
    };
    ObjectComponent.prototype.do = function (f) {
        var obj = this.object;
        if (obj) {
            f(obj);
        }
    };
    Object.defineProperty(ObjectComponent.prototype, "actionHolders", {
        get: function () {
            if (this.mode === InteractionMode.View) {
                return this.viewButtons;
            }
            if (this.mode === InteractionMode.Edit || this.mode === InteractionMode.Transient) {
                return this.saveButtons;
            }
            if (this.mode === InteractionMode.Form) {
                // cache because otherwise we will recreate this array of actionHolders everytime page changes !
                if (!this.actionButtons) {
                    var menuItems = this.menuItems();
                    var actions = flatten(map(menuItems, function (mi) { return mi.actions; }));
                    this.actionButtons = map(actions, function (a) { return wrapAction(a); });
                }
                return this.actionButtons;
            }
            return [];
        },
        enumerable: true,
        configurable: true
    });
    ObjectComponent.prototype.clearCurrentObject = function () {
        this.object = null;
        this.form = null;
        this.actionButtons = null;
    };
    ObjectComponent.prototype.setup = function (routeData) {
        // subscription means may get with no oid
        var _this = this;
        if (!routeData.objectId) {
            this.mode = null;
            return;
        }
        this.expiredTransient = false;
        var oid = Models.ObjectIdWrapper.fromObjectId(routeData.objectId, this.configService.config.keySeparator);
        if (this.object && !this.object.domainObject.getOid().isSame(oid)) {
            // object has changed - clear existing
            this.clearCurrentObject();
        }
        var isChanging = !this.object;
        var modeChanging = this.mode !== routeData.interactionMode;
        this.mode = routeData.interactionMode;
        var wasDirty = this.isDirty(routeData, oid);
        this.selectedDialogId = routeData.dialogId;
        if (isChanging || modeChanging || wasDirty) {
            // set pendingColor at once to smooth transition
            this.colorService.toColorNumberFromType(oid.domainType).then(function (c) { return _this.pendingColor = "" + _this.configService.config.objectColor + c; });
            this.context.getObject(routeData.paneId, oid, routeData.interactionMode)
                .then(function (object) {
                // only change the object property if the object has changed
                if (isChanging || wasDirty) {
                    _this.object = _this.viewModelFactory.domainObjectViewModel(object, routeData, wasDirty);
                }
                if (modeChanging || isChanging || wasDirty) {
                    if (_this.mode === InteractionMode.Edit ||
                        _this.mode === InteractionMode.Form ||
                        _this.mode === InteractionMode.Transient) {
                        _this.createForm(_this.object); // will never be null
                    }
                }
            })
                .catch(function (reject) {
                if (reject.category === Models.ErrorCategory.ClientError && reject.clientErrorCode === Models.ClientErrorCode.ExpiredTransient) {
                    _this.context.setError(reject);
                    _this.expiredTransient = true;
                }
                else {
                    _this.error.handleError(reject);
                }
            });
        }
    };
    ObjectComponent.prototype.createForm = function (vm) {
        var _this = this;
        safeUnsubscribe(this.formSub);
        var pps = vm.properties;
        var props = zipObject(map(pps, function (p) { return p.id; }), map(pps, function (p) { return p; }));
        var editableProps = filter(props, function (p) { return p.isEditable; });
        var editablePropsMap = zipObject(map(editableProps, function (p) { return p.id; }), map(editableProps, function (p) { return p; }));
        var controls = mapValues(editablePropsMap, function (p) { return [p.getValueForControl(), function (a) { return p.validator(a); }]; });
        this.form = this.formBuilder.group(controls);
        this.formSub = this.form.valueChanges.subscribe(function (data) {
            // cache parm values
            var obj = _this.object;
            if (obj) {
                forEach(data, function (v, k) { return editablePropsMap[k].setValueFromControl(v); });
                obj.setProperties();
            }
        });
    };
    ObjectComponent.prototype.isDirty = function (paneRouteData, oid) {
        oid = oid || Models.ObjectIdWrapper.fromObjectId(paneRouteData.objectId, this.configService.config.keySeparator);
        return this.context.getIsDirty(oid);
    };
    ObjectComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.activatedRouteDataSub = this.activatedRoute.data.subscribe(function (data) {
            var paneId = data.pane;
            if (!_this.paneRouteDataSub) {
                _this.paneRouteDataSub =
                    _this.urlManager.getPaneRouteDataObservable(paneId).debounceTime(10)
                        .subscribe(function (paneRouteData) {
                        if (!paneRouteData.isEqual(_this.lastPaneRouteData) || _this.isDirty(paneRouteData)) {
                            _this.lastPaneRouteData = paneRouteData;
                            _this.setup(paneRouteData);
                        }
                    });
            }
            ;
        });
        this.concurrencyErrorSub = this.context.concurrencyError$.subscribe(function (oid) {
            if (_this.object && _this.object.domainObject.getOid().isSame(oid)) {
                _this.object.concurrency();
            }
        });
    };
    ObjectComponent.prototype.focus = function (parms) {
        if (this.mode == null || this.mode === InteractionMode.View) {
            return;
        }
        if (parms && parms.length > 0) {
            some(parms.toArray(), function (p) { return p.focus(); });
        }
    };
    ObjectComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this.focusSub = this.propComponents.changes.subscribe(function (ql) { return _this.focus(ql); });
    };
    ObjectComponent.prototype.ngOnDestroy = function () {
        safeUnsubscribe(this.activatedRouteDataSub);
        safeUnsubscribe(this.paneRouteDataSub);
        safeUnsubscribe(this.concurrencyErrorSub);
        safeUnsubscribe(this.formSub);
        safeUnsubscribe(this.focusSub);
    };
    return ObjectComponent;
}());
__decorate([
    ViewChildren(PropertiesComponent),
    __metadata("design:type", QueryList)
], ObjectComponent.prototype, "propComponents", void 0);
ObjectComponent = __decorate([
    Component({
        selector: 'nof-object',
        template: require('./object.component.html'),
        styles: [require('./object.component.css')]
    }),
    __metadata("design:paramtypes", [ActivatedRoute,
        UrlManagerService,
        ContextService,
        ViewModelFactoryService,
        ColorService,
        ErrorService,
        FormBuilder,
        ConfigService])
], ObjectComponent);
export { ObjectComponent };
//# sourceMappingURL=object.component.js.map