Merge pull request #9511 from ArtemDzhereleiko/AD/bug-fix/alarm-panel/alarm-type-list

Fixed alarm type list width and empty option

ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.scss

@@ -40,6 +40,9 @@
     tb-entity-subtype-list {
       flex: 1;
       width: 180px;
+      .mdc-evolution-chip-set__chips {
+        width: 100%;
+      }
     }
 
     .mat-mdc-chip {

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html

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

ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts

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