@formql/core
Version:
FormQL - A framework for building dynamic forms
76 lines • 13.5 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DndService } from '../services/dnd.service';
import { FormQLMode, ContainerType } from '../models/type.model';
import { GridPositionType } from '../models/style.model';
import { StoreService } from '../services/store.service';
import { InternalEventType } from '../models/internal-event.model';
var PageWrapperComponent = /** @class */ (function () {
function PageWrapperComponent(dndService, storeService) {
this.dndService = dndService;
this.storeService = storeService;
this.FormQLMode = FormQLMode;
this.ContainerType = ContainerType;
this.ComponentPositionType = GridPositionType;
}
PageWrapperComponent.prototype.ngOnInit = function () {
this.sections = this.createSections(this.page);
};
PageWrapperComponent.prototype.synchroniseModel = function ($event, positionId) {
var dndEvent = {
sourceObjectId: $event.sourceObjectId,
sourceWrapperId: $event.sourceWrapperId,
targetPositionId: positionId,
targetWrapperId: this.page.pageId,
targetIndexId: $event.targetIndexId
};
this.page = this.dndService.synchronisePageModel(this.page, dndEvent);
this.sections = this.createSections(this.page);
this.storeService.reSetForm(InternalEventType.DndFormChanged, this.page);
};
PageWrapperComponent.prototype.createSections = function (page) {
var sections = {};
if (page && page.sections)
page.sections.forEach(function (section) {
if (sections && sections[section.position.id])
sections[section.position.id].push(section);
else
sections[section.position.id] = [section];
});
return sections;
};
PageWrapperComponent.prototype.trackByFn = function (index, item) {
return item.id;
};
PageWrapperComponent.prototype.resetSections = function () {
if (this.sections)
this.sections = this.createSections(this.page);
};
__decorate([
Input(),
__metadata("design:type", Object)
], PageWrapperComponent.prototype, "page", void 0);
__decorate([
Input(),
__metadata("design:type", FormGroup)
], PageWrapperComponent.prototype, "reactivePage", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], PageWrapperComponent.prototype, "mode", void 0);
PageWrapperComponent = __decorate([
Component({
// tslint:disable-next-line: component-selector
selector: '[formql-page-wrapper]',
template: "\n <div class=\"fql-page-body\">\n <ng-template formqlGdConfig\n [formqlGdConfigOf]=\"page.template.body\" let-bodyitem let-i=\"index\"\n (resetItems)=\"resetSections()\">\n <div\n [ngClass]=\"{'fql-page-container': mode === FormQLMode.Edit}\"\n [ngStyle]=\"bodyitem.style\">\n <div formqlDndDrop\n [type]=\"ContainerType.Section\"\n [mode]=\"mode\"\n [ngClass]=\"{'fql-page-container': (mode === FormQLMode.Edit)}\"\n (synchronise)=\"synchroniseModel($event, bodyitem.id)\">\n <ng-container *ngFor=\"let section of sections[bodyitem.id]; trackBy: trackByFn\">\n <ng-container *ngTemplateOutlet=\"templateRef; context: {section: section}\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n <ng-template #templateRef let-section=\"section\">\n <div [formGroup]=\"reactivePage\">\n <div formql-section-wrapper\n [page]=\"page\"\n [section]=\"section\"\n [formGroupName]=\"section.sectionId\"\n [reactiveSection]=\"reactivePage.controls[section.sectionId]\"\n [mode]=\"mode\">\n </div>\n </div>\n </ng-template>",
providers: [DndService],
styles: [".fql-bundle-field-input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.fql-bundle-checkbox-input{cursor:pointer;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.fql-bundle-label-required:after{content:\" *\";color:red}.fql-bundle-field-radio{cursor:pointer}.fql-error-message{text-align:center;padding:20px}.fql-dnd-container-separator{box-shadow:0 -2px 0 #00f}.fql-dnd-container-drop-area{outline:dashed 3px}.fql-page-body{display:-ms-grid;display:grid;width:100%;min-height:30px}.fql-page-container{display:table;height:100%;width:100%;min-height:15px}.fql-page-container:hover{outline:solid 2px}"]
}),
__metadata("design:paramtypes", [DndService,
StoreService])
], PageWrapperComponent);
return PageWrapperComponent;
}());
export { PageWrapperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bmb3JtcWwvY29yZS8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcGFnZS13cmFwcGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQW1DLE1BQU0sZUFBZSxDQUFDO0FBRWxGLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDckQsT0FBTyxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUV6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUF5Q25FO0lBY0UsOEJBQ1UsVUFBc0IsRUFDdEIsWUFBMEI7UUFEMUIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQVY3QixlQUFVLEdBQUcsVUFBVSxDQUFDO1FBQ3hCLGtCQUFhLEdBQUcsYUFBYSxDQUFDO1FBQzlCLDBCQUFxQixHQUFHLGdCQUFnQixDQUFDO0lBUzVDLENBQUM7SUFFTCx1Q0FBUSxHQUFSO1FBQ0UsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsK0NBQWdCLEdBQWhCLFVBQWlCLE1BQW1CLEVBQUUsVUFBa0I7UUFDdEQsSUFBTSxRQUFRLEdBQWE7WUFDekIsY0FBYyxFQUFFLE1BQU0sQ0FBQyxjQUFjO1lBQ3JDLGVBQWUsRUFBRSxNQUFNLENBQUMsZUFBZTtZQUN2QyxnQkFBZ0IsRUFBRSxVQUFVO1lBQzVCLGVBQWUsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU07WUFDakMsYUFBYSxFQUFFLE1BQU0sQ0FBQyxhQUFhO1NBQ3BDLENBQUM7UUFDRixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxRQUFRLENBQUMsQ0FBQztRQUN0RSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLGlCQUFpQixDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0UsQ0FBQztJQUVPLDZDQUFjLEdBQXRCLFVBQXVCLElBQWM7UUFDbkMsSUFBTSxRQUFRLEdBQWlCLEVBQUUsQ0FBQztRQUNsQyxJQUFJLElBQUksSUFBSSxJQUFJLENBQUMsUUFBUTtZQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxVQUFBLE9BQU87Z0JBQzNCLElBQUksUUFBUSxJQUFJLFFBQVEsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQztvQkFDM0MsUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDOztvQkFFNUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUM5QyxDQUFDLENBQUMsQ0FBQztRQUVMLE9BQU8sUUFBUSxDQUFDO0lBQ2xCLENBQUM7SUFFRCx3Q0FBUyxHQUFULFVBQVUsS0FBSyxFQUFFLElBQUk7UUFDbkIsT0FBTyxJQUFJLENBQUMsRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRCw0Q0FBYSxHQUFiO1FBQ0UsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUNmLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQXREUTtRQUFSLEtBQUssRUFBRTs7c0RBQXVCO0lBQ3RCO1FBQVIsS0FBSyxFQUFFO2tDQUFzQixTQUFTOzhEQUFDO0lBQy9CO1FBQVIsS0FBSyxFQUFFOztzREFBeUI7SUFKdEIsb0JBQW9CO1FBdENoQyxTQUFTLENBQUM7WUFDVCwrQ0FBK0M7WUFDL0MsUUFBUSxFQUFFLHVCQUF1QjtZQUNqQyxRQUFRLEVBQUUsdzBDQStCUztZQUVuQixTQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUM7O1NBQ3hCLENBQUM7eUNBZ0JzQixVQUFVO1lBQ1IsWUFBWTtPQWhCekIsb0JBQW9CLENBeURoQztJQUFELDJCQUFDO0NBQUEsQUF6REQsSUF5REM7U0F6RFksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGb3JtUGFnZSB9IGZyb20gJy4uL21vZGVscy9mb3JtLXBhZ2UubW9kZWwnO1xyXG5pbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IERuZFNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9kbmQuc2VydmljZSc7XHJcbmltcG9ydCB7IEZvcm1RTE1vZGUsIENvbnRhaW5lclR5cGUgfSBmcm9tICcuLi9tb2RlbHMvdHlwZS5tb2RlbCc7XHJcbmltcG9ydCB7IEdyaWRQb3NpdGlvblR5cGUgfSBmcm9tICcuLi9tb2RlbHMvc3R5bGUubW9kZWwnO1xyXG5pbXBvcnQgeyBEbmRUcmFuc2ZlciwgRG5kRXZlbnQgfSBmcm9tICcuLi9tb2RlbHMvZG5kLm1vZGVsJztcclxuaW1wb3J0IHsgU3RvcmVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvc3RvcmUuc2VydmljZSc7XHJcbmltcG9ydCB7IEludGVybmFsRXZlbnRUeXBlIH0gZnJvbSAnLi4vbW9kZWxzL2ludGVybmFsLWV2ZW50Lm1vZGVsJztcclxuaW1wb3J0IHsgRm9ybVNlY3Rpb24sIFNlY3Rpb25Hcm91cCB9IGZyb20gJy4uL21vZGVscy9mb3JtLXNlY3Rpb24ubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtc2VsZWN0b3JcclxuICBzZWxlY3RvcjogJ1tmb3JtcWwtcGFnZS13cmFwcGVyXScsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgICAgPGRpdiBjbGFzcz1cImZxbC1wYWdlLWJvZHlcIj5cclxuICAgICAgICA8bmctdGVtcGxhdGUgZm9ybXFsR2RDb25maWdcclxuICAgICAgICAgIFtmb3JtcWxHZENvbmZpZ09mXT1cInBhZ2UudGVtcGxhdGUuYm9keVwiIGxldC1ib2R5aXRlbSBsZXQtaT1cImluZGV4XCJcclxuICAgICAgICAgIChyZXNldEl0ZW1zKT1cInJlc2V0U2VjdGlvbnMoKVwiPlxyXG4gICAgICAgICAgPGRpdlxyXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7J2ZxbC1wYWdlLWNvbnRhaW5lcic6IG1vZGUgPT09IEZvcm1RTE1vZGUuRWRpdH1cIlxyXG4gICAgICAgICAgICBbbmdTdHlsZV09XCJib2R5aXRlbS5zdHlsZVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGZvcm1xbERuZERyb3BcclxuICAgICAgICAgICAgICBbdHlwZV09XCJDb250YWluZXJUeXBlLlNlY3Rpb25cIlxyXG4gICAgICAgICAgICAgIFttb2RlXT1cIm1vZGVcIlxyXG4gICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnZnFsLXBhZ2UtY29udGFpbmVyJzogKG1vZGUgPT09IEZvcm1RTE1vZGUuRWRpdCl9XCJcclxuICAgICAgICAgICAgICAoc3luY2hyb25pc2UpPVwic3luY2hyb25pc2VNb2RlbCgkZXZlbnQsIGJvZHlpdGVtLmlkKVwiPlxyXG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHNlY3Rpb24gb2Ygc2VjdGlvbnNbYm9keWl0ZW0uaWRdOyB0cmFja0J5OiB0cmFja0J5Rm5cIj5cclxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZVJlZjsgY29udGV4dDoge3NlY3Rpb246IHNlY3Rpb259XCI+XHJcbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZVJlZiBsZXQtc2VjdGlvbj1cInNlY3Rpb25cIj5cclxuICAgICAgICA8ZGl2IFtmb3JtR3JvdXBdPVwicmVhY3RpdmVQYWdlXCI+XHJcbiAgICAgICAgICA8ZGl2IGZvcm1xbC1zZWN0aW9uLXdyYXBwZXJcclxuICAgICAgICAgICAgW3BhZ2VdPVwicGFnZVwiXHJcbiAgICAgICAgICAgIFtzZWN0aW9uXT1cInNlY3Rpb25cIlxyXG4gICAgICAgICAgICBbZm9ybUdyb3VwTmFtZV09XCJzZWN0aW9uLnNlY3Rpb25JZFwiXHJcbiAgICAgICAgICAgIFtyZWFjdGl2ZVNlY3Rpb25dPVwicmVhY3RpdmVQYWdlLmNvbnRyb2xzW3NlY3Rpb24uc2VjdGlvbklkXVwiXHJcbiAgICAgICAgICAgIFttb2RlXT1cIm1vZGVcIj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L25nLXRlbXBsYXRlPmAsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS13cmFwcGVyLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgcHJvdmlkZXJzOiBbRG5kU2VydmljZV1cclxufSlcclxuZXhwb3J0IGNsYXNzIFBhZ2VXcmFwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgcHVibGljIHBhZ2U6IEZvcm1QYWdlO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyByZWFjdGl2ZVBhZ2U6IEZvcm1Hcm91cDtcclxuICBASW5wdXQoKSBwdWJsaWMgbW9kZTogRm9ybVFMTW9kZTtcclxuXHJcbiAgcHVibGljIEZvcm1RTE1vZGUgPSBGb3JtUUxNb2RlO1xyXG4gIHB1YmxpYyBDb250YWluZXJUeXBlID0gQ29udGFpbmVyVHlwZTtcclxuICBwdWJsaWMgQ29tcG9uZW50UG9zaXRpb25UeXBlID0gR3JpZFBvc2l0aW9uVHlwZTtcclxuXHJcbiAgZXJyb3I6IHN0cmluZztcclxuICByb3c6IGFueTtcclxuICBzZWN0aW9uczogU2VjdGlvbkdyb3VwO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgZG5kU2VydmljZTogRG5kU2VydmljZSxcclxuICAgIHByaXZhdGUgc3RvcmVTZXJ2aWNlOiBTdG9yZVNlcnZpY2VcclxuICApIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2VjdGlvbnMgPSB0aGlzLmNyZWF0ZVNlY3Rpb25zKHRoaXMucGFnZSk7XHJcbiAgfVxyXG5cclxuICBzeW5jaHJvbmlzZU1vZGVsKCRldmVudDogRG5kVHJhbnNmZXIsIHBvc2l0aW9uSWQ6IHN0cmluZykge1xyXG4gICAgY29uc3QgZG5kRXZlbnQgPSA8RG5kRXZlbnQ+e1xyXG4gICAgICBzb3VyY2VPYmplY3RJZDogJGV2ZW50LnNvdXJjZU9iamVjdElkLFxyXG4gICAgICBzb3VyY2VXcmFwcGVySWQ6ICRldmVudC5zb3VyY2VXcmFwcGVySWQsXHJcbiAgICAgIHRhcmdldFBvc2l0aW9uSWQ6IHBvc2l0aW9uSWQsXHJcbiAgICAgIHRhcmdldFdyYXBwZXJJZDogdGhpcy5wYWdlLnBhZ2VJZCxcclxuICAgICAgdGFyZ2V0SW5kZXhJZDogJGV2ZW50LnRhcmdldEluZGV4SWRcclxuICAgIH07XHJcbiAgICB0aGlzLnBhZ2UgPSB0aGlzLmRuZFNlcnZpY2Uuc3luY2hyb25pc2VQYWdlTW9kZWwodGhpcy5wYWdlLCBkbmRFdmVudCk7XHJcbiAgICB0aGlzLnNlY3Rpb25zID0gdGhpcy5jcmVhdGVTZWN0aW9ucyh0aGlzLnBhZ2UpO1xyXG4gICAgdGhpcy5zdG9yZVNlcnZpY2UucmVTZXRGb3JtKEludGVybmFsRXZlbnRUeXBlLkRuZEZvcm1DaGFuZ2VkLCB0aGlzLnBhZ2UpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVTZWN0aW9ucyhwYWdlOiBGb3JtUGFnZSk6IFNlY3Rpb25Hcm91cCB7XHJcbiAgICBjb25zdCBzZWN0aW9ucyA9IDxTZWN0aW9uR3JvdXA+e307XHJcbiAgICBpZiAocGFnZSAmJiBwYWdlLnNlY3Rpb25zKVxyXG4gICAgICBwYWdlLnNlY3Rpb25zLmZvckVhY2goc2VjdGlvbiA9PiB7XHJcbiAgICAgICAgaWYgKHNlY3Rpb25zICYmIHNlY3Rpb25zW3NlY3Rpb24ucG9zaXRpb24uaWRdKVxyXG4gICAgICAgICAgc2VjdGlvbnNbc2VjdGlvbi5wb3NpdGlvbi5pZF0ucHVzaChzZWN0aW9uKTtcclxuICAgICAgICBlbHNlXHJcbiAgICAgICAgICBzZWN0aW9uc1tzZWN0aW9uLnBvc2l0aW9uLmlkXSA9IFtzZWN0aW9uXTtcclxuICAgICAgfSk7XHJcblxyXG4gICAgcmV0dXJuIHNlY3Rpb25zO1xyXG4gIH1cclxuXHJcbiAgdHJhY2tCeUZuKGluZGV4LCBpdGVtKSB7XHJcbiAgICByZXR1cm4gaXRlbS5pZDtcclxuICB9XHJcblxyXG4gIHJlc2V0U2VjdGlvbnMoKSB7XHJcbiAgICBpZiAodGhpcy5zZWN0aW9ucylcclxuICAgICAgdGhpcy5zZWN0aW9ucyA9IHRoaXMuY3JlYXRlU2VjdGlvbnModGhpcy5wYWdlKTtcclxuICB9XHJcbn1cclxuIl19