nakedobjects.spa
Version:
Single Page Application client for a Naked Objects application.
274 lines • 10.8 kB
JavaScript
import * as Models from '../models';
import { ElementRef } from '@angular/core';
import { ChoiceViewModel } from '../view-models/choice-view-model';
import find from 'lodash/find';
import every from 'lodash/every';
import mapValues from 'lodash/mapValues';
import omit from 'lodash/omit';
import keys from 'lodash/keys';
import { BehaviorSubject } from 'rxjs';
import { safeUnsubscribe, focus, accept, dropOn, paste } from '../helpers-components';
var FieldComponent = (function () {
function FieldComponent(context, configService, loggerService, renderer) {
this.context = context;
this.configService = configService;
this.loggerService = loggerService;
this.renderer = renderer;
this.currentOptions = [];
this.canDrop = false;
this.triStateClick = function (currentValue) {
switch (currentValue) {
case false:
return true;
case true:
return null;
default:
return false;
}
};
}
Object.defineProperty(FieldComponent.prototype, "formGroup", {
get: function () {
return this.formGrp;
},
set: function (fm) {
var _this = this;
this.formGrp = fm;
this.formGrp.valueChanges.debounceTime(200).subscribe(function (data) { return _this.onValueChanged(); });
this.onValueChanged(); // (re)set validation messages now
},
enumerable: true,
configurable: true
});
Object.defineProperty(FieldComponent.prototype, "message", {
get: function () {
return this.model.getMessage();
},
enumerable: true,
configurable: true
});
Object.defineProperty(FieldComponent.prototype, "isBoolean", {
get: function () {
return this.model.returnType === "boolean";
},
enumerable: true,
configurable: true
});
Object.defineProperty(FieldComponent.prototype, "subject", {
get: function () {
var _this = this;
if (!this.bSubject) {
var initialValue = this.control.value;
this.bSubject = new BehaviorSubject(initialValue);
this.sub = this.control.valueChanges.subscribe(function (data) {
_this.bSubject.next(data);
});
}
return this.bSubject;
},
enumerable: true,
configurable: true
});
FieldComponent.prototype.init = function (vmParent, vm, control) {
this.vmParent = vmParent;
this.model = vm;
this.control = control;
this.paneId = this.model.onPaneId;
this.isConditionalChoices = (this.model.entryType === Models.EntryType.ConditionalChoices ||
this.model.entryType === Models.EntryType.MultipleConditionalChoices);
this.isAutoComplete = this.model.entryType === Models.EntryType.AutoComplete;
if (this.isConditionalChoices) {
this.pArgs = omit(this.model.promptArguments, "x-ro-nof-members");
this.populateDropdown();
}
};
FieldComponent.prototype.accept = function (droppableVm) {
return accept(droppableVm, this);
};
;
FieldComponent.prototype.drop = function (draggableVm) {
dropOn(draggableVm, this.model, this);
};
FieldComponent.prototype.isDomainObjectViewModel = function (object) {
return object && "properties" in object;
};
FieldComponent.prototype.mapValues = function (args, parmsOrProps) {
return mapValues(this.pArgs, function (v, n) {
var pop = find(parmsOrProps, function (p) { return p.argId === n; });
return pop.getValue();
});
};
FieldComponent.prototype.populateArguments = function () {
var dialog = this.vmParent;
var object = this.vmParent;
if (!dialog && !object) {
this.loggerService.throw("FieldComponent:populateArguments Expect dialog or object");
}
var parmsOrProps;
if (this.isDomainObjectViewModel(object)) {
parmsOrProps = object.properties;
}
else {
parmsOrProps = dialog.parameters;
}
return this.mapValues(this.pArgs, parmsOrProps);
};
FieldComponent.prototype.argsChanged = function (newArgs) {
var same = this.lastArgs &&
keys(this.lastArgs).length === keys(newArgs).length &&
every(this.lastArgs, function (v, k) { return newArgs[k].toValueString() === v.toValueString(); });
this.lastArgs = newArgs;
return !same;
};
FieldComponent.prototype.populateDropdown = function () {
var _this = this;
var nArgs = this.populateArguments();
if (this.argsChanged(nArgs)) {
var prompts = this.model.conditionalChoices(nArgs);
prompts.
then(function (cvms) {
// if unchanged return
if (cvms.length === _this.currentOptions.length && every(cvms, function (c, i) { return c.equals(_this.currentOptions[i]); })) {
return;
}
_this.model.choices = cvms;
_this.currentOptions = cvms;
if (_this.isConditionalChoices) {
// need to reset control to find the selected options
if (_this.model.entryType === Models.EntryType.MultipleConditionalChoices) {
_this.control.reset(_this.model.selectedMultiChoices);
}
else {
_this.control.reset(_this.model.selectedChoice);
}
}
}).
catch(function () {
// error clear everything
_this.model.selectedChoice = null;
_this.currentOptions = [];
});
}
};
FieldComponent.prototype.onChange = function () {
if (this.isConditionalChoices) {
this.populateDropdown();
}
else if (this.isAutoComplete) {
this.populateAutoComplete();
}
else if (this.isBoolean) {
this.populateBoolean();
}
};
FieldComponent.prototype.onValueChanged = function () {
if (this.model) {
this.onChange();
}
};
FieldComponent.prototype.populateAutoComplete = function () {
var _this = this;
var input = this.control.value;
if (input instanceof ChoiceViewModel) {
return;
}
if (input && input.length > 0 && input.length >= this.model.minLength) {
this.model.prompt(input)
.then(function (cvms) {
if (cvms.length === _this.currentOptions.length && every(cvms, function (c, i) { return c.equals(_this.currentOptions[i]); })) {
return;
}
_this.model.choices = cvms;
_this.currentOptions = cvms;
_this.model.selectedChoice = null;
})
.catch(function () {
_this.model.choices = [];
_this.currentOptions = [];
_this.model.selectedChoice = null;
});
}
else {
this.model.choices = [];
this.currentOptions = [];
this.model.selectedChoice = null;
}
};
FieldComponent.prototype.populateBoolean = function () {
// editable booleans only
if (this.isBoolean && this.control) {
var input = this.control.value;
var element = this.checkboxList.first.nativeElement;
if (input == null) {
this.renderer.setElementProperty(element, "indeterminate", true);
this.renderer.setElementProperty(element, "checked", null);
}
else {
this.renderer.setElementProperty(element, "indeterminate", false);
this.renderer.setElementProperty(element, "checked", !!input);
}
}
};
FieldComponent.prototype.select = function (item) {
this.model.choices = [];
this.model.selectedChoice = item;
this.control.reset(item);
};
FieldComponent.prototype.fileUpload = function (evt) {
var _this = this;
var file = evt.target.files[0];
var fileReader = new FileReader();
fileReader.onloadend = function () {
var link = new Models.Link({
href: fileReader.result,
type: file.type,
title: file.name
});
_this.control.reset(link);
_this.model.file = link;
};
fileReader.readAsDataURL(file);
};
FieldComponent.prototype.paste = function (event) {
var _this = this;
paste(event, this.model, this, function () { return _this.context.getCopyViewModel(); }, function () { return _this.context.setCopyViewModel(null); });
};
FieldComponent.prototype.clear = function () {
this.control.reset("");
this.model.clear();
};
FieldComponent.prototype.filterEnter = function (event) {
var enterKeyCode = 13;
if (event && event.keyCode === enterKeyCode) {
event.preventDefault();
}
};
FieldComponent.prototype.handleKeyEvents = function (event, isMultiline) {
this.paste(event);
// catch and filter enters or they will submit form - ok for multiline
if (!isMultiline) {
this.filterEnter(event);
}
};
FieldComponent.prototype.handleClick = function (event) {
var _this = this;
if (this.isBoolean && this.model.optional) {
var currentValue_1 = this.control.value;
setTimeout(function () { return _this.control.setValue(_this.triStateClick(currentValue_1)); });
event.preventDefault();
}
};
FieldComponent.prototype.focus = function () {
var first = this.focusList && this.focusList.first;
if (first instanceof ElementRef) {
return focus(this.renderer, first);
}
return first && first.focus();
};
FieldComponent.prototype.ngOnDestroy = function () {
safeUnsubscribe(this.sub);
};
return FieldComponent;
}());
export { FieldComponent };
//# sourceMappingURL=field.component.js.map