@eqproject/eqp-dynamic-module 0.0.6 → 0.0.7

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

@@ -0,0 +1,692 @@
+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
+}