diff --git a/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.html b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.html new file mode 100644 index 0000000000000000000000000000000000000000..6c72066fff394e6eeeb9d2f8945a1a79a17ab386 --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.html @@ -0,0 +1,28 @@ +@if (postfachMailListStateResource.resource | hasLink: PostfachMailListLinkRel.SET_HAS_NEW_POSTFACH_NACHRICHT) { + @if (showAsIconButton) { + <a [routerLink]="'../'" tabindex="-1"> + <ods-button + (clickEmitter)="markMailAsUnread()" + [tooltip]="'Nachrichten als ungelesen markieren'" + tooltipAriaType="aria-labelledby" + variant="ghost" + size="fit" + dataTestId="mail-unread-icon-button" + > + <ods-mail-unread-icon icon class="fill-text" /> + </ods-button> + </a> + } @else { + <a [routerLink]="'../'" tabindex="-1"> + <ods-button + (clickEmitter)="markMailAsUnread()" + [tooltip]="'Nachrichten als ungelesen markieren'" + text="Als ungelesen markieren" + variant="outline" + dataTestId="mail-unread-button" + > + <ods-mail-unread-icon icon /> + </ods-button> + </a> + } +} diff --git a/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.spec.ts b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..ced6dfe3537350e2bdffaf7ed7ba7e1d2c44096d --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostfachPageMailUnreadButtonComponent } from './mail-unread-button.component'; + +describe('MailUnreadButtonComponent', () => { + let component: PostfachPageMailUnreadButtonComponent; + let fixture: ComponentFixture<PostfachPageMailUnreadButtonComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PostfachPageMailUnreadButtonComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(PostfachPageMailUnreadButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.ts b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..96739964b698c26961f526310a8ae02786b00646 --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.ts @@ -0,0 +1,38 @@ +import { CommandResource } from '@alfa-client/command-shared'; +import { PostfachMailListLinkRel, PostfachMailListResource, PostfachService } from '@alfa-client/postfach-shared'; +import { createEmptyStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared'; +import { AsyncPipe } from '@angular/common'; +import { Component, inject, Input } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { ButtonWithSpinnerComponent } from '@ods/component'; +import { ButtonComponent, MailUnreadIconComponent, TooltipDirective } from '@ods/system'; +import { Observable, of } from 'rxjs'; + +@Component({ + selector: 'alfa-postfach-page-mail-unread-button', + standalone: true, + imports: [ + ButtonWithSpinnerComponent, + HasLinkPipe, + MailUnreadIconComponent, + AsyncPipe, + TooltipDirective, + ButtonComponent, + RouterLink, + ], + templateUrl: './mail-unread-button.component.html', +}) +export class PostfachPageMailUnreadButtonComponent { + private readonly postfachService = inject(PostfachService); + + @Input() postfachMailListStateResource: StateResource<PostfachMailListResource>; + @Input() showAsIconButton: boolean = false; + + commandStateResource$: Observable<StateResource<CommandResource>> = of(createEmptyStateResource<CommandResource>()); + + protected readonly PostfachMailListLinkRel = PostfachMailListLinkRel; + + markMailAsUnread() { + this.postfachService.setHasNewPostfachNachrichten(true); + } +} diff --git a/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html index 57a7c39bdf82f2009c40741ffcf82935202fbcf4..74a01a48c3ae89522f06299b814bbadcef620190 100644 --- a/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html +++ b/alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html @@ -24,15 +24,17 @@ --> <ozgcloud-subnavigation class="mat-typography mat-app-background"> - <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite"></ozgcloud-back-button> + <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite" /> + <alfa-postfach-page-mail-unread-button + [postfachMailListStateResource]="postfachMailListStateResource" + showAsIconButton="true" + /> </ozgcloud-subnavigation> <div class="l-scroll-area--full flex flex-col"> - <h1 data-test-id="postfach-mail-heading" class="pl-7 pt-4 text-lg font-medium"> - Nachrichten zum Vorgang - </h1> + <h1 data-test-id="postfach-mail-heading" class="pl-7 pt-4 text-lg font-medium">Nachrichten zum Vorgang</h1> <alfa-postfach-page-mail-list [postfachMailListStateResource]="postfachMailListStateResource" data-test-id="postfach-mail-list" - ></alfa-postfach-page-mail-list> + /> </div> diff --git a/alfa-client/libs/postfach/src/lib/postfach.module.ts b/alfa-client/libs/postfach/src/lib/postfach.module.ts index b87e4a8bb6ed94b3932ee2e2b4494eb4471676a5..94249dbe5f8ef166ec10fd5bcf089b5dc87d115d 100644 --- a/alfa-client/libs/postfach/src/lib/postfach.module.ts +++ b/alfa-client/libs/postfach/src/lib/postfach.module.ts @@ -61,6 +61,7 @@ import { PostfachMailComponent } from './postfach-mail-list-container/postfach-m import { PostfachMailPdfButtonContainerComponent } from './postfach-mail-pdf-button-container/postfach-mail-pdf-button-container.component'; import { PostfachMailPdfButtonComponent } from './postfach-mail-pdf-button-container/postfach-mail-pdf-button/postfach-mail-pdf-button.component'; import { PostfachPageContainerComponent } from './postfach-page-container/postfach-page-container.component'; +import { PostfachPageMailUnreadButtonComponent } from './postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component'; import { PostfachPageMailListComponent } from './postfach-page-container/postfach-page/postfach-page-mail-list/postfach-page-mail-list.component'; import { PostfachPageComponent } from './postfach-page-container/postfach-page/postfach-page.component'; @@ -101,6 +102,8 @@ const routes: Routes = [ TooltipDirective, MultiFileUploadComponent, PostfachMailListMailboxIconComponent, + PostfachPageMailUnreadButtonComponent, + PostfachPageMailUnreadButtonComponent, ], declarations: [ PostfachMailListContainerComponent,