From bb027cb98733e1d93e7a739e7ea8f7fb7e419142 Mon Sep 17 00:00:00 2001 From: rusikv Date: Thu, 4 Apr 2024 12:31:48 +0300 Subject: [PATCH 1/4] UI: added pattern support for widget title on export --- .../app/modules/home/models/dashboard-component.models.ts | 5 +++-- ui-ngx/src/app/shared/import-export/import-export.service.ts | 2 +- ui-ngx/src/app/shared/models/widget.models.ts | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index b7ccbd76bf..81a5a7c834 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -26,7 +26,7 @@ import { import { WidgetLayout, WidgetLayouts } from '@app/shared/models/dashboard.models'; import { IDashboardWidget, WidgetAction, WidgetContext, WidgetHeaderAction } from './widget-component.models'; import { Timewindow } from '@shared/models/time/time.models'; -import { Observable, of, Subject } from 'rxjs'; +import { Observable, of, Subject, tap } from 'rxjs'; import { convertKeysToCamelCase, formattedDataFormDatasourceData, @@ -440,7 +440,8 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { const title = isDefined(this.widgetContext.widgetTitle) && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title; - this.title$ = this.widgetContext.registerLabelPattern(title, this.title$); + this.title$ = this.widgetContext.registerLabelPattern(title, this.title$).pipe( + tap(value => this.widget.config.titleByPattern = value)); this.titleTooltip = isDefined(this.widgetContext.widgetTitleTooltip) && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip; this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip); diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts index b7d0dd6a25..ea4fd0892c 100644 --- a/ui-ngx/src/app/shared/import-export/import-export.service.ts +++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts @@ -200,7 +200,7 @@ export class ImportExportService { public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget) { const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); - let name = widgetItem.widget.config.title; + let name = widgetItem.widget.config.titleByPattern; name = name.toLowerCase().replace(/\W/g, '_'); this.exportToPc(this.prepareExport(widgetItem), name); } diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index c736ed7404..b76c2322e3 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -726,6 +726,7 @@ export enum WidgetConfigMode { export interface WidgetConfig { configMode?: WidgetConfigMode; title?: string; + titleByPattern?: string; titleFont?: Font; titleColor?: string; titleIcon?: string; From 8dc9b47bb9c47e7204b07a013fd232d36496c4e1 Mon Sep 17 00:00:00 2001 From: rusikv Date: Fri, 17 May 2024 11:08:35 +0300 Subject: [PATCH 2/4] UI: added default widget name to widget export file name --- .../home/components/dashboard/dashboard.component.ts | 9 +++++++-- .../modules/home/models/dashboard-component.models.ts | 5 ++--- .../app/shared/import-export/import-export.service.ts | 8 +++++--- ui-ngx/src/app/shared/models/widget.models.ts | 1 - 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 6cc1ec7dbe..5bfad36151 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -54,7 +54,7 @@ import { IAliasController, IStateController } from '@app/core/api/widget-api.mod import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { MatMenuTrigger } from '@angular/material/menu'; import { SafeStyle } from '@angular/platform-browser'; -import { distinct } from 'rxjs/operators'; +import { distinct, take } from 'rxjs/operators'; import { ResizeObserver } from '@juggle/resize-observer'; import { UtilsService } from '@core/services/utils.service'; import { WidgetComponentAction, WidgetComponentActionType } from '@home/components/widget/widget-container.component'; @@ -436,7 +436,12 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo $event.stopPropagation(); } if (this.isExportActionEnabled && this.callbacks && this.callbacks.onExportWidget) { - this.callbacks.onExportWidget($event, widget.widget); + widget.title$.pipe( + take(1) + ).subscribe((title) => { + widget.widget.config.exportTitle = title; + this.callbacks.onExportWidget($event, widget.widget); + }); } } diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index 81a5a7c834..b7ccbd76bf 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -26,7 +26,7 @@ import { import { WidgetLayout, WidgetLayouts } from '@app/shared/models/dashboard.models'; import { IDashboardWidget, WidgetAction, WidgetContext, WidgetHeaderAction } from './widget-component.models'; import { Timewindow } from '@shared/models/time/time.models'; -import { Observable, of, Subject, tap } from 'rxjs'; +import { Observable, of, Subject } from 'rxjs'; import { convertKeysToCamelCase, formattedDataFormDatasourceData, @@ -440,8 +440,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget { const title = isDefined(this.widgetContext.widgetTitle) && this.widgetContext.widgetTitle.length ? this.widgetContext.widgetTitle : this.widget.config.title; - this.title$ = this.widgetContext.registerLabelPattern(title, this.title$).pipe( - tap(value => this.widget.config.titleByPattern = value)); + this.title$ = this.widgetContext.registerLabelPattern(title, this.title$); this.titleTooltip = isDefined(this.widgetContext.widgetTitleTooltip) && this.widgetContext.widgetTitleTooltip.length ? this.widgetContext.widgetTitleTooltip : this.widget.config.titleTooltip; this.titleTooltip = this.dashboard.utils.customTranslation(this.titleTooltip, this.titleTooltip); diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts index ea4fd0892c..3071f38f74 100644 --- a/ui-ngx/src/app/shared/import-export/import-export.service.ts +++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts @@ -200,9 +200,11 @@ export class ImportExportService { public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget) { const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); - let name = widgetItem.widget.config.titleByPattern; - name = name.toLowerCase().replace(/\W/g, '_'); - this.exportToPc(this.prepareExport(widgetItem), name); + const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn)?.widgetName || + widget.typeFullFqn.split('.').pop(); + let fileName = widgetDefaultName + (isNotEmptyStr(widget.config.exportTitle) ? '_' + widget.config.exportTitle : ''); + fileName = fileName.toLowerCase().replace(/\W/g, '_'); + this.exportToPc(this.prepareExport(widgetItem), fileName); } public importWidget(dashboard: Dashboard, targetState: string, diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index b76c2322e3..c736ed7404 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -726,7 +726,6 @@ export enum WidgetConfigMode { export interface WidgetConfig { configMode?: WidgetConfigMode; title?: string; - titleByPattern?: string; titleFont?: Font; titleColor?: string; titleIcon?: string; From 0434a0b1677ff3b3ac6bb43fae90b44c38efa53d Mon Sep 17 00:00:00 2001 From: rusikv Date: Fri, 17 May 2024 13:43:55 +0300 Subject: [PATCH 3/4] UI: widget export title refactoring --- .../components/dashboard-page/dashboard-page.component.ts | 4 ++-- .../components/dashboard-page/dashboard-page.models.ts | 2 +- .../dashboard-page/layout/dashboard-layout.component.ts | 4 ++-- .../home/components/dashboard/dashboard.component.ts | 5 ++--- .../app/modules/home/models/dashboard-component.models.ts | 2 +- .../src/app/shared/import-export/import-export.service.ts | 7 +++---- 6 files changed, 11 insertions(+), 13 deletions(-) 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 f3d0e2ee15..2fa8ce480d 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 @@ -1343,9 +1343,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC }); } - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetExportTitle) { $event.stopPropagation(); - this.importExport.exportWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget); + this.importExport.exportWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget, widgetExportTitle); } widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index 2f18de2e6e..42c023a3ca 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -49,7 +49,7 @@ export interface IDashboardController { openDashboardState(stateId: string, openRightLayout: boolean); addWidget($event: Event, layoutCtx: DashboardPageLayoutContext); editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetExportTitle: string); removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts index 9b4aee95e5..7a980c0f73 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts @@ -226,8 +226,8 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo this.layoutCtx.dashboardCtrl.editWidget($event, this.layoutCtx, widget); } - onExportWidget($event: Event, widget: Widget): void { - this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget); + onExportWidget($event: Event, widget: Widget, widgetExportTitle: string): void { + this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, widgetExportTitle); } onRemoveWidget($event: Event, widget: Widget): void { diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 5bfad36151..ad248fb0ce 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -438,9 +438,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo if (this.isExportActionEnabled && this.callbacks && this.callbacks.onExportWidget) { widget.title$.pipe( take(1) - ).subscribe((title) => { - widget.widget.config.exportTitle = title; - this.callbacks.onExportWidget($event, widget.widget); + ).subscribe((widgetExportTitle) => { + this.callbacks.onExportWidget($event, widget.widget, widgetExportTitle); }); } } diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index b7ccbd76bf..4f3b9c4724 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -65,7 +65,7 @@ export interface WidgetContextMenuItem extends ContextMenuItem { export interface DashboardCallbacks { onEditWidget?: ($event: Event, widget: Widget) => void; - onExportWidget?: ($event: Event, widget: Widget) => void; + onExportWidget?: ($event: Event, widget: Widget, widgetExportTitle: string) => void; onRemoveWidget?: ($event: Event, widget: Widget) => void; onWidgetMouseDown?: ($event: Event, widget: Widget) => void; onWidgetClicked?: ($event: Event, widget: Widget) => void; diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts index 3071f38f74..3017ba0fca 100644 --- a/ui-ngx/src/app/shared/import-export/import-export.service.ts +++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts @@ -198,11 +198,10 @@ export class ImportExportService { ); } - public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget) { + public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, widgetExportTitle: string) { const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); - const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn)?.widgetName || - widget.typeFullFqn.split('.').pop(); - let fileName = widgetDefaultName + (isNotEmptyStr(widget.config.exportTitle) ? '_' + widget.config.exportTitle : ''); + const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName; + let fileName = widgetDefaultName + (isNotEmptyStr(widgetExportTitle) ? '_' + widgetExportTitle : ''); fileName = fileName.toLowerCase().replace(/\W/g, '_'); this.exportToPc(this.prepareExport(widgetItem), fileName); } From c962ee4ff34608ac215fd5aba2c0d6677648969d Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 17 May 2024 14:39:50 +0300 Subject: [PATCH 4/4] UI: Rename variable and added type --- .../components/dashboard-page/dashboard-page.component.ts | 4 ++-- .../home/components/dashboard-page/dashboard-page.models.ts | 2 +- .../dashboard-page/layout/dashboard-layout.component.ts | 4 ++-- .../modules/home/components/dashboard/dashboard.component.ts | 4 ++-- .../src/app/modules/home/models/dashboard-component.models.ts | 2 +- ui-ngx/src/app/shared/import-export/import-export.service.ts | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) 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 39cfde6908..70022fff1b 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 @@ -1350,9 +1350,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC }); } - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetExportTitle) { + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetTitle: string) { $event.stopPropagation(); - this.importExport.exportWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget, widgetExportTitle); + this.importExport.exportWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget, widgetTitle); } widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index 42c023a3ca..b2ed609c29 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -49,7 +49,7 @@ export interface IDashboardController { openDashboardState(stateId: string, openRightLayout: boolean); addWidget($event: Event, layoutCtx: DashboardPageLayoutContext); editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetExportTitle: string); + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, widgetTitle: string); removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts index 7a980c0f73..36fb4d2427 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts @@ -226,8 +226,8 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo this.layoutCtx.dashboardCtrl.editWidget($event, this.layoutCtx, widget); } - onExportWidget($event: Event, widget: Widget, widgetExportTitle: string): void { - this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, widgetExportTitle); + onExportWidget($event: Event, widget: Widget, widgetTitle: string): void { + this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, widgetTitle); } onRemoveWidget($event: Event, widget: Widget): void { diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index ad248fb0ce..ce968d0e47 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -438,8 +438,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo if (this.isExportActionEnabled && this.callbacks && this.callbacks.onExportWidget) { widget.title$.pipe( take(1) - ).subscribe((widgetExportTitle) => { - this.callbacks.onExportWidget($event, widget.widget, widgetExportTitle); + ).subscribe((widgetTitle) => { + this.callbacks.onExportWidget($event, widget.widget, widgetTitle); }); } } diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts index 4f3b9c4724..d74373f734 100644 --- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts @@ -65,7 +65,7 @@ export interface WidgetContextMenuItem extends ContextMenuItem { export interface DashboardCallbacks { onEditWidget?: ($event: Event, widget: Widget) => void; - onExportWidget?: ($event: Event, widget: Widget, widgetExportTitle: string) => void; + onExportWidget?: ($event: Event, widget: Widget, widgeTitle: string) => void; onRemoveWidget?: ($event: Event, widget: Widget) => void; onWidgetMouseDown?: ($event: Event, widget: Widget) => void; onWidgetClicked?: ($event: Event, widget: Widget) => void; diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts index 3017ba0fca..9902177ebd 100644 --- a/ui-ngx/src/app/shared/import-export/import-export.service.ts +++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts @@ -198,10 +198,10 @@ export class ImportExportService { ); } - public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, widgetExportTitle: string) { + public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, widgetTitle: string) { const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName; - let fileName = widgetDefaultName + (isNotEmptyStr(widgetExportTitle) ? '_' + widgetExportTitle : ''); + let fileName = widgetDefaultName + (isNotEmptyStr(widgetTitle) ? `_${widgetTitle}` : ''); fileName = fileName.toLowerCase().replace(/\W/g, '_'); this.exportToPc(this.prepareExport(widgetItem), fileName); }