angular2-json-schema-form
Version:
Angular 2 JSON Schema Form builder
315 lines • 15.2 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 framework_library_service_1 = require("../frameworks/framework-library.service");
var widget_library_service_1 = require("../widgets/widget-library.service");
var json_schema_form_service_1 = require("./json-schema-form.service");
var index_1 = require("./utilities/index");
var JsonSchemaFormComponent = (function () {
function JsonSchemaFormComponent(frameworkLibrary, widgetLibrary, jsf) {
this.frameworkLibrary = frameworkLibrary;
this.widgetLibrary = widgetLibrary;
this.jsf = jsf;
this.formValueSubscription = null;
this.onChanges = new core_1.EventEmitter();
this.onSubmit = new core_1.EventEmitter();
this.isValid = new core_1.EventEmitter();
this.validationErrors = new core_1.EventEmitter();
this.formSchema = new core_1.EventEmitter();
this.formLayout = new core_1.EventEmitter();
}
JsonSchemaFormComponent.prototype.ngOnInit = function () {
this.initializeForm();
};
JsonSchemaFormComponent.prototype.ngOnChanges = function () {
this.initializeForm();
};
JsonSchemaFormComponent.prototype.initializeForm = function () {
var _this = this;
if (this.schema || this.layout || this.data ||
this.form || this.JSONSchema || this.UISchema) {
this.jsf.resetAllValues();
this.jsf.setOptions({ debug: !!this.debug });
var loadExternalAssets = this.loadExternalAssets || false;
var framework = this.framework || 'default';
if (index_1.isObject(this.options)) {
this.jsf.setOptions(this.options);
loadExternalAssets = this.options.loadExternalAssets || loadExternalAssets;
framework = this.options.framework || framework;
}
if (index_1.isObject(this.form) && index_1.isObject(this.form.options)) {
this.jsf.setOptions(this.form.options);
loadExternalAssets = this.form.options.loadExternalAssets || loadExternalAssets;
framework = this.form.options.framework || framework;
}
if (index_1.isObject(this.widgets)) {
this.jsf.setOptions({ widgets: this.widgets });
}
this.frameworkLibrary.setLoadExternalAssets(loadExternalAssets);
this.frameworkLibrary.setFramework(framework);
this.jsf.framework = this.frameworkLibrary.getFramework();
if (index_1.isObject(this.jsf.globalOptions.widgets)) {
for (var _i = 0, _a = Object.keys(this.jsf.globalOptions.widgets); _i < _a.length; _i++) {
var widget = _a[_i];
this.widgetLibrary.registerWidget(widget, this.jsf.globalOptions.widgets[widget]);
}
}
if (index_1.isObject(this.form) && index_1.isObject(this.form.tpldata)) {
this.jsf.setTpldata(this.form.tpldata);
}
if (index_1.isObject(this.schema)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.schema = _.cloneDeep(this.schema);
}
else if (index_1.hasOwn(this.form, 'schema') && index_1.isObject(this.form.schema)) {
this.jsf.schema = _.cloneDeep(this.form.schema);
}
else if (index_1.isObject(this.JSONSchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.schema = _.cloneDeep(this.JSONSchema);
}
else if (index_1.hasOwn(this.form, 'JSONSchema') && index_1.isObject(this.form.JSONSchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.schema = _.cloneDeep(this.form.JSONSchema);
}
else if (index_1.hasOwn(this.form, 'properties') && index_1.isObject(this.form.properties)) {
this.jsf.schema = _.cloneDeep(this.form);
}
if (!index_1.isEmpty(this.jsf.schema)) {
if (!index_1.hasOwn(this.jsf.schema, 'type') &&
index_1.hasOwn(this.jsf.schema, 'properties') &&
index_1.isObject(this.jsf.schema.properties)) {
this.jsf.schema.type = 'object';
}
else if (!index_1.hasOwn(this.jsf.schema, 'type') ||
this.jsf.schema.type !== 'object' ||
!index_1.hasOwn(this.jsf.schema, 'properties')) {
this.jsf.JsonFormCompatibility = true;
this.jsf.schema = {
'type': 'object', 'properties': this.jsf.schema
};
}
this.jsf.convertJsonSchema3to4();
this.jsf.compileAjvSchema();
this.jsf.resolveSchemaRefLinks();
}
if (index_1.isArray(this.layout)) {
this.jsf.layout = _.cloneDeep(this.layout);
}
else if (index_1.isArray(this.form)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.layout = _.cloneDeep(this.form);
}
else if (this.form && index_1.isArray(this.form.form)) {
this.jsf.JsonFormCompatibility = true;
this.jsf.layout =
this.jsf.fixJsonFormOptions(_.cloneDeep(this.form.form));
}
else if (this.form && index_1.isArray(this.form.layout)) {
this.jsf.layout = _.cloneDeep(this.form.layout);
}
else {
this.jsf.layout =
this.jsf.globalOptions.addSubmit === false ?
['*'] :
['*', { type: 'submit', title: 'Submit' }];
}
var alternateLayout = null;
if (index_1.isObject(this.UISchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
alternateLayout = _.cloneDeep(this.UISchema);
}
else if (index_1.hasOwn(this.form, 'UISchema')) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
alternateLayout = _.cloneDeep(this.form.UISchema);
}
else if (index_1.hasOwn(this.form, 'customFormItems')) {
this.jsf.JsonFormCompatibility = true;
alternateLayout =
this.jsf.fixJsonFormOptions(_.cloneDeep(this.form.customFormItems));
}
if (alternateLayout) {
index_1.JsonPointer.forEachDeep(alternateLayout, function (value, pointer) {
var schemaPointer = pointer.replace(/\//g, '/properties/')
.replace(/\/properties\/items\/properties\//g, '/items/properties/')
.replace(/\/properties\/titleMap\/properties\//g, '/titleMap/properties/');
if (index_1.hasValue(value) && index_1.hasValue(pointer)) {
var groupPointer = index_1.JsonPointer.parse(schemaPointer).slice(0, -2);
var key = index_1.JsonPointer.toKey(schemaPointer);
var itemPointer = void 0;
if (key === 'ui:order') {
itemPointer = schemaPointer;
}
else {
itemPointer = groupPointer.concat(['x-schema-form',
key.slice(0, 3) === 'ui:' ? key.slice(3) : key
]);
}
if (index_1.JsonPointer.has(_this.jsf.schema, groupPointer) &&
!index_1.JsonPointer.has(_this.jsf.schema, itemPointer)) {
index_1.JsonPointer.set(_this.jsf.schema, itemPointer, value);
}
}
});
}
if (index_1.isObject(this.data)) {
this.jsf.initialValues = _.cloneDeep(this.data);
}
else if (index_1.isObject(this.model)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.initialValues = _.cloneDeep(this.model);
}
else if (index_1.isObject(this.form) && index_1.isObject(this.form.value)) {
this.jsf.JsonFormCompatibility = true;
this.jsf.initialValues = _.cloneDeep(this.form.value);
}
else if (index_1.isObject(this.form) && index_1.isObject(this.form.data)) {
this.jsf.initialValues = _.cloneDeep(this.form.data);
}
else if (index_1.isObject(this.formData)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.initialValues = _.cloneDeep(this.formData);
}
else if (index_1.hasOwn(this.form, 'formData') && index_1.isObject(this.form.formData)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.initialValues = _.cloneDeep(this.form.formData);
}
if (index_1.isEmpty(this.jsf.schema)) {
if (this.jsf.layout.indexOf('*') === -1) {
this.jsf.buildSchemaFromLayout();
}
else if (!index_1.isEmpty(this.jsf.initialValues)) {
this.jsf.buildSchemaFromData();
}
}
if (!index_1.isEmpty(this.jsf.schema)) {
this.jsf.compileAjvSchema();
this.jsf.buildFormGroupTemplate();
this.jsf.buildLayout(this.widgetLibrary);
this.jsf.buildFormGroup();
}
if (this.jsf.formGroup) {
this.jsf.dataChanges.subscribe(function (data) { return _this.onChanges.emit(data); });
this.jsf.isValidChanges.subscribe(function (isValid) { return _this.isValid.emit(isValid); });
this.jsf.validationErrorChanges.subscribe(function (errors) { return _this.validationErrors.emit(errors); });
this.formSchema.emit(this.jsf.schema);
this.formLayout.emit(this.jsf.layout);
this.onChanges.emit(this.jsf.data);
if (index_1.JsonPointer.get(this.jsf, '/globalOptions/validateOnRender')) {
this.isValid.emit(this.jsf.isValid);
this.validationErrors.emit(this.jsf.validationErrors);
}
}
else {
}
}
};
JsonSchemaFormComponent.prototype.ngDoCheck = function () {
if (this.debug || this.jsf.globalOptions.debug) {
var vars = [];
this.debugOutput = vars.map(function (v) { return JSON.stringify(v, null, 2); }).join('\n');
}
};
JsonSchemaFormComponent.prototype.submitForm = function () {
this.onSubmit.emit(this.jsf.validData);
};
return JsonSchemaFormComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "schema", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], JsonSchemaFormComponent.prototype, "layout", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "data", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "options", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], JsonSchemaFormComponent.prototype, "framework", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], JsonSchemaFormComponent.prototype, "widgets", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "form", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "model", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "JSONSchema", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "UISchema", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "formData", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], JsonSchemaFormComponent.prototype, "loadExternalAssets", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], JsonSchemaFormComponent.prototype, "debug", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "onChanges", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "onSubmit", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "isValid", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "validationErrors", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "formSchema", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JsonSchemaFormComponent.prototype, "formLayout", void 0);
JsonSchemaFormComponent = __decorate([
core_1.Component({
selector: 'json-schema-form',
template: "\n <form (ngSubmit)=\"submitForm()\">\n <root-widget [formID]=\"formID\" [layout]=\"jsf.layout\"></root-widget>\n </form>\n <div *ngIf=\"debug || jsf.globalOptions.debug\">\n Debug output: <pre>{{debugOutput}}</pre>\n </div>",
providers: [json_schema_form_service_1.JsonSchemaFormService],
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
}),
__metadata("design:paramtypes", [framework_library_service_1.FrameworkLibraryService,
widget_library_service_1.WidgetLibraryService,
json_schema_form_service_1.JsonSchemaFormService])
], JsonSchemaFormComponent);
exports.JsonSchemaFormComponent = JsonSchemaFormComponent;
//# sourceMappingURL=json-schema-form.component.js.map