@eqproject/eqp-dynamic-module 0.0.2 → 0.0.3

package/fesm5/eqproject-eqp-dynamic-module.js

@@ -1,6 +1,6 @@
 import { __extends, __decorate } from 'tslib';
 import { CommonModule } from '@angular/common';
-import { ɵɵdefineInjectable, ɵɵinject, Injectable, Input, Component, NgModule, EventEmitter, ViewChild, Output, ChangeDetectorRef, ViewChildren } from '@angular/core';
+import { ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
 import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -383,7 +383,11 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
         this.context = new Context();
         this.form = new Form();
         this.showButtons = true;
+        this.showTitle = true;
         this.viewMode = FormTypeEnum.LIST;
+        this.saveRecord = new EventEmitter();
+        this.deleteRecord = new EventEmitter();
+        this.duplicateRecord = new EventEmitter();
         this.FormTypeEnum = FormTypeEnum;
     }
     EqpDynamicModuleComponent.prototype.ngOnInit = function () {
@@ -402,16 +406,21 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
     };
     EqpDynamicModuleComponent.prototype.onSaveForm = function (event) {
         //TODO: Salvare il record!
-        if (event != null) {
-            if (event.ID && this.values.find(function (v) { return v.ID == event.ID; })) {
-                this.values[this.values.findIndex(function (v) { return v.ID == event.ID; })] = event;
-            }
-            else {
-                this.values.push(event);
-            }
-        }
+        // if (event != null) {
+        //   if (event.ID && this.values.find(v => v.ID == event.ID)) {
+        //     this.values[this.values.findIndex(v => v.ID == event.ID)] = event;
+        //   } else {
+        //     this.values.push(event);
+        //   }
+        // }
+        this.saveRecord.emit(event);
         this.viewMode = FormTypeEnum.LIST;
-        console.log(event);
+    };
+    EqpDynamicModuleComponent.prototype.onDuplicateRecord = function (record) {
+        this.duplicateRecord.emit(record);
+    };
+    EqpDynamicModuleComponent.prototype.onDeleteRecord = function (record) {
+        this.deleteRecord.emit(record);
     };
     __decorate([
         Input()
@@ -425,13 +434,25 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], EqpDynamicModuleComponent.prototype, "showButtons", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], EqpDynamicModuleComponent.prototype, "viewMode", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "saveRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "deleteRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "duplicateRecord", void 0);
     EqpDynamicModuleComponent = __decorate([
         Component({
             selector: 'eqp-dynamic-module',
-            template: "<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveForm($event)\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\">\r\n</list-form-record>",
+            template: "<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveForm($event)\" [showTitle]=\"showTitle\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\" [showTitle]=\"showTitle\"\r\n    (onDeleteRecord)=\"onDeleteRecord($event)\" (onDuplicateRecord)=\"onDuplicateRecord($event)\">\r\n</list-form-record>",
             styles: ["::ng-deep mat-form-field{width:100%}"]
         })
     ], EqpDynamicModuleComponent);
@@ -2332,12 +2353,22 @@ var ImageFieldTemplateComponent = /** @class */ (function () {
 
 var ListFormRecordComponent = /** @class */ (function () {
     function ListFormRecordComponent() {
+        this.showTitle = true;
         this.columns = new Array();
         this.onAddViewEditRecord = new EventEmitter();
+        this.onDeleteRecord = new EventEmitter();
+        this.onDuplicateRecord = new EventEmitter();
     }
     ListFormRecordComponent.prototype.ngOnInit = function () {
         this.configureColumns();
     };
+    ListFormRecordComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['values'] != undefined && changes['values'].firstChange == false) {
+            this.values = changes['values'].currentValue;
+            this.reloadTables();
+        }
+    };
     /**
      * Metodo per configurare le colonne della eqp-table.
      */
@@ -2395,18 +2426,17 @@ var ListFormRecordComponent = /** @class */ (function () {
      * @param record Record da duplicare.
      */
     ListFormRecordComponent.prototype.duplicateRecord = function (record) {
-        var _this = this;
-        EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', function () {
-            var copiedRecord = JSON.parse(JSON.stringify(record));
-            if (!isNaN(parseInt(copiedRecord.ID))) {
-                copiedRecord.ID = (parseInt(copiedRecord.ID) + 1).toString();
-            }
-            else {
-                copiedRecord.ID = "xxxxxxxxx".replace("x", function (c) { return (Math.random() + 16 | 0).toString(16); });
-            }
-            _this.values.push(copiedRecord);
-            _this.reloadTables();
-        }, false, 'Richiesta conferma');
+        // EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', () => {
+        //   var copiedRecord: Record = JSON.parse(JSON.stringify(record));
+        //   if (!isNaN(parseInt(copiedRecord.ID))) {
+        //     copiedRecord.ID = (parseInt(copiedRecord.ID) + 1).toString();
+        //   } else {
+        //     copiedRecord.ID = "xxxxxxxxx".replace("x", (c) => { return (Math.random() + 16 | 0).toString(16); });
+        //   }
+        //   this.values.push(copiedRecord);
+        //   this.reloadTables();
+        // }, false, 'Richiesta conferma');
+        this.onDuplicateRecord.emit(record);
         //TODO
     };
     /**
@@ -2414,11 +2444,11 @@ var ListFormRecordComponent = /** @class */ (function () {
      * @param record Record da eliminare selezionato sulla eqp-table.
      */
     ListFormRecordComponent.prototype.deleteRecord = function (record) {
-        var _this = this;
-        EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', function () {
-            _this.values.splice(_this.values.indexOf(record), 1);
-            _this.reloadTables();
-        }, false, 'Richiesta conferma');
+        // EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', () => {
+        //   this.values.splice(this.values.indexOf(record), 1);
+        //   this.reloadTables();
+        // }, false, 'Richiesta conferma');
+        this.onDeleteRecord.emit(record);
         // TODO
     };
     /**
@@ -2519,6 +2549,9 @@ var ListFormRecordComponent = /** @class */ (function () {
             this.tableRecords.reloadDatatable();
         }
     };
+    __decorate([
+        Input()
+    ], ListFormRecordComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], ListFormRecordComponent.prototype, "form", void 0);
@@ -2531,10 +2564,16 @@ var ListFormRecordComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], ListFormRecordComponent.prototype, "onAddViewEditRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDeleteRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDuplicateRecord", void 0);
     ListFormRecordComponent = __decorate([
         Component({
             selector: 'list-form-record',
-            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
+            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4 *ngIf=\"showTitle\"><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
             styles: ["::ng-deep .error-color{color:var(--danger)}::ng-deep .success-color{color:var(--success)}"]
         })
     ], ListFormRecordComponent);
