@eqproject/eqp-dynamic-module 0.0.5 → 0.0.7

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

@@ -0,0 +1,599 @@
+import { ChangeDetectorRef, 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 { AttachmentType, EqpAttachmentsComponent, IAttachmentDTO } from '@eqproject/eqp-attachments';
+import { EnumHelper } from '@eqproject/eqp-select';
+import { CellAlignmentEnum, ConfigColumn, EqpTableComponent, TypeColumn } from '@eqproject/eqp-table';
+import { BaseField, ColSpanSizesEnum, FieldTypeEnum } from '../../../models/baseField.model';
+import { AttachmentField, AvailableFileExtensions, AvailableImageExtensions } from '../../../models/fields/attachmentField.model';
+import { BooleanField, BoolPresentantioEnum } from '../../../models/fields/booleanField.model';
+import { DateField, DateTimeTypeEnum } from '../../../models/fields/dateField.model';
+import { ImageField } from '../../../models/fields/imageField.model';
+import { ButtonImage, ListPresentationEnum, ListValueField } from '../../../models/fields/listValueField.model';
+import { LookupField } from '../../../models/fields/lookupField.model';
+import { NumericField } from '../../../models/fields/numericField.model';
+import { TextareaField } from '../../../models/fields/testareaField.model';
+import { TextMaskEnum, TextField } from '../../../models/fields/textField.model';
+import { FormFieldGroup } 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-add-form-field',
+  templateUrl: './add-form-field.component.html',
+  styleUrls: ['./add-form-field.component.scss']
+})
+export class AddFormFieldComponent implements OnInit {
+
+  @Input() field: BaseField | any;
+  @Input() indexField: number;
+  @Input() formFieldsGroups: Array<FormFieldGroup>;
+  /** Elenco dei Field creati nella form, usati per popolare l'autocomplete della proprietà Formula. */
+  @Input() availableFields: Array<BaseField>;
+  @Input() fieldTypesToExclude: Array<FieldTypeEnum> = [FieldTypeEnum['Form di dettaglio']];
+
+  fieldFormGroup: FormGroup;
+  keyValueObject: { key: string, value: string } = { key: '', value: '' };
+  availableColSpanSizes: Array<ColSpanSizesEnum> = [];
+  formulaAutocompleteOptions: Array<{ label: string, value: string }>;
+  AvailableFileExtensions = AvailableFileExtensions;
+  AvailableImageExtensions = AvailableImageExtensions;
+
+  @Output() saveFieldEvent: EventEmitter<BaseField | any> = new EventEmitter<BaseField | any>();
+
+  //#region Template dei vari pezzi di form per la creazione di un campo(in base al tipo scelto).
+  fieldTypeFormTemplate: TemplateRef<any>;
+  @ViewChild('textFieldFormTemplate', { static: true }) textFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('textareaFieldFormTemplate', { static: true }) textareaFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('booleadFieldFormTemplate', { static: true }) booleadFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('dateFieldFormTemplate', { static: true }) dateFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('numericFieldFormTemplate', { static: true }) numericFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('attachmentFieldFormTemplate', { static: true }) attachmentFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('imageFieldFormTemplate', { static: true }) imageFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('listValueFieldFormTemplate', { static: true }) listValueFieldFormTemplate: TemplateRef<any>;
+  @ViewChild('lookupFieldFormTemplate', { static: true }) lookupFieldFormTemplate: TemplateRef<any>;
+  //#endregion
+
+  //#region Proprietà per gestire i metadata nei campi ti dipo Allegato o Immagine
+  metadataColumns: Array<ConfigColumn>;
+  @ViewChild('metadataFieldsTable', { static: false }) metadataFieldsTable: EqpTableComponent;
+  selectedMetadata: BaseField;
+  indexSelectedMetadata: number;
+  dialogMetadataRef: MatDialogRef<TemplateRef<any>>;
+  @ViewChild('dialogMetadata', { static: true }) dialogMetadata: TemplateRef<any>;
+  //#endregion
+
+  //#region Proprietà per gestire le immagini nei capi di tipo elenco generico
+  @ViewChild('buttonImagesKeyValueInputColumn', { static: true }) buttonImagesKeyValueInputColumn: TemplateRef<any>;
+  //#endregion
+
+  //#region Enumeratori usati nell'html
+  FieldTypeEnum = FieldTypeEnum;
+  BoolPresentantioEnum = BoolPresentantioEnum;
+  DateTimeTypeEnum = DateTimeTypeEnum;
+  ListPresentationEnum = ListPresentationEnum;
+  TextMaskEnum = TextMaskEnum;
+  AttachmentType = AttachmentType;
+  //#endregion
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private enumHelper: EnumHelper,
+    private dialog: MatDialog,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    if (!this.fieldTypesToExclude.includes(FieldTypeEnum['Form di dettaglio'])) {
+      this.fieldTypesToExclude.push(FieldTypeEnum['Form di dettaglio']);
+    }
+
+    this.onFieldTypeChange(false);
+    this.availableFields = this.availableFields ? this.availableFields.filter(f => f != this.field) : [];
+    this.configureColumns();
+  }
+
+  /**
+   * 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.
+   */
+  setFormulaAutocompleteOptions(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.formulaAutocompleteOptions = UtilityHelperService.GetAutocompleteOptions(this.availableFields, this.field.Formula);
+    }
+  }
+
+  /**
+   * Crea il FormGroup per l'aggiunta di un nuovo campo all'interno della form.
+   * Metodo richiamato ogni volta che cambia il tipo del campo scelto o viene aggiunto/modificato un Field
+   */
+  createFieldForm() {
+    this.fieldFormGroup = this.formBuilder.group({
+      Label: [this.field.Label, Validators.required],
+      Description: [this.field.Description],
+      Required: [this.field.Required],
+      FieldType: [this.field.FieldType, Validators.required],
+      Formula: [this.field.Formula],
+      ColSpanSizes: [this.field.ColSpanSizes],
+      InListView: [this.field.InListView],
+    });
+
+    if (this.formFieldsGroups) {
+      this.fieldFormGroup.addControl('FieldGroup', new FormControl(this.field.FieldGroup, Validators.required));
+    }
+  }
+
+  /**
+   * Metodo chiamato quando cambia il FieldType del BaseField che si sta aggiungendo/modificando.
+   * Ricrea l'oggetto field popolando solo le proprietà del BaseField inserite dall'utente
+   * (quelle comuni a tutte le tipologie di campo), ricrea la form e, in base al FieldType scelto,
+   * aggiunge alla form i FormControl necessari e seleziona il template corretto da usare.
+   * @param restoreField Se TRUE ripristina i valori base (ereditati dal modello BaseField) del campo aggiunto/modificato
+   */
+  onFieldTypeChange(restoreField: boolean = true) {
+    if (restoreField)
+      this.restoreBaseFieldProperties();
+    this.createFieldForm();
+    this.onColSpanSizeSelect();
+    this.fieldTypeFormTemplate = null;
+    switch (this.field.FieldType) {
+      case FieldTypeEnum['Campo di testo']:
+        this.fieldFormGroup.addControl('TextMask', new FormControl((this.field as TextField).TextMask));
+        this.fieldFormGroup.addControl('MaxLenght', new FormControl((this.field as TextField).MaxLenght));
+        this.fieldFormGroup.addControl('MinLenght', new FormControl((this.field as TextField).MinLenght));
+        this.fieldTypeFormTemplate = this.textFieldFormTemplate;
+        break;
+      case FieldTypeEnum['Area di testo']:
+        this.fieldFormGroup.addControl('Rows', new FormControl((this.field as TextareaField).Rows));
+        this.fieldFormGroup.addControl('MaxLenght', new FormControl((this.field as TextareaField).MaxLenght));
+        this.fieldFormGroup.addControl('MinLenght', new FormControl((this.field as TextareaField).MinLenght));
+        this.fieldTypeFormTemplate = this.textareaFieldFormTemplate;
+        break;
+      case FieldTypeEnum.Booleano:
+        this.fieldFormGroup.addControl('IsTristate', new FormControl((this.field as BooleanField).IsTristate));
+        this.fieldFormGroup.addControl(
+          'PresetationType',
+          new FormControl((this.field as BooleanField).PresetationType, Validators.required)
+        );
+        this.fieldTypeFormTemplate = this.booleadFieldFormTemplate;
+        break;
+      case FieldTypeEnum['Data e/o ora']:
+        this.fieldFormGroup.addControl('IsOnlyDate', new FormControl((this.field as DateField).IsOnlyDate, Validators.required));
+        this.fieldFormGroup.addControl('MinDate', new FormControl((this.field as DateField).MinDate));
+        this.fieldFormGroup.addControl('MaxDate', new FormControl((this.field as DateField).MaxDate));
+        this.fieldFormGroup.addControl('DateFormat', new FormControl((this.field as DateField).DateFormat));
+        this.fieldTypeFormTemplate = this.dateFieldFormTemplate;
+        break;
+      case FieldTypeEnum['Campo numerico']:
+        this.fieldFormGroup.addControl('IsInteger', new FormControl((this.field as NumericField).IsInteger));
+        this.fieldFormGroup.addControl('MinValue', new FormControl((this.field as NumericField).MinValue));
+        this.fieldFormGroup.addControl('MaxValue', new FormControl((this.field as NumericField).MaxValue));
+        this.fieldFormGroup.addControl('DecimalSeparator', new FormControl((this.field as NumericField).DecimalSeparator));
+        this.fieldFormGroup.addControl('DecimalPrecision', new FormControl((this.field as NumericField).DecimalPrecision));
+        this.fieldFormGroup.addControl('ThousandsSeparator', new FormControl((this.field as NumericField).ThousandsSeparator));
+        this.fieldFormGroup.addControl('CurrencySymbol', new FormControl((this.field as NumericField).CurrencySymbol));
+        this.fieldTypeFormTemplate = this.numericFieldFormTemplate;
+        break;
+      case FieldTypeEnum.Allegato:
+        this.fieldFormGroup.addControl("AllowedExtensions", new FormControl((this.field as AttachmentField).AllowedExtensions));
+        this.fieldFormGroup.addControl('IsMultiAttach', new FormControl((this.field as AttachmentField).IsMultiAttach));
+        this.fieldTypeFormTemplate = this.attachmentFieldFormTemplate;
+        break;
+      case FieldTypeEnum.Immagine:
+        (this.field as ImageField).AttachDefinition = new AttachmentField();
+        this.fieldFormGroup.addControl('EnableDrawing', new FormControl((this.field as ImageField).EnableDrawing));
+        this.fieldFormGroup.addControl('ImageIsContextualAttachment', new FormControl((this.field as ImageField).ImageIsContextualAttachment));
+        // Imposto i FormControl variabili.
+        this.onImageIsContextualAttachmentChange();
+        this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
+        break;
+      case FieldTypeEnum['Elenco generico']:
+        this.fieldFormGroup.addControl('IsMultiChoiche', new FormControl((this.field as ListValueField).IsMultiChoiche));
+        this.fieldFormGroup.addControl(
+          'PresentationMode',
+          new FormControl((this.field as ListValueField).PresentationMode, Validators.required)
+        );
+        this.fieldTypeFormTemplate = this.listValueFieldFormTemplate;
+        break;
+      case FieldTypeEnum.Lookup:
+        this.fieldFormGroup.addControl(
+          'EntitySourceName',
+          new FormControl((this.field as LookupField).EntitySourceName, Validators.required)
+        );
+        this.fieldFormGroup.addControl('UseAsGetOrDiscard', new FormControl((this.field as LookupField).UseAsGetOrDiscard));
+        this.fieldTypeFormTemplate = this.lookupFieldFormTemplate;
+        break;
+    }
+    if ([FieldTypeEnum.Allegato, FieldTypeEnum.Immagine, FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
+      this.field.Formula = null;
+      this.fieldFormGroup.controls["Formula"].disable();
+      this.fieldFormGroup.controls["InListView"].disable();
+    } else {
+      this.fieldFormGroup.controls["Formula"].enable();
+      this.fieldFormGroup.controls["InListView"].enable();
+    }
+  }
+
+  /**
+   * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+   * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+   * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment, 
+   * altrimenti il contrario.
+   */
+  onImageIsContextualAttachmentChange() {
+    (this.field as ImageField).ImgName = null;
+    (this.field as ImageField).AttachDefinition.AllowedExtensions = [];
+    (this.field as ImageField).AttachDefinition.IsMultiAttach = false;
+    (this.field as ImageField).ContextualAttachment = null;
+
+    if ((this.field as ImageField).ImageIsContextualAttachment) {
+      this.fieldFormGroup.removeControl("IsMultiAttach");
+      this.fieldFormGroup.removeControl("AllowedExtensions");
+      this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
+      this.fieldFormGroup.addControl('ContextualAttachment', new FormControl((this.field as ImageField).ContextualAttachment, Validators.required));
+    } else {
+      this.fieldFormGroup.removeControl("ImgName");
+      this.fieldFormGroup.removeControl("ContextualAttachment");
+      this.fieldFormGroup.addControl('IsMultiAttach', new FormControl((this.field as ImageField).AttachDefinition.IsMultiAttach));
+      this.fieldFormGroup.addControl("AllowedExtensions", new FormControl((this.field as ImageField).AttachDefinition.AllowedExtensions));
+    }
+  }
+
+  /**
+   * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+   * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+   * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+   */
+  catchContextualAttachmentChange(event: Array<IAttachmentDTO>) {
+    if (event && event.length > 0) {
+      (this.field as ImageField).ContextualAttachment = event[0];
+    } else {
+      (this.field as ImageField).ContextualAttachment = null;
+    }
+    this.fieldFormGroup.controls['ContextualAttachment'].setValue((this.field as ImageField).ContextualAttachment);
+  }
+
+  /**
+   * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
+   * da usare nella visualizzazione del campo. Questa funzione manipola la sorgente dati per
+   * la eqp-select in modo da escludere i valori dell'enumeratore che fanno riferimento ad
+   * una larghezza di schermo già selezionata. Esempio: per gli schermi piccoli (sm) l'utente
+   * seleziona la classe "col-sm-6", al change del valore questo metodo rimuove dalla select
+   * tutti gli altri valori per la grandezza di schermo selezionata.
+   */
+  onColSpanSizeSelect() {
+    // Recupero l'array degli oggetti chiave-valore che rappreseta l'enumeratore
+    let colSizeClassEnumArray = this.enumHelper.getEnumArray(ColSpanSizesEnum, false, null);
+    // Costruisco l'array delle classi selezionate dall'utente in formato stringa
+    let selectedDimensions: Array<string> = this.field.ColSpanSizes ? this.field.ColSpanSizes.map(col => ColSpanSizesEnum[col]) : [];
+    // Filtro i valori ottenuti dall'enumeratore per escludere tutti i valori per le
+    // grandezze di schermo già selezionatead esclusione dei valori selezionati.
+    this.availableColSpanSizes = colSizeClassEnumArray.filter((value: { key: number, value: string }) =>
+      !selectedDimensions.find(col => value.value.includes(col.substring(4, 6)) && value.value != col)
+    );
+  }
+
+  /**
+   * Metodo invocato al cambio del tipo di visualizzazione scelta per i campi di tipo elenco generico.
+   * Se viene scelta la visualizzazione ad immagini svuota la lista delle coppie chiave-valore inserite
+   * in precedenza, altrimenti svuota la lista delle immagini caricate.
+   */
+  onPresentationModeChange() {
+    if ((this.field as ListValueField).PresentationMode === ListPresentationEnum.Immagini) {
+      (this.field as ListValueField).ValuePairs = null;
+    } else {
+      (this.field as ListValueField).ButtonImageList = null;
+    }
+  }
+
+  /**
+   * Metodo invocato quando viene caricato il componente eqp-attachments per caricare le immagini da usare 
+   * nella visualizzazione ad immagini dei campi di tipo "Elenco generico". Aggiunge due colonne a quelle
+   * configurate nel componente in cui l'utente può indicare chiave e valore della scelta.
+   * @param component Istanza del componente eqp-attachments in cui effettuare la modifica.
+   */
+  configureButtonImagesColumns(component: EqpAttachmentsComponent) {
+    component.attachmentsColumns.splice(
+      component.attachmentsColumns.length - 1, 0,
+      { key: "ButtonKey", display: "Label", type: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn }
+    );
+
+    component.attachmentsColumns.splice(
+      component.attachmentsColumns.length - 1, 0,
+      { key: "ButtonValue", display: "Valore", type: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn }
+    );
+
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Metodo invocato al salvataggio degli allegati quando viene configurato un campo di tipo "Elenco generico"
+   * con il tipo di visualizzazione ad immagini. Intercetta l'elenco aggiornato delle immagini caricate e lo
+   * memorizza nell'oggetto field corrente.
+   * @param attachments Array aggiornato degli allegati caricati.
+   */
+  catchButtonImagesChange(attachments: Array<IAttachmentDTO>) {
+    (this.field as ListValueField).ButtonImageList = (attachments as Array<ButtonImage>);
+  }
+
+  /**
+   * Metodo chiamato al keyup degli input testuali che prevedono l'aggiunta del valore inserito in un array.
+   * Se l'utente preme il tasto invio, in base al tipo di campo che sta inserendo/modificando, questo metodo
+   * aggiunge il valore inserito dall'utente nella lista di stringhe corretta (in input viene passato il nome
+   * della proprietà in cui inserire la stringa).
+   * @param event Evento che rappresenta il keyup dell'utente
+   * @param propertyName Nome della proprietà del field in cui inserire la stringa digitata.
+   */
+  onMultiSelectInputKeyup(event, propertyName: string) {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      switch (this.field.FieldType) {
+        case FieldTypeEnum.Lookup:
+        case FieldTypeEnum.Allegato:
+          if (!this.field[propertyName]) {
+            this.field[propertyName] = new Array<string>();
+          }
+          this.field[propertyName].push(event.currentTarget.value);
+          break;
+        case FieldTypeEnum.Immagine:
+          if (!(this.field as ImageField).AttachDefinition[propertyName]) {
+            (this.field as ImageField).AttachDefinition[propertyName] = new Array<string>();
+          }
+          (this.field as ImageField).AttachDefinition[propertyName].push(event.currentTarget.value);
+          break;
+        case FieldTypeEnum['Elenco generico']:
+          if (!this.keyValueObject.key || !this.keyValueObject.value) {
+            return;
+          }
+          if (!(this.field as ListValueField).ValuePairs) {
+            (this.field as ListValueField).ValuePairs = {};
+          }
+          (this.field as ListValueField).ValuePairs[this.keyValueObject.key] = this.keyValueObject.value;
+          this.keyValueObject = { key: '', value: '' };
+          break;
+      }
+      event.currentTarget.value = null;
+    }
+  }
+
+  /**
+   * Metodo chiamato per mostrare come elenco le opzioni aggiunte in un campo di tipo "Elenco generico".
+   * @returns Restituisce un array di oggetti del tipo { key: string, value: string } con i valori inseriti dall'utente.
+   */
+  getDictionaryKeyValue() {
+    if ((this.field as ListValueField).ValuePairs) {
+      return Object.keys((this.field as ListValueField).ValuePairs).map(k => {
+        return {
+          key: k,
+          value: (this.field as ListValueField).ValuePairs[k]
+        };
+      });
+    } else {
+      return [];
+    }
+  }
+
+  /**
+   * Metodo per rimuovere una opzione aggiunta al campo di tipo "Elenco generico"
+   * @param key Nome della chiave da rimuovere
+   */
+  deleteKeyFromDictionary(key: string) {
+    delete (this.field as ListValueField).ValuePairs[key];
+  }
+
+  /**
+   * Metodo per aprire il dialog per aggiungere/modificare un metadata in un campo di tipo Allegato o Immagine.
+   * @param metadata Metadata da modificare, se null allora ne sto creando uno nuovo.
+   */
+  openMetadataDialog(field: BaseField = null) {
+    if (field) {
+      if (this.field.FieldType === FieldTypeEnum.Allegato) {
+        this.indexSelectedMetadata = (this.field as AttachmentField).MetadataFields.indexOf(field);
+        this.selectedMetadata = JSON.parse(JSON.stringify(field));
+      } else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+        this.indexSelectedMetadata = (this.field as ImageField).AttachDefinition.MetadataFields.indexOf(field);
+        this.selectedMetadata = JSON.parse(JSON.stringify(field));
+      }
+    } else {
+      this.selectedMetadata = new BaseField();
+      this.indexSelectedMetadata = null;
+    }
+    this.dialogMetadataRef = this.dialog.open(this.dialogMetadata, {
+      disableClose: true,
+      hasBackdrop: true,
+      width: '75%'
+    });
+  }
+
+  /**
+   * Metodo invocato dall'output dal dialog per aggiungere/modificare un metadata
+   * nei campi di tipo Allegato o Immagine. Prima di aggiungere il metadata nell'elenco
+   * contolla se esiste un altro metadata con lo stesso nome e nel caso genera un errore
+   * (i metadata, come per i campi della form, devono avere un nome univoco).
+   * @param metadata Metadata aggiunto o modificato, se null allora il dialog è stato chiuso senza fare modifiche.
+   */
+  onSaveMetadata(metadata: BaseField) {
+    if (metadata) {
+      if (
+        (this.field.FieldType === FieldTypeEnum.Allegato
+          && (this.field as AttachmentField).MetadataFields
+          && (this.field as AttachmentField).MetadataFields.find(
+            (m, i) => m.Label === metadata.Label
+              && (this.indexSelectedMetadata == null ? true : this.indexSelectedMetadata !== i)
+          )
+        ) ||
+        (this.field.FieldType === FieldTypeEnum.Immagine
+          && (this.field as ImageField).AttachDefinition.MetadataFields
+          && (this.field as ImageField).AttachDefinition.MetadataFields.find(
+            (m, i) => m.Label === metadata.Label
+              && (this.indexSelectedMetadata == null ? true : this.indexSelectedMetadata !== i)
+          )
+        )
+      ) {
+        EqpDynamicModuleDialogService.Warning('Impossibile inserire due metadata con la stessa label.');
+        throw new Error('Impossibile inserire due metadata con la stessa label.');
+      }
+
+      if (this.indexSelectedMetadata != null && this.indexSelectedMetadata >= 0) {
+        if (this.field.FieldType === FieldTypeEnum.Allegato) {
+          (this.field as AttachmentField).MetadataFields[this.indexSelectedMetadata] = metadata;
+        } else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+          (this.field as ImageField).AttachDefinition.MetadataFields[this.indexSelectedMetadata] = metadata;
+        }
+      } else {
+        if (this.field.FieldType === FieldTypeEnum.Allegato) {
+          if (!(this.field as AttachmentField).MetadataFields) {
+            (this.field as AttachmentField).MetadataFields = new Array<BaseField>();
+          }
+          (this.field as AttachmentField).MetadataFields.push(metadata);
+        } else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+          if (!(this.field as ImageField).AttachDefinition.MetadataFields) {
+            (this.field as ImageField).AttachDefinition.MetadataFields = new Array<BaseField>();
+          }
+          (this.field as ImageField).AttachDefinition.MetadataFields.push(metadata);
+        }
+      }
+    }
+    this.dialogMetadataRef.close();
+    this.setMetadataOrdinalPosition();
+    this.reloadMetadataTable();
+  }
+
+  /**
+   * Metodo per disabilitare il pulsante per salvare il campo inserito/modificato.
+   * @returns Restituisce un booleano, se true il salvataggio viene disabilitato.
+   */
+  disableSaveField(): boolean {
+    if (this.fieldFormGroup.invalid) {
+      return true;
+    }
+
+    switch (this.field.FieldType) {
+
+      case FieldTypeEnum['Elenco generico']:
+        if ((this.field as ListValueField).PresentationMode != ListPresentationEnum.Immagini) {
+          return !(this.field as ListValueField).ValuePairs || (this.field as ListValueField).ValuePairs.length === 0;
+        } else {
+          return (
+            !(this.field as ListValueField).ButtonImageList
+            || (this.field as ListValueField).ButtonImageList.length === 0
+            || !!(this.field as ListValueField).ButtonImageList.find(i => !i.ButtonKey || !i.ButtonValue)
+          );
+        }
+      case FieldTypeEnum.Lookup:
+        return !(this.field as LookupField).FieldNames || (this.field as LookupField).FieldNames.length === 0;
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Metodo per salvare il campo inserito/modificato.
+   * Se è stato inserito un field con la stessa label viene generato un errore (le label devono essere univoche).
+   * Una volta aggiunto/aggiornato il campo nell'elenco dei Field della Form chiude il dialog e ricarica la tabella
+   * che mostra l'elenco dei campi aggiunti alla form.
+   */
+  saveAndExitAddField(save: boolean) {
+    if (save) {
+      this.saveFieldEvent.emit(this.field);
+    } else {
+      this.saveFieldEvent.emit(null);
+    }
+  }
+
+  /**
+   * Metodo per ripristinare l'oggetto field al cambio del tipo selezionato.
+   * Lascia valorizzate solo le proprietà dell'oggetto BaseField comune a tutti i tipi di campo.
+   */
+  private restoreBaseFieldProperties() {
+    if (this.field) {
+      const tmpBaseField = JSON.parse(JSON.stringify(this.field));
+      this.field = new BaseField();
+      this.field.Label = tmpBaseField.Label;
+      this.field.Description = tmpBaseField.Description;
+      this.field.Required = tmpBaseField.Required;
+      this.field.FieldType = tmpBaseField.FieldType;
+      this.field.Formula = tmpBaseField.Formula;
+      this.field.ColSpanSizes = tmpBaseField.ColSpanSizes;
+      this.field.FieldGroup = tmpBaseField.FieldGroup;
+    }
+  }
+
+  private configureColumns() {
+    this.metadataColumns = [
+      {
+        key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
+        actions: [
+          { name: 'Modifica', icon: 'edit', fn: (element, index, col) => this.openMetadataDialog(element) },
+          { name: 'Elimina', icon: 'delete', fn: (element, index, col) => this.deleteMetadata(element) },
+        ]
+      },
+      { 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 }
+      },
+    ];
+  }
+
+  /**
+   * Metodo per eliminare un metadata aggiunto per un campo di tipo Allegato o Immagine.
+   * @param metadata Metadata da eliminare.
+   */
+  private deleteMetadata(metadata: BaseField) {
+    EqpDynamicModuleDialogService.Confirm('Eliminare il metadata selezionato?', () => {
+      if (this.field.FieldType === FieldTypeEnum.Allegato) {
+        (this.field as AttachmentField).MetadataFields.splice((this.field as AttachmentField).MetadataFields.indexOf(metadata), 1);
+      } else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+        (this.field as ImageField).AttachDefinition.MetadataFields.splice((this.field as ImageField).AttachDefinition.MetadataFields.indexOf(metadata), 1);
+      }
+      this.setMetadataOrdinalPosition();
+      this.reloadMetadataTable();
+    }, false, 'Richiesta conferma');
+  }
+
+  /**
+   * Imposta l'ordinamento dei metadata all'interno dei campi di tipo Allegato e Immagine.
+   */
+  private setMetadataOrdinalPosition() {
+    if (this.field.FieldType === FieldTypeEnum.Allegato) {
+      if ((this.field as AttachmentField).MetadataFields) {
+        (this.field as AttachmentField).MetadataFields.forEach(metadata => {
+          metadata.OrdinalPosition = (this.field as AttachmentField).MetadataFields.indexOf(metadata);
+        });
+      }
+    } else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+      if ((this.field as ImageField).AttachDefinition.MetadataFields) {
+        (this.field as ImageField).AttachDefinition.MetadataFields.forEach(metadata => {
+          metadata.OrdinalPosition = (this.field as ImageField).AttachDefinition.MetadataFields.indexOf(metadata);
+        });
+      }
+    }
+  }
+
+  /**
+   * Metodo per ricaricare i dati della tabella dei metadata visualizzata nella creazione/modifica 
+   * dei campi di tipo Allegato o Immagine.
+   */
+  private reloadMetadataTable() {
+    if (this.metadataFieldsTable) {
+      this.metadataFieldsTable.reloadDatatable();
+    }
+  }
+}

