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

UI: Add notification popover loadings state

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-09-14 15:20:07 +03:00
parent cf285e25ad
commit 1a272d2595
4 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
View File

@ -24,7 +24,8 @@
</button> </button>
</section> </section>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto"> <ng-container *ngIf="loadNotification; else loadingNotification">
<div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
<section style="min-height: 100px; overflow: auto; padding: 6px 0;"> <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
<div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById"> <div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">
<tb-notification [notification]="notification" <tb-notification [notification]="notification"
@ -34,14 +35,21 @@
<mat-divider *ngIf="!last" style="margin: 4px"></mat-divider> <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
</div> </div>
</section> </section>
</div> </div>
<mat-divider *ngIf="(notifications$ | async).length"></mat-divider> <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
<section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length"> <section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
<button fxFlex mat-button color="primary" (click)="viewAll($event)"> <button fxFlex mat-button color="primary" (click)="viewAll($event)">
{{ 'notification.view-all' | translate }} {{ 'notification.view-all' | translate }}
</button> </button>
</section> </section>
</ng-container>
<ng-template #emptyNotification> <ng-template #emptyNotification>
<img src="assets/notification-bell.svg" alt="empty notification" style="margin: 20px 24%"> <img src="assets/notification-bell.svg" alt="empty notification" style="margin: 20px 24%">
<span style="text-align: center; margin-bottom: 12px" translate>notification.no-notifications-yet</span> <span style="text-align: center; margin-bottom: 12px" translate>notification.no-notifications-yet</span>
</ng-template> </ng-template>
<ng-template #loadingNotification>
<div class="tb-no-data-available" style="margin: 20px; gap: 16px;">
<mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
<div class="tb-no-data-text" translate>notification.loading-notifications</div>
</div>
</ng-template>

10
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
View File

@ -22,7 +22,7 @@ import { AppState } from '@core/core.state';
import { Notification, NotificationRequest } from '@shared/models/notification.models'; import { Notification, NotificationRequest } from '@shared/models/notification.models';
import { NotificationWebsocketService } from '@core/ws/notification-websocket.service'; import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs'; import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs';
import { share, tap } from 'rxjs/operators'; import { map, share, tap } from 'rxjs/operators';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models'; import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models';
@ -46,6 +46,7 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
private notificationCountSubscriber: Subscription; private notificationCountSubscriber: Subscription;
notifications$: Observable<Notification[]>; notifications$: Observable<Notification[]>;
loadNotification = false;
constructor(protected store: Store<AppState>, constructor(protected store: Store<AppState>,
private notificationWsService: NotificationWebsocketService, private notificationWsService: NotificationWebsocketService,
@ -58,6 +59,13 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
ngOnInit() { ngOnInit() {
this.notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6); this.notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6);
this.notifications$ = this.notificationSubscriber.notifications$.pipe( this.notifications$ = this.notificationSubscriber.notifications$.pipe(
map(value => {
if (Array.isArray(value)) {
this.loadNotification = true;
return value;
}
return [];
}),
share({ share({
connector: () => new ReplaySubject(1) connector: () => new ReplaySubject(1)
}), }),

2
ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts
View File

@ -52,7 +52,7 @@ export class NotificationSubscriber extends WsSubscriber {
cmdUpdateType: undefined, cmdUpdateType: undefined,
errorCode: 0, errorCode: 0,
errorMsg: '', errorMsg: '',
notifications: [], notifications: null,
totalUnreadCount: 0 totalUnreadCount: 0
}); });

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3201,6 +3201,7 @@
"dashboard": "Open dashboard", "dashboard": "Open dashboard",
"link": "Open URL link" "link": "Open URL link"
}, },
"loading-notifications": "Loading notifications...",
"management": "Notification management", "management": "Notification management",
"mark-all-as-read": "Mark all as read", "mark-all-as-read": "Mark all as read",
"mark-as-read": "Mark as read", "mark-as-read": "Mark as read",