angular2-json-schema-form
Version:
Angular 2 JSON Schema Form builder
301 lines • 15 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 Ajv = require("ajv");
var _ = require("lodash");
var json_schema_form_service_1 = require("./json-schema-form.service");
var framework_library_service_1 = require("../frameworks/framework-library.service");
var widget_library_service_1 = require("../widgets/widget-library.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.formInitialized = false;
this.ajv = new Ajv({ allErrors: true });
this.onChanges = new core_1.EventEmitter();
this.onSubmit = new core_1.EventEmitter();
this.isValid = new core_1.EventEmitter();
this.validationErrors = 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.formInitialized = false;
this.jsf.schema = {};
this.jsf.layout = [];
this.jsf.initialValues = {};
this.jsf.dataMap = new Map();
this.jsf.schemaRefLibrary = {};
this.jsf.layoutRefLibrary = {};
this.jsf.formGroupTemplate = {};
this.jsf.formGroup = null;
this.jsf.framework = this.frameworkLibrary.getFramework();
if (index_1.isObject(this.options)) {
Object.assign(this.jsf.globalOptions, this.options);
}
this.jsf.globalOptions.debug = !!this.debug;
if (index_1.isObject(this.schema)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.schema = this.schema;
}
else if (index_1.hasOwn(this.form, 'schema') && index_1.isObject(this.form.schema)) {
this.jsf.schema = this.form.schema;
}
else if (index_1.isObject(this.JSONSchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.schema = this.JSONSchema;
}
else if (index_1.hasOwn(this.form, 'JSONSchema') && index_1.isObject(this.form.JSONSchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.schema = this.form.JSONSchema;
}
else if (index_1.hasOwn(this.form, 'properties') && index_1.isObject(this.form.properties)) {
this.jsf.schema = 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.schema = index_1.convertJsonSchema3to4(this.jsf.schema);
this.validateFormData = this.ajv.compile(this.jsf.schema);
index_1.JsonPointer.forEachDeep(this.jsf.schema, function (value, pointer) {
if (index_1.hasOwn(value, '$ref') && index_1.isString(value['$ref'])) {
var newReference = index_1.JsonPointer.compile(value['$ref']);
var isCircular = index_1.JsonPointer.isSubPointer(newReference, pointer);
if (index_1.hasValue(newReference) &&
!index_1.hasOwn(_this.jsf.schemaRefLibrary, newReference)) {
_this.jsf.schemaRefLibrary[newReference] = index_1.getSchemaReference(_this.jsf.schema, newReference, _this.jsf.schemaRefLibrary);
}
if (!isCircular) {
delete value['$ref'];
_this.jsf.schema = index_1.JsonPointer.set(_this.jsf.schema, pointer, Object.assign(_.cloneDeep(_this.jsf.schemaRefLibrary[newReference]), value));
}
else {
_this.jsf.schemaCircularRefMap.set(pointer, newReference);
}
}
}, true);
}
if (index_1.isArray(this.layout)) {
this.jsf.layout = this.layout;
}
else if (index_1.isArray(this.form)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.layout = this.form;
}
else if (this.form && index_1.isArray(this.form.form)) {
this.jsf.JsonFormCompatibility = true;
index_1.fixJsonFormOptions(this.form.form);
this.jsf.layout = this.form.form;
}
else if (this.form && index_1.isArray(this.form.layout)) {
this.jsf.layout = this.form.layout;
}
else {
this.jsf.layout = ['*', { type: 'submit', title: 'Submit' }];
}
var alternateLayout = null;
if (index_1.isObject(this.UISchema)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
alternateLayout = this.UISchema;
}
else if (index_1.hasOwn(this.form, 'UISchema')) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
alternateLayout = this.form.UISchema;
}
else if (index_1.hasOwn(this.form, 'customFormItems')) {
this.jsf.JsonFormCompatibility = true;
index_1.fixJsonFormOptions(this.form.customFormItems);
alternateLayout = 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 = this.data;
}
else if (index_1.isObject(this.model)) {
this.jsf.AngularSchemaFormCompatibility = true;
this.jsf.initialValues = this.model;
}
else if (index_1.isObject(this.form) && index_1.isObject(this.form.value)) {
this.jsf.JsonFormCompatibility = true;
this.jsf.initialValues = this.form.value;
}
else if (index_1.isObject(this.form) && index_1.isObject(this.form.data)) {
this.jsf.initialValues = this.form.data;
}
else if (index_1.isObject(this.formData)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.initialValues = this.formData;
}
else if (index_1.hasOwn(this.form, 'formData') && index_1.isObject(this.form.formData)) {
this.jsf.ReactJsonSchemaFormCompatibility = true;
this.jsf.initialValues = this.form.formData;
}
if (index_1.isEmpty(this.jsf.schema)) {
if (this.jsf.layout.indexOf('*') === -1) {
this.jsf.schema = index_1.buildSchemaFromLayout(this.jsf.layout);
}
else if (!index_1.isEmpty(this.jsf.initialValues)) {
this.jsf.schema = index_1.buildSchemaFromData(this.jsf.initialValues);
}
}
if (!index_1.isEmpty(this.jsf.schema)) {
if (!this.validateFormData) {
this.validateFormData = this.ajv.compile(this.jsf.schema);
}
this.jsf.formGroupTemplate =
index_1.buildFormGroupTemplate(this.jsf, this.jsf.initialValues, true);
this.jsf.layout = index_1.buildLayout(this.jsf, this.widgetLibrary);
this.jsf.formGroup = index_1.buildFormGroup(this.jsf.formGroupTemplate);
}
if (this.jsf.formGroup) {
this.formInitialized = true;
this.jsf.formGroup.valueChanges.subscribe(function (value) {
var formattedData = index_1.formatFormData(value, _this.jsf.dataMap, _this.jsf.dataCircularRefMap, _this.jsf.arrayMap);
_this.onChanges.emit(formattedData);
var isValid = _this.validateFormData(formattedData);
_this.isValid.emit(isValid);
_this.validationErrors.emit(_this.validateFormData.errors);
});
this.onChanges.emit(index_1.formatFormData(this.jsf.formGroup.value, this.jsf.dataMap, this.jsf.dataCircularRefMap, this.jsf.arrayMap));
if (index_1.JsonPointer.get(this.jsf, '/globalOptions/validateOnRender')) {
var isValid = this.validateFormData(index_1.formatFormData(this.jsf.formGroup.value, this.jsf.dataMap, this.jsf.dataCircularRefMap, this.jsf.arrayMap));
this.isValid.emit(isValid);
this.validationErrors.emit(this.validateFormData.errors);
}
}
else {
}
}
};
JsonSchemaFormComponent.prototype.ngDoCheck = function () {
if (this.debug) {
var vars = [];
this.debugOutput =
_.map(vars, function (thisVar) { return JSON.stringify(thisVar, null, 2); }).join('\n');
}
};
JsonSchemaFormComponent.prototype.submitForm = function () {
this.onSubmit.emit(index_1.formatFormData(this.jsf.formGroup.value, this.jsf.dataMap, this.jsf.dataCircularRefMap, this.jsf.arrayMap, true));
};
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", 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, "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);
JsonSchemaFormComponent = __decorate([
core_1.Component({
moduleId: module.id,
selector: 'json-schema-form',
template: "\n <form (ngSubmit)=\"submitForm()\">\n <root-widget *ngIf=\"formInitialized\"\n [layout]=\"jsf.layout\">\n </root-widget>\n </form>\n <div *ngIf=\"debug\">Debug output: <pre>{{debugOutput}}</pre></div>",
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