@@ -2551,6 +2590,7 @@ var AddFormRecordComponent = /** @class */ (function () {
     function AddFormRecordComponent(cdr, utilityService) {
         this.cdr = cdr;
         this.utilityService = utilityService;
+        this.showTitle = true;
         this.showButtons = true;
         this.form = new Form();
         this.fieldGroups = {};
@@ -2641,6 +2681,9 @@ var AddFormRecordComponent = /** @class */ (function () {
         { type: ChangeDetectorRef },
         { type: UtilityHelperService }
     ]; };
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], AddFormRecordComponent.prototype, "showButtons", void 0);
@@ -2662,7 +2705,7 @@ var AddFormRecordComponent = /** @class */ (function () {
     AddFormRecordComponent = __decorate([
         Component({
             selector: 'add-form-record',
-            template: "<div class=\"row eqp-dynamic-module-title\">\n    <div class=\"col-md-12 text-center\">\n        <h4><b>{{form.Name}}</b></h4>\n    </div>\n</div>\n\n<form [formGroup]=\"formForm\">\n\n    <!-- VISUALIZZAZIONE SEMPLICE -->\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\n    </ng-container>\n\n    <!-- VISUALIZZAZIONE A STEPPER -->\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\n            <ng-template matStepLabel>\n                {{group.Name}}\n            </ng-template>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-step>\n    </mat-horizontal-stepper>\n\n    <!-- VISUALIZZAZIONE A TAB -->\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\n            <div class=\"mt-3\">\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    {{group.Name}}\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-expansion-panel>\n    </mat-accordion>\n</form>\n\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\n    <div class=\"col-sm-12 text-right\">\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\n            Annulla\n        </button>\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\n            Salva\n        </button>\n    </div>\n</div>\n\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\n<ng-template #fieldTemplates let-fields='fields'>\n    <div class=\"row\">\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\" (recordChange)=\"onRecordChange()\"></dynamic-module-field>\n        </div>\n    </div>\n</ng-template>",
+            template: "<div class=\"row eqp-dynamic-module-title\" *ngIf=\"showTitle\">\n    <div class=\"col-md-12\">\n        <h4><b>{{form.Name}}</b></h4>\n    </div>\n</div>\n\n<form [formGroup]=\"formForm\">\n\n    <!-- VISUALIZZAZIONE SEMPLICE -->\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\n    </ng-container>\n\n    <!-- VISUALIZZAZIONE A STEPPER -->\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\n            <ng-template matStepLabel>\n                {{group.Name}}\n            </ng-template>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-step>\n    </mat-horizontal-stepper>\n\n    <!-- VISUALIZZAZIONE A TAB -->\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\n            <div class=\"mt-3\">\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    {{group.Name}}\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-expansion-panel>\n    </mat-accordion>\n</form>\n\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\n    <div class=\"col-sm-12 text-right\">\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\n            Annulla\n        </button>\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\n            Salva\n        </button>\n    </div>\n</div>\n\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\n<ng-template #fieldTemplates let-fields='fields'>\n    <div class=\"row\">\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\"\n                (recordChange)=\"onRecordChange()\"></dynamic-module-field>\n        </div>\n    </div>\n</ng-template>",
             styles: [""]
         })
     ], AddFormRecordComponent);