OZG-7773 mail-unread-link button

alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts

@@ -61,7 +61,7 @@ export class MailboxIconComponent {
   @Input() size: IconVariants['size'] = 'medium';
   @Input() class: string = undefined;
   @Input() showBadge: boolean = false;
-  @Input() badgeClass: string = undefined;
+  @Input() badgeClass: string = 'bg-primary';
 
   readonly iconVariants = iconVariants;
   readonly twMerge = twMerge;

alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.html

 @if(hasNewPostfachNachricht){
-  <ods-mailbox-icon showBadge="true" badgeClass="bg-blue-500"/>
+  <ods-mailbox-icon showBadge="true"/>
 }@else{
   <ods-mailbox-icon/>
 }
\ No newline at end of file

alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.ts

@@ -21,10 +21,10 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { PostfachMailListLinkRel, PostfachMailListResource } from '@alfa-client/postfach-shared';
 import { StateResource } from '@alfa-client/tech-shared';
-import { VorgangHeaderLinkRel, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'alfa-postfach-mail-list',
@@ -36,5 +36,4 @@ export class PostfachMailListComponent {
   @Input() vorgangStateResource: StateResource<VorgangWithEingangResource>;
 
   readonly postfachMailListLinkRel = PostfachMailListLinkRel;
-  readonly vorgangHeaderLinkRel = VorgangHeaderLinkRel;
 }

alfa-client/libs/postfach/src/lib/postfach-mail-pdf-button-container/postfach-mail-pdf-button-container.component.ts

@@ -21,8 +21,8 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import { PostfachMailListResource, PostfachService } from '@alfa-client/postfach-shared';
 import { Component, Input, OnInit } from '@angular/core';
-import { PostfachMailResource, PostfachService } from '@alfa-client/postfach-shared';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -31,7 +31,7 @@ import { Observable } from 'rxjs';
   styleUrls: ['./postfach-mail-pdf-button-container.component.scss'],
 })
 export class PostfachMailPdfButtonContainerComponent implements OnInit {
-  @Input() postfachMailListResource: PostfachMailResource;
+  @Input() postfachMailListResource: PostfachMailListResource;
   @Input() showButtonWithLabel: boolean = false;
 
   isDownloadPdfInProgress$: Observable<boolean>;

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.html → alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button-link-container.component.html

@@ -7,9 +7,10 @@
         tooltipAriaType="aria-labelledby"
         variant="ghost"
         size="fit"
-        dataTestId="mail-unread-icon-button"
+        dataTestId="mail-unread-icon-button-link"
+        data-test-id="mail-unread-icon-button-link-host"
       >
-        <ods-mail-unread-icon icon class="fill-text" />
+        <ods-mail-unread-icon icon />
       </ods-button>
     </a>
   } @else {
@@ -19,9 +20,10 @@
         [tooltip]="'Nachrichten als ungelesen markieren'"
         text="Als ungelesen markieren"
         variant="outline"
-        dataTestId="mail-unread-button"
+        dataTestId="mail-unread-button-link"
+        data-test-id="mail-unread-button-link-host"
       >
-        <ods-mail-unread-icon icon />
+        <ods-mail-unread-icon icon class="fill-primary"/>
       </ods-button>
     </a>
   }

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button-link-container.component.spec.ts

