@eqproject/eqp-dynamic-module 0.0.7 → 0.0.9

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

@@ -1,417 +0,0 @@
-<div class="container-fluid" style="max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;">
-    <form [formGroup]="fieldFormGroup">
-        <div class="row">
-            <div class="header-title-standard">{{indexField != null && indexField >= 0 ? "Modifica"
-                : "Aggiungi"}} campo</div>
-        </div>
-        <div class="row">
-            <div class="col-sm-12 col-md-4 mt-2">
-                <eqp-select [enumData]="FieldTypeEnum" [(ngModelInput)]="field.FieldType" [isRequired]="true"
-                    [showCancelButton]="false" placeholder="Tipo campo" (ngModelInputChange)="onFieldTypeChange()"
-                    [formGroupInput]="fieldFormGroup" [formControlNameInput]="'FieldType'"
-                    [enumDataToExclude]="fieldTypesToExclude">
-                </eqp-select>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2">
-                <mat-form-field>
-                    <mat-label> Label </mat-label>
-                    <input formControlName="Label" required matInput [(ngModel)]="field.Label">
-                </mat-form-field>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2">
-                <mat-form-field>
-                    <mat-label> Descrizione </mat-label>
-                    <input formControlName="Description" required matInput [(ngModel)]="field.Description">
-                </mat-form-field>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center">
-                <mat-slide-toggle [(ngModel)]="field.Required" formControlName="Required" color="primary">
-                    Obbligatorio
-                </mat-slide-toggle>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2">
-                <mat-form-field>
-                    <mat-label> Formula (Javascript) </mat-label>
-                    <input formControlName="Formula" matInput [(ngModel)]="field.Formula"
-                        [matAutocomplete]="formulaAutocomplete" (keyup)="setFormulaAutocompleteOptions($event)"
-                        (focus)="setFormulaAutocompleteOptions(null)">
-                    <mat-autocomplete #formulaAutocomplete="matAutocomplete">
-                        <mat-option *ngFor="let option of formulaAutocompleteOptions" [value]="option.value">
-                            {{option.label}}
-                        </mat-option>
-                    </mat-autocomplete>
-                </mat-form-field>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2" *ngIf="formFieldsGroups">
-                <eqp-select [arrayData]="formFieldsGroups" [(ngModelInput)]="field.FieldGroup"
-                    [arrayKeyProperty]="'Name'" [arrayValueProperty]="'Name'" placeholder="Sezione"
-                    [formGroupInput]="fieldFormGroup" [formControlNameInput]="'FieldGroup'" [isRequired]="true"
-                    [includeFullObject]="false">
-                </eqp-select>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2">
-                <eqp-select [arrayData]="availableColSpanSizes" [(ngModelInput)]="field.ColSpanSizes"
-                    [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'" (ngModelInputChange)="onColSpanSizeSelect()"
-                    [isMultiSelect]="true" placeholder="Larghezza campo" [formGroupInput]="fieldFormGroup"
-                    [formControlNameInput]="'ColSpanSizes'" [includeFullObject]="false">
-                </eqp-select>
-            </div>
-
-            <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center">
-                <mat-slide-toggle [(ngModel)]="field.InListView" formControlName="InListView" color="primary"
-                    [disabled]="fieldFormGroup.controls['InListView'].disabled">
-                    Mostrare nella visualizzazione a lista
-                </mat-slide-toggle>
-            </div>
-
-            <ng-container *ngTemplateOutlet="fieldTypeFormTemplate">
-            </ng-container>
-        </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)="saveAndExitAddField(true)"
-                    [disabled]="disableSaveField()" type="button">
-                    Salva
-                </button>
-                <button class="btn mat-raised-button" (click)="saveAndExitAddField(false)" type="button">
-                    Esci
-                </button>
-            </div>
-        </div>
-    </form>
-</div>
-
-
-<!-- FORM PROPRIETÀ CAMPI DI TESTO -->
-<ng-template #textFieldFormTemplate>
-    <div class="col-sm-12 col-md-4">
-        <eqp-select [enumData]="TextMaskEnum" [(ngModelInput)]="field.TextMask" placeholder="Maschera"
-            [formGroupInput]="fieldFormGroup" [formControlNameInput]="'TextMask'">
-        </eqp-select>
-    </div>
-    <div class="col-sm-12 col-md-4" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Lunghezza massima </mat-label>
-            <input formControlName="MaxLenght" type="number" [min]="0" matInput [(ngModel)]="field.MaxLenght">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Lunghezza minima </mat-label>
-            <input formControlName="MinLenght" type="number" [min]="0" matInput [(ngModel)]="field.MinLenght">
-        </mat-form-field>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI AREA DI TESTO -->
-<ng-template #textareaFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Righe </mat-label>
-            <input formControlName="Rows" type="number" [min]="0" matInput [(ngModel)]="field.Rows">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Lunghezza massima </mat-label>
-            <input formControlName="MaxLenght" type="number" [min]="0" matInput [(ngModel)]="field.MaxLenght">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Lunghezza minima </mat-label>
-            <input formControlName="MinLenght" type="number" [min]="0" matInput [(ngModel)]="field.MinLenght">
-        </mat-form-field>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI BOOLEANI -->
-<ng-template #booleadFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.IsTristate" formControlName="IsTristate" color="primary">
-            A tre stati
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-select [enumData]="BoolPresentantioEnum" [(ngModelInput)]="field.PresetationType" [isRequired]="true"
-            [showCancelButton]="false" placeholder="Tipo di presentazione" [formGroupInput]="fieldFormGroup"
-            [formControlNameInput]="'PresetationType'">
-        </eqp-select>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI DATA -->
-<ng-template #dateFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-datetimepicker [placeholder]="'Data minima'" [(ngModelInput)]="field.MinDate"
-            [formGroupInput]="fieldFormGroup" [formControlNameInput]="'MinDate'" [UTCDate]="true" [showSeconds]="false">
-        </eqp-datetimepicker>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-datetimepicker [placeholder]="'Data massima'" [(ngModelInput)]="field.MaxDate"
-            [formGroupInput]="fieldFormGroup" [formControlNameInput]="'MaxDate'" [UTCDate]="true" [showSeconds]="false">
-        </eqp-datetimepicker>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-select [enumData]="DateTimeTypeEnum" [(ngModelInput)]="field.IsOnlyDate" [isRequired]="true"
-            [showCancelButton]="false" placeholder="Tipo di data" [formGroupInput]="fieldFormGroup"
-            [formControlNameInput]="'IsOnlyDate'">
-        </eqp-select>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Formato </mat-label>
-            <input formControlName="DateFormat" matInput [(ngModel)]="field.DateFormat"
-                [matTooltip]="'Indicare il formato senguendo la guida del pacchetto momentjs.'">
-        </mat-form-field>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI NUMERICI -->
-<ng-template #numericFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.IsInteger" formControlName="IsInteger" color="primary">
-            Valore intero
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Separatore decimali </mat-label>
-            <input formControlName="DecimalSeparator" matInput [(ngModel)]="field.DecimalSeparator">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Precisione decimali </mat-label>
-            <input formControlName="DecimalPrecision" type="number" [min]="0" matInput
-                [(ngModel)]="field.DecimalPrecision">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Separatore migliaia </mat-label>
-            <input formControlName="ThousandsSeparator" matInput [(ngModel)]="field.ThousandsSeparator">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Simbolo valuta </mat-label>
-            <input formControlName="CurrencySymbol" matInput [(ngModel)]="field.CurrencySymbol">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Valore massimo </mat-label>
-            <input formControlName="MinValue" type="number" [min]="0" matInput [(ngModel)]="field.MinValue">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field>
-            <mat-label> Valore minimo </mat-label>
-            <input formControlName="MaxValue" type="number" [min]="0" matInput [(ngModel)]="field.MaxValue">
-        </mat-form-field>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI ALLEGATO -->
-<ng-template #attachmentFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.IsMultiAttach" formControlName="IsMultiAttach" color="primary">
-            Allegati multipli
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-select [arrayData]="AvailableFileExtensions.concat(AvailableImageExtensions)"
-            [(ngModelInput)]="field.AllowedExtensions" [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'"
-            [isMultiSelect]="true" placeholder="Estensioni accettate" [formGroupInput]="fieldFormGroup"
-            [formControlNameInput]="'AllowedExtensions'" [includeFullObject]="false">
-        </eqp-select>
-    </div>
-    <div class="col-sm-12 mt-2">
-        <div class="row mt-2">
-            <div class="col-sm-12 col-md-6">
-                <div class="header-title-standard">
-                    Elenco metadata
-                </div>
-            </div>
-            <div class="col-sm-12 col-md-6 text-right">
-                <button class="btn btn-primary" mat-raised-button color="primary" type="button"
-                    (click)="openMetadataDialog()">
-                    <mat-icon>add</mat-icon>
-                    <span style="margin-left: 10px;">Aggiungi</span>
-                </button>
-            </div>
-        </div>
-        <eqp-table #metadataFieldsTable [createMatCard]="false" [columns]="metadataColumns"
-            [data]="field.MetadataFields" [emptyTableMessage]="'Nessun metadata inserito'" [searchText]="'Cerca'">
-        </eqp-table>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI IMMAGINE -->
-<ng-template #imageFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.ImageIsContextualAttachment" formControlName="ImageIsContextualAttachment"
-            color="primary" (ngModelChange)="onImageIsContextualAttachmentChange()">
-            Immagine pre-caricata nel campo
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.EnableDrawing" formControlName="EnableDrawing" color="primary">
-            Abilita il disegno
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup"
-        *ngIf="!field.ImageIsContextualAttachment">
-        <mat-slide-toggle [(ngModel)]="field.AttachDefinition.IsMultiAttach" formControlName="IsMultiAttach"
-            color="primary">
-            Immagini multiple
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" *ngIf="!field.ImageIsContextualAttachment">
-        <eqp-select [arrayData]="AvailableImageExtensions" [(ngModelInput)]="field.AttachDefinition.AllowedExtensions"
-            [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'" [isMultiSelect]="true"
-            placeholder="Estensioni accettate" [formGroupInput]="fieldFormGroup"
-            [formControlNameInput]="'AllowedExtensions'" [includeFullObject]="false">
-        </eqp-select>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup" *ngIf="field.ImageIsContextualAttachment">
-        <mat-form-field>
-            <mat-label> Nome immagine </mat-label>
-            <input formControlName="ImgName" matInput [(ngModel)]="field.ImgName" required>
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 col-md-8 mt-2" [formGroup]="fieldFormGroup" *ngIf="field.ImageIsContextualAttachment">
-        <eqp-attachments [attachmentsList]="field._contextualAttachments" [showMatCard]="false" [allowOnlyImages]="true"
-            [isDisabled]="false" [showInlinePreview]="true" [multipleAttachment]="false" [showHeader]="false"
-            (localEditedAttachments)="catchContextualAttachmentChange($event)" #contextualAttachmentEqpAttachments>
-        </eqp-attachments>
-    </div>
-    <div class="col-sm-12 mt-2">
-        <div class="row mt-2">
-            <div class="col-sm-12 col-md-6">
-                <div class="header-title-standard">
-                    Elenco metadata
-                </div>
-            </div>
-            <div class="col-sm-12 col-md-6 text-right">
-                <button class="btn btn-primary" mat-raised-button color="primary" type="button"
-                    (click)="openMetadataDialog()">
-                    <mat-icon>add</mat-icon>
-                    <span style="margin-left: 10px;">Aggiungi</span>
-                </button>
-            </div>
-        </div>
-        <eqp-table #metadataFieldsTable [createMatCard]="false" [columns]="metadataColumns"
-            [data]="field.AttachDefinition.MetadataFields" [emptyTableMessage]="'Nessun metadata inserito'"
-            [searchText]="'Cerca'">
-        </eqp-table>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI LISTA DI VALORI -->
-<ng-template #listValueFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.IsMultiChoiche" formControlName="IsMultiChoiche" color="primary">
-            Scelta multipla
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2">
-        <eqp-select [enumData]="ListPresentationEnum" [(ngModelInput)]="field.PresentationMode" [isRequired]="true"
-            [showCancelButton]="false" placeholder="Tipo di presentazione" [formGroupInput]="fieldFormGroup"
-            [formControlNameInput]="'PresentationMode'" (ngModelInputChange)="onPresentationModeChange()">
-        </eqp-select>
-    </div>
-    <div class="col-sm-12 mt-2" *ngIf="field.PresentationMode != ListPresentationEnum.Immagini">
-        <div class="row">
-            <h4 class="key-value-list-section-title"> </h4>
-            <div class="col-md-4 d-flex align-items-center">
-                <mat-form-field>
-                    <mat-label> Label opzione (invio per confermare)</mat-label>
-                    <input matInput [(ngModel)]="keyValueObject.key" (keyup)="onMultiSelectInputKeyup($event, null)">
-                </mat-form-field>
-            </div>
-            <div class="col-md-4 d-flex align-items-center">
-                <mat-form-field>
-                    <mat-label> Valore opzione (invio per confermare)</mat-label>
-                    <input matInput [(ngModel)]="keyValueObject.value" (keyup)="onMultiSelectInputKeyup($event, null)">
-                </mat-form-field>
-            </div>
-            <div class="col-md-4 d-flex align-items-center">
-                <span class="mr-3">Opzioni inserite:</span>
-                <ul class="value-pairs-list">
-                    <li *ngFor="let keyValuePair of getDictionaryKeyValue()">
-                        <mat-icon class="mr-1" (click)="deleteKeyFromDictionary(keyValuePair.key)">close
-                        </mat-icon>
-                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-12 col-md-12 mt-2" *ngIf="field.PresentationMode == ListPresentationEnum.Immagini">
-        <eqp-attachments [attachmentsList]="field.ButtonImageList" [showMatCard]="false" [allowOnlyImages]="true"
-            [isDisabled]="false" [showInlinePreview]="true" [multipleAttachment]="true" [showHeader]="false"
-            [allowedTypes]="[AttachmentType.FILE]" (localEditedAttachments)="catchButtonImagesChange($event)"
-            (onComponentLoaded)="configureButtonImagesColumns($event)">
-        </eqp-attachments>
-    </div>
-</ng-template>
-
-<!-- FORM PROPRIETÀ CAMPI LOOKUP -->
-<ng-template #lookupFieldFormTemplate>
-    <div class="col-sm-12 col-md-4 mt-2 d-flex align-items-center" [formGroup]="fieldFormGroup">
-        <mat-slide-toggle [(ngModel)]="field.UseAsGetOrDiscard" formControlName="UseAsGetOrDiscard" color="primary"
-            matTooltip="Se true la lookup viene visualizzata in una modale per lo scegli scarta">
-            Usa per scegli o scarta
-        </mat-slide-toggle>
-    </div>
-    <div class="col-sm-12 col-md-4 mt-2" [formGroup]="fieldFormGroup">
-        <mat-form-field matTooltip="Nome dell'entità relazionata">
-            <mat-label> Nome entità </mat-label>
-            <input formControlName="EntitySourceName" required matInput [(ngModel)]="field.EntitySourceName">
-        </mat-form-field>
-    </div>
-    <div class="col-sm-12 mt-2">
-        <div class="row">
-            <div class="col-md-4">
-                <mat-form-field
-                    matTooltip="Elenco di campi ordinato che verrà visualizzato nella lookup (premere invio per confermare)">
-                    <mat-label>
-                        Nomi dei campi (invio per confermare) </mat-label>
-                    <input matInput (keyup)="onMultiSelectInputKeyup($event, 'FieldNames')">
-                </mat-form-field>
-            </div>
-            <div class="col-md-8 d-flex align-items-center">
-                <span class="mr-3">Nomi selezionati:</span>
-                <div class="extension-container" *ngFor="let extension of field.FieldNames; let i = index">
-                    <span>{{extension}}</span>
-                    <mat-icon class="ml-1" (click)="field.FieldNames.splice(i,1)">close
-                    </mat-icon>
-                </div>
-            </div>
-        </div>
-    </div>
-</ng-template>
-
-<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->
-<ng-template #dialogMetadata>
-    <eqp-dynamic-module-add-form-field [field]="selectedMetadata" [availableFields]="availableFields"
-        [indexField]="indexSelectedMetadata" (saveFieldEvent)="onSaveMetadata($event)" [fieldTypesToExclude]="[6,7,10]">
-    </eqp-dynamic-module-add-form-field>
-</ng-template>
-
-<ng-template #buttonImagesKeyValueInputColumn let-row="row" let-col="col">
-    <mat-form-field>
-        <mat-label> {{col.display}} </mat-label>
-        <input matInput [(ngModel)]="row[col.key]" required>
-    </mat-form-field>
-</ng-template>

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

@@ -1,38 +0,0 @@
-.extension-container {
-    display: inline-block;
-    font-size: 15px;
-    border: 1px solid var(--primary);
-    border-radius: 15px;
-    margin-right: 10px;
-    mat-icon {
-        vertical-align: middle;
-        font-size: 15px;
-        height: 15px;
-        width: 15px;
-        color: var(--danger);
-        margin-right: 10px;
-        cursor: pointer;
-    }
-    span {
-        margin-left: 10px;
-    }
-}
-
-.key-value-list-section-title {
-    background: linear-gradient(to right, var(--gray) 0%, rgb(255 255 255) 100%) left bottom #fff no-repeat;
-    background-size: 100% 1px;
-}
-
-.value-pairs-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;
-    }
-}