UNPKG

tibas-form-json-generator

Version:

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

1,058 lines (1,048 loc) • 54.7 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 */ var FormModel = /** @class */ (function () { function FormModel() { } return 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 */ var ItemModel = /** @class */ (function () { function ItemModel() { this.children = []; this.attrValues = []; } return ItemModel; }()); 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 */ var AttributeModel = /** @class */ (function () { function AttributeModel() { } return 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 {?} */ var InjectorInstance; /** * Created by TIBAS-Mohammed on 2020-07-4. */ var TibasFormJsonGeneratorComponent = /** @class */ (function () { function TibasFormJsonGeneratorComponent(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 {?} */ TibasFormJsonGeneratorComponent.prototype.ngOnInit = /** * @return {?} */ function () { }; /** * @param {?} changes * @return {?} */ TibasFormJsonGeneratorComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { }; /** * @return {?} */ TibasFormJsonGeneratorComponent.prototype.formChanged = /** * @return {?} */ function () { 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 {?} */ TibasFormJsonGeneratorComponent.prototype.addItem = /** * @param {?} checklist * @return {?} */ function (checklist) { var _this = this; this.item = new ItemModel(); /** @type {?} */ var 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 {?} */ function (att) { /** @type {?} */ var 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 {?} */ TibasFormJsonGeneratorComponent.prototype.changedtrigger = /** * @param {?} $event * @return {?} */ function ($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 = function () { return [ { type: Injector } ]; }; TibasFormJsonGeneratorComponent.propDecorators = { formModel: [{ type: Input }], mode: [{ type: Input }], tibasFormIsValidated: [{ type: Output }] }; return TibasFormJsonGeneratorComponent; }()); 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. */ var ItemFormComponent = /** @class */ (function () { function ItemFormComponent(translateService) { this.translateService = translateService; this.changedtrigger = new EventEmitter(); this.listSourceTypes = []; } /** * @return {?} */ ItemFormComponent.prototype.ngOnInit = /** * @return {?} */ function () { }; /** * @param {?} child * @return {?} */ ItemFormComponent.prototype.additem = /** * @param {?} child * @return {?} */ function (child) { var _this = this; this.item = new ItemModel(); /** @type {?} */ var 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 {?} */ function (att) { /** @type {?} */ var 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 {?} */ ItemFormComponent.prototype.remove = /** * @param {?} item * @return {?} */ function (item) { var _this = this; /** @type {?} */ var 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 {?} */ function (result) { if (result.value) { _this.parentList.splice(index, 1); _this.triggerchange(); } })); } }; /** * @return {?} */ ItemFormComponent.prototype.triggerchange = /** * @return {?} */ function () { this.changedtrigger.emit(true); }; /** * @param {?} item * @return {?} */ ItemFormComponent.prototype.moveup = /** * @param {?} item * @return {?} */ function (item) { /** @type {?} */ var newIndex = this.parentList.indexOf(item, 0) - 1; /** @type {?} */ var oldIndex = this.parentList.indexOf(item, 0); if (newIndex >= this.parentList.length) { /** @type {?} */ var 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 {?} */ ItemFormComponent.prototype.movedown = /** * @param {?} item * @return {?} */ function (item) { /** @type {?} */ var newIndex = this.parentList.indexOf(item, 0) + 1; /** @type {?} */ var oldIndex = this.parentList.indexOf(item, 0); if (newIndex >= this.parentList.length) { /** @type {?} */ var 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 = function () { return [ { type: TranslateService } ]; }; ItemFormComponent.propDecorators = { child: [{ type: Input }], level: [{ type: Input }], mode: [{ type: Input }], changedtrigger: [{ type: Output }], parentList: [{ type: Input }], listSourceTypes: [{ type: Input }] }; return ItemFormComponent; }()); 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} */ var 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 */ var ReferencesService = /** @class */ (function () { function ReferencesService() { } /** * @param {?} apiUrl * @return {?} */ ReferencesService.getData = /** * @param {?} apiUrl * @return {?} */ function (apiUrl) { /** @type {?} */ var httpClient = InjectorInstance.get(HttpClient); return httpClient.get(apiUrl); }; ReferencesService.decorators = [ { type: Injectable } ]; /** @nocollapse */ ReferencesService.ctorParameters = function () { return []; }; return ReferencesService; }()); /** * @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} */ var 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. */ var DynamicTemplateComponent = /** @class */ (function () { function DynamicTemplateComponent(compiler, injector, moduleRef, referencesService) { this.compiler = compiler; this.injector = injector; this.moduleRef = moduleRef; this.referencesService = referencesService; this.changedtrigger = new EventEmitter(); this.script = ''; } /** * @return {?} */ DynamicTemplateComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { this.createComponentFromRaw(this.template, this.attribute, this.item, this.headerOrFooter, this.position); }; /** * @private * @param {?} template * @param {?} attribute * @param {?} item * @param {?} headerOrFooter * @param {?} position * @return {?} */ DynamicTemplateComponent.prototype.createComponentFromRaw = /** * @private * @param {?} template * @param {?} attribute * @param {?} item * @param {?} headerOrFooter * @param {?} position * @return {?} */ function (template, attribute, item, headerOrFooter, position) { var _this = this; if (!template) { return; } /** @type {?} */ var 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 {?} */ function (refTable, apiUrl) { if (position !== 'BODY' && headerOrFooter !== null && headerOrFooter !== undefined && (headerOrFooter.header.length > 0 || headerOrFooter.footer.length > 0) && attribute.value && refTable && apiUrl) { /** @type {?} */ var id_1; attribute.refValues.forEach((/** * @param {?} value * @return {?} */ function (value) { if (value.label === attribute.value) { id_1 = value.id; } })); if (id_1) { ReferencesService.getData(apiUrl + '/' + id_1).subscribe((/** * @param {?} response * @return {?} */ function (response) { /** @type {?} */ var atts = []; headerOrFooter.header.forEach((/** * @param {?} attr * @return {?} */ function (attr) { if (attr.refTable === refTable) { atts.push(attr); } })); headerOrFooter.footer.forEach((/** * @param {?} attr * @return {?} */ function (attr) { if (attr.refTable === refTable) { atts.push(attr); } })); if (atts.length > 0) { atts.forEach((/** * @param {?} att * @return {?} */ function (att) { att.refValues = []; att.value = ''; if (response['data'] && response['data'].length > 0) { att.refValues = response['data']; } })); } })); } } }); } /** @type {?} */ var tmpCmp = Component({ template: template, styles: styles })(new TmpCmpConstructor().constructor); /** @type {?} */ var tmpModule = NgModule({ imports: [CommonModule, FormsModule, ReactiveFormsModule], declarations: [tmpCmp], providers: [ReferencesService] })(/** @class */ (function () { function class_1() { } return class_1; }())); this.compiler.compileModuleAndAllComponentsAsync(tmpModule) .then((/** * @param {?} factories * @return {?} */ function (factories) { /** @type {?} */ var 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 {?} */ var func_1 = ' \n'; item.children.forEach((/** * @param {?} child * @return {?} */ function (child) { _this.script += '$("#' + child.code + '_' + attribute.code + '").change(' + item.code + '_' + attribute.code + '); \n'; if (attribute.forumlaItems.function === ParentFunctionEnum.SUM) { func_1 += '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_1 += '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_1 += '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 {?} */ var finalValueVar = ''; /** @type {?} */ var 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 {?} */ var calledFunct = ' function ' + item.code + '_' + attribute.code + '(){ \n' + ' ' + finalValueVar + ' \n' + ' ' + func_1 + ' \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 {?} */ var functionReplaced_1 = attribute.forumlaAttribute.function; attribute.forumlaAttribute.depends.forEach((/** * @param {?} depend * @return {?} */ function (depend) { _this.script += '$("#' + item.code + '_' + depend + '").change(function(){ \n'; functionReplaced_1 = functionReplaced_1.split(depend).join(item.code + '_' + depend); })); functionReplaced_1 = functionReplaced_1.split(attribute.code).join(item.code + '_' + attribute.code); _this.script += functionReplaced_1 + '\n '; _this.script += '$("#' + item.code + '_' + attribute.code + '").trigger("change");\n }); \n'; } _this.script += ' }); '; /** @type {?} */ var 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 {?} */ var functionReplaced_2 = attribute.mandatory.function; /** @type {?} */ var idElement_1 = ''; if (_this.position === 'BODY') { idElement_1 = item.code + '_' + attribute.code; attribute.mandatory.depends.forEach((/** * @param {?} depend * @return {?} */ function (depend) { _this.script += '$("#' + item.code + '_' + depend + '").change(RequiredFunc_' + idElement_1 + '); \n'; functionReplaced_2 = functionReplaced_2.split(depend).join(item.code + '_' + depend); })); functionReplaced_2 = functionReplaced_2.split(attribute.code).join(item.code + '_' + attribute.code); } if (_this.position === 'HEADER' || _this.position === 'FOOTER') { idElement_1 = attribute.code; attribute.mandatory.depends.forEach((/** * @param {?} depend * @return {?} */ function (depend) { _this.script += '$("#' + depend + '").change(RequiredFunc_' + idElement_1 + '); \n'; })); } _this.script += ' function RequiredFunc_' + idElement_1 + '(){ \n'; _this.script += 'if(' + functionReplaced_2 + '){ \n'; _this.script += '$("#' + idElement_1 + '").prop("required",true); \n'; _this.script += ' } else {\n'; _this.script += '$("#' + idElement_1 + '").prop("required",false); \n'; _this.script += ' } \n' + ' $("#' + idElement_1 + '").trigger("change");\n}\n' + '$("#' + idElement_1 + '").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 {?} */ var tjss = document.createElement('script'); tjss.innerHTML = _this.script; _this.valueITtempl.element.nativeElement.appendChild(tjss); } } })); }; /** * @return {?} */ DynamicTemplateComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.changedtrigger.emit(true); if (this.cmpRef) { this.cmpRef.destroy(); } }; DynamicTemplateComponent.decorators = [ { type: Component, args: [{ selector: '[dynamic-template]', template: "\n <div #valueITtempl></div>\n " }] } ]; /** @nocollapse */ DynamicTemplateComponent.ctorParameters = function () { return [ { 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 }] }; return DynamicTemplateComponent; }()); 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 {?} */ var INLINE_EDIT_CONTROL_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/** * @return {?} */ function () { return LabelEditableComponent; })), multi: true }; var LabelEditableComponent = /** @class */ (function () { function LabelEditableComponent(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; } Object.defineProperty(LabelEditableComponent.prototype, "value", { // Control Value Accessors for ngModel get: // Trascend the onTouch event // Control Value Accessors for ngModel /** * @return {?} */ function () { return this._value; }, set: /** * @param {?} v * @return {?} */ function (v) { if (v !== this._value) { this._value = v; this.onChange(v); } }, enumerable: true, configurable: true }); // Required for ControlValueAccessor interface // Required for ControlValueAccessor interface /** * @param {?} value * @return {?} */ LabelEditableComponent.prototype.writeValue = // Required for ControlValueAccessor interface /** * @param {?} value * @return {?} */ function (value) { this._value = value; }; // Required forControlValueAccessor interface // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ LabelEditableComponent.prototype.registerOnChange = // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ function (fn) { this.onChange = fn; }; // Required forControlValueAccessor interface // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ LabelEditableComponent.prototype.registerOnTouched = // Required forControlValueAccessor interface /** * @param {?} fn * @return {?} */ function (fn) { this.onTouched = fn; }; // Do stuff when the input element loses focus // Do stuff when the input element loses focus /** * @param {?} $event * @return {?} */ LabelEditableComponent.prototype.onBlur = // Do stuff when the input element loses focus /** * @param {?} $event * @return {?} */ function ($event) { if (this._value !== '' && this._value) { this.editing = false; } }; /** * @param {?} $event * @return {?} */ LabelEditableComponent.prototype.onClose = /** * @param {?} $event * @return {?} */ function ($event) { if (this._value !== '' && this._value) { this.editing = false; } }; // Start the editting process for the input element // Start the editting process for the input element /** * @param {?} value * @return {?} */ LabelEditableComponent.prototype.edit = // Start the editting process for the input element /** * @param {?} value * @return {?} */ function (value) { var _this = this; 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 {?} */ function (_) { return _this._renderer.invokeElementMethod(_this.labelEditControl, 'focus', []); })); } }; /** * @return {?} */ LabelEditableComponent.prototype.ngOnInit = /** * @return {?} */ function (