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

UI: Implement dashboard version control

Browse Source
This commit is contained in:
Igor Kulikov 2022-06-02 14:10:56 +03:00
parent a07583b31d
commit da224c9651
2 changed files with 65 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
View File

@ -81,6 +81,13 @@
(click)="isFullscreen = !isFullscreen">
<mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>
<button [fxShow]="currentDashboardId && isEdit && isTenantAdmin()" mat-icon-button
#versionControlButton
matTooltip="{{'version-control.version-control' | translate}}"
matTooltipPosition="below"
(click)="toggleVersionControl($event, versionControlButton)">
<mat-icon>history</mat-icon>
</button>
<button [fxShow]="currentDashboardId && !isEdit && !isMobileApp && isTenantAdmin() && displayUpdateDashboardImage()" mat-icon-button
matTooltip="{{'dashboard.update-image' | translate}}"
matTooltipPosition="below"

60
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -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,
@ -135,6 +135,10 @@ 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 { 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';
// @dynamic
@Component({
@ -290,6 +294,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
]
};
updateBreadcrumbs = new EventEmitter();
private rxSubscriptions = new Array<Subscription>();
get toolbarOpened(): boolean {
@ -329,6 +335,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,
@ -1392,4 +1400,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();
});
});
});
}
}
}