angular-formio-proyectoscolfuturo
Version:
Form.io Angular JSON Form Renderer ========================== This library serves as a Dynamic JSON Powered Form rendering library for [Angular](https://angular.io). This works by providing a JSON schema to a ```<formio>``` Angular component, where tha
206 lines (205 loc) • 8.13 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { FormManagerService } from '../form-manager.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormManagerConfig } from '../form-manager.config';
import { FormioAlerts } from '../../components/alerts/formio.alerts';
import { FormBuilderComponent } from '../../components/formbuilder/formbuilder.component';
import _ from 'lodash';
var FormManagerEditComponent = /** @class */ (function () {
function FormManagerEditComponent(service, router, route, config, ref, alerts) {
this.service = service;
this.router = router;
this.route = route;
this.config = config;
this.ref = ref;
this.alerts = alerts;
this.form = { components: [] };
this.formReady = false;
this.loading = false;
this.editMode = false;
}
/**
* @param {?} cb
* @return {?}
*/
FormManagerEditComponent.prototype.checkBuilder = /**
* @param {?} cb
* @return {?}
*/
function (cb) {
var _this = this;
if (this.builder) {
return cb(this.builder);
}
setTimeout((/**
* @return {?}
*/
function () { return _this.checkBuilder(cb); }), 100);
};
/**
* @return {?}
*/
FormManagerEditComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.builderReady = new Promise((/**
* @param {?} resolve
* @return {?}
*/
function (resolve) { return _this.checkBuilder(resolve); }));
this.route.url.subscribe((/**
* @param {?} url
* @return {?}
*/
function (url) {
// See if we are editing a form or creating one.
if (url[0].path === 'edit') {
_this.loading = true;
_this.ref.detectChanges();
_this.editMode = true;
_this.service.loadForm().then((/**
* @param {?} form
* @return {?}
*/
function (form) {
_this.form = form;
_this.ref.detectChanges();
_this.formTitle.nativeElement.value = form.title;
_this.formType.nativeElement.value = form.display || 'form';
_this.formReady = true;
_this.builderReady.then((/**
* @return {?}
*/
function () {
_this.builder.buildForm(form);
_this.loading = false;
}));
})).catch((/**
* @param {?} err
* @return {?}
*/
function (err) {
_this.alerts.setAlert({ type: 'danger', message: (err.message || err) });
_this.loading = false;
_this.formReady = true;
}));
}
else {
_this.formReady = true;
}
_this.formType.nativeElement.addEventListener('change', (/**
* @return {?}
*/
function () {
_this.builderReady.then((/**
* @return {?}
*/
function () { return _this.builder.setDisplay(_this.formType.nativeElement.value); }));
}));
}));
};
/**
* @return {?}
*/
FormManagerEditComponent.prototype.onSave = /**
* @return {?}
*/
function () {
var _this = this;
this.loading = true;
this.builderReady.then((/**
* @return {?}
*/
function () {
_this.form.title = _this.formTitle.nativeElement.value;
_this.form.display = _this.formType.nativeElement.value;
_this.form.components = _this.builder.formio.schema.components;
if (_this.config.tag) {
_this.form.tags = _this.form.tags || [];
_this.form.tags.push(_this.config.tag);
}
if (!_this.form._id) {
_this.form.name = _.camelCase(_this.form.title).toLowerCase();
_this.form.path = _this.form.name;
}
_this.service.formio.saveForm(_this.form).then((/**
* @param {?} form
* @return {?}
*/
function (form) {
_this.form = form;
_this.loading = false;
if (_this.editMode) {
_this.router.navigate(['../', 'view'], { relativeTo: _this.route });
}
else {
_this.router.navigate(['../', form._id, 'view'], { relativeTo: _this.route });
}
})).catch((/**
* @param {?} err
* @return {?}
*/
function (err) {
_this.alerts.setAlert({ type: 'danger', message: (err.message || err) });
_this.loading = false;
}));
}));
};
FormManagerEditComponent.decorators = [
{ type: Component, args: [{
template: "<div class=\"loader\" *ngIf=\"loading\"></div> <div class=\"form-group row\"> <div class=\"col-sm-8\"> <input type=\"text\" class=\"form-control\" id=\"formTitle\" placeholder=\"Enter a Title\" #title> </div> <div class=\"col-sm-2\"> <select class=\"form-control\" id=\"formSelect\" #type> <option value=\"form\">Form</option> <option value=\"wizard\">Wizard</option> <option value=\"pdf\">PDF</option> </select> </div> <div class=\"col-sm-2\"> <button class=\"btn btn-primary btn-block\" (click)=\"onSave()\">Save Form</button> </div> </div> <formio-alerts [alerts]=\"alerts\"></formio-alerts> <form-builder *ngIf=\"formReady\" [formbuilder]=\"config.builder\" [form]=\"form\" #builder></form-builder> <button class=\"btn btn-primary\" style=\"margin-top: 10px;\" (click)=\"onSave()\">Save Form</button> "
},] },
];
/** @nocollapse */
FormManagerEditComponent.ctorParameters = function () { return [
{ type: FormManagerService },
{ type: Router },
{ type: ActivatedRoute },
{ type: FormManagerConfig },
{ type: ChangeDetectorRef },
{ type: FormioAlerts }
]; };
FormManagerEditComponent.propDecorators = {
builder: [{ type: ViewChild, args: [FormBuilderComponent,] }],
formTitle: [{ type: ViewChild, args: ['title',] }],
formType: [{ type: ViewChild, args: ['type',] }]
};
return FormManagerEditComponent;
}());
export { FormManagerEditComponent };
if (false) {
/** @type {?} */
FormManagerEditComponent.prototype.builder;
/** @type {?} */
FormManagerEditComponent.prototype.formTitle;
/** @type {?} */
FormManagerEditComponent.prototype.formType;
/** @type {?} */
FormManagerEditComponent.prototype.builderReady;
/** @type {?} */
FormManagerEditComponent.prototype.form;
/** @type {?} */
FormManagerEditComponent.prototype.loading;
/** @type {?} */
FormManagerEditComponent.prototype.formReady;
/** @type {?} */
FormManagerEditComponent.prototype.editMode;
/** @type {?} */
FormManagerEditComponent.prototype.service;
/** @type {?} */
FormManagerEditComponent.prototype.router;
/** @type {?} */
FormManagerEditComponent.prototype.route;
/** @type {?} */
FormManagerEditComponent.prototype.config;
/** @type {?} */
FormManagerEditComponent.prototype.ref;
/** @type {?} */
FormManagerEditComponent.prototype.alerts;
}