diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list-container.component.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list-container.component.ts index 14c858585f1b747ec7175b1d717c13f23e44d547..e54a97d76e30ce012ed455937273d21621101dcb 100644 --- a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list-container.component.ts +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list-container.component.ts @@ -25,7 +25,7 @@ import { ON_PAGE, PostfachMailListResource, PostfachService } from '@alfa-client import { isNotNull, StateResource } from '@alfa-client/tech-shared'; import { VorgangWithEingangResource } from '@alfa-client/vorgang-shared'; import { Component, Input, OnChanges } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable, tap } from 'rxjs'; @Component({ selector: 'alfa-postfach-mail-list-container', @@ -43,9 +43,12 @@ export class PostfachMailListContainerComponent implements OnChanges { ngOnChanges() { if (isNotNull(this.vorgangStateResource)) { this.reloadPostfachMailListOnVorgangReload(); - this.postfachMailListStateResource$ = this.postfachService.getPostfachMailListByGivenVorgang( - this.vorgangStateResource.resource, - ); + this.postfachMailListStateResource$ = this.postfachService + .getPostfachMailListByGivenVorgang(this.vorgangStateResource.resource) + .pipe( + tap(console.log), + tap(() => console.log(this.vorgangStateResource.resource)), + ); } } diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.html b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.html new file mode 100644 index 0000000000000000000000000000000000000000..cddc9a7eede7941afbb4fcf20d31116a145140de --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.html @@ -0,0 +1,5 @@ +@if(hasNewPostfachNachricht){ + <ods-mailbox-icon showBadge="true" badgeClass="bg-blue-500"/> +}@else{ + <ods-mailbox-icon/> +} \ No newline at end of file diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.spec.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..cf1f2c547ee7556bff8b58058cb82e15eb403cec --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.spec.ts @@ -0,0 +1,46 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { getElementFromFixtureByType } from '@alfa-client/test-utils'; +import { MailboxIconComponent } from '@ods/system'; +import { MockComponent } from 'ng-mocks'; +import { PostfachMailListMailboxIconComponent } from './mailbox-icon.component'; + +describe('PostfachMailListMailboxIconComponent', () => { + let component: PostfachMailListMailboxIconComponent; + let fixture: ComponentFixture<PostfachMailListMailboxIconComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PostfachMailListMailboxIconComponent], + declarations: [MockComponent(MailboxIconComponent)], + }).compileComponents(); + + fixture = TestBed.createComponent(PostfachMailListMailboxIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('mailboxIcon', () => { + it('should show badge when there is a new message', () => { + component.hasNewPostfachNachricht = true; + + fixture.detectChanges(); + + const mailboxIcon: MailboxIconComponent = getElementFromFixtureByType(fixture, MailboxIconComponent); + expect(mailboxIcon.showBadge).toBeTruthy(); + }); + + it('should not show badge when there is no new message', () => { + component.hasNewPostfachNachricht = false; + + fixture.detectChanges(); + + const mailboxIcon: MailboxIconComponent = getElementFromFixtureByType(fixture, MailboxIconComponent); + expect(mailboxIcon.showBadge).toBeFalsy(); + }); + }); +}); diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..7e64a6350f8d1749ccfa7e09250b6e2b6d0ff321 --- /dev/null +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; +import { MailboxIconComponent } from '@ods/system'; + +@Component({ + selector: 'alfa-postfach-mail-list-mailbox-icon', + standalone: true, + imports: [MailboxIconComponent], + templateUrl: './mailbox-icon.component.html', +}) +export class PostfachMailListMailboxIconComponent { + @Input() hasNewPostfachNachricht: boolean; +} diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html index 44d553b95fc0e784b4d66bcd22287e9700325f8a..e2d1ac682538390c793e2379973c4913987b8b14 100644 --- a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.html @@ -25,6 +25,7 @@ --> <div class="nachrichten-header"> <h3 class="nachrichten">Nachrichten</h3> + <alfa-postfach-mail-list-mailbox-icon [hasNewPostfachNachricht]="vorgangStateResource.resource.hasNewPostfachNachricht" /> <alfa-postfach-mail-pdf-button-container [postfachMailListResource]="postfachMailListStateResource.resource" ></alfa-postfach-mail-pdf-button-container> diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.spec.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.spec.ts index bad2ceb1eaf216b0611dc18a2211c7b33635a9d5..1a071c69c519f613d734ae2012a880645881e3e1 100644 --- a/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.spec.ts +++ b/alfa-client/libs/postfach/src/lib/postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component.spec.ts @@ -21,7 +21,6 @@ * Die sprachspezifischen Genehmigungen und Beschränkungen * unter der Lizenz sind dem Lizenztext zu entnehmen. */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; import { PostfachMailListLinkRel } from '@alfa-client/postfach-shared'; import { ConvertForDataTestPipe, @@ -30,15 +29,17 @@ import { ToEmbeddedResourcesPipe, createStateResource, } from '@alfa-client/tech-shared'; -import { getElementFromFixture, getMockComponent } from '@alfa-client/test-utils'; +import { getElementFromFixture, getElementFromFixtureByType, getMockComponent } from '@alfa-client/test-utils'; import { ExpansionPanelComponent, SpinnerComponent } from '@alfa-client/ui'; import { VorgangWithEingangResource } from '@alfa-client/vorgang-shared'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { createPostfachMailListResource } from 'libs/postfach-shared/test/postfach'; import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; import { MockComponent } from 'ng-mocks'; import { createVorgangWithEingangResource } from '../../../../../vorgang-shared/test/vorgang'; import { PostfachMailButtonContainerComponent } from '../../postfach-mail-button-container/postfach-mail-button-container.component'; import { PostfachMailPdfButtonContainerComponent } from '../../postfach-mail-pdf-button-container/postfach-mail-pdf-button-container.component'; +import { PostfachMailListMailboxIconComponent } from './mailbox-icon/mailbox-icon.component'; import { PostfachMailListComponent } from './postfach-mail-list.component'; import { PostfachMailComponent } from './postfach-mail/postfach-mail.component'; @@ -49,9 +50,7 @@ describe('PostfachMailListComponent', () => { const postfachMailButton: string = getDataTestIdOf('postfach-mail-button-container'); const noPostfachText: string = getDataTestIdOf('no-postfach-text'); - const vorgangStateResource: StateResource<VorgangWithEingangResource> = createStateResource( - createVorgangWithEingangResource(), - ); + const vorgangStateResource: StateResource<VorgangWithEingangResource> = createStateResource(createVorgangWithEingangResource()); beforeEach(async () => { await TestBed.configureTestingModule({ @@ -65,6 +64,7 @@ describe('PostfachMailListComponent', () => { MockComponent(SpinnerComponent), MockComponent(PostfachMailButtonContainerComponent), MockComponent(PostfachMailPdfButtonContainerComponent), + MockComponent(PostfachMailListMailboxIconComponent), ], }).compileComponents(); }); @@ -105,9 +105,7 @@ describe('PostfachMailListComponent', () => { describe('postfach does not exists', () => { beforeEach(() => { - component.postfachMailListStateResource = createStateResource( - createPostfachMailListResource(), - ); + component.postfachMailListStateResource = createStateResource(createPostfachMailListResource()); fixture.detectChanges(); }); @@ -126,12 +124,23 @@ describe('PostfachMailListComponent', () => { describe('postfachMail component', () => { it('should have been called with vorgangStateResource', () => { - const postfachMailComponent: PostfachMailComponent = getMockComponent( - fixture, - PostfachMailComponent, - ); + const postfachMailComponent: PostfachMailComponent = getMockComponent(fixture, PostfachMailComponent); expect(postfachMailComponent.vorgangStateResource).toBe(vorgangStateResource); }); }); + + describe('mailbox icon', () => { + it('should exist', () => { + component.vorgangStateResource.resource.hasNewPostfachNachricht = false; + + fixture.detectChanges(); + + const mailboxIcon: PostfachMailListMailboxIconComponent = getElementFromFixtureByType( + fixture, + PostfachMailListMailboxIconComponent, + ); + expect(mailboxIcon.hasNewPostfachNachricht).toEqual(false); + }); + }); }); diff --git a/alfa-client/libs/postfach/src/lib/postfach.module.ts b/alfa-client/libs/postfach/src/lib/postfach.module.ts index 88fd93b41fff801fb308bfc6a227483cc5042fc4..b87e4a8bb6ed94b3932ee2e2b4494eb4471676a5 100644 --- a/alfa-client/libs/postfach/src/lib/postfach.module.ts +++ b/alfa-client/libs/postfach/src/lib/postfach.module.ts @@ -24,7 +24,17 @@ import { BinaryFileModule } from '@alfa-client/binary-file'; import { ON_PAGE, PostfachSharedModule } from '@alfa-client/postfach-shared'; import { ConvertForDataTestPipe, FormatDateWithTimePipe, HasLinkPipe, ToEmbeddedResourcesPipe } from '@alfa-client/tech-shared'; -import { BackButtonComponent, CheckboxEnumEditorComponent, IconButtonWithSpinnerComponent, OzgcloudIconComponent, OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent, SpinnerComponent, SubnavigationComponent, TextAreaEditorComponent, } from '@alfa-client/ui'; +import { + BackButtonComponent, + CheckboxEnumEditorComponent, + IconButtonWithSpinnerComponent, + OzgcloudIconComponent, + OzgcloudStrokedButtonWithSpinnerComponent, + OzgcloudTextEditorComponent, + SpinnerComponent, + SubnavigationComponent, + TextAreaEditorComponent, +} from '@alfa-client/ui'; import { UserProfileModule } from '@alfa-client/user-profile'; import { VorgangSharedUiModule } from '@alfa-client/vorgang-shared-ui'; import { CommonModule } from '@angular/common'; @@ -39,6 +49,7 @@ import { PostfachMailButtonComponent } from './postfach-mail-button-container/po import { PostfachMailFormComponent } from './postfach-mail-form/postfach-mail-form.component'; import { PostfachNachrichtReplyEditorContainerComponent } from './postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component'; import { PostfachMailListContainerComponent } from './postfach-mail-list-container/postfach-mail-list-container.component'; +import { PostfachMailListMailboxIconComponent } from './postfach-mail-list-container/postfach-mail-list/mailbox-icon/mailbox-icon.component'; import { PostfachMailListComponent } from './postfach-mail-list-container/postfach-mail-list/postfach-mail-list.component'; import { IncommingMailComponent } from './postfach-mail-list-container/postfach-mail-list/postfach-mail/incomming-mail/incomming-mail.component'; import { OutgoingMailErrorContainerComponent } from './postfach-mail-list-container/postfach-mail-list/postfach-mail/outgoing-mail/outgoing-mail-error-container/outgoing-mail-error-container.component'; @@ -89,6 +100,7 @@ const routes: Routes = [ MailboxIconComponent, TooltipDirective, MultiFileUploadComponent, + PostfachMailListMailboxIconComponent, ], declarations: [ PostfachMailListContainerComponent,