@eqproject/eqp-dynamic-module 0.0.6 → 0.0.7

package/src/lib/components/private/form-records/add-form-record/add-form-record.component.ts

@@ -0,0 +1,117 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { BaseField, FieldTypeEnum } from '../../../../models/baseField.model';
+import { Form, FormScalarTypeEnum } from '../../../../models/form.model';
+import { Record } from '../../../../models/record.model';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { DynamicModuleFieldComponent } from '../../dynamic-module-field/dynamic-module-field.component';
+
+@Component({
+  selector: 'add-form-record',
+  templateUrl: './add-form-record.component.html',
+  styleUrls: ['./add-form-record.component.scss']
+})
+export class AddFormRecordComponent implements OnInit {
+
+  @Input() showTitle = true;
+  @Input() showButtons = true;
+  @Input() form: Form = new Form();
+  @Input() record: Record;
+  @Input() onlyView: boolean;
+  formForm: FormGroup;
+  fieldGroups: { [key: string]: Array<BaseField> } = {};
+  FormScalarTypeEnum = FormScalarTypeEnum;
+  FieldTypeEnum = FieldTypeEnum;
+
+  @Output() saveRecordEvent: EventEmitter<Record> = new EventEmitter<Record>();
+
+  @ViewChildren("fieldTemplate") fieldTemplate: QueryList<DynamicModuleFieldComponent>;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    public utilityService: UtilityHelperService
+  ) { }
+
+  ngOnInit(): void {
+    if (this.record == null) {
+      this.record = new Record();
+    }
+    this.createRecordProperties();
+    this.reorderFormFields();
+    this.createFormGroup();
+    if (this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
+      this.createFieldGroups();
+    }
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Metodo invocato al cambio del valore di ogni proprietà dell'oggetto record.
+   * Serve ad aggiornare il valore di tutti i campi che hanno una formula.
+   */
+  onRecordChange() {
+    if (this.fieldTemplate && this.fieldTemplate.length > 0) {
+      this.fieldTemplate.forEach(f => f.updateField());
+    }
+  }
+
+  /**
+   * Metodo per salvare i dati inseriti dall'utente una volta conclusa la compilazione della form.
+   */
+  saveOrExitForm(exit: boolean) {
+    if (exit) {
+      this.saveRecordEvent.emit(null);
+    } else {
+      this.saveRecordEvent.emit(this.record);
+    }
+  }
+
+  /**
+   * Metodo per creare nell'oggetto Record le proprietà mancanti rispetto ai campi che compongono la form.
+   */
+  private createRecordProperties() {
+    const recordProperties: Array<string> = Object.keys(this.record);
+    this.form.Fields.forEach(field => {
+      if (!recordProperties.find(p => p === field.Name)) {
+        this.record[field.Name] = null;
+      }
+    });
+    if (this.form.InnerForms && this.form.InnerForms.length > 0) {
+      this.form.InnerForms.forEach(form => {
+        const arrayName: string = form.Name.split(" ").join("_");
+        if (!recordProperties.find(p => p === arrayName)) {
+          this.record[arrayName] = [];
+        }
+      });
+    }
+  }
+
+  /**
+   * Metodo per riordinare i campi che compongono la form.
+   */
+  private reorderFormFields() {
+    if (this.form.Fields && this.form.Fields.length > 0) {
+      this.form.Fields.sort((a, b) => (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0));
+    }
+  }
+
+  /**
+   * Metodo per creare il FormGroup che rappresenta la form.
+   */
+  private createFormGroup() {
+    this.formForm = this.utilityService.CreateFormFormGroup(this.form.Fields, this.record, this.onlyView);
+  }
+
+  /**
+   * Metodo per creare i gruppi in cui raggruppare i campi della form in base 
+   * a come è stata configurata dall'utente.
+   */
+  private createFieldGroups() {
+    this.form.FormFieldsGroups
+      .sort((a, b) => (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0))
+      .map(g => g.Name)
+      .forEach(groupName => {
+        this.fieldGroups[groupName] = this.form.Fields.filter(f => f.FieldGroup == groupName);
+      });
+  }
+}

package/src/lib/components/private/form-records/list-form-record/list-form-record.component.html

@@ -0,0 +1,14 @@
+<div class="row eqp-dynamic-module-title">
+    <div class="col-md-6">
+        <h4 *ngIf="showTitle"><b>Elenco {{form.Name}}</b></h4>
+    </div>
+    <div class="col-md-6 text-right">
+        <button class="btn btn-primary" mat-raised-button color="primary" type="button" (click)="onAddViewEditRecord.emit(null)">
+            <mat-icon>add</mat-icon>
+            <span style="margin-left: 10px;">Aggiungi</span>
+        </button>
+    </div>
+</div>
+
+
+<eqp-table #tableRecords [data]="values" [columns]="columns"></eqp-table>

