@eqproject/eqp-dynamic-module 0.0.7 → 0.0.9

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

@@ -1,228 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Context } from '../../../models/context.model';
-import { EndPointConfiguration, EndPointData, EndPointDataParams, ParamTypeEnum, RequestMethodEnum } from '../../../models/endPointConfiguration.model';
-import { Form, FormTypeEnum } from '../../../models/form.model';
-import { DynRecord, Record } from '../../../models/record.model';
-import { EqpDynamicModuleDialogService } from '../../../services/eqp-dynamic-module-dialog.service';
-import { UtilityHelperService } from '../../../services/utilityHelper.services';
-
-@Component({
-  selector: 'eqp-dynamic-module',
-  templateUrl: './eqp-dynamic-module.component.html',
-  styleUrls: ['./eqp-dynamic-module.component.scss']
-})
-export class EqpDynamicModuleComponent implements OnInit {
-
-  @Input() context: Context = new Context();
-  //@Input() form: Form = new Form();
-  @Input() formID: string;
-  @Input() values: Array<Record>;
-  @Input() showButtons = true;
-  @Input() showTitle = true;
-
-  /**
-   * Url del server da chiamare per recuperare, 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;
-
-  /**
-   * Eventi emessi quando si salva, elimina o duplica un record
-   * se non è stato specificato un endpoint da chiamare.
-   */
-  @Output() saveRecord: EventEmitter<Record> = new EventEmitter<Record>();
-  @Output() deleteRecord: EventEmitter<Record> = new EventEmitter<Record>();
-  @Output() duplicateRecord: EventEmitter<Record> = new EventEmitter<Record>();
-
-  /**
-   * Eventi emessi DOPO aver eseguito una chiamata al server per il salvataggio,
-   * l'eliminazione o la duplicazione di un record all'endpoint specificato.
-   */
-  @Output() afterSaveRecord: EventEmitter<Record> = new EventEmitter<Record>();
-  @Output() afterDeleteRecord: EventEmitter<Record> = new EventEmitter<Record>();
-  @Output() afterDuplicateRecord: EventEmitter<Record> = new EventEmitter<Record>();
-
-  form: Form = new Form();
-  viewMode: FormTypeEnum = FormTypeEnum.LIST;
-  FormTypeEnum = FormTypeEnum;
-  selectedRecord: Record;
-  onlyView: boolean;
-
-  constructor(
-    private utilityHelperService: UtilityHelperService
-  ) { }
-
-  ngOnInit(): void {
-    UtilityHelperService.SetContext(this.context);
-    this.configureDefaultEndPoints();
-    this.getFormByID();
-  }
-
-  getFormByID(){
-    const dynamicModuleParams: Array<EndPointDataParams> = new Array<EndPointDataParams>();
-    dynamicModuleParams.push({
-      ParamName: "id",
-      ParamValue: this.formID,
-      ParamType: ParamTypeEnum['Query param']
-    });
-    this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, dynamicModuleParams, (res: Form) => {
-      this.form = res;
-      this.getRecordsByFormID();
-    }, (err) => {
-      console.log(err);
-    });
-  }
-
-  /**
-   * 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);
-    }
-  }
-
-  /**
-   * Metodo per recuperare tutti i record salvati per una particolare Form.
-   * La chiamata viene effettuata solo se è stato configurato l'endPoint da usare.
-   * La risposta della chiamata deve essere un array di oggetti di tipo "DynRecord"
-   * a partire dai quali vengono ricreati i Record usati nel client.
-   */
-  getRecordsByFormID() {
-    if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByFormIDEndPoint) {
-      var dynamicModuleParams = [
-        { ParamName: 'EntID', ParamValue: this.form.ID, ParamType: ParamTypeEnum['Query param'] }
-      ];
-      this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByFormIDEndPoint, dynamicModuleParams, (res: Array<DynRecord>) => {
-        this.values = new Array<Record>();
-        res.forEach(r => {
-          var tmpRec: Record = new Record();
-          tmpRec = JSON.parse(r.SerializedValues);
-          tmpRec.ID = r.ID;
-          tmpRec.EntID = r.EntID;
-          this.values.push(tmpRec);
-        });
-      });
-    }
-  }
-
-  /**
-   * Metodo invocato quando si vuole aggiungere, visualizzare o modificare un record.
-   * Se l'evento è null vuol dire che stiamo aggiungendo un nuovo record altrimenti siamo in modifica
-   * o visualizzazione. In questi ultimi due casi, se è stato configurato un endpoint per il recupero
-   * del record completo allora viene effettuata una chiamata al server, altrimenti viene usato l'oggetto selezionato.
-   * @param event Oggetto con due proprietà:
-   * "record" = oggetto da modificare/visualizzare,
-   * "onlyView" = booleano (se TRUE siamo in visualizzazione altrimenti in modifica)
-   */
-  onAddViewEditRecord(event: { record: Record, onlyView: boolean }) {
-    if (event != null) {
-      this.onlyView = event.onlyView;
-      if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByIDEndPoint) {
-        var dynamicModuleParams = [
-          { ParamName: "id", ParamValue: event.record.ID, ParamType: ParamTypeEnum['Query param'] }
-        ];
-        this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByIDEndPoint, dynamicModuleParams, (res: DynRecord) => {
-          this.selectedRecord = JSON.parse(res.SerializedValues);
-          this.selectedRecord.ID = res.ID;
-          this.selectedRecord.EntID = res.EntID;
-          this.viewMode = FormTypeEnum.SCALAR;
-        });
-      } else {
-        this.selectedRecord = JSON.parse(JSON.stringify(event.record));
-        this.viewMode = FormTypeEnum.SCALAR;
-      }
-    } else {
-      this.selectedRecord = null;
-      this.onlyView = false;
-      this.viewMode = FormTypeEnum.SCALAR;
-    }
-  }
-
-  /**
-   * Metodo per salvare il record aggiunto o modificato.
-   * 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 "saveRecord".
-   * @param event Oggetto di tipo Record da salvare.
-   */
-  onSaveRecord(event: Record) {
-    if (event != null && this.endPointConfiguration != null && this.endPointConfiguration.Records.SaveEndPoint) {
-      var dynRec: DynRecord = new DynRecord();
-      dynRec.ID = event.ID ?? null;
-      dynRec.EntID = this.form.ID;
-      dynRec.Values = event ?? null;
-      var dynamicModuleParams = [
-        { ParamName: "Record", ParamValue: dynRec, ParamType: ParamTypeEnum['In Body'] }
-      ];
-      this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.SaveEndPoint, dynamicModuleParams, (res) => {
-        this.getRecordsByFormID();
-        this.afterSaveRecord.emit(event);
-        this.viewMode = FormTypeEnum.LIST;
-      });
-    } else {
-      this.saveRecord.emit(event);
-      this.viewMode = FormTypeEnum.LIST;
-    }
-  }
-
-  /**
-   * Metodo per duplicare un record precedentemente salvato.
-   * Se è stato configurato un endPoint per la duplicazione lato server allora effettua una chiamata passando nel body
-   * un oggetto contenente il record da duplicare, altrimenti scatena l'evento di output "duplicateRecord".
-   * @param record Oggetto di tipo Record da duplicare.
-   */
-  onDuplicateRecord(record: Record) {
-    if (this.endPointConfiguration && this.endPointConfiguration.Records.DuplicateEndPoint) {
-      EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', () => {
-        var dynamicModuleParams = [
-          { ParamName: "id", ParamValue: record.ID, ParamType: ParamTypeEnum['Query param'] }
-        ];
-        this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.DuplicateEndPoint, dynamicModuleParams, (res) => {
-          this.getRecordsByFormID();
-          this.afterDuplicateRecord.emit(record);
-        });
-      }, false, 'Richiesta conferma');
-    } else {
-      this.duplicateRecord.emit(record);
-    }
-  }
-
-  /**
-   * Metodo per eliminare un record.
-   * Se è stato configurato un endPoint per l'eliminazione allora effettua una chiamata passando l'ID del record da eliminare
-   * come query param all'interno della rotta, altrimenti scatena l'evento di output "deleteRecord".
-   * @param record Oggetto di tipo Record da duplicare.
-   */
-  onDeleteRecord(record: Record) {
-    if (this.endPointConfiguration && this.endPointConfiguration.Records.DeleteEndPoint) {
-      EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', () => {
-        var dynamicModuleParams = [
-          { ParamName: "id", ParamValue: record.ID, ParamType: ParamTypeEnum['Query param'] }
-        ];
-        this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.DeleteEndPoint, dynamicModuleParams, (res) => {
-          this.getRecordsByFormID();
-          this.afterDeleteRecord.emit(record);
-        });
-      }, false, 'Richiesta conferma');
-    } else {
-      this.deleteRecord.emit(record);
-    }
-  }
-}

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

