Igor Kulikov
3 years ago
16 changed files with 710 additions and 16 deletions
@ -0,0 +1,106 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px"> |
|||
<div class="tb-card-header"> |
|||
<a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)" [options]="[ |
|||
{ |
|||
name: ctx.translate.instant('widgets.recent-dashboards.last'), |
|||
value: 'last' |
|||
}, |
|||
{ |
|||
name: ctx.translate.instant('widgets.recent-dashboards.starred'), |
|||
value: 'starred' |
|||
} |
|||
]"> |
|||
</tb-toggle-header> |
|||
<a *ngIf="authUser.authority === authority.TENANT_ADMIN" fxHide.md |
|||
mat-flat-button color="primary" routerLink="/dashboards" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a> |
|||
</div> |
|||
</div> |
|||
<ng-container *ngIf="userDashboardsInfo; else loading" [ngSwitch]="dashboardsToggle.value"> |
|||
<ng-template [ngSwitchCase]="'last'"> |
|||
<div *ngIf="hasLastVisitedDashboards(); else noLastVisitedDashboards" style="overflow-y: auto;"> |
|||
<table mat-table |
|||
[dataSource]="lastVisitedDashboardsDataSource" matSort |
|||
[matSortActive]="lastVisitedDashboardsPageLink.sortOrder?.property" |
|||
[matSortDirection]="lastVisitedDashboardsPageLink.sortDirection()" matSortDisableClear> |
|||
<ng-container matColumnDef="starred"> |
|||
<mat-header-cell class="star-cell" *matHeaderCellDef> |
|||
</mat-header-cell> |
|||
<mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard"> |
|||
<mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)" |
|||
class="star" [ngClass]="{'starred': lastVisitedDashboard.starred}">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="title"> |
|||
<mat-header-cell class="title" *matHeaderCellDef mat-sort-header> |
|||
{{ 'widgets.recent-dashboards.name' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell class="title" *matCellDef="let lastVisitedDashboard"> |
|||
<a routerLink="/dashboards/{{lastVisitedDashboard.id}}">{{ lastVisitedDashboard.title }}</a> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="lastVisited"> |
|||
<mat-header-cell class="last-visited" *matHeaderCellDef mat-sort-header> |
|||
{{ 'widgets.recent-dashboards.last-viewed' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell class="last-visited" *matCellDef="let lastVisitedDashboard"> |
|||
{{ lastVisitedDashboard.lastVisited | dateAgo:{applyAgo: true} }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row *matHeaderRowDef="lastVisitedDashboardsColumns; sticky: true"></mat-header-row> |
|||
<mat-row *matRowDef="let lastVisitedDashboard; columns: lastVisitedDashboardsColumns;"></mat-row> |
|||
</table> |
|||
</div> |
|||
<ng-template #noLastVisitedDashboards> |
|||
<div class="tb-no-dashboards"> |
|||
<div class="tb-no-last-visited-bg"></div> |
|||
<div class="tb-no-last-visited-dashboards-text">{{ 'widgets.recent-dashboards.no-last-viewed-dashboards' | translate }}</div> |
|||
</div> |
|||
</ng-template> |
|||
</ng-template> |
|||
<ng-template [ngSwitchCase]="'starred'"> |
|||
<div style="overflow-y: auto;"> |
|||
<div class="tb-starred-dashboard-row" *ngFor="let dashboard of userDashboardsInfo?.starred"> |
|||
<div class="tb-cell star-cell"> |
|||
<mat-icon (click)="toggleDashboardStar(dashboard)" |
|||
class="star" [ngClass]="{'starred': dashboard.starred}">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon> |
|||
</div> |
|||
<div class="tb-cell title"> |
|||
<a routerLink="/dashboards/{{dashboard.id}}">{{ dashboard.title }}</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<tb-dashboard-autocomplete class="tb-star-dashboard-autocomplete" |
|||
#starDashboardAutocomplete |
|||
subscriptSizing="dynamic" |
|||
appearance="outline" |
|||
[useIdValue]="false" |
|||
label="" |
|||
placeholder="{{ 'dashboard.select-dashboard' | translate }}" |
|||
[(ngModel)]="starredDashboardValue" (ngModelChange)="onStarDashboard($event)"></tb-dashboard-autocomplete> |
|||
</ng-template> |
|||
</ng-container> |
|||
<ng-template #loading> |
|||
<div class="tb-no-dashboards"> |
|||
<mat-spinner [diameter]="50" mode="indeterminate"></mat-spinner> |
|||
</div> |
|||
</ng-template> |
|||
</div> |
|||
@ -0,0 +1,235 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@import "../../../../../../../scss/constants"; |
|||
|
|||
:host { |
|||
.tb-card-header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.tb-no-dashboards { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.tb-no-last-visited-bg { |
|||
width: 60px; |
|||
height: 60px; |
|||
margin: 10px; |
|||
position: relative; |
|||
&:before { |
|||
content: ""; |
|||
border-radius: 8px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: #305680; |
|||
-webkit-mask-image: url(/assets/home/no_data_bg.svg); |
|||
-webkit-mask-repeat: no-repeat; |
|||
mask-image: url(/assets/home/no_data_bg.svg); |
|||
mask-repeat: no-repeat; |
|||
} |
|||
} |
|||
.tb-no-last-visited-dashboards-text { |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
.tb-starred-dashboard-row { |
|||
height: 40px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
@media #{$mat-md-lg} { |
|||
height: 34px; |
|||
} |
|||
} |
|||
|
|||
.tb-cell { |
|||
box-sizing: content-box; |
|||
&:first-child { |
|||
padding: 0 12px; |
|||
} |
|||
&:nth-child(n+2):nth-last-child(n+2) { |
|||
padding: 0 28px 0 0; |
|||
} |
|||
} |
|||
|
|||
.tb-star-dashboard-autocomplete { |
|||
margin-left: 64px; |
|||
margin-right: 64px; |
|||
@media #{$mat-md-lg} { |
|||
margin-left: 48px; |
|||
margin-right: 48px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.mat-mdc-cell, .mat-mdc-header-cell, .mdc-data-table__row:last-child .mdc-data-table__cell { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.mat-mdc-table { |
|||
.mdc-data-table__row, .mdc-data-table__header-row { |
|||
height: 40px; |
|||
@media #{$mat-md-lg} { |
|||
height: 34px; |
|||
} |
|||
|
|||
&:hover { |
|||
background-color: inherit; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tb-cell:nth-child(n+2):nth-last-child(n+2) { |
|||
padding: 0 28px 0 0; |
|||
} |
|||
|
|||
.mat-mdc-row:not(.mat-row-select) .mat-mdc-cell:nth-child(n+2):nth-last-child(n+2) { |
|||
@media #{$mat-md-lg} { |
|||
padding: 0 12px 0 0; |
|||
} |
|||
} |
|||
|
|||
.mat-mdc-header-cell, .mat-mdc-cell, .tb-cell { |
|||
&.star-cell { |
|||
width: 40px; |
|||
min-width: 40px; |
|||
@media #{$mat-md-lg} { |
|||
width: 24px; |
|||
min-width: 24px; |
|||
max-width: 24px; |
|||
} |
|||
} |
|||
|
|||
&.title { |
|||
width: 100%; |
|||
} |
|||
|
|||
&.last-visited { |
|||
width: 80px; |
|||
@media #{$mat-md-lg} { |
|||
width: 50px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mat-mdc-header-cell { |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.38); |
|||
@media #{$mat-md-lg} { |
|||
font-size: 11px; |
|||
} |
|||
} |
|||
.mat-mdc-cell.title { |
|||
max-width: 0; |
|||
} |
|||
.mat-mdc-cell, .tb-cell { |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
@media #{$mat-md-lg} { |
|||
font-size: 11px; |
|||
line-height: 16px; |
|||
} |
|||
&.title { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
a { |
|||
color: rgba(0, 0, 0, 0.87); |
|||
border-bottom: none; |
|||
&:hover, &:focus { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
} |
|||
&.last-visited { |
|||
cursor: default; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
.star { |
|||
cursor: pointer; |
|||
vertical-align: middle; |
|||
color: rgba(0, 0, 0, 0.12); |
|||
&:hover { |
|||
color: rgba(0, 0, 0, 0.18); |
|||
} |
|||
&.starred { |
|||
color: #FAE205; |
|||
&:hover { |
|||
color: #CDBD2C; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tb-star-dashboard-autocomplete { |
|||
.mat-mdc-form-field { |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
@media #{$mat-md-lg} { |
|||
font-size: 11px; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { |
|||
padding-top: 4px; |
|||
padding-bottom: 4px; |
|||
min-height: 28px; |
|||
@media #{$mat-md-lg} { |
|||
min-height: 24px; |
|||
} |
|||
} |
|||
.mat-mdc-form-field-hint-wrapper { |
|||
height: 0; |
|||
} |
|||
.mdc-text-field--outlined .mdc-notched-outline { |
|||
.mdc-notched-outline__leading, .mdc-notched-outline__trailing { |
|||
border-top-style: dashed; |
|||
border-bottom-style: dashed; |
|||
} |
|||
.mdc-notched-outline__leading { |
|||
border-left-style: dashed; |
|||
} |
|||
.mdc-notched-outline__trailing { |
|||
border-right-style: dashed; |
|||
} |
|||
} |
|||
.mat-mdc-icon-button.mat-mdc-button-base { |
|||
width: 28px; |
|||
height: 28px; |
|||
padding: 2px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,222 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
AfterViewInit, |
|||
ChangeDetectorRef, |
|||
Component, |
|||
Input, |
|||
OnDestroy, |
|||
OnInit, |
|||
QueryList, ViewChild, |
|||
ViewChildren |
|||
} from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
import { BehaviorSubject, Observable, of } from 'rxjs'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { |
|||
AbstractUserDashboardInfo, |
|||
LastVisitedDashboardInfo, StarredDashboardInfo, |
|||
UserDashboardAction, |
|||
UserDashboardsInfo |
|||
} from '@shared/models/user-settings.models'; |
|||
import { UserSettingsService } from '@core/http/user-settings.service'; |
|||
import { CollectionViewer, DataSource } from '@angular/cdk/collections'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { MAX_SAFE_PAGE_SIZE, PageLink } from '@shared/models/page/page-link'; |
|||
import { map, share } from 'rxjs/operators'; |
|||
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
|||
import { MatSort } from '@angular/material/sort'; |
|||
import { DashboardInfo } from '@shared/models/dashboard.models'; |
|||
import { DashboardAutocompleteComponent } from '@shared/components/dashboard-autocomplete.component'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-recent-dashboards-widget', |
|||
templateUrl: './recent-dashboards-widget.component.html', |
|||
styleUrls: ['./home-page-widget.scss', './recent-dashboards-widget.component.scss'] |
|||
}) |
|||
export class RecentDashboardsWidgetComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@ViewChildren(MatSort) lastVisitedDashboardsSort: QueryList<MatSort>; |
|||
|
|||
@ViewChild('starDashboardAutocomplete', {static: false}) |
|||
starDashboardAutocomplete: DashboardAutocompleteComponent; |
|||
|
|||
authority = Authority; |
|||
|
|||
userDashboardsInfo: UserDashboardsInfo; |
|||
authUser = getCurrentAuthUser(this.store); |
|||
|
|||
toggleValue: 'last' | 'starred' = 'last'; |
|||
|
|||
lastVisitedDashboardsColumns = ['starred', 'title', 'lastVisited']; |
|||
lastVisitedDashboardsDataSource: LastVisitedDashboardsDataSource; |
|||
lastVisitedDashboardsPageLink: PageLink; |
|||
|
|||
starredDashboardValue = null; |
|||
|
|||
dirty = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private cd: ChangeDetectorRef, |
|||
private userSettingService: UserSettingsService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.reload(); |
|||
} |
|||
|
|||
reload() { |
|||
this.userDashboardsInfo = null; |
|||
this.cd.markForCheck(); |
|||
(this.authUser.authority !== Authority.SYS_ADMIN ? |
|||
this.userSettingService.getUserDashboardsInfo() : of({last: [], starred: []})).subscribe( |
|||
(userDashboardsInfo) => { |
|||
this.userDashboardsInfo = userDashboardsInfo; |
|||
for (const starredDashboard of this.userDashboardsInfo?.starred) { |
|||
starredDashboard.starred = true; |
|||
} |
|||
this.userDashboardsInfo?.starred.sort((a, b) => a.starredAt - b.starredAt); |
|||
if (this.hasLastVisitedDashboards()) { |
|||
this.initLastVisitedDashboardsDataSource(); |
|||
} |
|||
this.cd.markForCheck(); |
|||
} |
|||
); |
|||
} |
|||
|
|||
toggleValueChange(value: 'last' | 'starred') { |
|||
this.toggleValue = value; |
|||
if (this.dirty) { |
|||
this.dirty = false; |
|||
this.reload(); |
|||
} else { |
|||
if (value === 'last' && this.hasLastVisitedDashboards()) { |
|||
this.initLastVisitedDashboardsDataSource(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private initLastVisitedDashboardsDataSource() { |
|||
this.lastVisitedDashboardsDataSource = new LastVisitedDashboardsDataSource(this.userDashboardsInfo.last); |
|||
const sortOrder: SortOrder = { |
|||
property: 'lastVisited', |
|||
direction: Direction.DESC |
|||
}; |
|||
this.lastVisitedDashboardsPageLink = new PageLink(MAX_SAFE_PAGE_SIZE, 0, null, sortOrder); |
|||
this.lastVisitedDashboardsDataSource.loadData(this.lastVisitedDashboardsPageLink); |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
this.lastVisitedDashboardsSort.changes.subscribe(() => { |
|||
if (this.lastVisitedDashboardsSort.length) { |
|||
this.lastVisitedDashboardsSort.get(0).sortChange.subscribe(() => |
|||
this.updateLastVisitedDashboardsData(this.lastVisitedDashboardsSort.get(0))); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
updateLastVisitedDashboardsData(sort: MatSort) { |
|||
this.lastVisitedDashboardsPageLink.sortOrder.property = sort.active; |
|||
this.lastVisitedDashboardsPageLink.sortOrder.direction = Direction[sort.direction.toUpperCase()]; |
|||
this.lastVisitedDashboardsDataSource.loadData(this.lastVisitedDashboardsPageLink); |
|||
} |
|||
|
|||
hasLastVisitedDashboards(): boolean { |
|||
return !!(this.userDashboardsInfo && this.userDashboardsInfo.last && this.userDashboardsInfo.last.length); |
|||
} |
|||
|
|||
toggleDashboardStar(dashboard: AbstractUserDashboardInfo): void { |
|||
const action: UserDashboardAction = dashboard.starred ? UserDashboardAction.UNSTAR : UserDashboardAction.STAR; |
|||
dashboard.starred = !dashboard.starred; |
|||
this.userSettingService.reportUserDashboardAction(dashboard.id, action, {ignoreLoading: true}).subscribe(); |
|||
this.dirty = true; |
|||
if (this.toggleValue === 'starred') { |
|||
const index = this.userDashboardsInfo.starred.findIndex((d) => d.id === dashboard.id); |
|||
if (index > -1) { |
|||
this.userDashboardsInfo.starred.splice(index, 1); |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
onStarDashboard(dashboard: DashboardInfo) { |
|||
if (dashboard) { |
|||
this.starDashboardAutocomplete.clear(); |
|||
const index = this.userDashboardsInfo.starred.findIndex((d) => d.id === dashboard.id.id); |
|||
if (index === -1) { |
|||
const starredDashboard: StarredDashboardInfo = { |
|||
starredAt: Date.now(), |
|||
id: dashboard.id.id, |
|||
starred: true, |
|||
title: dashboard.title |
|||
}; |
|||
this.userDashboardsInfo.starred.push(starredDashboard); |
|||
this.userSettingService.reportUserDashboardAction(dashboard.id.id, UserDashboardAction.STAR, {ignoreLoading: true}).subscribe(); |
|||
} |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
export class LastVisitedDashboardsDataSource implements DataSource<LastVisitedDashboardInfo> { |
|||
|
|||
private lastVisitedDashboardsSubject = new BehaviorSubject<LastVisitedDashboardInfo[]>([]); |
|||
private pageDataSubject = new BehaviorSubject<PageData<LastVisitedDashboardInfo>>(emptyPageData<LastVisitedDashboardInfo>()); |
|||
|
|||
public pageData$ = this.pageDataSubject.asObservable(); |
|||
|
|||
constructor(private lastVisitedDashboards: Array<LastVisitedDashboardInfo>) { |
|||
} |
|||
|
|||
connect(collectionViewer: CollectionViewer): Observable<LastVisitedDashboardInfo[] | ReadonlyArray<LastVisitedDashboardInfo>> { |
|||
return this.lastVisitedDashboardsSubject.asObservable(); |
|||
} |
|||
|
|||
disconnect(collectionViewer: CollectionViewer): void { |
|||
this.lastVisitedDashboardsSubject.complete(); |
|||
this.pageDataSubject.complete(); |
|||
} |
|||
|
|||
loadData(pageLink: PageLink): void { |
|||
const result = pageLink.filterData(this.lastVisitedDashboards); |
|||
this.lastVisitedDashboardsSubject.next(result.data); |
|||
this.pageDataSubject.next(result); |
|||
} |
|||
|
|||
isEmpty(): Observable<boolean> { |
|||
return this.lastVisitedDashboardsSubject.pipe( |
|||
map((entities) => !entities.length), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
total(): Observable<number> { |
|||
return this.pageDataSubject.pipe( |
|||
map((pageData) => pageData.totalElements), |
|||
share() |
|||
); |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in new issue