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 366679cba8..a8acb51291 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 @@ -17,13 +17,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, - Component, ElementRef, HostBinding, + Component, ElementRef, EventEmitter, HostBinding, Inject, Injector, Input, NgZone, OnDestroy, - OnInit, Optional, + OnInit, Optional, Renderer2, StaticProvider, ViewChild, ViewContainerRef, @@ -136,7 +136,11 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import cssjs from '@core/css/css'; import { DOCUMENT } from '@angular/common'; import { IAliasController } from '@core/api/widget-api.models'; -import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { MatButton } from '@angular/material/button'; +import { VersionControlComponent } from '@home/components/vc/version-control.component'; +import { TbPopoverService } from '@shared/components/popover.service'; +import { tap } from 'rxjs/operators'; +import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; // @dynamic @Component({ @@ -292,6 +296,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC ] }; + updateBreadcrumbs = new EventEmitter(); + private rxSubscriptions = new Array(); get toolbarOpened(): boolean { @@ -331,6 +337,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC private fb: FormBuilder, private dialog: MatDialog, private translate: TranslateService, + private popoverService: TbPopoverService, + private renderer: Renderer2, private ngZone: NgZone, @Optional() @Inject('embeddedValue') private embeddedValue, private overlay: Overlay, @@ -653,15 +661,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public mainLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) { + if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { return '100%'; } else { - return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LayoutType.MAIN) : '100%'; + return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; } } public mainLayoutHeight(): string { - if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) { + if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') { return '100%'; } else { return '0px'; @@ -669,10 +677,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public rightLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) { + if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { return '100%'; } else { - return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT); + return this.isMobile ? '100%' : this.calculateWidth('right'); } } @@ -689,7 +697,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } if (layoutDimension) { if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { - if (layout === LayoutType.RIGHT) { + if (layout === 'right') { return (100 - layoutDimension.leftWidthPercentage) + '%'; } else { return layoutDimension.leftWidthPercentage + '%'; @@ -1432,4 +1440,52 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } }); } + + toggleVersionControl($event: Event, versionControlButton: MatButton) { + if ($event) { + $event.stopPropagation(); + } + const trigger = versionControlButton._elementRef.nativeElement; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + const versionControlPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, VersionControlComponent, 'leftTop', true, null, + { + detailsMode: true, + active: true, + singleEntityMode: true, + externalEntityId: this.dashboard.externalId || this.dashboard.id, + entityId: this.dashboard.id, + entityName: this.dashboard.name, + onBeforeCreateVersion: () => { + return this.dashboardService.saveDashboard(this.dashboard).pipe( + tap((dashboard) => { + this.dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard); + this.prevDashboard = deepClone(this.dashboard); + }) + ); + } + }, {}, {}, {}, true); + versionControlPopover.tbComponentRef.instance.popoverComponent = versionControlPopover; + versionControlPopover.tbComponentRef.instance.versionRestored.subscribe(() => { + this.dashboardService.getDashboard(this.currentDashboardId).subscribe((dashboard) => { + dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard); + const data = { + dashboard, + widgetEditMode: false, + currentDashboardId: this.currentDashboardId + } as any; + this.init(data); + this.dashboardCtx.stateController.cleanupPreservedStates(); + this.dashboardCtx.stateController.resetState(); + this.setEditMode(true, false); + this.updateBreadcrumbs.emit(); + this.ngZone.run(() => { + this.cd.detectChanges(); + }); + }); + }); + } + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts index 49ff9052c2..768d300934 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts @@ -28,8 +28,3 @@ export enum LayoutWidthType { FIXED = "fixed" } -export enum LayoutType { - MAIN = "main", - RIGHT = "right", - LEFT = "left" -} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 8ac16e2bb3..a4923cd305 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -38,30 +38,31 @@
-
+
+ style="width: 100%;" + [fxShow]="layoutsFormGroup.get('right').value"> @@ -72,9 +73,8 @@ {{ 'layout.fixed-width' | translate }} -
-
+
-
-
+
- + {{ 'layout.left-width' | translate }} + + {{ 'layout.left-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} + {{ 'layout.right-width' | translate }} @@ -108,6 +116,15 @@ step="1" min="10" max="90"> + + {{ 'layout.right-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} +
@@ -115,8 +132,9 @@
-
+
+ max="1700"> + + {{ 'layout.layout-fixed-width-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 1700 } }} + + + {{ 'layout.value-min-error' | translate: { min: 150 } }} +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 32cf52a917..b3cf784fc5 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, Inject, OnInit, SkipSelf} from '@angular/core'; +import { Component, Inject, OnInit, SkipSelf} from '@angular/core'; import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; @@ -31,7 +31,8 @@ import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { Subscription } from "rxjs"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -52,7 +53,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent; submitted = false; @@ -65,19 +66,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent this.layoutControlChange('rightWidthPercentage', value)); - this.layoutsFormGroup.get('rightWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); + const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges + .subscribe((value) => this.layoutControlChange('rightWidthPercentage', value)); + const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges + .subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); + this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub]; } ngOnInit(): void { } + ngOnDestroy(): void { + for (let subscription of this.subscriptions) { + subscription.unsubscribe(); + } + } + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const originalErrorState = this.errorStateMatcher.isErrorState(control, form); const customErrorState = !!(control && control.invalid && this.submitted); @@ -143,7 +152,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent{ modified, plural, 0 {No entities} 1 {1 entity} other {# entities} } modified.
{ removed, plural, 0 {No entities} 1 {1 entity} other {# entities} } removed.", + "remove-other-entities": "Remove other entities", + "find-existing-entity-by-name": "Find existing entity by name", + "restore-entities-from-version": "Restore entities from version '{{versionName}}'", + "restoring-entities-from-version": "Restoring entities... Please wait", + "no-entities-restored": "No entities restored", + "created": "{{created}} created", + "updated": "{{updated}} updated", + "deleted": "{{deleted}} deleted", + "remove-other-entities-confirm-text": "Be careful! This will permanently delete all current entities
not present in the version you want to restore.

Please type remove other entities to confirm.", + "auto-commit-to-branch": "auto-commit to {{ branch }} branch", + "default-create-entity-version-name": "{{entityName}} update", + "sync-strategy-merge-hint": "Creates or updates selected entities in the repository. All other repository entities are not modified.", + "sync-strategy-overwrite-hint": "Creates or updates selected entities in the repository. All other repository entities are deleted.", + "device-credentials-conflict": "Failed to load the device with external id {{entityId}}
due to the same credentials are already present in the database for another device.
Please consider disabling the load credentials setting in the restore form.", + "missing-referenced-entity": "Failed to load the {{sourceEntityTypeName}} with external id {{sourceEntityId}}
because it references missing {{targetEntityTypeName}} with id {{targetEntityId}}.", + "runtime-failed": "Failed: {{message}}" + }, "widget": { "widget-library": "Widgets Library", "widget-bundle": "Widgets Bundle", @@ -4235,6 +4384,7 @@ "default-map-zoom-level": "Default map zoom level (0 - 20)", "default-map-center-position": "Default map center position (0,0)", "disable-scroll-zooming": "Disable scroll zooming", + "disable-double-click-zooming": "Disable double click zooming", "disable-zoom-control-buttons": "Disable zoom control buttons", "fit-map-bounds": "Fit map bounds to cover all markers", "use-default-map-center-position": "Use default map center position",