@@ -1,212 +0,0 @@
-<eqp-dynamic-module-spinner></eqp-dynamic-module-spinner>
-
-<mat-horizontal-stepper linear #stepper>
-    <!-- DATI GENERALI DELLA FORM -->
-    <mat-step [stepControl]="formFormGroup">
-        <form [formGroup]="formFormGroup" (keydown.enter)="false">
-            <ng-template matStepLabel>
-                <div class="stepper-header-overlay" (click)="setFormStatus(false)"></div>
-                Dati generali della form
-            </ng-template>
-
-            <div class="row">
-                <div class="col-md-4">
-                    <mat-form-field>
-                        <mat-label>Nome</mat-label>
-                        <input matInput formControlName="Name" [(ngModel)]="form.Name" required>
-                    </mat-form-field>
-                </div>
-
-                <div class="col-md-4">
-                    <eqp-select [enumData]="FormScalarTypeEnum" [(ngModelInput)]="form.FormScalarType"
-                        [isRequired]="true" [showCancelButton]="false" placeholder="Tipo di visualizzazione"
-                        [formGroupInput]="formFormGroup" [formControlNameInput]="'FormScalarType'"
-                        (ngModelInputChange)="onChangeFormScalarType()">
-                    </eqp-select>
-                </div>
-            </div>
-            <div class="row" *ngIf="form.FormScalarType && form.FormScalarType != FormScalarTypeEnum.Semplice">
-                <div class="col-md-4 d-flex align-items-center">
-                    <mat-form-field>
-                        <mat-label> Nome sezione (invio per confermare) </mat-label>
-                        <input matInput [(ngModel)]="formFieldGroupName" [ngModelOptions]="{standalone: true}"
-                            (keyup)="onFormFieldGroupNameKeyUp($event)">
-                    </mat-form-field>
-                </div>
-                <div class="col-md-4 d-flex align-items-center">
-                    <span class="mr-3">Sezioni inserite:</span>
-                    <ul class="section-list">
-                        <li *ngFor="let groupName of form.FormFieldsGroups, let i=index">
-                            <mat-icon class="mr-1" (click)="onDeleteFormFieldGroupName(groupName.Name)">close
-                            </mat-icon>
-                            <span> {{i+1}}) {{groupName.Name}}</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-
-            <div class="mt-2 d-flex justify-content-end">
-                <button mat-raised-button color="primary" matStepperNext
-                    [disabled]="formFormGroup.invalid">Successivo</button>
-            </div>
-        </form>
-    </mat-step>
-
-    <!-- AGGIUNTA DEI CAMPI DELLA FORM -->
-    <mat-step [completed]="isFieldStepCompleted()">
-        <ng-template matStepLabel>
-            <div class="stepper-header-overlay" (click)="setFormStatus(false)"></div>
-            Campi da inserire
-        </ng-template>
-
-        <div class="row justify-content-end">
-            <button class="btn btn-primary" mat-raised-button color="primary" type="button" (click)="openFieldDialog()">
-                <mat-icon>add</mat-icon>
-                <span style="margin-left: 10px;">Aggiungi campo</span>
-            </button>
-
-            <button class="btn btn-primary ml-2" mat-raised-button color="primary" type="button"
-                (click)="openInnerFormDialog()" *ngIf="!innerFormManagment">
-                <mat-icon>add</mat-icon>
-                <span style="margin-left: 10px;">Aggiungi form di dettaglio</span>
-            </button>
-        </div>
-
-        <eqp-table #fieldsTable [createMatCard]="false" [columns]="fieldsColumns" [data]="form.Fields"
-            [emptyTableMessage]="'Nessun campo inserito'" [searchText]="'Cerca'">
-        </eqp-table>
-
-        <div class="mt-2 d-flex justify-content-end">
-            <button class="mr-2" mat-raised-button matStepperPrevious>Precedente</button>
-            <button mat-raised-button color="primary" matStepperNext [disabled]="!isFieldStepCompleted()"
-                (click)="setFormStatus(false)">Successivo</button>
-        </div>
-    </mat-step>
-
-    <!-- AGGIUNTA DELLE OPERAZIONI SUI RECORD -->
-    <mat-step>
-        <ng-template matStepLabel>
-            <div class="stepper-header-overlay" (click)="setFormStatus(false)"></div>
-            Azioni aggiuntive sui record
-        </ng-template>
-
-        <div class="row justify-content-end">
-            <button class="btn btn-primary" mat-raised-button color="primary" type="button"
-                (click)="openActionOnRecordDialog()">
-                <mat-icon>add</mat-icon>
-                <span style="margin-left: 10px;">Aggiungi azione</span>
-            </button>
-        </div>
-        <eqp-table #actionsOnRecordTable [createMatCard]="false" [columns]="actionsOnRecordColumns"
-            [data]="form.ActionsOnRecord" [emptyTableMessage]="'Nessuna action inserita'" [searchText]="'Cerca'">
-        </eqp-table>
-
-        <div class="mt-2 d-flex justify-content-end">
-            <button class="mr-2" mat-raised-button matStepperPrevious>Precedente</button>
-            <button mat-raised-button color="primary" matStepperNext (click)="setFormStatus(true)">
-                Successivo
-            </button>
-        </div>
-    </mat-step>
-
-    <!-- VISUALIZZAZIONE FORM CREATA -->
-    <mat-step>
-        <ng-template matStepLabel>
-            <div class="stepper-header-overlay"
-                (click)="setFormStatus(formFormGroup.valid && form.Fields && form.Fields.length > 0)"></div>
-            Anteprima
-        </ng-template>
-
-        <add-form-record *ngIf="previewForm && formCompleted" [form]="previewForm" [showButtons]="false">
-        </add-form-record>
-
-
-        <div class="mt-2 d-flex justify-content-end">
-            <button class="mr-2" mat-raised-button matStepperPrevious (click)="setFormStatus(false)">Precedente</button>
-            <button mat-raised-button color="primary" (click)="saveForm()">Salva form</button>
-        </div>
-    </mat-step>
-</mat-horizontal-stepper>
-
-<div class="row" *ngIf="innerFormManagment">
-    <div class="col-md-12 text-right">
-        <button mat-raised-button (click)="saveFormEvent.emit(null)">Esci</button>
-    </div>
-</div>
-
-<!-- DIALOG AGGIUNTA/MODIFICA CAMPO -->
-<ng-template #dialogField>
-    <eqp-dynamic-module-add-form-field [field]="selectedField" [indexField]="indexSelectedField"
-        (saveFieldEvent)="onSaveField($event)" [availableFields]="form.Fields"
-        [formFieldsGroups]="form.FormScalarType != FormScalarTypeEnum.Semplice ? form.FormFieldsGroups : null">
-    </eqp-dynamic-module-add-form-field>
-</ng-template>
-
-<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->
-<ng-template #fieldSectionColumnTemplate let-row="row">
-    <eqp-select [arrayData]="form.FormFieldsGroups" [(ngModelInput)]="row.FieldGroup" [arrayKeyProperty]="'Name'"
-        [arrayValueProperty]="'Name'" placeholder="Sezione" [isRequired]="true" [includeFullObject]="false">
-    </eqp-select>
-</ng-template>
-
-<!-- DIALOG PER AGGIUNGERE/MODIFICARE UNA ACTION SUI RECORD DELLA FORM -->
-<ng-template #dialogActionOnRecord>
-    <div class="container-fluid" style="max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;">
-        <form [formGroup]="actionOnRecordFormGroup">
-            <div class="row">
-                <div class="header-title-standard">{{indexSelectedAction != null && indexSelectedAction >= 0 ?
-                    "Modifica"
-                    : "Aggiungi"}} azione sul record</div>
-            </div>
-            <div class="row">
-                <div class="col-sm-12 col-md-4 mt-2">
-                    <mat-form-field>
-                        <mat-label> Nome </mat-label>
-                        <input formControlName="Name" required matInput [(ngModel)]="selectedAction.Name">
-                    </mat-form-field>
-                </div>
-
-                <div class="col-sm-12 col-md-4 mt-2">
-                    <mat-form-field>
-                        <mat-label> Icona </mat-label>
-                        <input formControlName="Icon" required matInput [(ngModel)]="selectedAction.Icon">
-                    </mat-form-field>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-sm-12 col-md-12 mt-2">
-                    <mat-form-field>
-                        <textarea matInput [placeholder]="'Azione (Javascript)'" [rows]="3" formControlName="Action"
-                            required [(ngModel)]="selectedAction.Action" [matAutocomplete]="actionAutocomplete"
-                            (keyup)="setActionAutocompleteOptions($event)"
-                            (focus)="setActionAutocompleteOptions(null)"></textarea>
-                        <mat-autocomplete #actionAutocomplete="matAutocomplete">
-                            <mat-option *ngFor="let option of actionAutocompleteOptions" [value]="option.value">
-                                {{option.label}}
-                            </mat-option>
-                        </mat-autocomplete>
-                    </mat-form-field>
-                </div>
-            </div>
-
-
-            <div class="row mt-2 mb-1">
-                <div class="col-sm-12 text-right">
-                    <button class="mr-2" mat-raised-button color="primary" (click)="saveActionOnRecord()"
-                        [disabled]="actionOnRecordFormGroup.invalid" type="button">
-                        Salva
-                    </button>
-                    <button class="btn mat-raised-button" (click)="closeDialogActionOnRecord()" type="button">
-                        Esci
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
-</ng-template>
-
-<!-- TEMPLATE PER CONFIGURARE LE FORM DI DETTAGLIO -->
-<ng-template #dialogInnerForm>
-    <eqp-dynamic-module-configurator [form]="selectedInnerForm" [innerFormManagment]="true"
-        (saveFormEvent)="onSaveOrExitInnerForm($event)"></eqp-dynamic-module-configurator>
-</ng-template>

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

@@ -1,30 +0,0 @@
-::ng-deep mat-form-field {
-    width: 100%;
-}
-
-.stepper-header-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-
-.section-list {
-    list-style: none;
-    padding: 0;
-    mat-icon {
-        vertical-align: middle;
-        font-size: 15px;
-        height: 15px;
-        width: 15px;
-        color: var(--danger);
-        margin-right: 10px;
-        cursor: pointer;
-    }
-}
-
-.danger-color {
-    color: var(--danger);
-}