@eqproject/eqp-dynamic-module 0.0.5 → 0.0.7

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

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

@@ -0,0 +1,38 @@
+.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;
+    }
+}