package/src/lib/components/private/dynamic-module-field/dynamic-module-field.component.html

@@ -0,0 +1,42 @@
+<text-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Campo di testo']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</text-field-template>
+
+<textarea-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Area di testo']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</textarea-field-template>
+
+<boolean-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Booleano']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</boolean-field-template>
+
+<date-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Data e/o ora']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</date-field-template>
+
+<numeric-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Campo numerico']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</numeric-field-template>
+
+<list-value-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Elenco generico']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</list-value-field-template>
+
+<attachment-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Allegato']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</attachment-field-template>
+
+<image-field-template #fieldTemplate *ngIf="field.FieldType == FieldTypeEnum['Immagine']"
+    [matTooltip]="field.Description" [(record)]="record" [field]="field" (recordChange)="onRecordChange()">
+</image-field-template>
+
+<list-form-record #listInnerFormRecords *ngIf="field.FieldType == FieldTypeEnum['Form di dettaglio']"
+    [form]="getInnerFormFromField(field)" [values]="record[field.Name]"
+    (onAddViewEditRecord)="onAddViewEditInnerFormRecord($event, field)">
+</list-form-record>
+
+<!-- DIALOG PER AGGIUNGERE/MODIFICARE/VISUALIZZARE UN RECORD IN UNA FORM DI DETTAGLIO -->
+<ng-template #dialogInnerFormRecord>
+    <add-form-record [form]="selectedInnerForm" [record]="selectedInnerFormRecord" [onlyView]="onlyViewInnerFormRecord"
+        (saveRecordEvent)="onSaveInnerFormRecord($event)"></add-form-record>
+</ng-template>