UNPKG

tibas-form-json-generator

Version:

Fully configured form generator via JSON data with a custom template for each attribute + onChange events.

1,053 lines (1,039 loc) • 50.2 kB

JavaScript

import { EventEmitter, Component, ViewEncapsulation, Injector, Input, Output, Injectable, NgModule, Compiler, NgModuleRef, ViewChild, ViewContainerRef, forwardRef, ElementRef, Renderer } from '@angular/core'; import swal from 'sweetalert2'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { BrowserModule } from '@angular/platform-browser'; /** * @fileoverview added by tsickle * Generated from: lib/models/form.model.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class FormModel { } if (false) { /** @type {?} */ FormModel.prototype.missionId; /** @type {?} */ FormModel.prototype.missionStatus; /** @type {?} */ FormModel.prototype.header; /** @type {?} */ FormModel.prototype.body; /** @type {?} */ FormModel.prototype.footer; } /** * @fileoverview added by tsickle * Generated from: lib/models/item.model.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class ItemModel { constructor() { this.children = []; this.attrValues = []; } } if (false) { /** @type {?} */ ItemModel.prototype.code; /** @type {?} */ ItemModel.prototype.label; /** @type {?} */ ItemModel.prototype.categoryId; /** @type {?} */ ItemModel.prototype.children; /** @type {?} */ ItemModel.prototype.attrValues; } /** * @fileoverview added by tsickle * Generated from: lib/models/attribute.model.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class AttributeModel { } if (false) { /** @type {?} */ AttributeModel.prototype.code; /** @type {?} */ AttributeModel.prototype.label; /** @type {?} */ AttributeModel.prototype.value; /** @type {?} */ AttributeModel.prototype.template; /** @type {?} */ AttributeModel.prototype.templateAtt; /** @type {?} */ AttributeModel.prototype.cssClass; /** @type {?} */ AttributeModel.prototype.typeSource; /** @type {?} */ AttributeModel.prototype.typeData; /** @type {?} */ AttributeModel.prototype.refTable; /** @type {?} */ AttributeModel.prototype.refValues; /** @type {?} */ AttributeModel.prototype.onChange; /** @type {?} */ AttributeModel.prototype.required; /** @type {?} */ AttributeModel.prototype.defaultValueId; /** @type {?} */ AttributeModel.prototype.hiddenlevels; /** @type {?} */ AttributeModel.prototype.hidden; /** @type {?} */ AttributeModel.prototype.disable; /** @type {?} */ AttributeModel.prototype.maxlength; /** @type {?} */ AttributeModel.prototype.forumlaAttribute; /** @type {?} */ AttributeModel.prototype.forumlaItems; /** @type {?} */ AttributeModel.prototype.mandatory; } /** * @fileoverview added by tsickle * Generated from: lib/tibas-form-json-generator.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ let InjectorInstance; /** * Created by TIBAS-Mohammed on 2020-07-4. */ class TibasFormJsonGeneratorComponent { /** * @param {?} injector */ constructor(injector) { this.injector = injector; this.mode = 'VIEW'; this.tibasFormIsValidated = new EventEmitter(); this.listSourceTypes = []; InjectorInstance = this.injector; this.listSourceTypes.push({ id: 1, name: 'OK' }); this.listSourceTypes.push({ id: 2, name: 'KO' }); } /** * @return {?} */ ngOnInit() { } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { } /** * @return {?} */ formChanged() { if (document.querySelector('#generatedForm .ng-invalid') == null) { this.tibasFormIsValidated.emit(true); } else { this.tibasFormIsValidated.emit(false); } // const that = this; // setTimeout(function() { // console.log(document.querySelector('#generatedForm .ng-invalid')); // if (document.querySelector('#generatedForm .ng-invalid') == null) { // that.tibasFormIsValidated.emit(true); // } else { // that.tibasFormIsValidated.emit(false); // } // }, 800); } /** * @param {?} checklist * @return {?} */ addItem(checklist) { this.item = new ItemModel(); /** @type {?} */ const rndm = Math.floor(Math.random() * (100 - 1 + 1)) + 1; // this.newItem.code = this.newItem.label.replace(/[^A-Z0-9]+/ig, '_').substr(0, 10).toUpperCase() + rndm; this.item.code = 'item_' + (checklist.items.length + 1) + '_R' + rndm; checklist.attributes.forEach((/** * @param {?} att * @return {?} */ att => { /** @type {?} */ let tpmAtt = new AttributeModel(); tpmAtt = Object.assign({}, att); tpmAtt.template = att.templateAtt; tpmAtt.value = ''; tpmAtt.required = false; this.item.attrValues.push(tpmAtt); })); checklist.items.push(this.item); } /** * @param {?} $event * @return {?} */ changedtrigger($event) { this.formChanged(); } } TibasFormJsonGeneratorComponent.decorators = [ { type: Component, args: [{ selector: 'tibas-form-json-generator', template: "<form #generatedForm=\"ngForm\" name=\"generatedForm\" id=\"generatedForm\" (change)=\"formChanged()\"\n (keyup)=\"formChanged()\">\n <div class=\"card\">\n <div class=\"card-header border-0\" *ngIf=\"formModel?.header\">\n <section>\n <div class=\"row\">\n \n <div [ngClass]=\"attribute.cssClass\" [position]=\"'HEADER'\" [mode]=\"mode\" dynamic-template *ngFor=\"let attribute of formModel?.header\"\n [template]=\"attribute.template\" (changedtrigger)=\"changedtrigger($event)\"\n [attribute]=\"attribute\" [headerOrFooter]=\"formModel\"></div>\n </div>\n </section>\n </div>\n <div class=\"card-body border-0 content table-responsive\" *ngIf=\"formModel?.body && formModel?.body?.length>0\">\n\n <div class=\"tabset\" *ngIf=\"mode=='VIEW' || mode=='READWITHTAB'\">\n \n <ng-container *ngFor=\"let tab of formModel?.body\">\n <input class=\"tabInput\" type=\"radio\" name=\"tabset\" id=\"{{tab.id}}\" [attr.aria-controls]=\"tab.id\">\n <label class=\"labelInput\" for=\"{{tab.id}}\">{{tab.label}}</label>\n </ng-container>\n\n\n <div class=\"tab-panels\">\n <section *ngFor=\"let checklist of formModel?.body;\" id=\"{{checklist.id}}\" class=\"tab-panel table-responsive\">\n\n <div class=\"tbl-header\">\n <div class=\"row\">\n <div class=\"col-5\"></div>\n <div class=\"col\" [mode]=\"mode\" dynamic-template *ngFor=\"let attribute of checklist?.attributes\" (changedtrigger)=\"changedtrigger($event)\"\n [template]=\"attribute.template\" [attribute]=\"attribute\"></div>\n\n </div>\n </div>\n <div class=\"tbl-content\">\n\n <div app-item-form *ngFor=\"let item of checklist?.items\" [level]=\"1\" [mode]=\"mode\" [child]=\"item\" (changedtrigger)=\"changedtrigger($event)\"></div>\n\n </div>\n\n </section>\n\n </div>\n\n </div>\n\n <div *ngIf=\"mode=='READ'\">\n\n <section *ngFor=\"let checklist of formModel?.body;\" class=\"tab-panel table-responsive\">\n\n <div class=\"tbl-header\">\n <div class=\"row\">\n <div class=\"col-5\"></div>\n <div class=\"col\" [mode]=\"mode\" dynamic-template *ngFor=\"let attribute of checklist?.attributes\" (changedtrigger)=\"changedtrigger($event)\"\n [template]=\"attribute.template\" [attribute]=\"attribute\"></div>\n\n </div>\n </div>\n <div class=\"tbl-content\">\n\n <div app-item-form *ngFor=\"let item of checklist?.items\" [level]=\"1\" [mode]=\"mode\" [child]=\"item\" (changedtrigger)=\"changedtrigger($event)\"></div>\n\n </div>\n\n </section>\n\n </div>\n\n <div *ngIf=\"mode=='EDIT'\">\n <section *ngFor=\"let checklist of formModel?.body;\" class=\"tab-panel table-responsive\">\n\n <div class=\"tbl-header\">\n <div class=\"row\">\n <div class=\"col-5\"></div>\n <div class=\"col\" [position]=\"'BODYTH'\" [mode]=\"mode\" dynamic-template *ngFor=\"let attribute of checklist?.attributes\" (changedtrigger)=\"changedtrigger($event)\"\n [template]=\"attribute.template\" [attribute]=\"attribute\"></div>\n\n </div>\n </div>\n <div class=\"tbl-content\">\n\n <div class=\"row\" style=\"height: 1.5rem;padding-left: 8px; \" *ngIf=\"mode=='EDIT'\">\n <i class=\"fa fa-plus faplusitem\" style=\"color: #616a71\" (click)=\"addItem(checklist);formChanged()\"></i>\n </div>\n\n <div app-item-form *ngFor=\"let item of checklist?.items\" [parentList]=\"checklist.items\" [level]=\"1\" [mode]=\"mode\" (changedtrigger)=\"changedtrigger($event)\" [listSourceTypes]=\"listSourceTypes\" [child]=\"item\"></div>\n\n\n </div>\n\n </section>\n </div>\n\n </div>\n <div class=\"card-footer border-0\" *ngIf=\"formModel?.footer\">\n <section>\n \n <div [ngClass]=\"attribute.cssClass\" [position]=\"'FOOTER'\" [mode]=\"mode\" dynamic-template *ngFor=\"let attribute of formModel?.footer\"\n [template]=\"attribute.template\" (changedtrigger)=\"changedtrigger($event)\"\n [attribute]=\"attribute\" [headerOrFooter]=\"formModel\"></div>\n </section>\n </div>\n </div>\n\n</form>\n\n\n\n", encapsulation: ViewEncapsulation.Emulated, styles: ["h1{font-size:30px;color:#000;text-transform:uppercase;font-weight:300;text-align:center;margin-bottom:15px}table{width:100%;table-layout:fixed}.tbl-header{padding:.4rem;background:#f6f9fc;border-bottom:1px solid #ccc}.tbl-content{height:auto;overflow-x:auto;margin-top:0;border:1px solid rgba(255,255,255,.3)}.col-5,.tbl-header .row .col{text-align:left;font-weight:500;font-size:12px;color:#414950;text-transform:uppercase}.tbl-header .row{color:#23272c;font-size:.4rem;height:31px;text-transform:uppercase;letter-spacing:1px}.col,.col-5{font-size:12px;color:#666;padding-top:10px}.col-5,.tbl-content .row .col{margin:10px!important;padding:15px;text-align:left;vertical-align:middle;font-weight:300;font-size:12px;color:#000;border-bottom:1px solid rgba(255,255,255,.1)}.tbl-content .col{padding-bottom:5px}.tbl-content .row{border-bottom:1px solid #f3f3f3}.item-label{display:inline-block;white-space:nowrap!important;overflow:scroll}section{margin:-7px 5px 10px 10px}button,input,select{overflow:visible;border:1px solid gray;text-align:center;border-radius:6px;height:25px;width:130px;margin-bottom:10px;font-size:small}.nav-pills{width:450px}.nav-item{width:50%}.nav-pills .nav-link{font-weight:700;padding-top:13px;text-align:center;background:#343436;color:#fff;border-radius:30px;height:100px}.nav-pills .nav-link.active{background:#fff;color:#000}.tab-content{position:absolute;width:450px;height:auto;margin-top:-50px;background:#fff;color:#000;border-radius:30px;z-index:1000;box-shadow:0 10px 10px rgba(0,0,0,.4);padding:30px;margin-bottom:50px}.tabset>input[type=radio]{position:absolute;left:-200vw}.tabset .tab-panel{display:none}.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5){display:block}body{font:300 16px/1.5em Overpass,\"Open Sans\",Helvetica,sans-serif;color:#333;padding:30px}.tabset>label{position:relative;display:inline-block;padding:15px 15px 25px;border:1px solid transparent;border-bottom:0;cursor:pointer;font-weight:600}.tabset>label::after{content:\"\";position:absolute;left:15px;bottom:10px;width:22px;height:4px;background:#8d8d8d}.tabset>input:focus+label,.tabset>label:hover{color:#06c}.tabset>input:checked+label::after,.tabset>input:focus+label::after,.tabset>label:hover::after{background:#06c}.tabset>input:checked+label{border-color:#ccc;border-bottom:1px solid #fff;margin-bottom:5px;border-radius:20px 20px 0 0}.tab-panel{border-top:1px solid #ccc;margin-left:0}*,:after,:before{box-sizing:border-box}.tabset{margin-left:20px}.tbl-content{padding-left:10px}.card-footer,.card-header{background-color:unset}.faplusitem{margin-right:1rem;cursor:pointer}.additeminput{width:60%!important;margin-right:1rem}.labeleditable{display:inline-block;white-space:nowrap!important;overflow:scroll}"] }] } ]; /** @nocollapse */ TibasFormJsonGeneratorComponent.ctorParameters = () => [ { type: Injector } ]; TibasFormJsonGeneratorComponent.propDecorators = { formModel: [{ type: Input }], mode: [{ type: Input }], tibasFormIsValidated: [{ type: Output }] }; if (false) { /** @type {?} */ TibasFormJsonGeneratorComponent.prototype.formModel; /** @type {?} */ TibasFormJsonGeneratorComponent.prototype.mode; /** @type {?} */ TibasFormJsonGeneratorComponent.prototype.tibasFormIsValidated; /** @type {?} */ TibasFormJsonGeneratorComponent.prototype.item; /** @type {?} */ TibasFormJsonGeneratorComponent.prototype.listSourceTypes; /** * @type {?} * @private */ TibasFormJsonGeneratorComponent.prototype.injector; } /** * @fileoverview added by tsickle * Generated from: lib/item-form/item-form.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Created by TIBAS-Mohammed on 2020-07-4. */ class ItemFormComponent { /** * @param {?} translateService */ constructor(translateService) { this.translateService = translateService; this.changedtrigger = new EventEmitter(); this.listSourceTypes = []; } /** * @return {?} */ ngOnInit() { } /** * @param {?} child * @return {?} */ additem(child) { this.item = new ItemModel(); /** @type {?} */ const rndm = Math.floor(Math.random() * (100 - 1 + 1)) + 1; this.item.code = child.code + '_' + (child.children.length + 1) + '_R' + rndm; child.attrValues.forEach((/** * @param {?} att * @return {?} */ att => { /** @type {?} */ let tpmAtt = new AttributeModel(); tpmAtt = Object.assign({}, att); tpmAtt.required = false; tpmAtt.value = ''; this.item.attrValues.push(tpmAtt); })); child.children.push(this.item); } /** * @param {?} item * @return {?} */ remove(item) { /** @type {?} */ const index = this.parentList.indexOf(item); if (index !== -1) { swal({ title: this.translateService.instant('toast.success.message.ARE_YOU_SURE'), text: this.translateService.instant('toast.success.message.DELETE_ITEM'), type: 'warning', showCancelButton: true, confirmButtonColor: 'rgba(249,58,58,0.84)', cancelButtonColor: 'rgba(48,133,214,0.88)', cancelButtonText: this.translateService.instant('toast.success.message.CANCEL'), confirmButtonText: this.translateService.instant('toast.success.message.YES_DELETE') }).then((/** * @param {?} result * @return {?} */ (result) => { if (result.value) { this.parentList.splice(index, 1); this.triggerchange(); } })); } } /** * @return {?} */ triggerchange() { this.changedtrigger.emit(true); } /** * @param {?} item * @return {?} */ moveup(item) { /** @type {?} */ const newIndex = this.parentList.indexOf(item, 0) - 1; /** @type {?} */ const oldIndex = this.parentList.indexOf(item, 0); if (newIndex >= this.parentList.length) { /** @type {?} */ let k = newIndex - this.parentList.length + 1; while (k--) { this.parentList.push(undefined); } } this.parentList.splice(newIndex, 0, this.parentList.splice(oldIndex, 1)[0]); } /** * @param {?} item * @return {?} */ movedown(item) { /** @type {?} */ const newIndex = this.parentList.indexOf(item, 0) + 1; /** @type {?} */ const oldIndex = this.parentList.indexOf(item, 0); if (newIndex >= this.parentList.length) { /** @type {?} */ let k = newIndex - this.parentList.length + 1; while (k--) { this.parentList.push(undefined); } } this.parentList.splice(newIndex, 0, this.parentList.splice(oldIndex, 1)[0]); } } ItemFormComponent.decorators = [ { type: Component, args: [{ selector: 'app-item-form,[app-item-form]', template: "<div class=\"row\">\n <div [ngStyle]=\"{'padding-left':'calc('+level+'% + 1%)'}\" class=\"col-5 item-label\">\n <div style=\"display: inline-block;\n width: 100%;\n white-space: nowrap!important;\n overflow: scroll;\">\n\n <i class=\"fa fa-plus faplusitem\" style=\"margin-right: 0.5rem;\n position: relative;\n top: -15px;color: #8897aa;\n cursor: pointer;\" *ngIf=\"mode=='EDIT'\" (click)=\"additem(child)\"></i>\n <i class=\"fa fa-minus faplusitem\" style=\"margin-right: 0.5rem;\n position: relative;\n top: -15px;color: #8897aa;\n cursor: pointer;\" *ngIf=\"mode=='EDIT'\" (click)=\"remove(child)\"></i>\n\n <div style=\"\n width: 7px;\n position: relative;\n top: -5px;\n display: inline-block;\n margin-right: 0.5rem;\"\n *ngIf=\"mode=='EDIT' && (parentList.indexOf(child,0)>0 || parentList.indexOf(child,0)<parentList.length-1)\"\n >\n <div>\n <i style=\"cursor: pointer;color: #8897aa;\" *ngIf=\"parentList.indexOf(child,0)>0\" (click)=\"moveup(child)\"\n class=\"fa fa-caret-up\"></i>\n </div>\n <div>\n <i style=\"cursor: pointer;color: #8897aa;\" *ngIf=\"parentList.indexOf(child,0)<parentList.length-1\"\n (click)=\"movedown(child)\" class=\"fa fa-caret-down\"></i>\n <i *ngIf=\"!(parentList.indexOf(child,0)<parentList.length-1)\" class=\"fa \"></i>\n </div>\n </div>\n\n <span style=\"display: inline-block;white-space: nowrap!important;width: 100%;margin-right: 1rem;padding: 1px;\"\n *ngIf=\"mode=='VIEW' || mode=='READ' || mode=='READWITHTAB'\">{{child.label}}</span>\n <app-label-edit *ngIf=\"mode=='EDIT'\" [label]=\"'Nom item'\" [(ngModel)]=\"child.label\"></app-label-edit>\n <select *ngIf=\"mode=='EDIT'\" class=\"additemselect attInput\" style=\"display: inline-block;width: 80px;position: relative;\n top: -17px;\" [(ngModel)]=\"child.categoryId\" [required]=\"true\"\n >\n <option value=\"\" selected disabled>Type</option>\n <option *ngFor=\"let type of listSourceTypes\"\n value=\"{{type.id}}\">{{type.name}}</option>\n </select>\n </div>\n </div>\n \n\n <div class=\"col\" [position]=\"'BODY'\" [mode]=\"mode\" dynamic-template [level]=\"level\"\n *ngFor=\"let attribute of child?.attrValues\" [template]=\"attribute.template\" (changedtrigger)=\"triggerchange()\"\n [attribute]=\"attribute\" [item]=\"child\"></div>\n</div>\n<div app-item-form *ngFor=\"let c of child?.children\" [parentList]=\"child.children\" (changedtrigger)=\"triggerchange()\"\n [listSourceTypes]=\"listSourceTypes\"\n [level]=\"level+1\" [mode]=\"mode\" [child]=\"c\"></div>\n\n", styles: [""] }] } ]; /** @nocollapse */ ItemFormComponent.ctorParameters = () => [ { type: TranslateService } ]; ItemFormComponent.propDecorators = { child: [{ type: Input }], level: [{ type: Input }], mode: [{ type: Input }], changedtrigger: [{ type: Output }], parentList: [{ type: Input }], listSourceTypes: [{ type: Input }] }; if (false) { /** @type {?} */ ItemFormComponent.prototype.child; /** @type {?} */ ItemFormComponent.prototype.level; /** @type {?} */ ItemFormComponent.prototype.mode; /** @type {?} */ ItemFormComponent.prototype.item; /** @type {?} */ ItemFormComponent.prototype.changedtrigger; /** @type {?} */ ItemFormComponent.prototype.parentList; /** @type {?} */ ItemFormComponent.prototype.listSourceTypes; /** * @type {?} * @private */ ItemFormComponent.prototype.translateService; } /** * @fileoverview added by tsickle * Generated from: lib/models/parent.function.enum.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @enum {string} */ const ParentFunctionEnum = { SUM: "SUM", AVG: "AVG", MULTIP: "MULTIP", }; /** * @fileoverview added by tsickle * Generated from: lib/services/references.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class ReferencesService { constructor() { } /** * @param {?} apiUrl * @return {?} */ static getData(apiUrl) { /** @type {?} */ const httpClient = InjectorInstance.get(HttpClient); return httpClient.get(apiUrl); } } ReferencesService.decorators = [ { type: Injectable } ]; /** @nocollapse */ ReferencesService.ctorParameters = () => []; /** * @fileoverview added by tsickle * Generated from: lib/models/attribute-sourceType.enum.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @enum {string} */ const AttributeSourceTypeEnum = { FREE_ENTRY: "FREE_ENTRY", CALCULATED_ENTRY: "CALCULATED_ENTRY", REFERENTIAL_ENTRY: "REFERENTIAL_ENTRY", }; /** * @fileoverview added by tsickle * Generated from: lib/dynamic-template/dynamic-template.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Created by TIBAS-Mohammed on 2020-07-6. */ class DynamicTemplateComponent { /** * @param {?} compiler * @param {?} injector * @param {?} moduleRef * @param {?} referencesService */ constructor(compiler, injector, moduleRef, referencesService) { this.compiler = compiler; this.injector = injector; this.moduleRef = moduleRef; this.referencesService = referencesService; this.changedtrigger = new EventEmitter(); this.script = ''; } /** * @return {?} */ ngAfterViewInit() { this.createComponentFromRaw(this.template, this.attribute, this.item, this.headerOrFooter, this.position); } /** * @private * @param {?} template * @param {?} attribute * @param {?} item * @param {?} headerOrFooter * @param {?} position * @return {?} */ createComponentFromRaw(template, attribute, item, headerOrFooter, position) { if (!template) { return; } /** @type {?} */ const styles = []; if (attribute.onChange) { template = template.split('onChange-Function').join(attribute.onChange); } else { template = template.split('(change)="onChange-Function"').join(''); } if (attribute.hiddenlevels) { if (this.level && attribute.hiddenlevels.length > 0) { attribute.hidden = attribute.hiddenlevels.indexOf(this.level) > -1; if (attribute.hidden) { attribute.required = false; } } } if (attribute && this.mode === 'EDIT') { attribute.required = false; } if ((attribute.typeSource === AttributeSourceTypeEnum.CALCULATED_ENTRY && item) || this.mode === 'READ' || this.mode === 'READWITHTAB') { attribute.disable = true; attribute.required = false; } /** * @return {?} */ function TmpCmpConstructor() { this.attribute = attribute; this.item = item; this.reloadData = (/** * @param {?} refTable * @param {?} apiUrl * @return {?} */ (refTable, apiUrl) => { if (position !== 'BODY' && headerOrFooter !== null && headerOrFooter !== undefined && (headerOrFooter.header.length > 0 || headerOrFooter.footer.length > 0) && attribute.value && refTable && apiUrl) { /** @type {?} */ let id; attribute.refValues.forEach((/** * @param {?} value * @return {?} */ value => { if (value.label === attribute.value) { id = value.id; } })); if (id) { ReferencesService.getData(apiUrl + '/' + id).subscribe((/** * @param {?} response * @return {?} */ response => { /** @type {?} */ const atts = []; headerOrFooter.header.forEach((/** * @param {?} attr * @return {?} */ attr => { if (attr.refTable === refTable) { atts.push(attr); } })); headerOrFooter.footer.forEach((/** * @param {?} attr * @return {?} */ attr => { if (attr.refTable === refTable) { atts.push(attr); } })); if (atts.length > 0) { atts.forEach((/** * @param {?} att * @return {?} */ att => { att.refValues = []; att.value = ''; if (response['data'] && response['data'].length > 0) { att.refValues = response['data']; } })); } })); } } }); } /** @type {?} */ const tmpCmp = Component({ template, styles })(new TmpCmpConstructor().constructor); /** @type {?} */ const tmpModule = NgModule({ imports: [CommonModule, FormsModule, ReactiveFormsModule], declarations: [tmpCmp], providers: [ReferencesService] })(class { }); this.compiler.compileModuleAndAllComponentsAsync(tmpModule) .then((/** * @param {?} factories * @return {?} */ (factories) => { /** @type {?} */ const f = factories.componentFactories[0]; this.cmpRef = f.create(this.injector, [], null, this.moduleRef); this.cmpRef.instance.name = 'tibas-dynamic-component'; this.valueITtempl.insert(this.cmpRef.hostView); this.changedtrigger.emit(true); if (attribute.typeSource === AttributeSourceTypeEnum.CALCULATED_ENTRY && item) { this.script = ' $(document).ready(function(){ \n'; if (attribute.forumlaItems && attribute.forumlaItems.function && item.children && item.children.length > 0) { /** @type {?} */ let func = ' \n'; item.children.forEach((/** * @param {?} child * @return {?} */ child => { this.script += '$("#' + child.code + '_' + attribute.code + '").change(' + item.code + '_' + attribute.code + '); \n'; if (attribute.forumlaItems.function === ParentFunctionEnum.SUM) { func += 'if ($("#' + child.code + '_' + attribute.code + '").val()) {\n' + 'var val = parseInt($("#' + child.code + '_' + attribute.code + '").val(),10);\n' + 'finalValue += (!isNaN(val) ? val : 0);\n' + '}\n'; } if (attribute.forumlaItems.function === ParentFunctionEnum.AVG) { func += 'if ($("#' + child.code + '_' + attribute.code + '").val()) {\n' + 'var val = parseInt($("#' + child.code + '_' + attribute.code + '").val(),10);\n' + 'finalValue += (!isNaN(val) ? val : 0);\n' + '}\n'; } if (attribute.forumlaItems.function === ParentFunctionEnum.MULTIP) { func += 'if ($("#' + child.code + '_' + attribute.code + '").val()) {\n' + 'var val = parseInt($("#' + child.code + '_' + attribute.code + '").val(),10);\n' + 'finalValue = finalValue * (!isNaN(val) ? val : 0);\n' + '}\n'; } })); /** @type {?} */ let finalValueVar = ''; /** @type {?} */ let avgFinalValue = ''; if (attribute.forumlaItems.function === ParentFunctionEnum.SUM) { finalValueVar = 'var finalValue = 0;'; } if (attribute.forumlaItems.function === ParentFunctionEnum.AVG) { finalValueVar = 'var finalValue = 0;'; avgFinalValue = ' finalValue = finalValue/' + item.children.length + '\n'; } if (attribute.forumlaItems.function === ParentFunctionEnum.MULTIP) { finalValueVar = 'var finalValue = 1;'; } /** @type {?} */ const calledFunct = ' function ' + item.code + '_' + attribute.code + '(){ \n' + ' ' + finalValueVar + ' \n' + ' ' + func + ' \n' + ' ' + avgFinalValue + ' \n' + ' $("#' + item.code + '_' + attribute.code + '").val(finalValue);\n' + ' $("#' + item.code + '_' + attribute.code + '").trigger("change");\n' + ' }'; this.script += ' \n ' + calledFunct + ' \n '; } else if (attribute.forumlaAttribute && attribute.forumlaAttribute.depends.length > 0 && attribute.forumlaAttribute.function) { /** @type {?} */ let functionReplaced = attribute.forumlaAttribute.function; attribute.forumlaAttribute.depends.forEach((/** * @param {?} depend * @return {?} */ depend => { this.script += '$("#' + item.code + '_' + depend + '").change(function(){ \n'; functionReplaced = functionReplaced.split(depend).join(item.code + '_' + depend); })); functionReplaced = functionReplaced.split(attribute.code).join(item.code + '_' + attribute.code); this.script += functionReplaced + '\n '; this.script += '$("#' + item.code + '_' + attribute.code + '").trigger("change");\n }); \n'; } this.script += ' }); '; /** @type {?} */ const tjs = document.createElement('script'); tjs.innerHTML = this.script; this.valueITtempl.element.nativeElement.appendChild(tjs); } // Required if (attribute.mandatory && this.mode === 'VIEW') { if (attribute.mandatory.depends.length > 0 && attribute.mandatory.function) { this.script = ' $(document).ready(function(){ \n'; /** @type {?} */ let functionReplaced = attribute.mandatory.function; /** @type {?} */ let idElement = ''; if (this.position === 'BODY') { idElement = item.code + '_' + attribute.code; attribute.mandatory.depends.forEach((/** * @param {?} depend * @return {?} */ depend => { this.script += '$("#' + item.code + '_' + depend + '").change(RequiredFunc_' + idElement + '); \n'; functionReplaced = functionReplaced.split(depend).join(item.code + '_' + depend); })); functionReplaced = functionReplaced.split(attribute.code).join(item.code + '_' + attribute.code); } if (this.position === 'HEADER' || this.position === 'FOOTER') { idElement = attribute.code; attribute.mandatory.depends.forEach((/** * @param {?} depend * @return {?} */ depend => { this.script += '$("#' + depend + '").change(RequiredFunc_' + idElement + '); \n'; })); } this.script += ' function RequiredFunc_' + idElement + '(){ \n'; this.script += 'if(' + functionReplaced + '){ \n'; this.script += '$("#' + idElement + '").prop("required",true); \n'; this.script += ' } else {\n'; this.script += '$("#' + idElement + '").prop("required",false); \n'; this.script += ' } \n' + ' $("#' + idElement + '").trigger("change");\n}\n' + '$("#' + idElement + '").change(function(){ \n' + 'if($(this).prop(\'required\')){\n' + ' if ($(this).val()==\'\'){\n' + ' if ($(this).hasClass("ng-valid")){\n' + ' $(this).removeClass("ng-valid");\n' + ' }\n' + ' if (!$(this).hasClass("ng-invalid")){\n' + ' $(this).addClass("ng-invalid");\n' + ' }\n' + '\n' + ' } else {\n' + ' if ($(this).hasClass("ng-invalid")){\n' + ' $(this).removeClass("ng-invalid");\n' + ' }\n' + ' if (!$(this).hasClass("ng-valid")){\n' + ' $(this).addClass("ng-valid");\n' + ' }\n' + '}\n' + ' } else {\n' + ' if ($(this).hasClass("ng-invalid")){\n' + ' $(this).removeClass("ng-invalid");\n' + ' }\n' + ' if (!$(this).hasClass("ng-valid")){\n' + ' $(this).addClass("ng-valid");\n' + ' }\n' + ' }\n' + '});\n'; this.script += ' }); \n'; /** @type {?} */ const tjss = document.createElement('script'); tjss.innerHTML = this.script; this.valueITtempl.element.nativeElement.appendChild(tjss); } } })); } /** * @return {?} */ ngOnDestroy() { this.changedtrigger.emit(true); if (this.cmpRef) { this.cmpRef.destroy(); } } } DynamicTemplateComponent.decorators = [ { type: Component, args: [{ selector: '[dynamic-template]', template: ` <div #valueITtempl></div> ` }] } ]; /** @nocollapse */ DynamicTemplateComponent.ctorParameters = () => [ { type: Compiler }, { type: Injector }, { type: NgModuleRef }, { type: ReferencesService } ]; DynamicTemplateComponent.propDecorators = { valueITtempl: [{ type: ViewChild, args: ['valueITtempl', { static: false, read: ViewContainerRef },] }], template: [{ type: Input }], attribute: [{ type: Input }], item: [{ type: Input }], headerOrFooter: [{ type: Input }], position: [{ type: Input }], level: [{ type: Input }], mode: [{ type: Input }], changedtrigger: [{ type: Output }] }; if (false) { /** @type {?} */ DynamicTemplateComponent.prototype.valueITtempl; /** @type {?} */ DynamicTemplateComponent.prototype.template; /** @type {?} */ DynamicTemplateComponent.prototype.attribute; /** @type {?} */ DynamicTemplateComponent.prototype.item; /** @type {?} */ DynamicTemplateComponent.prototype.headerOrFooter; /** @type {?} */ DynamicTemplateComponent.prototype.position; /** @type {?} */ DynamicTemplateComponent.prototype.level; /** @type {?} */ DynamicTemplateComponent.prototype.mode; /** @type {?} */ DynamicTemplateComponent.prototype.changedtrigger; /** @type {?} */ DynamicTemplateComponent.prototype.script; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.cmpRef; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.reloadData; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.compiler; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.injector; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.moduleRef; /** * @type {?} * @private */ DynamicTemplateComponent.prototype.referencesService; } /** * @fileoverview added by tsickle * Generated from: lib/label-editable/label-editable.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/** * @return {?} */ () => LabelEditableComponent)), multi: true }; class LabelEditableComponent { /** * @param {?} element * @param {?} _renderer */ constructor(element, _renderer) { this._renderer = _renderer; // input DOM element this.label = ''; // Label value for input element // Label value for input element this.type = 'text'; // The type of input element // The type of input element this.required = true; // Is input requried? // Is input requried? this.disabled = false; // Is input disabled? // Is input disabled? this._value = ''; // Private variable for input value // Private variable for input value this.preValue = ''; // The value before clicking to edit // The value before clicking to edit this.editing = true; // Is Component in edit mode? // Is Component in edit mode? this.onChange = Function.prototype; // Trascend the onChange event // Trascend the onChange event this.onTouched = Function.prototype; // Trascend the onTouch event this.editing = true; } // Trascend the onTouch event // Control Value Accessors for ngModel /** * @return {?} */ get value() { return this._value; } /** * @param {?} v * @return {?} */ set value(v) { if (v !== this._value) { this._value = v; this.onChange(v); } } // Required for ControlValueAccessor interface /** * @param {?} value * @return {?} */ writeValue(value) { this._value = value; } // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ registerOnChange(fn) { this.onChange = fn; } // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ registerOnTouched(fn) { this.onTouched = fn; } // Do stuff when the input element loses focus /** * @param {?} $event * @return {?} */ onBlur($event) { if (this._value !== '' && this._value) { this.editing = false; } } /** * @param {?} $event * @return {?} */ onClose($event) { if (this._value !== '' && this._value) { this.editing = false; } } // Start the editting process for the input element /** * @param {?} value * @return {?} */ edit(value) { if (this.disabled) { return; } this.preValue = value; this.editing = true; // Focus on the input element just as the editing begins if (this.labelEditControl) { setTimeout((/** * @param {?} _ * @return {?} */ _ => this._renderer.invokeElementMethod(this.labelEditControl, 'focus', []))); } } /** * @return {?} */ ngOnInit() { this._renderer.listen('window', 'click', (/** * @param {?} e * @return {?} */ (e) => { if (this.labelEditControl && this.labelEditControl.nativeElement && e.target !== this.labelEditControl.nativeElement) { if (this._value !== '' && this._value) { this.editing = false; } } })); this.editing = true; } } LabelEditableComponent.decorators = [ { type: Component, args: [{ selector: 'app-label-edit', template: "<div class=\"labeleditable\" style=\"display: inline-block;white-space: nowrap!important;overflow: scroll;width: 70%;margin-right: 1rem;padding: 2px;height: 43px\" [ngStyle]=\"{'padding-top':editing?'2px':'12px'}\">\n <div *ngIf=\"editing\" (focusout)=\"onClose($event)\">\n <input #labelEditControl class=\"attInput additeminput\"\n type=\"text\" [required]=\"required\" (blur)=\"onBlur($event)\" (keydown.enter)='$event.target.blur()' (focusout)=\"onClose($event)\" [name]=\"value\" [(ngModel)]=\"value\" [type]=\"type\" [placeholder]=\"label\" />\n </div>\n <div *ngIf=\"!editing\" >\n <div title=\"Modifier\" class=\"cell\" (click)=\"edit(value)\" (focus)=\"edit(value);\" tabindex=\"0\" >{{value}} <i class=\"fa fa-pencil\"></i></div>\n </div>\n</div>\n\n", providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR], styles: [".cell{border:1px solid transparent}.cell:hover{cursor:pointer;border:1px dashed #c8c8c8}"] }] } ]; /** @nocollapse */ LabelEditableComponent.ctorParameters = () => [ { type: ElementRef }, { type: Renderer } ]; LabelEditableComponent.propDecorators = { labelEditControl: [{ type: ViewChild, args: ['labelEditControl', { static: false },] }], label: [{ type: Input }], type: [{ type: Input }], required: [{ type: Input }], disabled: [{ type: Input }] }; if (false) { /** @type {?} */ LabelEditableComponent.prototype.labelEditControl; /** @type {?} */ LabelEditableComponent.prototype.label; /** @type {?} */ LabelEditableComponent.prototype.type; /** @type {?} */ LabelEditableComponent.prototype.required; /** @type {?} */ LabelEditableComponent.prototype.disabled; /** @type {?} */ LabelEditableComponent.prototype._value; /** @type {?} */ LabelEditableComponent.prototype.preValue; /** @type {?} */ LabelEditableComponent.prototype.editing; /** @type {?} */ LabelEditableComponent.prototype.onChange; /** @type {?} */ LabelEditableComponent.prototype.onTouched; /** * @type {?} * @private */ LabelEditableComponent.prototype._renderer; } /** * @fileoverview added by tsickle * Generated from: lib/tibas-form-json-generator.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Created by TIBAS-Mohammed on 2020-07-4. */ class TibasFormJsonGeneratorModule { } TibasFormJsonGeneratorModule.decorators = [ { type: NgModule, args: [{ declarations: [ TibasFormJsonGeneratorComponent, ItemFormComponent, DynamicTemplateComponent, LabelEditableComponent ], imports: [ BrowserModule, FormsModule, TranslateModule ], exports: [TibasFormJsonGeneratorComponent], providers: [ReferencesService] },] } ]; /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: tibas-form-json-generator.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { InjectorInstance, TibasFormJsonGeneratorComponent, TibasFormJsonGeneratorModule, ItemFormComponent as