@formql/core
Version:
FormQL - A framework for building dynamic forms
106 lines • 13.1 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';
let PageWrapperComponent = class PageWrapperComponent {
constructor(dndService, storeService) {
this.dndService = dndService;
this.storeService = storeService;
this.FormQLMode = FormQLMode;
this.ContainerType = ContainerType;
this.ComponentPositionType = GridPositionType;
}
ngOnInit() {
this.sections = this.createSections(this.page);
}
synchroniseModel($event, positionId) {
const 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);
}
createSections(page) {
const sections = {};
if (page && page.sections)
page.sections.forEach(section => {
if (sections && sections[section.position.id])
sections[section.position.id].push(section);
else
sections[section.position.id] = [section];
});
return sections;
}
trackByFn(index, item) {
return item.id;
}
resetSections() {
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: `
<div class="fql-page-body">
<ng-template formqlGdConfig
[formqlGdConfigOf]="page.template.body" let-bodyitem let-i="index"
(resetItems)="resetSections()">
<div
[ngClass]="{'fql-page-container': mode === FormQLMode.Edit}"
[ngStyle]="bodyitem.style">
<div formqlDndDrop
[type]="ContainerType.Section"
[mode]="mode"
[ngClass]="{'fql-page-container': (mode === FormQLMode.Edit)}"
(synchronise)="synchroniseModel($event, bodyitem.id)">
<ng-container *ngFor="let section of sections[bodyitem.id]; trackBy: trackByFn">
<ng-container *ngTemplateOutlet="templateRef; context: {section: section}">
</ng-container>
</ng-container>
</div>
</div>
</ng-template>
</div>
<ng-template #templateRef let-section="section">
<div [formGroup]="reactivePage">
<div formql-section-wrapper
[page]="page"
[section]="section"
[formGroupName]="section.sectionId"
[reactiveSection]="reactivePage.controls[section.sectionId]"
[mode]="mode">
</div>
</div>
</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);
export { PageWrapperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bmb3JtcWwvY29yZS8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcGFnZS13cmFwcGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQW1DLE1BQU0sZUFBZSxDQUFDO0FBRWxGLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDckQsT0FBTyxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUV6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUF5Q25FLElBQWEsb0JBQW9CLEdBQWpDLE1BQWEsb0JBQW9CO0lBYy9CLFlBQ1UsVUFBc0IsRUFDdEIsWUFBMEI7UUFEMUIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQVY3QixlQUFVLEdBQUcsVUFBVSxDQUFDO1FBQ3hCLGtCQUFhLEdBQUcsYUFBYSxDQUFDO1FBQzlCLDBCQUFxQixHQUFHLGdCQUFnQixDQUFDO0lBUzVDLENBQUM7SUFFTCxRQUFRO1FBQ04sSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBbUIsRUFBRSxVQUFrQjtRQUN0RCxNQUFNLFFBQVEsR0FBYTtZQUN6QixjQUFjLEVBQUUsTUFBTSxDQUFDLGNBQWM7WUFDckMsZUFBZSxFQUFFLE1BQU0sQ0FBQyxlQUFlO1lBQ3ZDLGdCQUFnQixFQUFFLFVBQVU7WUFDNUIsZUFBZSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTTtZQUNqQyxhQUFhLEVBQUUsTUFBTSxDQUFDLGFBQWE7U0FDcEMsQ0FBQztRQUNGLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDO1FBQ3RFLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDL0MsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsaUJBQWlCLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzRSxDQUFDO0lBRU8sY0FBYyxDQUFDLElBQWM7UUFDbkMsTUFBTSxRQUFRLEdBQWlCLEVBQUUsQ0FBQztRQUNsQyxJQUFJLElBQUksSUFBSSxJQUFJLENBQUMsUUFBUTtZQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRTtnQkFDOUIsSUFBSSxRQUFRLElBQUksUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDO29CQUMzQyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7O29CQUU1QyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzlDLENBQUMsQ0FBQyxDQUFDO1FBRUwsT0FBTyxRQUFRLENBQUM7SUFDbEIsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFLLEVBQUUsSUFBSTtRQUNuQixPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLElBQUksQ0FBQyxRQUFRO1lBQ2YsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuRCxDQUFDO0NBQ0YsQ0FBQTtBQXZEVTtJQUFSLEtBQUssRUFBRTs7a0RBQXVCO0FBQ3RCO0lBQVIsS0FBSyxFQUFFOzhCQUFzQixTQUFTOzBEQUFDO0FBQy9CO0lBQVIsS0FBSyxFQUFFOztrREFBeUI7QUFKdEIsb0JBQW9CO0lBdENoQyxTQUFTLENBQUM7UUFDVCwrQ0FBK0M7UUFDL0MsUUFBUSxFQUFFLHVCQUF1QjtRQUNqQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUJBK0JTO1FBRW5CLFNBQVMsRUFBRSxDQUFDLFVBQVUsQ0FBQzs7S0FDeEIsQ0FBQztxQ0FnQnNCLFVBQVU7UUFDUixZQUFZO0dBaEJ6QixvQkFBb0IsQ0F5RGhDO1NBekRZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybVBhZ2UgfSBmcm9tICcuLi9tb2RlbHMvZm9ybS1wYWdlLm1vZGVsJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBEbmRTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvZG5kLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBGb3JtUUxNb2RlLCBDb250YWluZXJUeXBlIH0gZnJvbSAnLi4vbW9kZWxzL3R5cGUubW9kZWwnO1xyXG5pbXBvcnQgeyBHcmlkUG9zaXRpb25UeXBlIH0gZnJvbSAnLi4vbW9kZWxzL3N0eWxlLm1vZGVsJztcclxuaW1wb3J0IHsgRG5kVHJhbnNmZXIsIERuZEV2ZW50IH0gZnJvbSAnLi4vbW9kZWxzL2RuZC5tb2RlbCc7XHJcbmltcG9ydCB7IFN0b3JlU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL3N0b3JlLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBJbnRlcm5hbEV2ZW50VHlwZSB9IGZyb20gJy4uL21vZGVscy9pbnRlcm5hbC1ldmVudC5tb2RlbCc7XHJcbmltcG9ydCB7IEZvcm1TZWN0aW9uLCBTZWN0aW9uR3JvdXAgfSBmcm9tICcuLi9tb2RlbHMvZm9ybS1zZWN0aW9uLm1vZGVsJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTogY29tcG9uZW50LXNlbGVjdG9yXHJcbiAgc2VsZWN0b3I6ICdbZm9ybXFsLXBhZ2Utd3JhcHBlcl0nLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICAgIDxkaXYgY2xhc3M9XCJmcWwtcGFnZS1ib2R5XCI+XHJcbiAgICAgICAgPG5nLXRlbXBsYXRlIGZvcm1xbEdkQ29uZmlnXHJcbiAgICAgICAgICBbZm9ybXFsR2RDb25maWdPZl09XCJwYWdlLnRlbXBsYXRlLmJvZHlcIiBsZXQtYm9keWl0ZW0gbGV0LWk9XCJpbmRleFwiXHJcbiAgICAgICAgICAocmVzZXRJdGVtcyk9XCJyZXNldFNlY3Rpb25zKClcIj5cclxuICAgICAgICAgIDxkaXZcclxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieydmcWwtcGFnZS1jb250YWluZXInOiBtb2RlID09PSBGb3JtUUxNb2RlLkVkaXR9XCJcclxuICAgICAgICAgICAgW25nU3R5bGVdPVwiYm9keWl0ZW0uc3R5bGVcIj5cclxuICAgICAgICAgICAgPGRpdiBmb3JtcWxEbmREcm9wXHJcbiAgICAgICAgICAgICAgW3R5cGVdPVwiQ29udGFpbmVyVHlwZS5TZWN0aW9uXCJcclxuICAgICAgICAgICAgICBbbW9kZV09XCJtb2RlXCJcclxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJ7J2ZxbC1wYWdlLWNvbnRhaW5lcic6IChtb2RlID09PSBGb3JtUUxNb2RlLkVkaXQpfVwiXHJcbiAgICAgICAgICAgICAgKHN5bmNocm9uaXNlKT1cInN5bmNocm9uaXNlTW9kZWwoJGV2ZW50LCBib2R5aXRlbS5pZClcIj5cclxuICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzZWN0aW9uIG9mIHNlY3Rpb25zW2JvZHlpdGVtLmlkXTsgdHJhY2tCeTogdHJhY2tCeUZuXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVSZWY7IGNvbnRleHQ6IHtzZWN0aW9uOiBzZWN0aW9ufVwiPlxyXG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxuZy10ZW1wbGF0ZSAjdGVtcGxhdGVSZWYgbGV0LXNlY3Rpb249XCJzZWN0aW9uXCI+XHJcbiAgICAgICAgPGRpdiBbZm9ybUdyb3VwXT1cInJlYWN0aXZlUGFnZVwiPlxyXG4gICAgICAgICAgPGRpdiBmb3JtcWwtc2VjdGlvbi13cmFwcGVyXHJcbiAgICAgICAgICAgIFtwYWdlXT1cInBhZ2VcIlxyXG4gICAgICAgICAgICBbc2VjdGlvbl09XCJzZWN0aW9uXCJcclxuICAgICAgICAgICAgW2Zvcm1Hcm91cE5hbWVdPVwic2VjdGlvbi5zZWN0aW9uSWRcIlxyXG4gICAgICAgICAgICBbcmVhY3RpdmVTZWN0aW9uXT1cInJlYWN0aXZlUGFnZS5jb250cm9sc1tzZWN0aW9uLnNlY3Rpb25JZF1cIlxyXG4gICAgICAgICAgICBbbW9kZV09XCJtb2RlXCI+XHJcbiAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9uZy10ZW1wbGF0ZT5gLFxyXG4gIHN0eWxlVXJsczogWycuL3BhZ2Utd3JhcHBlci5jb21wb25lbnQuc2NzcyddLFxyXG4gIHByb3ZpZGVyczogW0RuZFNlcnZpY2VdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQYWdlV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpIHB1YmxpYyBwYWdlOiBGb3JtUGFnZTtcclxuICBASW5wdXQoKSBwdWJsaWMgcmVhY3RpdmVQYWdlOiBGb3JtR3JvdXA7XHJcbiAgQElucHV0KCkgcHVibGljIG1vZGU6IEZvcm1RTE1vZGU7XHJcblxyXG4gIHB1YmxpYyBGb3JtUUxNb2RlID0gRm9ybVFMTW9kZTtcclxuICBwdWJsaWMgQ29udGFpbmVyVHlwZSA9IENvbnRhaW5lclR5cGU7XHJcbiAgcHVibGljIENvbXBvbmVudFBvc2l0aW9uVHlwZSA9IEdyaWRQb3NpdGlvblR5cGU7XHJcblxyXG4gIGVycm9yOiBzdHJpbmc7XHJcbiAgcm93OiBhbnk7XHJcbiAgc2VjdGlvbnM6IFNlY3Rpb25Hcm91cDtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGRuZFNlcnZpY2U6IERuZFNlcnZpY2UsXHJcbiAgICBwcml2YXRlIHN0b3JlU2VydmljZTogU3RvcmVTZXJ2aWNlXHJcbiAgKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNlY3Rpb25zID0gdGhpcy5jcmVhdGVTZWN0aW9ucyh0aGlzLnBhZ2UpO1xyXG4gIH1cclxuXHJcbiAgc3luY2hyb25pc2VNb2RlbCgkZXZlbnQ6IERuZFRyYW5zZmVyLCBwb3NpdGlvbklkOiBzdHJpbmcpIHtcclxuICAgIGNvbnN0IGRuZEV2ZW50ID0gPERuZEV2ZW50PntcclxuICAgICAgc291cmNlT2JqZWN0SWQ6ICRldmVudC5zb3VyY2VPYmplY3RJZCxcclxuICAgICAgc291cmNlV3JhcHBlcklkOiAkZXZlbnQuc291cmNlV3JhcHBlcklkLFxyXG4gICAgICB0YXJnZXRQb3NpdGlvbklkOiBwb3NpdGlvbklkLFxyXG4gICAgICB0YXJnZXRXcmFwcGVySWQ6IHRoaXMucGFnZS5wYWdlSWQsXHJcbiAgICAgIHRhcmdldEluZGV4SWQ6ICRldmVudC50YXJnZXRJbmRleElkXHJcbiAgICB9O1xyXG4gICAgdGhpcy5wYWdlID0gdGhpcy5kbmRTZXJ2aWNlLnN5bmNocm9uaXNlUGFnZU1vZGVsKHRoaXMucGFnZSwgZG5kRXZlbnQpO1xyXG4gICAgdGhpcy5zZWN0aW9ucyA9IHRoaXMuY3JlYXRlU2VjdGlvbnModGhpcy5wYWdlKTtcclxuICAgIHRoaXMuc3RvcmVTZXJ2aWNlLnJlU2V0Rm9ybShJbnRlcm5hbEV2ZW50VHlwZS5EbmRGb3JtQ2hhbmdlZCwgdGhpcy5wYWdlKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY3JlYXRlU2VjdGlvbnMocGFnZTogRm9ybVBhZ2UpOiBTZWN0aW9uR3JvdXAge1xyXG4gICAgY29uc3Qgc2VjdGlvbnMgPSA8U2VjdGlvbkdyb3VwPnt9O1xyXG4gICAgaWYgKHBhZ2UgJiYgcGFnZS5zZWN0aW9ucylcclxuICAgICAgcGFnZS5zZWN0aW9ucy5mb3JFYWNoKHNlY3Rpb24gPT4ge1xyXG4gICAgICAgIGlmIChzZWN0aW9ucyAmJiBzZWN0aW9uc1tzZWN0aW9uLnBvc2l0aW9uLmlkXSlcclxuICAgICAgICAgIHNlY3Rpb25zW3NlY3Rpb24ucG9zaXRpb24uaWRdLnB1c2goc2VjdGlvbik7XHJcbiAgICAgICAgZWxzZVxyXG4gICAgICAgICAgc2VjdGlvbnNbc2VjdGlvbi5wb3NpdGlvbi5pZF0gPSBbc2VjdGlvbl07XHJcbiAgICAgIH0pO1xyXG5cclxuICAgIHJldHVybiBzZWN0aW9ucztcclxuICB9XHJcblxyXG4gIHRyYWNrQnlGbihpbmRleCwgaXRlbSkge1xyXG4gICAgcmV0dXJuIGl0ZW0uaWQ7XHJcbiAgfVxyXG5cclxuICByZXNldFNlY3Rpb25zKCkge1xyXG4gICAgaWYgKHRoaXMuc2VjdGlvbnMpXHJcbiAgICAgIHRoaXMuc2VjdGlvbnMgPSB0aGlzLmNyZWF0ZVNlY3Rpb25zKHRoaXMucGFnZSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==