angular2-json-schema-form
Version:
Angular 2 JSON Schema Form builder
228 lines • 12.1 kB
JavaScript
"use strict";
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);
};
var core_1 = require("@angular/core");
var _ = require("lodash");
var json_schema_form_service_1 = require("../library/json-schema-form.service");
var index_1 = require("../library/utilities/index");
var Bootstrap3Component = (function () {
function Bootstrap3Component(changeDetector, jsf) {
this.changeDetector = changeDetector;
this.jsf = jsf;
this.controlInitialized = false;
this.formControl = null;
this.debugOutput = '';
}
Bootstrap3Component.prototype.ngOnInit = function () {
this.initializeControl();
};
Bootstrap3Component.prototype.ngOnChanges = function () {
this.updateArrayItems();
if (!this.controlInitialized)
this.initializeControl();
};
Bootstrap3Component.prototype.initializeControl = function () {
var _this = this;
if (this.layoutNode) {
this.options = _.cloneDeep(this.layoutNode.options);
this.widgetLayoutNode = Object.assign({}, this.layoutNode, { options: _.cloneDeep(this.layoutNode.options) });
this.widgetOptions = this.widgetLayoutNode.options;
this.layoutPointer = this.jsf.getLayoutPointer(this);
this.formControl = this.jsf.getControl(this);
this.updateArrayItems();
this.options.isInputWidget = index_1.inArray(this.layoutNode.type, [
'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',
'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',
'image', 'integer', 'month', 'number', 'password', 'radio',
'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',
'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'
]);
this.options.title = this.setTitle();
this.options.htmlClass =
index_1.addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);
if (this.layoutNode.type === 'array') {
this.options.htmlClass =
index_1.addClasses(this.options.htmlClass, 'list-group');
}
else if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {
this.options.htmlClass =
index_1.addClasses(this.options.htmlClass, 'list-group-item');
}
else {
this.options.htmlClass =
index_1.addClasses(this.options.htmlClass, 'form-group');
}
this.widgetOptions.htmlClass = '';
this.options.labelHtmlClass =
index_1.addClasses(this.options.labelHtmlClass, 'control-label');
this.widgetOptions.activeClass =
index_1.addClasses(this.widgetOptions.activeClass, 'active');
this.options.fieldAddonLeft =
this.options.fieldAddonLeft || this.options.prepend;
this.options.fieldAddonRight =
this.options.fieldAddonRight || this.options.append;
switch (this.layoutNode.type) {
case 'checkbox':
case 'checkboxes':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'checkbox');
break;
case 'checkboxes-inline':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'checkbox');
this.widgetOptions.itemLabelHtmlClass = index_1.addClasses(this.widgetOptions.itemLabelHtmlClass, 'checkbox-inline');
break;
case 'radio':
case 'radios':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'radio');
break;
case 'radios-inline':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'radio');
this.widgetOptions.itemLabelHtmlClass = index_1.addClasses(this.widgetOptions.itemLabelHtmlClass, 'radio-inline');
break;
case 'checkboxbuttons':
case 'radiobuttons':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'btn-group');
this.widgetOptions.itemLabelHtmlClass = index_1.addClasses(this.widgetOptions.itemLabelHtmlClass, 'btn');
this.widgetOptions.itemLabelHtmlClass = index_1.addClasses(this.widgetOptions.itemLabelHtmlClass, this.options.style || 'btn-default');
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, 'sr-only');
break;
case 'button':
case 'submit':
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, 'btn');
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-info');
break;
case 'array':
case 'fieldset':
case 'section':
case 'conditional':
case 'advancedfieldset':
case 'authfieldset':
case 'selectfieldset':
case 'optionfieldset':
this.options.messageLocation = 'top';
if (this.options.title && this.options.required &&
this.options.title.indexOf('*') === -1) {
this.options.title += ' <strong class="text-danger">*</strong>';
}
break;
case 'tabarray':
case 'tabs':
this.widgetOptions.htmlClass = index_1.addClasses(this.widgetOptions.htmlClass, 'tab-content');
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, 'tab-pane');
this.widgetOptions.labelHtmlClass = index_1.addClasses(this.widgetOptions.labelHtmlClass, 'nav nav-tabs');
break;
case '$ref':
this.widgetOptions.fieldHtmlClass =
index_1.addClasses(this.widgetOptions.fieldHtmlClass, 'btn pull-right');
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-default');
this.options.icon = 'glyphicon glyphicon-plus';
break;
default:
this.widgetOptions.fieldHtmlClass = index_1.addClasses(this.widgetOptions.fieldHtmlClass, 'form-control');
}
if (this.formControl) {
this.formControl.statusChanges.subscribe(function (value) {
if (!_this.options.disableErrorState &&
_this.options.feedback && value === 'INVALID' &&
_this.formControl.dirty && _this.formControl.errors) {
_this.options.errorMessage = Object.keys(_this.formControl.errors).map(function (error) { return [error, Object.keys(_this.formControl.errors[error]).map(function (errorParameter) { return errorParameter + ': ' +
_this.formControl.errors[error][errorParameter]; }).join(', ')].filter(function (e) { return e; }).join(' - '); }).join('<br>');
}
else {
_this.options.errorMessage = null;
}
});
if (this.options.debug) {
var vars = [];
this.debugOutput = _.map(vars, function (thisVar) { return JSON.stringify(thisVar, null, 2); }).join('\n');
}
}
this.controlInitialized = true;
}
};
Bootstrap3Component.prototype.updateArrayItems = function () {
if (this.layoutNode.arrayItem && this.options.removable &&
this.dataIndex && this.dataIndex.length) {
var arrayIndex = this.dataIndex[this.dataIndex.length - 1];
var parentArray = index_1.JsonPointer.get(this.jsf.layout, this.layoutPointer, 0, -2);
if (parentArray && parentArray.items && parentArray.items.length >= 2) {
var minItems = parentArray.minItems || 0;
var lastArrayItem = parentArray.items.length - 2;
var tupleItems = parentArray.tupleItems;
if (arrayIndex >= minItems && this.options.type !== '$ref' &&
(arrayIndex >= tupleItems || arrayIndex === lastArrayItem)) {
this.options.removable = true;
}
}
}
};
Bootstrap3Component.prototype.setTitle = function () {
switch (this.layoutNode.type) {
case 'array':
case 'button':
case 'checkbox':
case 'conditional':
case 'fieldset':
case 'help':
case 'msg':
case 'message':
case 'section':
case 'submit':
case 'tabarray':
case '$ref':
return null;
case 'advancedfieldset':
this.widgetOptions.expandable = true;
this.widgetOptions.title = 'Advanced options';
return null;
case 'authfieldset':
this.widgetOptions.expandable = true;
this.widgetOptions.title = 'Authentication settings';
return null;
default:
var thisTitle = this.options.title || (isNaN(this.layoutNode.name) && this.layoutNode.name !== '-' ?
index_1.toTitleCase(this.layoutNode.name) : null);
this.widgetOptions.title = null;
if (!thisTitle)
return null;
if (thisTitle.indexOf('{') === -1 || !this.formControl || !this.dataIndex) {
return thisTitle;
}
return index_1.parseText(thisTitle, this.jsf.getControlValue(this), this.jsf.getControlGroup(this).value, this.dataIndex[this.dataIndex.length - 1]);
}
};
Bootstrap3Component.prototype.removeItem = function () {
this.jsf.removeItem(this);
};
return Bootstrap3Component;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], Bootstrap3Component.prototype, "layoutNode", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], Bootstrap3Component.prototype, "layoutIndex", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], Bootstrap3Component.prototype, "dataIndex", void 0);
Bootstrap3Component = __decorate([
core_1.Component({
moduleId: module.id,
selector: 'bootstrap-3-framework',
templateUrl: './bootstrap-3.component.html',
styleUrls: ['./bootstrap-3.component.css'],
}),
__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
json_schema_form_service_1.JsonSchemaFormService])
], Bootstrap3Component);
exports.Bootstrap3Component = Bootstrap3Component;
//# sourceMappingURL=bootstrap-3.component.js.map