diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.scss b/ui-ngx/src/app/shared/components/snack-bar-component.scss
index 054937fb45..6ef4191efb 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.scss
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.scss
@@ -33,6 +33,9 @@
&.info-toast {
background: #323232;
}
+ &.warn-toast {
+ background: #dc6d1b;
+ }
&.error-toast {
background: #800000;
}
diff --git a/ui-ngx/src/app/shared/components/toast.directive.ts b/ui-ngx/src/app/shared/components/toast.directive.ts
index a8b304a16f..1b6c1cd6d8 100644
--- a/ui-ngx/src/app/shared/components/toast.directive.ts
+++ b/ui-ngx/src/app/shared/components/toast.directive.ts
@@ -15,27 +15,27 @@
///
import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
+ AfterViewInit, ChangeDetectorRef,
+ Component, ComponentRef,
Directive,
ElementRef,
Inject,
Input,
NgZone,
- OnDestroy,
+ OnDestroy, Optional,
ViewChild,
ViewContainerRef
} from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
import { NotificationMessage } from '@app/core/notification/notification.models';
-import { onParentScrollOrWindowResize } from '@app/core/utils';
import { Subscription } from 'rxjs';
import { NotificationService } from '@app/core/services/notification.service';
import { BreakpointObserver } from '@angular/cdk/layout';
import { MediaBreakpoints } from '@shared/models/constants';
import { MatButton } from '@angular/material/button';
import Timeout = NodeJS.Timeout;
+import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@Directive({
selector: '[tb-toast]'
@@ -48,17 +48,21 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
private notificationSubscription: Subscription = null;
private hideNotificationSubscription: Subscription = null;
- private snackBarRef: MatSnackBarRef
= null;
+ private snackBarRef: MatSnackBarRef = null;
+ private overlayRef: OverlayRef;
+ private toastComponentRef: ComponentRef;
private currentMessage: NotificationMessage = null;
private dismissTimeout: Timeout = null;
- constructor(public elementRef: ElementRef,
- public viewContainerRef: ViewContainerRef,
+ constructor(private elementRef: ElementRef,
+ private viewContainerRef: ViewContainerRef,
private notificationService: NotificationService,
- public snackBar: MatSnackBar,
+ private overlay: Overlay,
+ private snackBar: MatSnackBar,
private ngZone: NgZone,
- private breakpointObserver: BreakpointObserver) {
+ private breakpointObserver: BreakpointObserver,
+ private cd: ChangeDetectorRef) {
}
ngAfterViewInit(): void {
@@ -66,45 +70,12 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
(notificationMessage) => {
if (this.shouldDisplayMessage(notificationMessage)) {
this.currentMessage = notificationMessage;
- const data = {
- parent: this.elementRef,
- notification: notificationMessage
- };
const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
- const config: MatSnackBarConfig = {
- horizontalPosition: notificationMessage.horizontalPosition || 'left',
- verticalPosition: !isGtSm ? 'bottom' : (notificationMessage.verticalPosition || 'top'),
- viewContainerRef: this.viewContainerRef,
- duration: notificationMessage.duration,
- panelClass: notificationMessage.panelClass,
- data
- };
- this.ngZone.run(() => {
- if (this.snackBarRef) {
- this.snackBarRef.dismiss();
- }
- this.snackBarRef = this.snackBar.openFromComponent(TbSnackBarComponent, config);
- if (notificationMessage.duration && notificationMessage.duration > 0 && notificationMessage.forceDismiss) {
- if (this.dismissTimeout !== null) {
- clearTimeout(this.dismissTimeout);
- this.dismissTimeout = null;
- }
- this.dismissTimeout = setTimeout(() => {
- if (this.snackBarRef) {
- this.snackBarRef.instance.actionButton._elementRef.nativeElement.click();
- }
- this.dismissTimeout = null;
- }, notificationMessage.duration);
- }
- this.snackBarRef.afterDismissed().subscribe(() => {
- if (this.dismissTimeout !== null) {
- clearTimeout(this.dismissTimeout);
- this.dismissTimeout = null;
- }
- this.snackBarRef = null;
- this.currentMessage = null;
- });
- });
+ if (isGtSm) {
+ this.showToastPanel(notificationMessage);
+ } else {
+ this.showSnackBar(notificationMessage);
+ }
}
}
);
@@ -118,6 +89,9 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
if (this.snackBarRef) {
this.snackBarRef.dismiss();
}
+ if (this.toastComponentRef) {
+ this.toastComponentRef.instance.actionButton._elementRef.nativeElement.click();
+ }
});
}
}
@@ -125,6 +99,127 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
);
}
+ private showToastPanel(notificationMessage: NotificationMessage) {
+ this.ngZone.run(() => {
+ if (this.snackBarRef) {
+ this.snackBarRef.dismiss();
+ }
+
+ const position = this.overlay.position();
+ let panelClass = ['tb-toast-panel'];
+ if (notificationMessage.panelClass) {
+ if (typeof notificationMessage.panelClass === 'string') {
+ panelClass.push(notificationMessage.panelClass);
+ } else if (notificationMessage.panelClass.length) {
+ panelClass = panelClass.concat(notificationMessage.panelClass);
+ }
+ }
+ const overlayConfig = new OverlayConfig({
+ panelClass,
+ backdropClass: 'cdk-overlay-transparent-backdrop',
+ hasBackdrop: false,
+ disposeOnNavigation: true
+ });
+ let originX;
+ let originY;
+ const horizontalPosition = notificationMessage.horizontalPosition || 'left';
+ const verticalPosition = notificationMessage.verticalPosition || 'top';
+ if (horizontalPosition === 'start' || horizontalPosition === 'left') {
+ originX = 'start';
+ } else if (horizontalPosition === 'end' || horizontalPosition === 'right') {
+ originX = 'end';
+ } else {
+ originX = 'center';
+ }
+ if (verticalPosition === 'top') {
+ originY = 'top';
+ } else {
+ originY = 'bottom';
+ }
+ const connectedPosition: ConnectedPosition = {
+ originX,
+ originY,
+ overlayX: originX,
+ overlayY: originY
+ };
+ overlayConfig.positionStrategy = position.flexibleConnectedTo(this.elementRef)
+ .withPositions([connectedPosition]);
+ this.overlayRef = this.overlay.create(overlayConfig);
+ const data: ToastPanelData = {
+ notification: notificationMessage
+ };
+ const injectionTokens = new WeakMap([
+ [MAT_SNACK_BAR_DATA, data],
+ [OverlayRef, this.overlayRef]
+ ]);
+ const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens);
+ this.toastComponentRef = this.overlayRef.attach(new ComponentPortal(TbSnackBarComponent, this.viewContainerRef, injector));
+ this.cd.detectChanges();
+
+ if (notificationMessage.duration && notificationMessage.duration > 0) {
+ if (this.dismissTimeout !== null) {
+ clearTimeout(this.dismissTimeout);
+ this.dismissTimeout = null;
+ }
+ this.dismissTimeout = setTimeout(() => {
+ if (this.toastComponentRef) {
+ this.toastComponentRef.instance.actionButton._elementRef.nativeElement.click();
+ }
+ this.dismissTimeout = null;
+ }, notificationMessage.duration + 500);
+ }
+ this.toastComponentRef.onDestroy(() => {
+ if (this.dismissTimeout !== null) {
+ clearTimeout(this.dismissTimeout);
+ this.dismissTimeout = null;
+ }
+ this.overlayRef = null;
+ this.toastComponentRef = null;
+ this.currentMessage = null;
+ });
+ });
+ }
+
+ private showSnackBar(notificationMessage: NotificationMessage) {
+ const data: ToastPanelData = {
+ notification: notificationMessage
+ };
+ const config: MatSnackBarConfig = {
+ horizontalPosition: notificationMessage.horizontalPosition || 'left',
+ verticalPosition: 'bottom',
+ viewContainerRef: this.viewContainerRef,
+ duration: notificationMessage.duration,
+ panelClass: notificationMessage.panelClass,
+ data
+ };
+ this.ngZone.run(() => {
+ if (this.snackBarRef) {
+ this.snackBarRef.dismiss();
+ }
+ this.snackBarRef = this.snackBar.openFromComponent(TbSnackBarComponent, config);
+ });
+ if (notificationMessage.duration && notificationMessage.duration > 0 && notificationMessage.forceDismiss) {
+ if (this.dismissTimeout !== null) {
+ clearTimeout(this.dismissTimeout);
+ this.dismissTimeout = null;
+ }
+ this.dismissTimeout = setTimeout(() => {
+ if (this.snackBarRef) {
+ this.snackBarRef.instance.actionButton._elementRef.nativeElement.click();
+ }
+ this.dismissTimeout = null;
+ }, notificationMessage.duration);
+ }
+ this.snackBarRef.afterDismissed().subscribe(() => {
+ if (this.dismissTimeout !== null) {
+ clearTimeout(this.dismissTimeout);
+ this.dismissTimeout = null;
+ }
+ this.snackBarRef = null;
+ this.currentMessage = null;
+ });
+ }
+
private shouldDisplayMessage(notificationMessage: NotificationMessage): boolean {
if (notificationMessage && notificationMessage.message) {
const target = notificationMessage.target || 'root';
@@ -139,6 +234,9 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
}
ngOnDestroy(): void {
+ if (this.overlayRef) {
+ this.overlayRef.dispose();
+ }
if (this.notificationSubscription) {
this.notificationSubscription.unsubscribe();
}
@@ -148,72 +246,84 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
}
}
+interface ToastPanelData {
+ notification: NotificationMessage;
+}
+
+import {
+ AnimationTriggerMetadata,
+ AnimationEvent,
+ trigger,
+ state,
+ transition,
+ style,
+ animate,
+} from '@angular/animations';
+
+export const toastAnimations: {
+ readonly showHideToast: AnimationTriggerMetadata;
+} = {
+ showHideToast: trigger('showHideAnimation', [
+ state('in', style({ transform: 'scale(1)', opacity: 1 })),
+ transition('void => opened', [style({ transform: 'scale(0)', opacity: 0 }), animate('{{ open }}ms')]),
+ transition(
+ 'opened => closing',
+ animate('{{ close }}ms', style({ transform: 'scale(0)', opacity: 0 })),
+ ),
+ ]),
+};
+
+export type ToastAnimationState = 'default' | 'opened' | 'closing';
+
@Component({
selector: 'tb-snack-bar-component',
templateUrl: 'snack-bar-component.html',
- styleUrls: ['snack-bar-component.scss']
+ styleUrls: ['snack-bar-component.scss'],
+ animations: [toastAnimations.showHideToast]
})
export class TbSnackBarComponent implements AfterViewInit, OnDestroy {
@ViewChild('actionButton', {static: true}) actionButton: MatButton;
- private parentEl: HTMLElement;
- public snackBarContainerEl: HTMLElement;
- private parentScrollSubscription: Subscription = null;
public notification: NotificationMessage;
- constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private elementRef: ElementRef,
- public cd: ChangeDetectorRef,
- public snackBarRef: MatSnackBarRef) {
+
+ animationState: ToastAnimationState;
+
+ animationParams = {
+ open: 100,
+ close: 100
+ };
+
+ constructor(@Inject(MAT_SNACK_BAR_DATA)
+ private data: ToastPanelData,
+ @Optional()
+ private snackBarRef: MatSnackBarRef,
+ @Optional()
+ private overlayRef: OverlayRef) {
+ this.animationState = !!this.snackBarRef ? 'default' : 'opened';
this.notification = data.notification;
}
ngAfterViewInit() {
- this.parentEl = this.data.parent.nativeElement;
- this.snackBarContainerEl = this.elementRef.nativeElement.parentNode;
- this.snackBarContainerEl.style.position = 'absolute';
- this.updateContainerRect();
- this.updatePosition(this.snackBarRef.containerInstance.snackBarConfig);
- const snackBarComponent = this;
- this.parentScrollSubscription = onParentScrollOrWindowResize(this.parentEl).subscribe(() => {
- snackBarComponent.updateContainerRect();
- });
- }
-
- updatePosition(config: MatSnackBarConfig) {
- const isRtl = config.direction === 'rtl';
- const isLeft = (config.horizontalPosition === 'left' ||
- (config.horizontalPosition === 'start' && !isRtl) ||
- (config.horizontalPosition === 'end' && isRtl));
- const isRight = !isLeft && config.horizontalPosition !== 'center';
- if (isLeft) {
- this.snackBarContainerEl.style.justifyContent = 'flex-start';
- } else if (isRight) {
- this.snackBarContainerEl.style.justifyContent = 'flex-end';
- } else {
- this.snackBarContainerEl.style.justifyContent = 'center';
- }
- if (config.verticalPosition === 'top') {
- this.snackBarContainerEl.style.alignItems = 'flex-start';
- } else {
- this.snackBarContainerEl.style.alignItems = 'flex-end';
- }
}
ngOnDestroy() {
- if (this.parentScrollSubscription) {
- this.parentScrollSubscription.unsubscribe();
- }
}
- updateContainerRect() {
- const viewportOffset = this.parentEl.getBoundingClientRect();
- this.snackBarContainerEl.style.top = viewportOffset.top + 'px';
- this.snackBarContainerEl.style.left = viewportOffset.left + 'px';
- this.snackBarContainerEl.style.width = viewportOffset.width + 'px';
- this.snackBarContainerEl.style.height = viewportOffset.height + 'px';
+ action(): void {
+ if (this.snackBarRef) {
+ this.snackBarRef.dismissWithAction();
+ } else {
+ this.animationState = 'closing';
+ }
}
- action(): void {
- this.snackBarRef.dismissWithAction();
+ onHideFinished(event: AnimationEvent) {
+ const { toState } = event;
+ const isFadeOut = (toState as ToastAnimationState) === 'closing';
+ const itFinished = this.animationState === 'closing';
+ if (isFadeOut && itFinished) {
+ this.overlayRef.dispose();
+ }
}
}
diff --git a/ui-ngx/src/app/shared/models/page/page-link.ts b/ui-ngx/src/app/shared/models/page/page-link.ts
index 712757a7f3..dba4ce097c 100644
--- a/ui-ngx/src/app/shared/models/page/page-link.ts
+++ b/ui-ngx/src/app/shared/models/page/page-link.ts
@@ -70,18 +70,18 @@ export function sortItems(item1: any, item2: any, property: string, asc: boolean
const item2Value = getDescendantProp(item2, property);
let result = 0;
if (item1Value !== item2Value) {
- if (typeof item1Value === 'number' && typeof item2Value === 'number') {
+ const item1Type = typeof item1Value;
+ const item2Type = typeof item2Value;
+ if (item1Type === 'number' && item2Type === 'number') {
result = item1Value - item2Value;
- } else if (typeof item1Value === 'string' && typeof item2Value === 'string') {
+ } else if (item1Type === 'string' && item2Type === 'string') {
result = item1Value.localeCompare(item2Value);
- } else if (typeof item1Value === 'boolean' && typeof item2Value === 'boolean') {
+ } else if ((item1Type === 'boolean' && item2Type === 'boolean') || (item1Type !== item2Type)) {
if (item1Value && !item2Value) {
result = 1;
} else if (!item1Value && item2Value) {
result = -1;
}
- } else if (typeof item1Value !== typeof item2Value) {
- result = 1;
}
}
return asc ? result : result * -1;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index caffc0a66a..8bd4653eb1 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -152,6 +152,7 @@ export interface WidgetTypeParameters {
stateData?: boolean;
hasDataPageLink?: boolean;
singleEntity?: boolean;
+ warnOnPageDataOverflow?: boolean;
}
export interface WidgetControllerDescriptor {
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 89f8ebc9a2..bc54bfd46a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1712,7 +1712,8 @@
"add": "Add Widget",
"undo": "Undo widget changes",
"export": "Export widget",
- "no-data": "No data to display on widget"
+ "no-data": "No data to display on widget",
+ "data-overflow": "Widget displays {{count}} out of {{total}} entities"
},
"widget-action": {
"header-button": "Widget header button",
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index e253727727..44feb80244 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1056,4 +1056,8 @@ mat-label {
line-height: 1.5;
white-space: pre-line;
}
+
+ .tb-toast-panel {
+ pointer-events: none !important;
+ }
}