dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-08-18 17:19:37 +03:00
parent 35284eacd6
commit fbe973485c
4 changed files with 64 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 utils: UtilsService
private http: HttpClient
) { }
public getAlarm(alarmId: string, config?: RequestConfig): Observable<Alarm> {
@ -109,8 +108,8 @@ export class AlarmService {
defaultHttpOptionsFromConfig(config));
}
public getAlarmTypes(config?: RequestConfig): Observable<Array<EntitySubtype>> {
return this.http.get<Array<EntitySubtype>>('/api/alarm/types', defaultHttpOptionsFromConfig(config));
public getAlarmTypes(pageLink: PageLink, config?: RequestConfig): Observable<PageData<EntitySubtype>> {
return this.http.get<PageData<EntitySubtype>>(`/api/alarm/types${pageLink.toQuery()}`, defaultHttpOptionsFromConfig(config));
}
}

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

@ -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"
[entityType]="entityType.ALARM" formControlName="typeList">
<tb-entity-subtype-list subscriptSizing="dynamic"
formControlName="typeList"
appearance="outline"
[additionalClasses]="['tb-chips', 'flex']"
[entityType]="entityType.ALARM">
</tb-entity-subtype-list>
</div>
<div class="tb-form-row column-xs">

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

@ -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;

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

@ -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 { map, mergeMap, publishReplay, refCount, share } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { Observable, ReplaySubject, Subscription, throwError } from 'rxjs';
import { debounceTime, map, mergeMap, share } from 'rxjs/operators';
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 broadcast: BroadcastService,
private hasPageDataEntitySubTypes = new Set<EntityType>([
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,10 +207,10 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
this.secondaryPlaceholder = this.filledInputPlaceholder;
}
this.filteredEntitySubtypeList = this.entitySubtypeListFormGroup.get('entitySubtype').valueChanges
.pipe(
this.filteredEntitySubtypeList = this.entitySubtypeListFormGroup.get('entitySubtype').valueChanges.pipe(
debounceTime(150),
map(value => value ? value : ''),
mergeMap(name => this.fetchEntitySubtypes(name) ),
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),
refCount()
share({
connector: () => new ReplaySubject(1),
resetOnError: false,
resetOnComplete: false,
resetOnRefCountZero: true,
}),
);
} else {
return throwError(null);