package/src/lib/components/private/form-records/list-form-record/list-form-record.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .error-color {
+    color: var(--danger);
+}
+
+::ng-deep .success-color {
+    color: var(--success);
+}

package/src/lib/components/private/form-records/list-form-record/list-form-record.component.ts

@@ -0,0 +1,213 @@
+import { Component, OnInit, Input, ViewChild, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { IAttachmentDTO } from '@eqproject/eqp-attachments';
+import { CellAlignmentEnum, ConfigColumn, EqpTableComponent, NumberColumnPipe, TypeColumn } from '@eqproject/eqp-table';
+import { Form } from '../../../../models/form.model';
+import { BaseField, FieldTypeEnum } from '../../../../models/baseField.model';
+import { Record } from '../../../../models/record.model';
+import { AttachmentField } from '../../../../models/fields/attachmentField.model';
+import { DateField, DateTimeTypeEnum } from '../../../../models/fields/dateField.model';
+import { ImageField } from '../../../../models/fields/imageField.model';
+import { ListValueField } from '../../../../models/fields/listValueField.model';
+import { NumericField } from '../../../../models/fields/numericField.model';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { EqpDynamicModuleDialogService } from '../../../../services/eqp-dynamic-module-dialog.service';
+
+@Component({
+  selector: 'list-form-record',
+  templateUrl: 'list-form-record.component.html',
+  styleUrls: ['./list-form-record.component.scss']
+})
+export class ListFormRecordComponent implements OnInit, OnChanges {
+
+  @Input() showTitle = true;
+  @Input() form: Form;
+  @Input() values: Array<Record>;
+  @ViewChild('tableRecords', { static: true }) tableRecords: EqpTableComponent;
+
+  columns = new Array<ConfigColumn>();
+
+  @Output() onAddViewEditRecord: EventEmitter<{ record: Record, onlyView: boolean }> = new EventEmitter<{ record: Record, onlyView: boolean }>();
+
+  @Output() onDeleteRecord: EventEmitter<Record> = new EventEmitter<Record>();
+  @Output() onDuplicateRecord: EventEmitter<Record> = new EventEmitter<Record>();
+
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.configureColumns();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // 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.
+   */
+  private configureColumns() {
+    this.columns = [
+      {
+        key: "action", display: "",
+        type: TypeColumn.MenuAction, buttonMenuIcon: "more_vert", styles: { flex: "0 0 6%" },
+        actions: [
+          { name: "Visualizza", icon: "info", fn: (element, index, col) => this.viewOrEditRecord(element, true) },
+          { name: "Modifica", icon: "edit", fn: (element, index, col) => this.viewOrEditRecord(element, false) },
+          { name: "Duplica", icon: "file_copy", fn: (element, index, col) => this.duplicateRecord(element) },
+          { name: "Elimina", icon: "delete", fn: (element, index, col) => this.deleteRecord(element) },
+        ],
+      },
+    ];
+    this.createAdditionalActions();
+    this.createColumnsFromFormFields();
+  }
+
+
+  /**
+   * Metodo per aggiungere nella colonna "action" della eqp-table le azioni sui record 
+   * definite dall'utente all'interno della Form.
+   */
+  private createAdditionalActions() {
+    if (this.form.ActionsOnRecord && this.form.ActionsOnRecord.length > 0) {
+      this.form.ActionsOnRecord
+        .sort((a, b) => (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0))
+        .forEach(action => {
+          this.columns.find(c => c.key === 'action')
+            .actions
+            .push({
+              name: action.Name, icon: action.Icon, fn: (element, index, col) => {
+                const rec = element;
+                const ctx = UtilityHelperService.context;
+                eval(action.Action);
+                // TODO: salvare le modifiche
+              }
+            })
+        })
+    }
+  }
+
+  /**
+   * Metodo che scatena l'evento di Output per mostrare o modificare il record
+   * selezionato sulla eqp-table.
+   * @param record Record da visualizzare o modificare selezionato sulla eqp-table.
+   * @param onlyView Se TRUE viene mostrato il componente add-form-record in sola lettura.
+   */
+  private viewOrEditRecord(record: Record, onlyView: boolean) {
+    this.onAddViewEditRecord.emit({ record, onlyView });
+  }
+
+  /**
+   * Metodo per duplicare un record della form.
+   * @param record Record da duplicare.
+   */
+  private duplicateRecord(record: Record) {
+    this.onDuplicateRecord.emit(record);
+  }
+
+  /**
+   * Metodo per eliminare un record dalla lista.
+   * @param record Record da eliminare selezionato sulla eqp-table.
+   */
+  private deleteRecord(record: Record) {
+    this.onDeleteRecord.emit(record);
+  }
+
+  /**
+   * Metodo per creare la configurazione delle colonne per la eqp-table.
+   * Individua i BaseField da mostrare e li usa per creare le ConfigColumn.
+   * Le colonne vengono create per i BaseField con il flag InListView a TRUE
+   * oppure, nel caso non siano stati specificati i campi da visualizzare, 
+   * seleziona i primi 6.
+   */
+  private createColumnsFromFormFields() {
+    var fieldsForColumns: Array<BaseField>;
+    if (this.form.Fields.find(f => f.InListView)) {
+      fieldsForColumns = this.form.Fields.filter(f => f.InListView);
+    } else {
+      fieldsForColumns = this.form.Fields.filter(f => f.OrdinalPosition < 6);
+    }
+    fieldsForColumns.sort((a, b) => (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0))
+      .forEach(field => {
+        this.columns.push(this.createFieldColumn(field));
+      });
+  }
+
+  /**
+   * Metodo per creare l'oggetto ConfigureColumn che rappresenta il BaseField passato in input.
+   * @param field BaseField per cui creare la colonna nella eqp-table
+   * @returns Restituisce una ConfigColumn per la eqp-table
+   */
+  private createFieldColumn(field: BaseField): ConfigColumn {
+    var column: ConfigColumn = { key: field.Name, display: field.Label };
+    switch (field.FieldType) {
+      case FieldTypeEnum['Booleano']:
+        column.type = TypeColumn.Boolean;
+        column.booleanValues = { false: '<i class="fa fa-times error-color"></i>', true: '<i class="fa fa-check success-color"></i>' };
+        column.styles = { flex: "0 0 7%", cellAlignment: CellAlignmentEnum.CENTER };
+        break;
+      case FieldTypeEnum['Data e/o ora']:
+        if ((field as DateField).IsOnlyDate != DateTimeTypeEnum['Solo orario']) {
+          column.type = TypeColumn.Date;
+          if ((field as DateField).IsOnlyDate == DateTimeTypeEnum['Data e ora']) {
+            column.format = "dd/MM/yyyy HH:mm";
+          } else if ((field as DateField).IsOnlyDate == DateTimeTypeEnum['Solo data']) {
+            column.format = (field as DateField).DateFormat ? (field as DateField).DateFormat.replace("DD", "dd") : "dd/MM/yyyy";
+          }
+        }
+        break;
+      case FieldTypeEnum['Campo numerico']:
+        if ((field as NumericField).CurrencySymbol) {
+          column.numberPipe = NumberColumnPipe.CURRENCY;
+          column.currencyPipeCode = (field as NumericField).CurrencySymbol;
+        } else if (!(field as NumericField).IsInteger) {
+          column.numberPipe = NumberColumnPipe.DECIMAL;
+        }
+        break;
+      case FieldTypeEnum['Allegato']:
+      case FieldTypeEnum['Immagine']:
+        column.value = (element: Record) => {
+          if ((field as AttachmentField).IsMultiAttach || ((field as ImageField).AttachDefinition && (field as ImageField).AttachDefinition.IsMultiAttach)) {
+            return element[field.Name] != null && element[field.Name].length > 0 ? (element[field.Name] as Array<IAttachmentDTO>).map(a => a.FileName).join(", ") : null;
+          } else {
+            return element[field.Name] != null && element[field.Name].length > 0 ? (element[field.Name] as Array<IAttachmentDTO>)[0].FileName : null;
+          }
+        };
+        column.isSortable = false;
+        column.isSearchable = false;
+        break;
+      case FieldTypeEnum['Elenco generico']:
+        column.value = (element: Record) => {
+          if ((field as ListValueField).IsMultiChoiche) {
+            if (!element[field.Name] || element[field.Name].length == 0) {
+              return null;
+            } else {
+              return Object.keys((field as ListValueField).ValuePairs).filter(k => element[field.Name].includes((field as ListValueField).ValuePairs[k])).join(", ");
+            }
+          } else {
+            return Object.keys((field as ListValueField).ValuePairs).find(k => (field as ListValueField).ValuePairs[k] == element[field.Name]);
+          }
+        };
+        column.isSortable = false;
+        column.isSearchable = false;
+        break;
+      case FieldTypeEnum['Lookup']:
+        // TODO
+        break;
+    }
+    return column;
+  }
+
+  /**
+   * Metodo per ricaricare i dati della eqp-table.
+   */
+  private reloadTables() {
+    if (this.tableRecords) {
+      this.tableRecords.reloadDatatable();
+    }
+  }
+}

package/src/lib/components/private/spinner/spinner.component.html

@@ -0,0 +1,3 @@
+<div class="eqp-splash-screen" *ngIf="isLoading | async">
+    <div id="loader"></div>
+</div>

package/src/lib/components/private/spinner/spinner.component.scss

@@ -0,0 +1,100 @@
+:host {
+    #loader {
+        display: block;
+        position: relative;
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: var(--primary);
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+    }
+
+    #loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: var(--primary);
+        -webkit-animation: spin 3s linear infinite;
+        animation: spin 3s linear infinite;
+    }
+
+    #loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: var(--primary);
+        -webkit-animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+    }
+
+    @-webkit-keyframes spin {
+        0% {
+            -webkit-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes spin {
+        0% {
+            -webkit-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+
+    .eqp-splash-screen {
+        background-color: #343a4040;
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        z-index: 9999;
+
+        img {
+            margin-left: calc(100vw - 100%);
+            width: 90px;
+            margin-bottom: 30px;
+        }
+
+        span {
+            margin-left: calc(100vw - 100%);
+            margin-bottom: 30px;
+        }
+
+        ::ng-deep {
+            .mat-progress-spinner circle,
+            .mat-spinner circle {
+                // brand color
+                stroke: #5d78ff;
+            }
+        }
+    }
+}

package/src/lib/components/private/spinner/spinner.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SpinnerService } from '../../../services/spinner.service';
+
+@Component({
+  selector: 'eqp-dynamic-module-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent implements OnInit {
+
+  isLoading: Subject<boolean> = this.spinnerService.isLoading;
+
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/eqp-dynamic-module.module.ts

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { EqpDynamicModuleComponent } from './components/exported/eqp-dynamic-module/eqp-dynamic-module.component';
+import { MaterialModule } from './modules/material.module';
+
+import { EqpTableModule } from '@eqproject/eqp-table';
+import { EqpAttachmentsModule } from '@eqproject/eqp-attachments';
+import { EqpSelectModule } from '@eqproject/eqp-select';
+import { EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
+import { EqpImgDrawingModule } from '@eqproject/eqp-img-drawing';
+import { EqpFiltersModule } from '@eqproject/eqp-filters';
+import { EqpNumericModule } from '@eqproject/eqp-numeric';
+import { EqpDynamicModuleConfiguratorComponent } from './components/exported/eqp-dynamic-module-configurator/eqp-dynamic-module-configurator.component';
+import { AddFormFieldComponent } from './components/private/add-form-field/add-form-field.component';
+import { TextFieldTemplateComponent } from './components/private/field-templates/text-field-template/text-field-template.component';
+import { BooleanFieldTemplateComponent } from './components/private/field-templates/boolean-field-template/boolean-field-template.component';
+import { DateFieldTemplateComponent } from './components/private/field-templates/date-field-template/date-field-template.component';
+import { TextareaFieldTemplateComponent } from './components/private/field-templates/textarea-field-template/textarea-field-template.component';
+import { NumericFieldTemplateComponent } from './components/private/field-templates/numeric-field-template/numeric-field-template.component';
+import { ListValueFieldTemplateComponent } from './components/private/field-templates/list-value-field-template/list-value-field-template.component';
+import { AttachmentFieldTemplateComponent } from './components/private/field-templates/attachment-field-template/attachment-field-template.component';
+import { ImageFieldTemplateComponent } from './components/private/field-templates/image-field-template/image-field-template.component';
+import { ListFormRecordComponent } from './components/private/form-records/list-form-record/list-form-record.component';
+import { AddFormRecordComponent } from './components/private/form-records/add-form-record/add-form-record.component';
+import { DynamicModuleFieldComponent } from './components/private/dynamic-module-field/dynamic-module-field.component';
+import { SpinnerComponent } from './components/private/spinner/spinner.component';
+
+@NgModule({
+  declarations: [
+    EqpDynamicModuleComponent,
+    EqpDynamicModuleConfiguratorComponent,
+    AddFormFieldComponent,
+    TextFieldTemplateComponent,
+    BooleanFieldTemplateComponent,
+    DateFieldTemplateComponent,
+    TextareaFieldTemplateComponent,
+    NumericFieldTemplateComponent,
+    ListValueFieldTemplateComponent,
+    AttachmentFieldTemplateComponent,
+    ImageFieldTemplateComponent,
+    ListFormRecordComponent,
+    AddFormRecordComponent,
+    DynamicModuleFieldComponent,
+    SpinnerComponent,
+  ],
+  imports: [
+    MaterialModule,
+    FormsModule,
+    CommonModule,
+    ReactiveFormsModule,
+    EqpTableModule,
+    EqpAttachmentsModule,
+    EqpSelectModule,
+    EqpDatetimepickerModule,
+    EqpFiltersModule,
+    EqpNumericModule,
+    EqpImgDrawingModule
+  ],
+  exports: [
+    EqpDynamicModuleComponent,
+    EqpDynamicModuleConfiguratorComponent
+  ]
+})
+export class EqpDynamicModuleModule { }

package/{lib/interfaces/iBaseFieldComponent.interface.d.ts → src/lib/interfaces/iBaseFieldComponent.interface.ts}

@@ -5,4 +5,4 @@ export declare interface IBaseFieldComponent {
      * le formule che utilizzano il campo modificato.
      */
     updateField(): void;
-}
+}

package/{lib/interfaces/iRootObject.interface.d.ts → src/lib/interfaces/iRootObject.interface.ts}

@@ -7,4 +7,4 @@
 export interface IRootObject {
     ID: string;
     Name: string;
-}
+}

package/{lib/models/baseField.model.d.ts → src/lib/models/baseField.model.ts}

@@ -1,10 +1,11 @@
 import { FormGroup } from '@angular/forms';
 import { BaseObj } from './baseObj.model';
+
 /**
  * Contiene le informazioni di base del campo, indipendentemente dal tipo.
  * Questa classe è volutamente astratta perché il tipo di campo è dettato dal tipo
  */
-export declare class BaseField extends BaseObj {
+export class BaseField extends BaseObj {
     /**
      * Nome del campo che per progettazione è una sostituzione della label
      * Il vero identificativo del campo è l'ID
@@ -15,20 +16,25 @@ export declare class BaseField extends BaseObj {
     Required: boolean;
     Formula: string;
     OrdinalPosition: number;
+
     /**
      * Entità a cui appartiene il campo. Si tenga presente che sono ammessi anche campi
-     * di sola visualizzazione e calcolati, da utilizzare nelle form,
+     * di sola visualizzazione e calcolati, da utilizzare nelle form, 
      * e per questo motivo possono essere con Entity == null
      */
     EntityID: string;
+
     FieldGroup: string;
     ColSpanSizes: Array<ColSpanSizesEnum>;
     InListView: boolean;
+
+    // Proprità client
     FieldType: FieldTypeEnum;
     FieldValue: any;
     FormFormGroup: FormGroup;
 }
-export declare enum FieldTypeEnum {
+
+export enum FieldTypeEnum {
     'Campo di testo' = 1,
     'Area di testo' = 2,
     'Booleano' = 3,
@@ -40,17 +46,20 @@ export declare enum FieldTypeEnum {
     'Lookup' = 9,
     'Form di dettaglio' = 10
 }
-export declare enum ColSpanSizesEnum {
+
+export enum ColSpanSizesEnum {
     'col-sm-3' = 1,
     'col-sm-4' = 2,
     'col-sm-6' = 3,
     'col-sm-12' = 4,
+
     'col-md-3' = 5,
     'col-md-4' = 6,
     'col-md-6' = 7,
     'col-md-12' = 8,
+
     'col-lg-3' = 9,
     'col-lg-4' = 10,
     'col-lg-6' = 11,
-    'col-lg-12' = 12
+    'col-lg-12' = 12,
 }

package/{lib/models/baseObj.model.d.ts → src/lib/models/baseObj.model.ts}

@@ -1,9 +1,9 @@
 /**
- * Classe base che implementa la valorizzazione dell'ID (se null) con una nuova GUID
+ * Classe base che implementa la valorizzazione dell'ID (se null) con una nuova GUID 
  * in creazione dell'oggetto.
  * Per scelta architetturale, visto che non possiamo assumere la persistenza su DB relazionale o su NOSQL, ogni
  * oggetto della configurazione viene persistito, e gestito con ID di tipo stringa creato da una GUID.
  */
-export declare class BaseObj {
+export class BaseObj {
     ID: string;
-}
+}

package/src/lib/models/context.model.ts

@@ -0,0 +1,10 @@
+export class Context {
+    User: ContextUser = new ContextUser();
+    Organizzation: string;
+}
+
+export class ContextUser {
+    Name: string;
+    Surname: string;
+    Role: string;
+}