minor ui fixes

This commit is contained in:
Diamantis Tziotzios 2024-04-10 11:03:53 +03:00
parent 6068878cd4
commit 8c24740382
2 changed files with 56 additions and 51 deletions

View File

@ -181,7 +181,10 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
} }
stringify(value: any): string { stringify(value: any): string {
return JSON.stringify(value); if (typeof value === 'string' || value instanceof String)
return value as string;
else
return JSON.stringify(value);
} }
isNullOrEmpty(query: string): boolean { isNullOrEmpty(query: string): boolean {
@ -204,7 +207,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
const newValue = this._valueToAssign(item); const newValue = this._valueToAssign(item);
//Update selected items //Update selected items
this._selectedItems.set(JSON.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(newValue) : newValue), item); this._selectedItems.set(this.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(newValue) : newValue), item);
this._setValue(newValue); this._setValue(newValue);
@ -244,7 +247,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
public onBlur($event: MouseEvent) { public onBlur($event: MouseEvent) {
if (this.value != null) { if (this.value != null) {
const inputLabel = this.inputValue; const inputLabel = this.inputValue;
const selectedLabel = this._displayFn(this._selectedItems.get(this.selectedItemKey(this.value))); const selectedLabel = this._displayFn(this._selectedItems.get(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(this.value) : this.value));
if (inputLabel && selectedLabel !== inputLabel) { if (inputLabel && selectedLabel !== inputLabel) {
this.inputValue = selectedLabel; this.inputValue = selectedLabel;
} }
@ -344,7 +347,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
} }
private selectedItemKey(item: any) { private selectedItemKey(item: any) {
return JSON.stringify( return this.stringify(
this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(item) : this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(item) :
this.configuration.valueAssign != null ? this.configuration.valueAssign(item) : item this.configuration.valueAssign != null ? this.configuration.valueAssign(item) : item
) )

View File

@ -313,61 +313,63 @@
</div> </div>
<!-- Static Items --> <!-- Static Items -->
<div class="row" *ngIf="formGroup.get('type').value == externalFetcherSourceType.STATIC"> <div class="col-12" *ngIf="formGroup.get('type').value == externalFetcherSourceType.STATIC">
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.STATIC-ITEMS' | translate}}</h3> <div class="row">
<div class="col-12"> <h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.STATIC-ITEMS' | translate}}</h3>
<div *ngFor="let staticItem of formGroup.get('items').controls; let staticIndex=index;" class="row mb-3"> <div class="col-12">
<div class="col-12"> <div *ngFor="let staticItem of formGroup.get('items').controls; let staticIndex=index;" class="row mb-3">
<mat-card-header> <div class="col-12">
<div class="row mb-3 d-flex align-items-center"> <mat-card-header>
<div class="col-auto d-flex"> <div class="row mb-3 d-flex align-items-center">
<h4 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.STATIC-ITEM' | translate}} {{staticIndex + 1}}</h4> <div class="col-auto d-flex">
<h4 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.STATIC-ITEM' | translate}} {{staticIndex + 1}}</h4>
</div>
</div> </div>
</div> <div class="col-auto d-flex">
<div class="col-auto d-flex"> <button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-STATIC-ITEM' | translate}}" (click)="removeStaticItem(staticIndex)" [disabled]="formGroup.disabled">
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-STATIC-ITEM' | translate}}" (click)="removeStaticItem(staticIndex)" [disabled]="formGroup.disabled"> <mat-icon>delete</mat-icon>
<mat-icon>delete</mat-icon> </button>
</button> </div>
</div> </mat-card-header>
</mat-card-header> <mat-card-content>
<mat-card-content> <!-- Static Options -->
<!-- Static Options --> <div *ngFor="let option of staticItem.get('options').controls; let optionIndex=index;" class="row">
<div *ngFor="let option of staticItem.get('options').controls; let optionIndex=index;" class="row"> <div class="col-12">
<div class="col-12"> <div class="row mb d-flex align-items-center">
<div class="row mb d-flex align-items-center"> <div class="col-auto d-flex">
<div class="col-auto d-flex"> <span>{{optionIndex + 1}}</span>
<span>{{optionIndex + 1}}</span> </div>
</div> <div class="col">
<div class="col"> <div class="row">
<div class="row"> <div class="col-6">
<div class="col-6"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <input matInput type="text" [readonly]="option.get('code').disabled" name="code" [formControl]="option.get('code')">
<input matInput type="text" [readonly]="option.get('code').disabled" name="code" [formControl]="option.get('code')"> <mat-error *ngIf="option.get('code').hasError('backendError')">{{option.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="option.get('code').hasError('backendError')">{{option.get('code').getError('backendError').message}}</mat-error> <mat-error *ngIf="option.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="option.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-6">
<div class="col-6"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <input matInput type="text" name="value" [formControl]="option.get('value')">
<input matInput type="text" name="value" [formControl]="option.get('value')"> <mat-error *ngIf="option.get('value').hasError('backendError')">{{option.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="option.get('value').hasError('backendError')">{{option.get('value').getError('backendError').message}}</mat-error> <mat-error *ngIf="option.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="option.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </mat-card-content>
</mat-card-content> </div>
</div> </div>
<button mat-button class="action-btn" type="button" (click)="addStaticItem()" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
</div> </div>
<button mat-button class="action-btn" type="button" (click)="addStaticItem()" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button> <mat-error *ngIf="formGroup.get('items').dirty && formGroup.get('items').hasError('required')">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.STATIC-ITEMS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('items').hasError('backendError')">{{formGroup.get('items').getError('backendError').message}}</mat-error>
</div> </div>
<mat-error *ngIf="formGroup.get('items').dirty && formGroup.get('items').hasError('required')">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.STATIC-ITEMS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('items').hasError('backendError')">{{formGroup.get('items').getError('backendError').message}}</mat-error>
</div> </div>
</div> </div>