@eqproject/eqp-dynamic-module 0.0.7 → 0.0.8

package/src/lib/components/exported/eqp-dynamic-module-configurator/eqp-dynamic-module-configurator.component.ts

@@ -1,692 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { CellAlignmentEnum, ConfigColumn, EqpTableComponent, TypeColumn } from '@eqproject/eqp-table';
-import { BaseField, FieldTypeEnum } from '../../../models/baseField.model';
-import { Context } from '../../../models/context.model';
-import { EndPointConfiguration, EndPointData, EndPointDataParams, ParamTypeEnum } from '../../../models/endPointConfiguration.model';
-import { ActionOnRecord, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum } from '../../../models/form.model';
-import { ArrayValidators } from '../../../services/custom-form-validators.service';
-import { EqpDynamicModuleDialogService } from '../../../services/eqp-dynamic-module-dialog.service';
-import { UtilityHelperService } from '../../../services/utilityHelper.services';
-
-@Component({
-  selector: 'eqp-dynamic-module-configurator',
-  templateUrl: './eqp-dynamic-module-configurator.component.html',
-  styleUrls: ['./eqp-dynamic-module-configurator.component.scss']
-})
-export class EqpDynamicModuleConfiguratorComponent implements OnInit {
-
-  @Input() context: Context = new Context();
-  @Input() form: Form = new Form();
-  @Input() formID: string = null;
-  @Input() innerFormManagment: boolean = false;
-
-  /**
-   * Url del server da chiamare per recuerare, salvare o eliminare i record.
-   * Usato per creare la configurazione di default degli endpoint da chiamare.
-   */
-   @Input() baseServerUrl: string = null;
-
-   /**
-    * Token da usare negli endpoint da chiamare per recuperare o salvare i record.
-    * Usato solo se viene popolata la proprietà "baseServerUrl".
-    */
-   @Input() userToken: string = null;
-
-   /**
-    * Configurazione degli endpoint da chiamare per recuperare o salvare i dati.
-    * Può essere definita dall'utente oppure lasciata null, viene popolata con dei
-    * valori di default se viene valorizzata la proprietà "baseServerUrl" altrimenti
-    * viene lasciata null e non viene eseguita nessuna chiamata al server.
-    */
-   @Input() endPointConfiguration: EndPointConfiguration = null;
-
-  formFormGroup: FormGroup;
-  formCompleted = false;
-  previewForm: Form;
-  formFieldGroupName: string;
-
-  actionAutocompleteOptions: Array<{ label: string, value: string }>;
-
-  //#region Enumeratori usati nell'html
-  FormTypeEnum = FormTypeEnum;
-  FormScalarTypeEnum = FormScalarTypeEnum;
-  //#endregion
-
-  //#region Proprietà per creazione/modifica campo
-  fieldsColumns: Array<ConfigColumn>;
-  @ViewChild('fieldsTable', { static: false }) fieldsTable: EqpTableComponent;
-  selectedField: BaseField | any;
-  indexSelectedField: number;
-  actionOnRecordFormGroup: FormGroup;
-  dialogFieldRef: MatDialogRef<TemplateRef<any>>;
-  @ViewChild('dialogField', { static: true }) dialogField: TemplateRef<any>;
-  @ViewChild('fieldSectionColumnTemplate', { static: true }) fieldSectionColumnTemplate: TemplateRef<any>;
-  //#endregion
-
-  //#region Proprietà per creare/modificare una Form di dettaglio
-  selectedInnerForm: Form;
-  indexSelectedInnerForm: number;
-  dialogInnerFormRef: MatDialogRef<TemplateRef<any>>;
-  @ViewChild('dialogInnerForm', { static: true }) dialogInnerForm: TemplateRef<any>;
-  //#endregion
-
-  //#region Proprietà per creare/modificare una action sui record di una Form
-  actionsOnRecordColumns: Array<ConfigColumn>;
-  @ViewChild('actionsOnRecordTable', { static: false }) actionsOnRecordTable: EqpTableComponent;
-  selectedAction: ActionOnRecord;
-  indexSelectedAction: number;
-  dialogActionOnRecordRef: MatDialogRef<TemplateRef<any>>;
-  @ViewChild('dialogActionOnRecord', { static: true }) dialogActionOnRecord: TemplateRef<any>;
-  //#endregion
-
-  /**
-   * Evento emesso quando si salva una form e non è stato specificato un endpoint da chiamare.
-   */
-  @Output() saveFormEvent: EventEmitter<Form> = new EventEmitter<Form>();
-
-  /**
-   * Evento emesso DOPO aver eseguito una chiamata al server per il salvataggiodi una form all'endpoint specificato.
-   */
-  @Output() afterSaveFormEvent: EventEmitter<Form> = new EventEmitter<Form>();
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private dialog: MatDialog,
-    private utilityHelperService: UtilityHelperService
-  ) { }
-
-  ngOnInit(): void {
-    this.configureDefaultEndPoints();
-    this.getFormByID();
-    if (this.context) {
-      UtilityHelperService.SetContext(this.context);
-    }
-  }
-
-  /**
-   * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
-   * a cui si deve connettere e al token da passare per autenticarsi.
-   * Se la proprietà baseServerUrl è null e non sono stati configurati i vari endpoint allora
-   * non viene eseguita nessuna chiamata http per recuperare/salvare i dati.
-   */
-  configureDefaultEndPoints() {
-    if (!this.endPointConfiguration && this.baseServerUrl) {
-      this.endPointConfiguration = this.utilityHelperService.ConfigureDefaultEndPoints(this.baseServerUrl, this.userToken);
-      if (this.formID) {
-        this.endPointConfiguration.Forms.GetByIDEndPoint.Params = [{ ParamName: 'id', ParamValue: this.formID, ParamType: ParamTypeEnum['Query param'] }];
-      }
-    }
-  }
-
-  /**
-   * Metodo per recuperare tutti i record salvati per una particolare Form.
-   * La chiamata viene effettuata solo se è stato configurato l'endPoint da usare.
-   */
-  getFormByID() {
-    if (this.formID && this.endPointConfiguration && this.endPointConfiguration.Forms && this.endPointConfiguration.Forms.GetByIDEndPoint) {
-      this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, null, (res: Form) => {
-        this.setFormAndConfigure(res);
-      }, (err) => {
-        this.setFormAndConfigure(new Form());
-      });
-    } else {
-      this.setFormAndConfigure();
-    }
-  }
-
-  /**
-   * Metodo invocato al cambio del tipo di visualizzazione della form.
-   * Se l'utente sceglie una visualizzazione raggruppata il metodo aggiunge al FormGroup un nuovo
-   * controllo per l'array dei nomi delle sezioni da creare.
-   */
-  onChangeFormScalarType() {
-    if (this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
-      if (!this.formFormGroup.contains("FormFieldsGroups")) {
-        this.formFormGroup.removeControl("FormFieldsGroups");
-        this.formFormGroup.addControl("FormFieldsGroups", new FormControl(this.form.FormFieldsGroups, [Validators.required, ArrayValidators.minLenght(1)]));
-      }
-    } else {
-      this.form.FormFieldsGroups = null;
-      if (this.formFormGroup.contains("FormFieldsGroups"))
-        this.formFormGroup.removeControl("FormFieldsGroups");
-    }
-    this.formFormGroup.updateValueAndValidity();
-    this.configureColumns();
-  }
-
-  /**
-   * Evento invocato al keyup nell'input per inserire i nomi delle sezioni per la visualizzazione
-   * raggruppata della form. Quanto l'utente preme il tasto invio viene aggiunto il nuovo nome alle
-   * sezioni dispobili se non ne esiste una con lo stesso nome.
-   * @param event Evento che rappresenta il keyup sulla tastiera.
-   */
-  onFormFieldGroupNameKeyUp(event) {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      if (!this.form.FormFieldsGroups) {
-        this.form.FormFieldsGroups = new Array<FormFieldGroup>();
-      }
-      if (!this.form.FormFieldsGroups.find(n => n.Name == this.formFieldGroupName)) {
-        this.form.FormFieldsGroups.push({ Name: this.formFieldGroupName });
-      }
-      // Imposto il nuovo valore del FormControl per aggiornare lo stato della form.
-      this.formFormGroup.controls["FormFieldsGroups"].setValue(this.form.FormFieldsGroups);
-      this.formFieldGroupName = null;
-      this.setFormFieldGroupOrdinalPosition();
-    }
-  }
-
-  /**
-   * Metodo per rimuovere la sezione selezionata da quelle disponibili per la form.
-   * @param groupName Nome della sezione da eliminare.
-   */
-  onDeleteFormFieldGroupName(groupName: string) {
-    this.form.FormFieldsGroups.splice(this.form.FormFieldsGroups.findIndex(g => g.Name === groupName), 1);
-    // Imposto il nuovo valore del FormControl per aggiornare lo stato della form.
-    this.formFormGroup.controls["FormFieldsGroups"].setValue(this.form.FormFieldsGroups);
-    // Se esistono Field legati alla sezione che si vuole eliminare allora rompo il legame.
-    if (this.form.Fields.find(f => f.FieldGroup == groupName)) {
-      this.form.Fields.filter(f => f.FieldGroup == groupName).forEach(f => f.FieldGroup = null);
-    }
-    this.setFormFieldGroupOrdinalPosition();
-  }
-
-  /**
-   * Metodo chiamato quando si vuole aggiungere un nuovo campo o si vuole modificare uno esistente.
-   * Memorizza l'eventuale Field scelto one crea uno nuovo prima di aprire il dialog per modificarlo/aggiungerlo.
-   * @param field Oggetto BaseField da modificare. Se null ne viene creata una nuova istanza per l'aggiunta.
-   */
-  openFieldDialog(field: BaseField = null) {
-    if (field) {
-      this.indexSelectedField = this.form.Fields.indexOf(field);
-      this.selectedField = JSON.parse(JSON.stringify(field));
-    } else {
-      this.selectedField = new BaseField();
-      this.indexSelectedField = null;
-    }
-    this.dialogFieldRef = this.dialog.open(this.dialogField, {
-      disableClose: true,
-      hasBackdrop: true,
-      width: '75%'
-    });
-  }
-
-  /**
-   * Metodo che salva il campo appena creato o modificato.
-   * Prima del salvataggio controlla se esiste un altro campo con la stessa label, in questo
-   * case genere un errore (i campi devono avere nomi, e quindi label, univoche - i nomi vengono
-   * ricavati unendo le parole che formano la label tramite "_").
-   * @param field Campo da salvare
-   */
-  onSaveField(field: BaseField) {
-    if (field) {
-      if (
-        this.form.Fields
-        && this.form.Fields.find(
-          (f, i) => f.Label === field.Label
-            && (this.indexSelectedField == null ? true : this.indexSelectedField !== i)
-        )
-      ) {
-        EqpDynamicModuleDialogService.Warning('Impossibile inserire due campi con la stessa label.');
-        throw new Error('Impossibile inserire due campi con la stessa label.');
-      }
-
-      if (this.indexSelectedField != null && this.indexSelectedField >= 0) {
-        this.form.Fields[this.indexSelectedField] = field;
-      } else {
-        if (!this.form.Fields) {
-          this.form.Fields = new Array<BaseField>();
-        }
-        this.form.Fields.push(field);
-      }
-    }
-    this.closeFieldDialog();
-    this.setFieldOrdinalPosition();
-    this.reloadFieldsTable();
-  }
-
-  /**
-   * Metodo che controlla se lo step per l'aggiunta dei campi nella form è concluso.
-   * @returns Se TRUE lo step viene considerato completato ed è possbile passare al successivo.
-   */
-  isFieldStepCompleted(): boolean {
-    if (!this.form.Fields) {
-      return false;
-    }
-    if (this.form.FormScalarType != FormScalarTypeEnum.Semplice && this.form.Fields.find(f => !f.FieldGroup)) {
-      return false;
-    }
-    return this.form.Fields.length > 0;
-  }
-
-  /**
-   * Metodo per aprire il dialog di creazione/modifica delle form di dettaglio.
-   * Se il parametro passato è null sono in aggiunta altrimenti sono in modifica.
-   * @param innenrForm Form di dettaglio da modificare (se null allora vado in add).
-   */
-  openInnerFormDialog(innenrForm: Form = null) {
-    if (innenrForm) {
-      this.indexSelectedInnerForm = this.form.InnerForms.indexOf(innenrForm);
-      this.selectedInnerForm = JSON.parse(JSON.stringify(innenrForm));
-      this.selectedInnerForm.OldName = innenrForm.Name;
-      this.indexSelectedField = this.form.Fields.findIndex(f => f.Label === innenrForm.Name);
-    } else {
-      this.selectedInnerForm = new Form();
-      this.indexSelectedInnerForm = null;
-      this.indexSelectedField = null;
-    }
-    this.dialogInnerFormRef = this.dialog.open(this.dialogInnerForm, {
-      disableClose: true,
-      hasBackdrop: true,
-      width: '85%'
-    });
-  }
-
-  /**
-   * Metodo scatenato al salvataggio di una form di dettaglio.
-   * @param event Form creata/modificata dall'utente. Se è null allora l'utente ha abbandonato la configurazione.
-   */
-  onSaveOrExitInnerForm(event: Form) {
-    if (event != null) {
-      if (this.form.Name === event.Name ||
-        (
-          this.form.InnerForms
-          && this.form.InnerForms.find(
-            (a, i) => a.Name === event.Name
-              && (this.indexSelectedInnerForm == null ? true : this.indexSelectedInnerForm !== i)
-          )
-        ) ||
-        (
-          this.form.Fields
-          && this.indexSelectedInnerForm == null
-          && this.form.Fields.find(
-            (f, i) => f.Label === event.Name
-              && (this.indexSelectedField == null ? true : this.indexSelectedField !== i)
-          )
-        )
-      ) {
-        EqpDynamicModuleDialogService.Warning('Impossibile inserire due form di dettaglio con lo stesso nome.');
-        throw new Error('Impossibile inserire due form di dettaglio con lo stesso nome.');
-      }
-
-      const innerFormField: BaseField = new BaseField();
-      innerFormField.Name = event.Name.split(" ").join("_");
-      innerFormField.Label = event.Name;
-      innerFormField.FieldType = FieldTypeEnum['Form di dettaglio'];
-      innerFormField.FieldGroup = this.indexSelectedField != null ? this.form.Fields[this.indexSelectedField].FieldGroup : null;
-
-      if (this.indexSelectedInnerForm != null && this.indexSelectedInnerForm >= 0) {
-        this.form.InnerForms[this.indexSelectedInnerForm] = event;
-        this.form.Fields[this.indexSelectedField] = innerFormField;
-      } else {
-        if (!this.form.InnerForms) {
-          this.form.InnerForms = new Array<Form>();
-        }
-        this.form.InnerForms.push(event);
-        this.form.Fields.push(innerFormField);
-      }
-      this.reloadFieldsTable();
-    }
-    this.dialogInnerFormRef.close();
-  }
-
-  /**
-   * Metodo per aprire il dialog di creazione/modifica delle action.
-   * Se il parametro passato è null sono in aggiunta altrimenti sono in modifica.
-   * @param action ActionOnRecord da modificare (se null allora vado in add).
-   */
-  openActionOnRecordDialog(action: ActionOnRecord = null) {
-    if (action) {
-      this.indexSelectedAction = this.form.ActionsOnRecord.indexOf(action);
-      this.selectedAction = JSON.parse(JSON.stringify(action));
-    } else {
-      this.selectedAction = new ActionOnRecord();
-      this.indexSelectedAction = null;
-    }
-    this.createActionOnRecordForm();
-    this.dialogActionOnRecordRef = this.dialog.open(this.dialogActionOnRecord, {
-      disableClose: true,
-      hasBackdrop: true,
-      width: '75%'
-    });
-  }
-
-  /**
-   * Metodo per impostare i valori da suggerire nell'autocomplete del campo Formula.
-   * Viene scatenato al focus (in questo caso viene passato il parametro a null per differenziarlo
-   * dall'evento di click sulla tastiera) e al keyup sull'input (il parametro è diverso da null).
-   * @param keyboardEvent Evento scatenato al keyup sulla tastiera. Se null allora il metodo è stato invocato dal focus sull'input.
-   * @summary Aggiorna l'elenco dei suggerimenti per l'autocomplete se l'utente esegue il focus sull'input
-   * oppure al keyup sulla tastiera di un tasto diverso dalle frecce.
-   */
-  setActionAutocompleteOptions(keyboardEvent: KeyboardEvent) {
-    // Creo l'array per l'autocomplete solo se sto facendo il focus sull'input o se sto premendo un tasto
-    // sulla tastiera diverso dalle frecce (in quest'ultimo caso, se non viene eseguito il filtro sull'evento,
-    // non si può selezionare un suggerimento dell'autocomplete perchè al click verrebbe ricaricato l'array e
-    // si prederebbe la selezione appena fatta).
-    if (!keyboardEvent || !keyboardEvent.code.includes("Arrow")) {
-      this.actionAutocompleteOptions = UtilityHelperService.GetAutocompleteOptions(this.form.Fields, this.selectedAction.Action);
-    }
-  }
-
-  /**
-   * Metodo per salvare l'azione creata/modificate.
-   */
-  saveActionOnRecord() {
-    if (
-      this.form.ActionsOnRecord
-      && this.form.ActionsOnRecord.find(
-        (a, i) => a.Name === this.selectedAction.Name
-          && (this.indexSelectedAction == null ? true : this.indexSelectedAction !== i)
-      )
-    ) {
-      EqpDynamicModuleDialogService.Warning('Impossibile inserire due action con lo stesso nome.');
-      throw new Error('Impossibile inserire due action con lo stesso nome.');
-    }
-
-    if (this.indexSelectedAction != null && this.indexSelectedAction >= 0) {
-      this.form.ActionsOnRecord[this.indexSelectedAction] = this.selectedAction;
-    } else {
-      if (!this.form.ActionsOnRecord) {
-        this.form.ActionsOnRecord = new Array<ActionOnRecord>();
-      }
-      this.form.ActionsOnRecord.push(this.selectedAction);
-    }
-    this.closeDialogActionOnRecord();
-    this.setActionOrdinalPosition();
-    this.reloadActionsOnRecordTable();
-  }
-
-  /**
-   * Metodo per chiudere il dialog di gestione delle action.
-   */
-  closeDialogActionOnRecord() {
-    this.dialogActionOnRecordRef.close();
-  }
-
-  /**
-   * Metodo per segnare come conclusa la creazione della form e per crearne una copia
-   * da visalizzare come anteprima.
-   * @param completed Se TRUE segna la form come conclusa e ne crea una copia da visualizzare
-   */
-  setFormStatus(completed: boolean) {
-    if (completed) {
-      this.formCompleted = true;
-      this.previewForm = JSON.parse(JSON.stringify(this.form));
-
-      // Per visualizzare correttamente l'oanteprima della form appena creata
-      // bisogna valorizzare la proprietà Name dei campi della form e delle InnerForms.
-      this.previewForm.Fields.forEach(field => { field.Name = field.Label.split(' ').join('_'); });
-      if (this.previewForm.InnerForms && this.previewForm.InnerForms.length > 0) {
-        this.previewForm.InnerForms.forEach(form => {
-          form.Fields.forEach(field => { field.Name = field.Label.split(' ').join('_'); });
-        });
-      }
-    } else {
-      this.formCompleted = false;
-      this.previewForm = null;
-    }
-  }
-
-  /**
-   * Metodo per salvare la form creata alla fine del wizard.
-   * Se è stato configurato un endPoint per il salvataggio viene effettuata una chiamata al server passando l'oggeto da salvare
-   * nel body della chiamata, altrimenti scatena l'evento "saveFormEvent".
-   * NOTA: Per comunicare correttamente con la parte server del modulo dinamico bisogna modificare l'array dei Fields.
-   * Al posto di passare un array di BaseField bisogna passare un array di oggetti del tipo { FieldType: FieldTypeEnum, Value: BaseField }.
-   */
-  saveForm() {
-    if (this.endPointConfiguration != null && this.endPointConfiguration.Forms.SaveEndPoint) {
-
-      // Copio la form da salvare per riwrappare i Fields in oggetti del tipo { FieldType: FieldTypeEnum, Value: BaseField }.
-      // Necessario per far funzionare correttamente il FieldConverter del server.
-      const formToSave = JSON.parse(JSON.stringify(this.form));
-
-      /*formToSave.Fields = [];
-      this.form.Fields.forEach(field => {
-        formToSave.Fields.push({
-          FieldType: field.FieldType,
-          Value: JSON.parse(JSON.stringify(field))
-        });
-      });*/
-
-      formToSave.Fields = [];
-      this.form.Fields.forEach(field => {
-
-        let fld = UtilityHelperService.GetFieldType(field);
-
-        formToSave.Fields.push(fld);
-      });
-
-      const dynamicModuleParams = [
-        { ParamName: "Form", ParamValue: formToSave, ParamType: ParamTypeEnum['In Body'] }
-      ];
-
-      this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.SaveEndPoint, dynamicModuleParams, (res) => {
-        EqpDynamicModuleDialogService.Success("Form salvata con successo!");
-        this.afterSaveFormEvent.emit(this.form);
-      });
-    } else {
-      this.saveFormEvent.emit(this.form);
-    }
-  }
-
-  //#region FUNZIONI PRIVATE
-
-  /**
-   * Metodo per impostare la form e configurare colonne/FormGourp.
-   * @param form Form da utilizzare.
-   */
-  private setFormAndConfigure(form: Form = null) {
-    if (form != null) {
-      this.form = form;
-    }
-    this.configureColumns();
-    this.createFormForm();
-  }
-
-  /**
-   * Configura le colonne per le tabelle necessarie alla creazione della form:
-   *  - per la visualizzazione dei campi inseriti
-   *  - per le form di dettaglio create
-   *  - per le azioni configurate sui record della form
-   */
-  private configureColumns() {
-    this.fieldsColumns = [
-      {
-        key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
-        actions: [
-          { name: 'Modifica', icon: 'edit', fn: (element, index, col) => this.editField(element) },
-          { name: 'Elimina', icon: 'delete', fn: (element, index, col) => this.deleteElement(element, "Fields") },
-          {
-            name: 'Sposta su', icon: 'arrow_upward',
-            fn: (element, index, col) => this.moveElement(element, true, "Fields"),
-            disabled: (element) => this.form.Fields.indexOf(element) === 0
-          },
-          {
-            name: 'Sposta giù', icon: 'arrow_downward',
-            fn: (element, index, col) => this.moveElement(element, false, "Fields"),
-            disabled: (element) => this.form.Fields.indexOf(element) >= (this.form.Fields.length - 1)
-          },
-        ]
-      },
-      { key: 'FieldType', display: 'Tipologia', type: TypeColumn.Enum, enumModel: FieldTypeEnum },
-      { key: 'Label', display: 'Label' },
-      { key: 'Description', display: 'Descrizione' },
-      {
-        key: 'Required', display: 'Obbligatorio',
-        value: (element) => !!element.Required,
-        type: TypeColumn.Boolean,
-        booleanValues: {
-          true: '<i class="fa fa-check success-color"></i>',
-          false: '<i class="fa fa-close error-color"></i>'
-        },
-        styles: { flex: '0 0 7%', cellAlignment: CellAlignmentEnum.CENTER }
-      },
-    ];
-
-    if (this.form.FormScalarType && this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
-      this.fieldsColumns.splice(
-        this.fieldsColumns.findIndex(c => c.key == 'Description'), 0,
-        { key: 'FieldGroup', display: 'Sezione', type: TypeColumn.ExternalTemplate, externalTemplate: this.fieldSectionColumnTemplate }
-      );
-    }
-
-    this.actionsOnRecordColumns = [
-      {
-        key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
-        actions: [
-          { name: 'Modifica', icon: 'edit', fn: (element, index, col) => this.openActionOnRecordDialog(element) },
-          { name: 'Elimina', icon: 'delete', fn: (element, index, col) => this.deleteElement(element, "ActionsOnRecord") },
-          {
-            name: 'Sposta su', icon: 'arrow_upward',
-            fn: (element, index, col) => this.moveElement(element, true, "ActionsOnRecord"),
-            disabled: (element) => this.form.ActionsOnRecord.indexOf(element) === 0
-          },
-          {
-            name: 'Sposta giù', icon: 'arrow_downward',
-            fn: (element, index, col) => this.moveElement(element, false, "ActionsOnRecord"),
-            disabled: (element) => this.form.ActionsOnRecord.indexOf(element) >= (this.form.ActionsOnRecord.length - 1)
-          },
-        ]
-      },
-      { key: 'Icon', display: 'Icona', styles: { flex: ' 0 0 15%' } },
-      { key: 'Name', display: 'Nome', styles: { flex: ' 0 0 20%' } },
-      { key: 'Action', display: 'Azione' },
-    ];
-  }
-
-  /**
-   * Crea il FormGroup per l'oggetto Form
-   */
-  private createFormForm() {
-    this.formFormGroup = this.formBuilder.group({
-      Name: [this.form.Name, Validators.required],
-      FormScalarType: [this.form.FormScalarType, Validators.required],
-    });
-    this.onChangeFormScalarType();
-  }
-
-  /**
-   * Crea il FormGroup epr l'aggiunta o la modifica di una action sui record della Form.
-   */
-  private createActionOnRecordForm() {
-    this.actionOnRecordFormGroup = this.formBuilder.group({
-      Name: [this.selectedAction.Name, Validators.required],
-      Icon: [this.selectedAction.Icon, Validators.required],
-      Action: [this.selectedAction.Action, Validators.required],
-    });
-  }
-
-  /**
-   * Chiude il dialog per aggiungere/modificare un Field senza salvare
-   */
-  private closeFieldDialog() {
-    this.dialogFieldRef.close();
-  }
-
-  /**
-   * Metodo per gestire l'apertura del dialog per la modifica di un Field.
-   * Se il field è di tipo "Form di dettaglio" apre il dialog per la modifica di una
-   * InnerForm altrimenti apre quello per la modifica di un Field.
-   * @param field Campo da modificare
-   */
-  private editField(field: BaseField) {
-    if (field.FieldType != FieldTypeEnum['Form di dettaglio']) {
-      this.openFieldDialog(field);
-    } else {
-      this.openInnerFormDialog(this.form.InnerForms.find(f => f.Name == field.Label));
-    }
-  }
-
-  /**
-   * Metodo per rimuovere un Field all'interno di una Form.
-   * Richiede conferma all'utente prima di rimuoverlo.
-   * @param field BaseField da rimuovere
-   */
-  private deleteElement(element: BaseField | ActionOnRecord | Form, propertyName: string) {
-    EqpDynamicModuleDialogService.Confirm('Eliminare l\'elemento selezionato?', () => {
-      this.form[propertyName].splice(this.form[propertyName].indexOf(element), 1);
-      if (propertyName === "Fields") {
-        this.setFieldOrdinalPosition();
-        this.reloadFieldsTable();
-      } else if (propertyName === "ActionsOnRecord") {
-        this.setActionOrdinalPosition();
-        this.reloadActionsOnRecordTable();
-      }
-    }, false, 'Richiesta conferma');
-  }
-
-  /**
-   * Metodo per spostare un campo all'interno della form.
-   * @param field Oggetto di tipo BaseField da spostare.
-   * @param moveUp Se TRUE allora sposta verso l'alto il campo (abbassa l'indice) altrimenti il contrario.
-   */
-  private moveElement(element: BaseField | ActionOnRecord, moveUp: boolean, propertyName: string) {
-    const startingIndex = this.form[propertyName].indexOf(element);
-    const endingIndex = startingIndex + (moveUp ? -1 : 1);
-
-    this.form[propertyName].splice(startingIndex, 1);
-    this.form[propertyName].splice(endingIndex, 0, element);
-
-    if (propertyName === "Fields") {
-      this.setFieldOrdinalPosition();
-      this.reloadFieldsTable();
-    } else if (propertyName === "ActionsOnRecord") {
-      this.setActionOrdinalPosition();
-      this.reloadActionsOnRecordTable();
-    }
-  }
-
-  /**
-   * Imposta l'ordinamento delle sezioni che compongono la form.
-   */
-  private setFormFieldGroupOrdinalPosition() {
-    this.form.FormFieldsGroups.forEach((g, i) => g.OrdinalPosition = i);
-  }
-
-  /**
-   * Imposta l'ordinamento dei campi all'interno della form in base all'ordine che l'utente
-   * ha definito nella tabella in cui sono mostrati
-   */
-  private setFieldOrdinalPosition() {
-    if (this.form.Fields) {
-      this.form.Fields.forEach(field => {
-        field.OrdinalPosition = this.form.Fields.indexOf(field);
-      });
-    }
-  }
-
-  /**
-   * Metodo per ricaricare i dati della tabella dei campi aggiunti in una form
-   */
-  private reloadFieldsTable() {
-    if (this.fieldsTable) {
-      this.fieldsTable.reloadDatatable();
-    }
-  }
-
-  /**
-   * Imposta l'ordinamento dei campi all'interno della form in base all'ordine che l'utente
-   * ha definito nella tabella in cui sono mostrati
-   */
-  private setActionOrdinalPosition() {
-    if (this.form.ActionsOnRecord) {
-      this.form.ActionsOnRecord.forEach(action => {
-        action.OrdinalPosition = this.form.ActionsOnRecord.indexOf(action);
-      });
-    }
-  }
-
-  /**
-   * Metodo per ricaricare i dati della tabella delle azioni aggiuntive sui record della Form.
-   */
-  private reloadActionsOnRecordTable() {
-    if (this.actionsOnRecordTable) {
-      this.actionsOnRecordTable.reloadDatatable();
-    }
-  }
-
-  //#endregion
-}