UI: Added in entity-subtype-list.component support entity type alarms

ui-ngx/src/app/core/http/alarm.service.ts

@@ -28,8 +28,8 @@ import {
   AlarmSeverity,
   AlarmStatus
 } from '@shared/models/alarm.models';
-import { UtilsService } from '@core/services/utils.service';
 import { EntitySubtype } from '@shared/models/entity-type.models';
+import { PageLink } from '@shared/models/page/page-link';
 
 @Injectable({
   providedIn: 'root'
@@ -37,8 +37,7 @@ import { EntitySubtype } from '@shared/models/entity-type.models';
 export class AlarmService {
 
   constructor(
-    private http: HttpClient,
+    private http: HttpClient
-    private utils: UtilsService
   ) { }
 
   public getAlarm(alarmId: string, config?: RequestConfig): Observable<Alarm> {
@@ -109,8 +108,8 @@ export class AlarmService {
       defaultHttpOptionsFromConfig(config));
   }
 
-  public getAlarmTypes(config?: RequestConfig): Observable<Array<EntitySubtype>> {
+  public getAlarmTypes(pageLink: PageLink, config?: RequestConfig): Observable<PageData<EntitySubtype>> {
-    return this.http.get<Array<EntitySubtype>>('/api/alarm/types', defaultHttpOptionsFromConfig(config));
+    return this.http.get<PageData<EntitySubtype>>(`/api/alarm/types${pageLink.toQuery()}`, defaultHttpOptionsFromConfig(config));
   }
 
 }

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

@@ -72,10 +72,13 @@
         </mat-chip-option>
       </mat-chip-listbox>
     </div>
-    <div class="tb-form-row" ngClass.xs="filters-row-mobile">
+    <div class="tb-form-row column-xs">
       <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-type-list</div>
-      <tb-entity-subtype-list subscriptSizing="dynamic" appearance="outline" additionalClasses="tb-chips"
+      <tb-entity-subtype-list subscriptSizing="dynamic"
-                              [entityType]="entityType.ALARM" formControlName="typeList">
+                              formControlName="typeList"
+                              appearance="outline"
+                              [additionalClasses]="['tb-chips', 'flex']"
+                              [entityType]="entityType.ALARM">
       </tb-entity-subtype-list>
     </div>
     <div class="tb-form-row column-xs">

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

@@ -37,6 +37,11 @@
   .tb-alarm-filter-config-component {
     flex: 1;
 
+    tb-entity-subtype-list {
+      flex: 1;
+      width: 180px;
+    }
+
     .mat-mdc-chip {
       .mdc-evolution-chip__cell, .mat-mdc-chip-action, .mat-mdc-chip-action-label {
         overflow: hidden;

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

@@ -16,14 +16,12 @@
 
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { Observable, Subscription, throwError } from 'rxjs';
+import { Observable, ReplaySubject, Subscription, throwError } from 'rxjs';
-import { map, mergeMap, publishReplay, refCount, share } from 'rxjs/operators';
+import { debounceTime, map, mergeMap, share } from 'rxjs/operators';
-import { Store } from '@ngrx/store';
-import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { EntitySubtype, EntityType } from '@shared/models/entity-type.models';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { MatChipInputEvent, MatChipGrid } from '@angular/material/chips';
+import { MatChipGrid, MatChipInputEvent } from '@angular/material/chips';
 import { AssetService } from '@core/http/asset.service';
 import { DeviceService } from '@core/http/device.service';
 import { EdgeService } from '@core/http/edge.service';
@@ -31,9 +29,10 @@ import { EntityViewService } from '@core/http/entity-view.service';
 import { BroadcastService } from '@core/services/broadcast.service';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { AlarmService } from '@core/http/alarm.service';
-import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
-import { FloatLabelType } from '@angular/material/form-field';
+import { PageLink } from '@shared/models/page/page-link';
+import { PageData } from '@shared/models/page/page-data';
 
 @Component({
   selector: 'tb-entity-subtype-list',
@@ -102,7 +101,7 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
 
   entitySubtypeList: Array<string> = [];
   filteredEntitySubtypeList: Observable<Array<string>>;
-  entitySubtypes: Observable<Array<string>>;
+  private entitySubtypes: Observable<Array<string>>;
 
   private broadcastSubscription: Subscription;
 
@@ -119,8 +118,11 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
 
   private propagateChange = (v: any) => { };
 
-  constructor(private store: Store<AppState>,
+  private hasPageDataEntitySubTypes = new Set<EntityType>([
-              private broadcast: BroadcastService,
+    EntityType.ALARM
+  ]);
+
+  constructor(private broadcast: BroadcastService,
               public translate: TranslateService,
               private assetService: AssetService,
               private deviceService: DeviceService,
@@ -195,9 +197,6 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
         this.secondaryPlaceholder = '+' + this.translate.instant('alarm.alarm-type');
         this.noSubtypesMathingText = 'alarm.no-alarm-types-matching';
         this.subtypeListEmptyText = 'alarm.alarm-type-list-empty';
-        this.broadcastSubscription = this.broadcast.on('alarmSaved', () => {
-          this.entitySubtypes = null;
-        });
         break;
     }
 
@@ -208,8 +207,8 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
       this.secondaryPlaceholder = this.filledInputPlaceholder;
     }
 
-    this.filteredEntitySubtypeList = this.entitySubtypeListFormGroup.get('entitySubtype').valueChanges
+    this.filteredEntitySubtypeList = this.entitySubtypeListFormGroup.get('entitySubtype').valueChanges.pipe(
-      .pipe(
+      debounceTime(150),
       map(value => value ? value : ''),
       mergeMap(name => this.fetchEntitySubtypes(name)),
       share()
@@ -289,11 +288,16 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     return entitySubtype ? entitySubtype : undefined;
   }
 
-  fetchEntitySubtypes(searchText?: string): Observable<Array<string>> {
+  private fetchEntitySubtypes(searchText?: string): Observable<Array<string>> {
     this.searchText = searchText;
-    return this.getEntitySubtypes().pipe(
+    return this.getEntitySubtypes(searchText).pipe(
       map(subTypes => {
-        let result = subTypes.filter( subType => searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true);
+        let result;
+        if (this.hasPageDataEntitySubTypes.has(this.entityType)) {
+          result = subTypes;
+        } else {
+          result = subTypes.filter(subType => searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true);
+        }
         if (!result.length) {
           result = [searchText];
         }
@@ -302,7 +306,23 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     );
   }
 
-  getEntitySubtypes(): Observable<Array<string>> {
+  private getEntitySubtypes(searchText?: string): Observable<Array<string>> {
+    if (this.hasPageDataEntitySubTypes.has(this.entityType)) {
+      const pageLink = new PageLink(25, 0, searchText);
+      let subTypesPagesObservable: Observable<PageData<EntitySubtype>>;
+      switch (this.entityType) {
+        case EntityType.ALARM:
+          subTypesPagesObservable = this.alarmService.getAlarmTypes(pageLink, {ignoreLoading: true});
+          break;
+      }
+      if (subTypesPagesObservable) {
+        this.entitySubtypes = subTypesPagesObservable.pipe(
+            map(subTypesPage => subTypesPage.data.map(subType => subType.type)),
+        );
+      } else {
+        return throwError(null);
+      }
+    }
     if (!this.entitySubtypes) {
       let subTypesObservable: Observable<Array<EntitySubtype>>;
       switch (this.entityType) {
@@ -318,15 +338,16 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
         case EntityType.ENTITY_VIEW:
           subTypesObservable = this.entityViewService.getEntityViewTypes({ignoreLoading: true});
           break;
-        case EntityType.ALARM:
-          subTypesObservable = this.alarmService.getAlarmTypes({ignoreLoading: true});
-          break;
       }
       if (subTypesObservable) {
         this.entitySubtypes = subTypesObservable.pipe(
           map(subTypes => subTypes.map(subType => subType.type)),
-          publishReplay(1),
+          share({
-          refCount()
+            connector: () => new ReplaySubject(1),
+            resetOnError: false,
+            resetOnComplete: false,
+            resetOnRefCountZero: true,
+          }),
         );
       } else {
         return throwError(null);