UI: Refactoring entity subtype list

This commit is contained in:
Artem Dzhereleiko 2023-11-01 12:28:24 +02:00
parent 95f37ee61b
commit 900bb9a57c
2 changed files with 8 additions and 6 deletions

View File

@ -24,7 +24,7 @@
*ngFor="let entitySubtype of entitySubtypeList" *ngFor="let entitySubtype of entitySubtypeList"
[removable]="!disabled" [removable]="!disabled"
(removed)="remove(entitySubtype)"> (removed)="remove(entitySubtype)">
{{entitySubtype}} {{customTranslate(entitySubtype)}}
<mat-icon matChipRemove *ngIf="!disabled">close</mat-icon> <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
</mat-chip-row> </mat-chip-row>
<input matInput type="text" placeholder="{{ !disabled ? ((!entitySubtypeList || !entitySubtypeList.length) ? placeholder : secondaryPlaceholder) : '' }}" <input matInput type="text" placeholder="{{ !disabled ? ((!entitySubtypeList || !entitySubtypeList.length) ? placeholder : secondaryPlaceholder) : '' }}"
@ -33,6 +33,7 @@
(focusin)="onFocus()" (focusin)="onFocus()"
formControlName="entitySubtype" formControlName="entitySubtype"
matAutocompleteOrigin matAutocompleteOrigin
matChipInputAddOnBlur
#origin="matAutocompleteOrigin" #origin="matAutocompleteOrigin"
[matAutocompleteConnectedTo]="origin" [matAutocompleteConnectedTo]="origin"
[matAutocomplete]="entitySubtypeAutocomplete" [matAutocomplete]="entitySubtypeAutocomplete"
@ -47,11 +48,6 @@
<mat-option *ngFor="let entitySubtype of filteredEntitySubtypeList | async" [value]="entitySubtype"> <mat-option *ngFor="let entitySubtype of filteredEntitySubtypeList | async" [value]="entitySubtype">
<span [innerHTML]="entitySubtype | highlight:searchText"></span> <span [innerHTML]="entitySubtype | highlight:searchText"></span>
</mat-option> </mat-option>
<mat-option *ngIf="!(filteredEntitySubtypeList | async)?.length" [value]="null">
<span>
{{ translate.get(noSubtypesMathingText, {entitySubtype: searchText}) | async }}
</span>
</mat-option>
</mat-autocomplete> </mat-autocomplete>
<div matSuffix> <div matSuffix>
<ng-content select="[matSuffix]"></ng-content> <ng-content select="[matSuffix]"></ng-content>

View File

@ -33,6 +33,7 @@ import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angula
import { coerceArray, coerceBoolean } from '@shared/decorators/coercion'; import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
import { PageLink } from '@shared/models/page/page-link'; import { PageLink } from '@shared/models/page/page-link';
import { PageData } from '@shared/models/page/page-data'; import { PageData } from '@shared/models/page/page-data';
import { UtilsService } from '@core/services/utils.service';
@Component({ @Component({
selector: 'tb-entity-subtype-list', selector: 'tb-entity-subtype-list',
@ -129,6 +130,7 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
private edgeService: EdgeService, private edgeService: EdgeService,
private entityViewService: EntityViewService, private entityViewService: EntityViewService,
private alarmService: AlarmService, private alarmService: AlarmService,
private utils: UtilsService,
private fb: FormBuilder) { private fb: FormBuilder) {
this.entitySubtypeListFormGroup = this.fb.group({ this.entitySubtypeListFormGroup = this.fb.group({
entitySubtypeList: [this.entitySubtypeList, this.required ? [Validators.required] : []], entitySubtypeList: [this.entitySubtypeList, this.required ? [Validators.required] : []],
@ -372,4 +374,8 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
}, 0); }, 0);
} }
customTranslate(entity: string) {
return this.utils.customTranslation(entity, entity);
}
} }