+import { PostfachMailListLinkRel, PostfachMailListResource, PostfachService } from '@alfa-client/postfach-shared';
+import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
+import {
+  dispatchEventFromFixture,
+  existsAsHtmlElement,
+  mock,
+  Mock,
+  MockEvent,
+  notExistsAsHtmlElement,
+} from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { ButtonComponent, MailUnreadIconComponent } from '@ods/system';
+import { MockComponent } from 'ng-mocks';
+import { createPostfachMailListResource } from '../../../../../../postfach-shared/test/postfach';
+import { getDataTestIdOf } from '../../../../../../tech-shared/test/data-test';
+import { MailUnreadButtonLinkContainerComponent } from './mail-unread-button-link-container.component';
+
+describe('MailUnreadButtonLinkContainerComponent', () => {
+  let component: MailUnreadButtonLinkContainerComponent;
+  let fixture: ComponentFixture<MailUnreadButtonLinkContainerComponent>;
+
+  let postfachService: Mock<PostfachService>;
+
+  const postfachMailListStateResource: StateResource<PostfachMailListResource> = createStateResource(
+    createPostfachMailListResource([PostfachMailListLinkRel.SET_HAS_NEW_POSTFACH_NACHRICHT]),
+  );
+
+  const button: string = getDataTestIdOf('mail-unread-button-link-host');
+  const iconButton: string = getDataTestIdOf('mail-unread-icon-button-link-host');
+
+  beforeEach(async () => {
+    postfachService = mock(PostfachService);
+
+    await TestBed.configureTestingModule({
+      imports: [MailUnreadButtonLinkContainerComponent, HasLinkPipe, RouterModule.forRoot([])],
+      declarations: [MockComponent(ButtonComponent), MockComponent(MailUnreadIconComponent)],
+      providers: [
+        {
+          provide: PostfachService,
+          useValue: postfachService,
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MailUnreadButtonLinkContainerComponent);
+    component = fixture.componentInstance;
+    component.postfachMailListStateResource = postfachMailListStateResource;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('component', () => {
+    describe('mark mail as unread', () => {
+      it('should call set hasNewPostfachNachrichten to true', () => {
+        component.markMailAsUnread();
+
+        expect(postfachService.setHasNewPostfachNachrichten).toHaveBeenCalledWith(true);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('no button should exist', () => {});
+
+    describe('icon button', () => {
+      it('should exist', () => {
+        component.showAsIconButton = true;
+
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, iconButton);
+      });
+
+      it('should not exist if link does not exist', () => {
+        component.showAsIconButton = true;
+        component.postfachMailListStateResource = createEmptyStateResource();
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, iconButton);
+      });
+
+      it('should not exist if not shown as icon button', () => {
+        component.showAsIconButton = false;
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, iconButton);
+      });
+
+      it('should call markMailAsUnread on click', () => {
+        component.showAsIconButton = true;
+        component.markMailAsUnread = jest.fn();
+
+        fixture.detectChanges();
+        dispatchEventFromFixture(fixture, iconButton, MockEvent.CLICK);
+
+        expect(component.markMailAsUnread).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('button', () => {
+    it('should exist', () => {
+      component.showAsIconButton = false;
+
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, button);
+    });
+
+    it('should not exist if link does not exist', () => {
+      component.showAsIconButton = false;
+      component.postfachMailListStateResource = createEmptyStateResource();
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, button);
+    });
+
+    it('should not exist if shown as icon button', () => {
+      component.showAsIconButton = true;
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, button);
+    });
+
+    it('should call markMailAsUnread on click', () => {
+      component.showAsIconButton = false;
+      component.markMailAsUnread = jest.fn();
+
+      fixture.detectChanges();
+      dispatchEventFromFixture(fixture, button, MockEvent.CLICK);
+
+      expect(component.markMailAsUnread).toHaveBeenCalled();
+    });
+  });
+});

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.ts → alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button-link-container.component.ts

 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',
+  selector: 'alfa-mail-unread-button-link-container',
   standalone: true,
-  imports: [
-    ButtonWithSpinnerComponent,
-    HasLinkPipe,
-    MailUnreadIconComponent,
-    AsyncPipe,
-    TooltipDirective,
-    ButtonComponent,
-    RouterLink,
-  ],
-  templateUrl: './mail-unread-button.component.html',
+  imports: [HasLinkPipe, MailUnreadIconComponent, TooltipDirective, ButtonComponent, RouterLink],
+  templateUrl: './mail-unread-button-link-container.component.html',
 })
-export class PostfachPageMailUnreadButtonComponent {
+export class MailUnreadButtonLinkContainerComponent {
   private readonly postfachService = inject(PostfachService);
 
   @Input() postfachMailListStateResource: StateResource<PostfachMailListResource>;

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/mail-unread-button/mail-unread-button.component.spec.ts

-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();
-  });
-});

alfa-client/libs/postfach/src/lib/postfach-page-container/postfach-page/postfach-page.component.html

@@ -25,7 +25,7 @@
 -->
 <ozgcloud-subnavigation class="mat-typography mat-app-background">
   <ozgcloud-back-button linkTo="../" label="zurück zur Detailseite" />
-  <alfa-postfach-page-mail-unread-button
+  <alfa-mail-unread-button-link-container
     [postfachMailListStateResource]="postfachMailListStateResource"
     showAsIconButton="true"
   />

alfa-client/libs/postfach/src/lib/postfach.module.ts

@@ -64,6 +64,9 @@ import { PostfachPageContainerComponent } from './postfach-page-container/postfa
 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';
+import {
+  MailUnreadButtonLinkContainerComponent
+} from "./postfach-page-container/postfach-page/mail-unread-button/mail-unread-button-link-container.component";
 
 const routes: Routes = [
   {
@@ -104,6 +107,7 @@ const routes: Routes = [
     PostfachMailListMailboxIconComponent,
     PostfachPageMailUnreadButtonComponent,
     PostfachPageMailUnreadButtonComponent,
+    MailUnreadButtonLinkContainerComponent,
   ],
   declarations: [
     PostfachMailListContainerComponent,