From b3b97010764ae2e79684c49f219ed62d203bd3ea Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 3 Mar 2021 18:41:01 +0200 Subject: [PATCH] UI: Added search widget --- .../dashboard-page.component.html | 3 +- .../dashboard-page.component.ts | 5 +- .../dashboard-widget-select.component.html | 50 +++++----- .../dashboard-widget-select.component.ts | 99 ++++++++----------- ui-ngx/src/app/shared/models/widget.models.ts | 17 ++-- .../assets/locale/locale.constant-en_US.json | 3 +- 6 files changed, 85 insertions(+), 92 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 7929876f50..1fdc185b6c 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -253,10 +253,9 @@ (backStateDetails)="widgetBundleSelected(null)">
-
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 6332a00d7b..19c93d0309 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -58,7 +58,7 @@ import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; import { AuthUser } from '@shared/models/user.model'; import { getCurrentAuthState } from '@core/auth/auth.selectors'; -import { Widget, WidgetConfig, WidgetPosition, widgetTypesData } from '@app/shared/models/widget.models'; +import { Widget, WidgetConfig, WidgetInfo, WidgetPosition, widgetTypesData } from '@app/shared/models/widget.models'; import { environment as env } from '@env/environment'; import { Authority } from '@shared/models/authority.enum'; import { DialogService } from '@core/services/dialog.service'; @@ -857,7 +857,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } } - addWidgetFromType(widget: Widget) { + addWidgetFromType(widget: WidgetInfo) { this.onAddWidgetClosed(); this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe( (widgetTypeInfo) => { @@ -1121,5 +1121,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC widgetBundleSelected(bundle: WidgetsBundle){ this.widgetsBundle = bundle; + this.searchBundle = ''; } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html index e118594544..1e68d62d22 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html @@ -16,9 +16,9 @@ -->
-
-
-
+
+
+
{{ widget.title }} @@ -26,32 +26,36 @@
{{widget.title}} {{ 'widget.' + widget.type | translate }} - + {{ widget.description }}
+ + widgets-bundle.empty +
- widgets-bundle.empty -
-
- -
- {{ widgetsBundle.title }} -
-
- {{ widgetsBundle.title }} - widgets-bundle.system - - {{ widgetsBundle.description }} - -
- + +
+
+ +
+ {{ widgetsBundle.title }} +
+
+ {{ widgetsBundle.title }} + widgets-bundle.system + + {{ widgetsBundle.description }} + +
+ +
-
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts index 0a92a375a5..ae0effca12 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts @@ -14,14 +14,14 @@ /// limitations under the License. /// -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; import { IAliasController } from '@core/api/widget-api.models'; import { NULL_UUID } from '@shared/models/id/has-uuid'; import { WidgetService } from '@core/http/widget.service'; -import { Widget } from '@shared/models/widget.models'; +import { WidgetInfo } from '@shared/models/widget.models'; import { toWidgetInfo } from '@home/models/widget-component.models'; -import { distinctUntilChanged, map, mergeMap, publishReplay, refCount, share } from 'rxjs/operators'; +import { distinctUntilChanged, map, publishReplay, refCount, switchMap } from 'rxjs/operators'; import { BehaviorSubject, Observable, of } from 'rxjs'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { isDefinedAndNotNull } from '@core/utils'; @@ -31,12 +31,24 @@ import { isDefinedAndNotNull } from '@core/utils'; templateUrl: './dashboard-widget-select.component.html', styleUrls: ['./dashboard-widget-select.component.scss'] }) -export class DashboardWidgetSelectComponent implements OnInit, OnChanges { +export class DashboardWidgetSelectComponent implements OnInit { private search$ = new BehaviorSubject(''); + private widgetsTypes: Observable>; + private widgetsBundleValue: WidgetsBundle; + + widgets$: Observable>; + widgetsBundles$: Observable>; @Input() - widgetsBundle: WidgetsBundle; + set widgetsBundle(widgetBundle: WidgetsBundle) { + this.widgetsTypes = null; + this.widgetsBundleValue = widgetBundle; + } + + get widgetsBundle(): WidgetsBundle { + return this.widgetsBundleValue; + } @Input() aliasController: IAliasController; @@ -47,17 +59,11 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges { } @Output() - widgetSelected: EventEmitter = new EventEmitter(); + widgetSelected: EventEmitter = new EventEmitter(); @Output() widgetsBundleSelected: EventEmitter = new EventEmitter(); - widgets: Array = []; - - widgetsBundles$: Observable>; - - widgets$: Observable>; - constructor(private widgetsService: WidgetService, private sanitizer: DomSanitizer) { } @@ -65,66 +71,45 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges { ngOnInit(): void { this.widgetsBundles$ = this.search$.asObservable().pipe( distinctUntilChanged(), - mergeMap(search => this.fetchWidgetBundle(search)) + switchMap(search => this.fetchWidgetBundle(search)) ); this.widgets$ = this.search$.asObservable().pipe( distinctUntilChanged(), - mergeMap(search => this.fetchWidget(search)) + switchMap(search => this.fetchWidget(search)) ); } - ngOnChanges(changes: SimpleChanges): void { - for (const propName of Object.keys(changes)) { - const change = changes[propName]; - if (change.currentValue !== change.previousValue && (change.currentValue || change.currentValue === null)) { - if (propName === 'widgetsBundle') { - this.loadLibrary(); - } - } - } - } - - private loadLibrary() { - this.widgets.length = 0; - if (this.widgetsBundle !== null) { - const bundleAlias = this.widgetsBundle.alias; - const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; - this.widgetsService.getBundleWidgetTypes(bundleAlias, - isSystem).subscribe( - (types) => { - types = types.sort((a, b) => b.createdTime - a.createdTime); - let top = 0; - types.forEach((type) => { + private getWidgets(): Observable> { + if (!this.widgetsTypes) { + if (this.widgetsBundle !== null) { + const bundleAlias = this.widgetsBundle.alias; + const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; + this.widgetsTypes = this.widgetsService.getBundleWidgetTypes(bundleAlias, isSystem).pipe( + map(widgets => widgets.sort((a, b) => b.createdTime - a.createdTime)), + map(widgets => widgets.map((type) => { const widgetTypeInfo = toWidgetInfo(type); - const widget: Widget = { - typeId: type.id, + const widget: WidgetInfo = { isSystemType: isSystem, bundleAlias, typeAlias: widgetTypeInfo.alias, type: widgetTypeInfo.type, title: widgetTypeInfo.widgetName, image: widgetTypeInfo.image, - description: widgetTypeInfo.description, - sizeX: widgetTypeInfo.sizeX, - sizeY: widgetTypeInfo.sizeY, - row: top, - col: 0, - config: JSON.parse(widgetTypeInfo.defaultConfig) + description: widgetTypeInfo.description }; - widget.config.title = widgetTypeInfo.widgetName; - this.widgets.push(widget); - top += widget.sizeY; - }); - } - ); + return widget; + })), + publishReplay(1), + refCount() + ); + } else { + this.widgetsTypes = of([]); + } } + return this.widgetsTypes; } - hasWidgetTypes(): boolean { - return this.widgets.length > 0; - } - - onWidgetClicked($event: Event, widget: Widget): void { + onWidgetClicked($event: Event, widget: WidgetInfo): void { this.widgetSelected.emit(widget); } @@ -164,8 +149,8 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges { ); } - private fetchWidget(search: string): Observable> { - return of(this.widgets).pipe( + private fetchWidget(search: string): Observable> { + return this.getWidgets().pipe( map(widgets => search ? widgets.filter( widget => ( widget.title?.toLowerCase().includes(search.toLowerCase()) || diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 7c3c2abe75..4ee0b3902c 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -401,21 +401,24 @@ export interface WidgetConfig { [key: string]: any; } -export interface Widget { - id?: string; +export interface Widget extends WidgetInfo{ typeId?: WidgetTypeId; + sizeX: number; + sizeY: number; + row: number; + col: number; + config: WidgetConfig; +} + +export interface WidgetInfo { + id?: string; isSystemType: boolean; bundleAlias: string; typeAlias: string; type: widgetType; title: string; - sizeX: number; - sizeY: number; - row: number; - col: number; image: string; description: string; - config: WidgetConfig; } export interface GroupInfo { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 7ac7697aa4..4c1b586395 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2264,7 +2264,8 @@ "export": "Export widget", "no-data": "No data to display on widget", "data-overflow": "Widget displays {{count}} out of {{total}} entities", - "alarm-data-overflow": "Widget displays alarms for {{allowedEntities}} (maximum allowed) entities out of {{totalEntities}} entities" + "alarm-data-overflow": "Widget displays alarms for {{allowedEntities}} (maximum allowed) entities out of {{totalEntities}} entities", + "search": "Search widget" }, "widget-action": { "header-button": "Widget header button",