@eqproject/eqp-dynamic-module 0.0.5 → 0.0.7

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

@@ -0,0 +1,125 @@
+import { Component, EventEmitter, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { IBaseFieldComponent } from '../../../interfaces/iBaseFieldComponent.interface';
+import { BaseField, FieldTypeEnum } from '../../../models/baseField.model';
+import { Form } from '../../../models/form.model';
+import { Record } from '../../../models/record.model';
+import { ListFormRecordComponent } from '../form-records/list-form-record/list-form-record.component';
+
+@Component({
+  selector: 'dynamic-module-field',
+  templateUrl: './dynamic-module-field.component.html',
+  styleUrls: ['./dynamic-module-field.component.scss']
+})
+export class DynamicModuleFieldComponent implements OnInit, IBaseFieldComponent {
+
+  @Input() field: BaseField;
+  @Input() form: Form;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  FieldTypeEnum = FieldTypeEnum;
+
+  //#region Proprietà per aggiungere/modificare i record di una form di dettaglio
+  selectedInnerForm: Form;
+  selectedInnerFormRecord: Record;
+  indexInnerFormRecord: number;
+  onlyViewInnerFormRecord: boolean = false;
+  dialogInnerFormRecordRef: MatDialogRef<TemplateRef<any>>;
+  @ViewChild('dialogInnerFormRecord', { static: true }) dialogInnerFormRecord: TemplateRef<any>;
+  //#endregion
+
+  @ViewChildren("fieldTemplate") fieldTemplate: QueryList<DynamicModuleFieldComponent>;
+  @ViewChildren('listInnerFormRecords') listInnerFormRecords: QueryList<ListFormRecordComponent>;
+
+  constructor(
+    private dialog: MatDialog
+  ) { }
+
+
+  updateField(): void {
+    if (this.fieldTemplate && this.fieldTemplate.length > 0) {
+      this.fieldTemplate.forEach(f => f.updateField());
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * 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() {
+    this.recordChange.emit(this.record);
+  }
+
+  /**
+   * Metodo per recuperare una InnerForm a partire dal Field che la rappresenta.
+   * @param field Campo a partire dal quale si vuole recuperare la InnerForm.
+   * @returns Restituisce un oggetto di tipo Form.
+   */
+  getInnerFormFromField(field: BaseField): Form {
+    if (this.form.InnerForms && this.form.InnerForms.find(f => f.Name == field.Label)) {
+      return this.form.InnerForms.find(f => f.Name == field.Label);
+    } else {
+      return null;
+    }
+  }
+
+  /**
+ * Metodo per aprire un dialog in cui aggiungere/modificare/visualizzare un record appartenente
+ * a una form di dettaglio.
+ * @param record Evento di output del componente list-form-record, contiene il record selezionato e un booleno che indica 
+ * se l'utente vuole modificare o visualizzare l'elemento selezionato.
+ * @param innerForm Contiene la Form di dettaglio dalla quale è stato richiesto il record.
+ */
+  onAddViewEditInnerFormRecord(record: { record: Record, onlyView: boolean }, field: BaseField) {
+    this.selectedInnerForm = this.getInnerFormFromField(field);
+    if (record == null) {
+      this.selectedInnerFormRecord = new Record();
+      this.indexInnerFormRecord = null;
+      this.onlyViewInnerFormRecord = false;
+    } else {
+      this.selectedInnerFormRecord = JSON.parse(JSON.stringify(record.record));
+      this.indexInnerFormRecord = this.record[field.Name].indexOf(record);
+      this.onlyViewInnerFormRecord = record.onlyView;
+    }
+
+    this.dialogInnerFormRecordRef = this.dialog.open(this.dialogInnerFormRecord, {
+      disableClose: true,
+      hasBackdrop: true,
+      width: '75%'
+    });
+  }
+
+  /**
+   * Metodo invocato al salvataggio o alla chiusura del dialog di aggiunta/modifica/visualizzazione
+   * di un record di una form di dettaglio.
+   * @param record Oggetto restituito dal componente add-form-field (questo qui) contenente il Record 
+   * aggiornato dall'utente. Se null allora l'utente non ha modificato nulla e ha chiuso il dialog.
+   */
+  onSaveInnerFormRecord(record: Record) {
+    if (record != null) {
+      const arrayName: string = this.selectedInnerForm.Name.split(' ').join('_');
+      if (this.indexInnerFormRecord != null && this.indexInnerFormRecord >= 0) {
+        this.record[arrayName][this.indexInnerFormRecord] = record;
+      } else {
+        if (!this.record[arrayName]) {
+          this.record[arrayName] = [];
+        }
+        this.record[arrayName].push(record);
+      }
+    }
+    this.dialogInnerFormRecordRef.close();
+
+    // Ricarico la tabella dei record per visualizzare le modifiche fatte dall'utente.
+    if (this.listInnerFormRecords && this.listInnerFormRecords.length > 0) {
+      this.listInnerFormRecords.forEach(list => {
+        if (list && list.tableRecords) {
+          list.tableRecords.reloadDatatable();
+        }
+      });
+    }
+  }
+}

package/src/lib/components/private/field-templates/attachment-field-template/attachment-field-template.component.html

@@ -0,0 +1,25 @@
+<p *ngIf="!field.IsMultiAttach" class="mb-2">
+    {{field.Label + (field.Required ? " *" : "")}}
+</p>
+<div class="row" *ngIf="!field.IsMultiAttach && record[field.Name] && record[field.Name][0]">
+    <div class="mt-2" *ngFor="let metadata of field.MetadataFields"
+        [ngClass]="utilityService.getFieldSyleClass(metadata)">
+        <dynamic-module-field [field]="metadata" [record]="record[field.Name][0]"
+            (recordChange)="updateMetadataValidity()">
+        </dynamic-module-field>
+    </div>
+</div>
+
+<eqp-attachments [attachmentsList]="record[field.Name]" [showMatCard]="true" [allowOnlyImages]="onlyImages"
+    [isDisabled]="field.FormFormGroup.disabled" [showInlinePreview]="true" [multipleAttachment]="field.IsMultiAttach"
+    [disableAction]="field.FormFormGroup.disabled" [acceptedFileTypes]="field.AllowedExtensions" [showHeader]="true"
+    [headerTitle]="field.Label + (field.Required ? ' *' : '')" (localEditedAttachments)="catchAttachmentList($event)"
+    #eqpAttachments>
+</eqp-attachments>
+
+<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->
+<ng-template #metadataColumnTemplate let-row="row" let-col="col">
+    <dynamic-module-field [field]="getFieldFromMetadata(col, row)" [record]="row"
+        (recordChange)="updateMetadataValidity()">
+    </dynamic-module-field>
+</ng-template>

package/src/lib/components/private/field-templates/attachment-field-template/attachment-field-template.component.ts

@@ -0,0 +1,172 @@
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
+import { Record } from '../../../../models/record.model';
+import { AttachmentField, AvailableFileExtensions, AvailableImageExtensions } from '../../../../models/fields/attachmentField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { EqpAttachmentsComponent } from '@eqproject/eqp-attachments';
+import { FormGroup } from '@angular/forms';
+import { ConfigColumn, TypeColumn } from '@eqproject/eqp-table';
+
+@Component({
+  selector: 'attachment-field-template',
+  templateUrl: './attachment-field-template.component.html',
+  styleUrls: ['./attachment-field-template.component.scss']
+})
+export class AttachmentFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent, AfterViewInit {
+
+  @Input() onlyImages: boolean = false;
+  @Input() field: AttachmentField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+  @Output() onAttachmentsChange: EventEmitter<void> = new EventEmitter<void>();
+
+  @ViewChild("eqpAttachments", { static: true }) eqpAttachments: EqpAttachmentsComponent;
+  @ViewChild('metadataColumnTemplate', { static: true }) metadataColumnTemplate: TemplateRef<any>;
+
+  metadataFormGroups: Array<FormGroup> = new Array<FormGroup>();
+
+  constructor(
+    public utilityService: UtilityHelperService,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    // Nel caso in cui sono in modifica di un Record aggiorno il valore
+    // e il validator del FormControl. Se non viene eseguita questa riga
+    // l'utente deve modificare la selezione fatta per aggiornare la form.
+    this.setFormControlValue();
+
+    // Sempre nel caso in cui sono in modifica creo i FormGroup che rappresentano
+    // gli eventuali metadata degli allegati recuperati.
+    this.createMetadataFormGroups();
+    if (this.field.MetadataFields) {
+      this.field.MetadataFields.sort((a, b) => (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0));
+    }
+
+    if (!this.field.AllowedExtensions) {
+      this.field.AllowedExtensions = AvailableFileExtensions.concat(AvailableImageExtensions).map(ext => ext.key);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Dopo aver renderizzato il DOM, se il campo ammette molteplici allegati
+    // configuro le colonne della eqp-table in eqp-attachments.
+    if (this.field.IsMultiAttach) {
+      this.configureMultiAttachmentColumns();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per intercettare le modifiche agli allegati caricati.
+   * Se il campo prevede dei metadata allora per ogni allegato caricato crea un FormGroup
+   * per gestire la validazione degli input che l'utente può/deve riempire. I FormGroup 
+   * seguono lo stesso ordine degli allegati caricati.
+   * @param event Contiene la lista aggiornata degli Attachment caricati dall'utente.
+   */
+  catchAttachmentList(event) {
+    this.record[this.field.Name] = event;
+
+    this.createMetadataFormGroups();
+
+    this.setFormControlValue();
+    this.onRecordValueChange();
+    
+    // Scateno un evento di output necessario al componente ImageFieldTemplate al
+    // variare degli allegati caricati. Viene usato per aprire il dialog per disegnare
+    // sull'immagine caricata in base alla configurazione del Field.
+    this.onAttachmentsChange.emit();
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Metodo per aggiornare lo stato di validazione del FormControl che rappresenta 
+   * il campo Allegato (non i metadata al suo interno). Se tra le form dei metadata
+   * ne trova una invalida allora marca il controllo come invalido.
+   */
+  updateMetadataValidity() {
+    if (this.metadataFormGroups.find(form => form.invalid)) {
+      this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+    } else {
+      this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+    }
+    this.onRecordValueChange();
+  }
+
+  /**
+   * Metodo per recuperare il BaseField che rappresenta il metadata nella riga della eqp-table
+   * in base alla colonna e alla riga. Una volta trovato il BaseField gli viene associato il 
+   * FormGroup di cui fa parte.
+   * @param col Colonna della eqp-table.
+   * @param row Riga della eqp-table (in questo caso eredita da IAttachment).
+   * @returns Restituisce un BaseField per renderizzare il campo nella eqp-table degli allegati multipli.
+   */
+  getFieldFromMetadata(col: ConfigColumn, row: any) {
+    var baseField = JSON.parse(JSON.stringify(this.field.MetadataFields.find(metadata => metadata.Name === col.key)));
+    baseField.FormFormGroup = this.metadataFormGroups[this.record[this.field.Name].indexOf(row)];
+    return baseField;
+  }
+
+  /**
+   * Metodo per aggiornare il valore e il validator del FormControl associato al campo.
+   */
+  private setFormControlValue() {
+    this.field.FormFormGroup.controls[this.field.Name].setValue(this.record[this.field.Name]);
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  private onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+
+  /**
+   * Metodo per aggiungere alle colonne di eqp-attachments le colonne per modificare i metadata
+   * configurati per il campo Allegato o Immagine.
+   */
+  private configureMultiAttachmentColumns() {
+    if (this.eqpAttachments && this.eqpAttachments.attachmentsColumns && this.field.MetadataFields && this.field.MetadataFields.length > 0) {
+      this.field.MetadataFields.forEach(metadata => {
+        this.eqpAttachments.attachmentsColumns.splice(
+          this.eqpAttachments.attachmentsColumns.length - 1, 0,
+          { key: metadata.Name, display: metadata.Label, type: TypeColumn.ExternalTemplate, externalTemplate: this.metadataColumnTemplate }
+        );
+      });
+    }
+  }
+
+  /**
+   * Metodo per creare i FormGroup che rappresentano i metadata degli allegati caricati.
+   */
+  private createMetadataFormGroups() {
+    if (this.field.MetadataFields && this.field.MetadataFields.length > 0) {
+      this.metadataFormGroups = [];
+      if (this.record[this.field.Name] && this.record[this.field.Name].length > 0) {
+        this.record[this.field.Name].forEach(attachment => {
+          this.metadataFormGroups.push(this.utilityService.CreateFormFormGroup(this.field.MetadataFields, attachment, this.field.FormFormGroup.disabled, !this.field.IsMultiAttach));
+        });
+      }
+
+      this.updateMetadataValidity();
+    }
+  }
+}

package/src/lib/components/private/field-templates/boolean-field-template/boolean-field-template.component.html

@@ -0,0 +1,32 @@
+<div [formGroup]="field.FormFormGroup">
+
+    <!-- VISUALIZZAZIONE A TOGGLE -->
+    <mat-slide-toggle color="primary" *ngIf="field.PresetationType == BoolPresentantioEnum.Toggle"
+        [formControlName]="field.Name" [disabled]="field.FormFormGroup.disabled" [required]="field.Required"
+        [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
+        {{field.Label + (field.Required ? " *" : "")}}
+    </mat-slide-toggle>
+
+
+    <!-- VISUALIZZAZIONE A RADIOBUTTON -->
+    <mat-label class="mr-3" *ngIf="field.PresetationType == BoolPresentantioEnum['Radio button']">
+        {{field.Label + (field.Required ? " *" : "")}}
+    </mat-label>
+    <mat-radio-group *ngIf="field.PresetationType == BoolPresentantioEnum['Radio button']"
+        [formControlName]="field.Name" [disabled]="field.FormFormGroup.disabled" [required]="field.Required"
+        [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
+        <mat-radio-button class="mr-2" [value]="true" color="primary"> Si </mat-radio-button>
+        <mat-radio-button class="mr-2" [value]="false" color="primary"> No </mat-radio-button>
+        <mat-radio-button class="mr-2" [value]="null" color="primary" *ngIf="field.IsTristate"> ND
+        </mat-radio-button>
+    </mat-radio-group>
+
+    <!-- VISUALIZZAZIONE A CHECKBOX -->
+    <mat-checkbox class="mr-2" *ngIf="field.PresetationType == BoolPresentantioEnum.Checkbox"
+        [disabled]="field.FormFormGroup.disabled" [required]="field.Required" [formControlName]="field.Name"
+        [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
+        {{field.Label + (field.Required ? " *" : "")}}
+    </mat-checkbox>
+
+    <!-- TODO: Visualizzazione "Stringa true o false" e "Numerico 0 o 1" ?? -->
+</div>

package/src/lib/components/private/field-templates/boolean-field-template/boolean-field-template.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Record } from '../../../../models/record.model';
+import { BooleanField, BoolPresentantioEnum } from '../../../../models/fields/booleanField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+
+@Component({
+  selector: 'boolean-field-template',
+  templateUrl: './boolean-field-template.component.html',
+  styleUrls: ['./boolean-field-template.component.scss']
+})
+export class BooleanFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: BooleanField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  BoolPresentantioEnum = BoolPresentantioEnum;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (this.record[this.field.Name] == undefined || this.record[this.field.Name] == null) {
+      this.record[this.field.Name] = this.field.IsTristate ? null : false;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+}

package/src/lib/components/private/field-templates/date-field-template/date-field-template.component.html

@@ -0,0 +1,6 @@
+<eqp-datetimepicker [placeholder]="field.Label" [UTCDate]="true" [pickerMode]="pickerMode"
+    [formGroupInput]="field.FormFormGroup" [formControlNameInput]="field.Name"
+    [minDate]="field.MinDate ? field.MinDate : null" [maxDate]="field.MaxDate ? field.MaxDate : null"
+    [isRequired]="field.Required" [disabled]="field.FormFormGroup.disabled" [(ngModelInput)]="record[field.Name]"
+    (ngModelInputChange)="onRecordValueChange()" [customDateFormat]="field.DateFormat ? field.DateFormat : null">
+</eqp-datetimepicker>

package/src/lib/components/private/field-templates/date-field-template/date-field-template.component.ts

@@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { PickerModeEnum } from '@eqproject/eqp-datetimepicker';
+import { Record } from '../../../../models/record.model';
+import { DateField, DateTimeTypeEnum } from '../../../../models/fields/dateField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+
+@Component({
+  selector: 'date-field-template',
+  templateUrl: './date-field-template.component.html',
+  styleUrls: ['./date-field-template.component.scss']
+})
+export class DateFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: DateField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  pickerMode: PickerModeEnum;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.setTimeType();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+
+  /**
+   * In base al formato della data richiesta nel DateField (solo data, solo orario o data e ora)
+   * imposta la visualizzazione corretta del componente eqp-datetimepicker.
+   */
+  private setTimeType() {
+    switch (this.field.IsOnlyDate) {
+      case DateTimeTypeEnum["Solo data"]:
+        this.pickerMode = PickerModeEnum.DATE;
+        break;
+      case DateTimeTypeEnum["Solo orario"]:
+        this.pickerMode = PickerModeEnum.TIME;
+        break;
+      case DateTimeTypeEnum["Data e ora"]:
+        this.pickerMode = PickerModeEnum.DATETIME;
+        break;
+    }
+  }
+}

package/src/lib/components/private/field-templates/image-field-template/image-field-template.component.html

@@ -0,0 +1,57 @@
+<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->
+<div class="row" *ngIf="field.ImageIsContextualAttachment && field.ContextualAttachment">
+     <div class="col-sm-12 col-md-6 col-lg-4">
+          <p class="mb-2">
+               {{ field.Label + (field.Required ? " *" : "")}}
+               <br>
+               Nome immagine: {{ field.ImgName}}
+          </p>
+          <eqp-img-drawing
+               *ngIf="field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null"
+               [src]="'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64"
+               [showCancelButton]="false" [enableLoadAnotherImage]="false" [enableRemoveImage]="false" [width]="width"
+               [height]="height" [i18n]="i18n" [showCancelButton]="true" (save)="saveDrowning($event)"
+               (cancel)="resetPreLoadedImage()">
+          </eqp-img-drawing>
+
+          <img *ngIf="!field.EnableDrawing"
+               [src]="'data:'+ record[field.Name][0].FileContentType+ ';base64,'+ record[field.Name][0].FileDataBase64">
+     </div>
+
+     <div class="col-sm-12 col-md-6 col-lg-8">
+          <div class="row"
+               *ngIf="field.AttachDefinition && field.AttachDefinition.MetadataFields && preLoadedImageMetadataFormGroup">
+               <div class="mt-2" *ngFor="let metadata of field.AttachDefinition.MetadataFields"
+                    [ngClass]="utilityService.getFieldSyleClass(metadata)">
+                    <dynamic-module-field #fieldTemplate [field]="metadata" [form]="preLoadedImageMetadataFormGroup"
+                         [record]="record[field.Name][0]" (recordChange)="updateMetadataValidity()">
+                    </dynamic-module-field>
+               </div>
+          </div>
+     </div>
+</div>
+
+<!-- COMPONENTE IN CUI CARICARE NUOVI ALLEGATI -->
+<attachment-field-template [(record)]="record" [field]="field.AttachDefinition" [onlyImages]="true"
+     (onAttachmentsChange)="onAttachmentsChange()" *ngIf="!field.ImageIsContextualAttachment">
+</attachment-field-template>
+
+<!-- DIALOG PER DISEGNARE SUL NUOVO ALLEGATO CARICATO -->
+<ng-template #dialogImageDrowing>
+     <div *ngIf="field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null"
+          class="row">
+          <div class="col-sm-12 col-md-12">
+               <eqp-img-drawing [showCancelButton]="false" [enableLoadAnotherImage]="false" [enableRemoveImage]="false"
+                    [src]="'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64"
+                    [i18n]="i18n" [showCancelButton]="false" (save)="saveDrowning($event)">
+               </eqp-img-drawing>
+          </div>
+     </div>
+     <div class="row mt-2 mb-1">
+          <div class="col-sm-12 text-right">
+               <button class="btn mat-raised-button" (click)="closeImageDrowingDialog()" type="button">
+                    Annulla disegno
+               </button>
+          </div>
+     </div>
+</ng-template>

package/src/lib/components/private/field-templates/image-field-template/image-field-template.component.scss

@@ -0,0 +1,4 @@
+::ng-deep image-drawing > button {
+    background-color: var(--primary) !important;
+    color: white !important;
+}