angular2-json-schema-form
Version:
Angular 2 JSON Schema Form builder
233 lines • 16.5 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.enableErrorState &&
_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 this.jsf.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", Number)
], Bootstrap3Component.prototype, "formID", void 0);
__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({
selector: 'bootstrap-3-framework',
template: "\n <div\n [class]=\"options?.htmlClass\"\n [class.has-feedback]=\"options?.feedback &&\n options?.isInputWidget && formControl?.dirty\"\n [class.has-error]=\"options?.enableErrorState &&\n formControl?.errors && formControl?.dirty\"\n [class.has-success]=\"options?.enableSuccessState &&\n !formControl?.errors && formControl?.dirty\">\n\n <button *ngIf=\"layoutNode?.arrayItem && options?.removable\"\n class=\"close pull-right\"\n style=\"position: relative; z-index: 20;\"\n type=\"button\"\n (click)=\"removeItem()\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <div *ngIf=\"options?.messageLocation === 'top'\">\n <p *ngIf=\"options?.errorMessage\"\n [innerHTML]=\"options?.errorMessage\" class=\"help-block\"></p>\n <p *ngIf=\"options?.feedback && formControl?.dirty\"\n class=\"sr-only\"\n [id]=\"'control' + layoutNode?._id + 'Status'\"\n [innerHTML]=\"options?.errorMessage ? '(error)' : '(success)'\"></p>\n <p *ngIf=\"options?.description\"\n class=\"help-block\"\n [innerHTML]=\"options?.description\"></p>\n <p *ngIf=\"options?.help\"\n class=\"help-block\"\n [innerHTML]=\"options?.help\"></p>\n </div>\n\n <label *ngIf=\"options?.title && layoutNode?.type !== 'tab'\"\n [attr.for]=\"'control' + layoutNode?._id\"\n [class]=\"options?.labelHtmlClass\"\n [class.sr-only]=\"options?.notitle\"\n [innerHTML]=\"options?.title\"></label>\n <strong *ngIf=\"options?.title && options?.required\"\n class=\"text-danger\">*</strong>\n <p *ngIf=\"layoutNode?.type === 'submit' &&\n jsf?.globalOptions?.fieldsRequired\">\n <strong class=\"text-danger\">*</strong> = required fields\n </p>\n <div [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\">\n <span *ngIf=\"options?.fieldAddonLeft\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonLeft\"></span>\n\n <select-widget-widget\n [formID]=\"formID\"\n [layoutNode]=\"widgetLayoutNode\"\n [dataIndex]=\"dataIndex\"\n [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n <span *ngIf=\"options?.fieldAddonRight\"\n class=\"input-group-addon\"\n [innerHTML]=\"options?.fieldAddonRight\"></span>\n </div>\n\n <span *ngIf=\"options?.feedback && options?.isInputWidget &&\n !options?.fieldAddonRight && !layoutNode.arrayItem && formControl?.dirty\"\n [class.glyphicon-ok]=\"options?.enableSuccessState && !formControl?.errors\"\n [class.glyphicon-remove]=\"options?.enableErrorState && formControl?.errors\"\n aria-hidden=\"true\"\n class=\"form-control-feedback glyphicon\"></span>\n <div *ngIf=\"options?.messageLocation !== 'top'\">\n <p *ngIf=\"!options?.errorMessage\"\n class=\"help-block\"\n [innerHTML]=\"options?.errorMessage\"></p>\n <p *ngIf=\"options?.feedback && formControl?.dirty\"\n class=\"sr-only\"\n [id]=\"'control' + layoutNode?._id + 'Status'\"\n [innerHTML]=\"options?.errorMessage ? '(error)' : '(success)'\"></p>\n <p *ngIf=\"options?.description\"\n class=\"help-block\"\n [innerHTML]=\"options?.description\"></p>\n <p *ngIf=\"options?.help\"\n class=\"help-block\"\n [innerHTML]=\"options?.help\"></p>\n </div>\n </div>\n\n <div *ngIf=\"debug && debugOutput\">debug: <pre>{{debugOutput}}</pre></div>\n ",
styles: ["\n :host /deep/ .list-group-item .form-control-feedback { top: 40; }\n :host /deep/ .checkbox,\n :host /deep/ .radio { margin-top: 0; margin-bottom: 0; }\n :host /deep/ .checkbox-inline,\n :host /deep/ .checkbox-inline + .checkbox-inline,\n :host /deep/ .checkbox-inline + .radio-inline,\n :host /deep/ .radio-inline,\n :host /deep/ .radio-inline + .radio-inline,\n :host /deep/ .radio-inline + .checkbox-inline { margin-left: 0; margin-right: 10px; }\n :host /deep/ .checkbox-inline:last-child,\n :host /deep/ .radio-inline:last-child { margin-right: 0; }\n "],
}),
__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
json_schema_form_service_1.JsonSchemaFormService])
], Bootstrap3Component);
exports.Bootstrap3Component = Bootstrap3Component;
//# sourceMappingURL=bootstrap-3.component.js.map