diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 9d1110ef4..718d7ea41 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -250,8 +250,8 @@ main {
}
}
-.dropdown.show .dropdown-toggle,
-.dropdown-toggle:hover {
+:host ::ng-deep .dropdown.show .dropdown-toggle,
+:host ::ng-deep .dropdown-toggle:hover {
opacity: 0.7;
}
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index 4990beb09..fabcbf7d1 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -48,6 +48,7 @@ import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profil
import { DocumentDetailComponent } from '../document-detail/document-detail.component'
import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
import { GlobalSearchComponent } from './global-search/global-search.component'
+import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.component'
@Component({
selector: 'pngx-app-frame',
@@ -57,6 +58,7 @@ import { GlobalSearchComponent } from './global-search/global-search.component'
GlobalSearchComponent,
DocumentTitlePipe,
IfPermissionsDirective,
+ ToastsDropdownComponent,
RouterModule,
NgClass,
NgbDropdownModule,
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
new file mode 100644
index 000000000..6e49c1763
--- /dev/null
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
@@ -0,0 +1,28 @@
+
+
+ @if (toasts.length) {
+ {{ toasts.length }}
+ }
+
+
+
+ @if (toasts.length === 0) {
+
No notifications
+ }
+
+
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
new file mode 100644
index 000000000..2332e710d
--- /dev/null
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
@@ -0,0 +1,22 @@
+.dropdown-menu {
+ width: var(--pngx-toast-max-width);
+}
+
+.dropdown-menu .scroll-list {
+ max-height: 500px;
+ overflow-y: auto;
+}
+
+.dropdown-toggle::after {
+ display: none;
+}
+
+.dropdown-item {
+ white-space: initial;
+}
+
+@media screen and (max-width: 400px) {
+ :host ::ng-deep .dropdown-menu-end {
+ right: -3rem;
+ }
+}
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts
new file mode 100644
index 000000000..33b948f30
--- /dev/null
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts
@@ -0,0 +1,112 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+ ComponentFixture,
+ TestBed,
+ discardPeriodicTasks,
+ fakeAsync,
+ flush,
+} from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ToastsDropdownComponent } from './toasts-dropdown.component'
+
+const toasts = [
+ {
+ id: 'abc-123',
+ content: 'foo bar',
+ delay: 5000,
+ },
+ {
+ id: 'def-123',
+ content: 'Error 1 content',
+ delay: 5000,
+ error: 'Error 1 string',
+ },
+ {
+ id: 'ghi-123',
+ content: 'Error 2 content',
+ delay: 5000,
+ error: {
+ url: 'https://example.com',
+ status: 500,
+ statusText: 'Internal Server Error',
+ message: 'Internal server error 500 message',
+ error: { detail: 'Error 2 message details' },
+ },
+ },
+]
+
+describe('ToastsDropdownComponent', () => {
+ let component: ToastsDropdownComponent
+ let fixture: ComponentFixture
+ let toastService: ToastService
+ let toastsSubject: Subject = new Subject()
+
+ beforeEach(async () => {
+ TestBed.configureTestingModule({
+ imports: [
+ ToastsDropdownComponent,
+ NgxBootstrapIconsModule.pick(allIcons),
+ ],
+ providers: [
+ provideHttpClient(withInterceptorsFromDi()),
+ provideHttpClientTesting(),
+ ],
+ }).compileComponents()
+
+ fixture = TestBed.createComponent(ToastsDropdownComponent)
+ toastService = TestBed.inject(ToastService)
+ jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject)
+
+ component = fixture.componentInstance
+
+ fixture.detectChanges()
+ })
+
+ it('should call getToasts and return toasts', fakeAsync(() => {
+ const spy = jest.spyOn(toastService, 'getToasts')
+
+ component.ngOnInit()
+ toastsSubject.next(toasts)
+ fixture.detectChanges()
+
+ expect(spy).toHaveBeenCalled()
+ expect(component.toasts).toContainEqual({
+ id: 'abc-123',
+ content: 'foo bar',
+ delay: 5000,
+ })
+
+ component.ngOnDestroy()
+ flush()
+ discardPeriodicTasks()
+ }))
+
+ it('should show a toast', fakeAsync(() => {
+ component.ngOnInit()
+ toastsSubject.next(toasts)
+ fixture.detectChanges()
+
+ expect(fixture.nativeElement.textContent).toContain('foo bar')
+
+ component.ngOnDestroy()
+ flush()
+ discardPeriodicTasks()
+ }))
+
+ it('should toggle suppressPopupToasts', fakeAsync((finish) => {
+ component.ngOnInit()
+ fixture.detectChanges()
+ toastsSubject.next(toasts)
+
+ const spy = jest.spyOn(toastService, 'suppressPopupToasts', 'set')
+ component.onOpenChange(true)
+ expect(spy).toHaveBeenCalledWith(true)
+
+ component.ngOnDestroy()
+ flush()
+ discardPeriodicTasks()
+ }))
+})
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts
new file mode 100644
index 000000000..c04d758af
--- /dev/null
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import {
+ NgbDropdownModule,
+ NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subscription } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ToastComponent } from '../../common/toast/toast.component'
+
+@Component({
+ selector: 'pngx-toasts-dropdown',
+ templateUrl: './toasts-dropdown.component.html',
+ styleUrls: ['./toasts-dropdown.component.scss'],
+ imports: [
+ ToastComponent,
+ NgbDropdownModule,
+ NgbProgressbarModule,
+ NgxBootstrapIconsModule,
+ ],
+})
+export class ToastsDropdownComponent implements OnInit, OnDestroy {
+ constructor(public toastService: ToastService) {}
+
+ private subscription: Subscription
+
+ public toasts: Toast[] = []
+
+ ngOnDestroy(): void {
+ this.subscription?.unsubscribe()
+ }
+
+ ngOnInit(): void {
+ this.subscription = this.toastService.getToasts().subscribe((toasts) => {
+ this.toasts = [...toasts]
+ })
+ }
+
+ onOpenChange(open: boolean): void {
+ this.toastService.suppressPopupToasts = open
+ }
+}
diff --git a/src-ui/src/app/components/common/toast/toast.component.html b/src-ui/src/app/components/common/toast/toast.component.html
new file mode 100644
index 000000000..ede75ddea
--- /dev/null
+++ b/src-ui/src/app/components/common/toast/toast.component.html
@@ -0,0 +1,56 @@
+
+ @if (autohide) {
+
+ {{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds
+ }
+
+ @if (!toast.error) {
+
+ }
+ @if (toast.error) {
+
+ }
+
+
{{toast.content}}
+ @if (toast.error) {
+
+
+ @if (isDetailedError(toast.error)) {
+
+ - URL
+ - {{ toast.error.url }}
+ - Status
+ - {{ toast.error.status }} {{ toast.error.statusText }}
+ - Error
+ - {{ getErrorText(toast.error) }}
+
+ }
+
+
+
+
+
+
+ }
+ @if (toast.action) {
+
+ }
+
+
+
- @if (!toast.error) {
-
- }
- @if (toast.error) {
-
- }
-
-
{{toast.content}}
- @if (toast.error) {
-
-
- @if (isDetailedError(toast.error)) {
-
- - URL
- - {{ toast.error.url }}
- - Status
- - {{ toast.error.status }} {{ toast.error.statusText }}
- - Error
- - {{ getErrorText(toast.error) }}
-
- }
-
-
-
-
-
-
- }
- @if (toast.action) {
-
- }
-
-
-