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 7f825d014b00f9a3c132641946a8645f5a2817eb..63b92bfcc78ef6c1659d83d6926a2ef41f74f0cc 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
@@ -26,23 +26,31 @@
<div class="nachrichten-header">
<div class="flex gap-2">
<h3 class="nachrichten">Nachrichten</h3>
- <ods-mail-icon [withBadge]="vorgangStateResource.resource.hasNewPostfachNachricht" data-test-id="postfach-mail-list-mail-icon"/>
+ <ods-mail-icon
+ [withBadge]="vorgangStateResource.resource.hasNewPostfachNachricht"
+ data-test-id="postfach-mail-list-mail-icon"
+ />
</div>
- <alfa-postfach-mail-pdf-button-container [postfachMailListResource]="postfachMailListStateResource.resource" />
+ <div class="flex">
+ <alfa-postfach-mail-pdf-button-container [postfachMailListResource]="postfachMailListStateResource.resource" />
- @if(postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL){
- <alfa-postfach-mail-button-container
- toolTip="Neue Nachricht erstellen"
- tooltipAriaType="aria-labelledby"
- [vorgang]="vorgangStateResource.resource"
- data-test-id="postfach-mail-button-container-no-label"
- />
- }
+ @if (postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL) {
+ <alfa-postfach-mail-button-container
+ toolTip="Neue Nachricht erstellen"
+ tooltipAriaType="aria-labelledby"
+ [vorgang]="vorgangStateResource.resource"
+ data-test-id="postfach-mail-button-container-no-label"
+ />
+ }
+ </div>
</div>
<ozgcloud-spinner [stateResource]="postfachMailListStateResource">
- @for (postfachMail of postfachMailListStateResource.resource | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST; track $index){
+ @for (
+ postfachMail of postfachMailListStateResource.resource | toEmbeddedResources: postfachMailListLinkRel.POSTFACH_MAIL_LIST;
+ track $index
+ ) {
<alfa-postfach-mail
class="postfach"
[vorgangStateResource]="vorgangStateResource"
@@ -52,7 +60,7 @@
}
</ozgcloud-spinner>
-@if(postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL){
+@if (postfachMailListStateResource.resource | hasLink: postfachMailListLinkRel.SEND_POSTFACH_MAIL) {
<alfa-postfach-mail-button-container
text="Nachricht"
[vorgang]="vorgangStateResource.resource"
@@ -60,4 +68,4 @@
/>
} @else {
<span class="no-postfach-text" data-test-id="no-postfach-text">Dieser Vorgang ist nicht mit einem Postfach verknüpft.</span>
-}
\ No newline at end of file
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html
index 623ae51081caa4846b8f91da9e991a0cd9c4dded..b19fb7bf8db9c4f709ee4cd4b789b91de0d55bd4 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html
@@ -31,9 +31,14 @@
<form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
<mat-dialog-content>
<div class="content">
- <ods-icon name="aktenzeichen" [fill]="(hasAktenzeichen$ | async) ? 'text' : 'neutral'" size="large" class="az_icon" />
+ <ods-icon
+ name="aktenzeichen"
+ [fill]="(hasAktenzeichen$ | async) ? 'text' : 'neutral'"
+ size="large"
+ class="aktenzeichen_icon"
+ />
<ozgcloud-text-editor
- class="az_text"
+ class="aktenzeichen_text"
data-test-id="aktenzeichen-edit-dialog-text-editor"
label="Aktenzeichen"
placeholder="kein Aktenzeichen"
diff --git a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss
index 4df0a268f31e54b0e65131a0d0923296c2527b6a..7a4adbd633d9a9134d0d0b35cb3fb5d79ee0d8dc 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss
+++ b/alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss
@@ -38,12 +38,12 @@
grid-row-gap: 0.25rem;
align-items: flex-start;
grid-template-areas:
- 'az_icon az_text paste_icon'
+ 'aktenzeichen_icon aktenzeichen_text paste_icon'
'. hinweis .';
}
-.az_icon {
- grid-area: az_icon;
+.aktenzeichen_icon {
+ grid-area: aktenzeichen_icon;
color: $darkModeGreyLight;
margin-top: 12px;
@@ -53,7 +53,7 @@
}
:host-context(.dark) {
- .az_icon {
+ .aktenzeichen_icon {
color: $darkModeGreyLight;
&--active {
@@ -62,8 +62,8 @@
}
}
-.az_text {
- grid-area: az_text;
+.aktenzeichen_text {
+ grid-area: aktenzeichen_text;
}
.paste_icon {
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
index 299a9495564aadec6269672f6091640e83278c45..a54682d17c8d5fc23503d3ce5e8f3cb488c3db0d 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
@@ -49,13 +49,12 @@
</h2>
<alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer>
<div class="flex flex-1 flex-row items-center gap-1">
- <div class="flex flex-shrink-0" [class.text-gray-400]="!hasAktenzeichen">
- <ods-icon name="aktenzeichen" fill="text" />
+ <div class="flex flex-shrink-0">
+ <ods-icon name="aktenzeichen" [fill]="hasAktenzeichen ? 'text' : 'neutral'" />
</div>
<alfa-aktenzeichen-editable
data-test-id="alfa-aktenzeichen-editable-button"
class="flex flex-grow"
- [class.text-gray-400]="!hasAktenzeichen"
[vorgang]="vorgang"
></alfa-aktenzeichen-editable>
</div>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts
index 517c9dfc4f5d5c5398721ad55ca766390db2406e..a1af358f7ce5ad2f77718ce94cf098c7850a9dd1 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.spec.ts
@@ -23,10 +23,9 @@
*/
import { BeschiedenDateInVorgangContainerComponent } from '@alfa-client/bescheid';
import { EMPTY_STRING, EnumToLabelPipe, HasLinkPipe } from '@alfa-client/tech-shared';
-import { getDebugElementFromFixtureByCss, getElementFromFixture } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { VorgangHeaderLinkRel } from '@alfa-client/vorgang-shared';
import { VorgangNummerComponent, VorgangStatusDotComponent, VorgangStatusTextComponent } from '@alfa-client/vorgang-shared-ui';
-import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIconTestingModule } from '@angular/material/icon/testing';
import { IconComponent } from '@ods/system';
@@ -42,7 +41,6 @@ describe('VorgangDetailHeaderComponent', () => {
let fixture: ComponentFixture<VorgangDetailHeaderComponent>;
const user: string = getDataTestIdOf('vorgang-header-user-icon');
- const aktenzeichenEditableComponentDataTestId: string = getDataTestIdOf('alfa-aktenzeichen-editable-button');
beforeEach(async () => {
await TestBed.configureTestingModule({
@@ -73,77 +71,54 @@ describe('VorgangDetailHeaderComponent', () => {
expect(component).toBeTruthy();
});
- describe('bearbeiter/user icon', () => {
- it('should be visible', () => {
- component.vorgangWithEingang = createVorgangWithEingangResource([VorgangHeaderLinkRel.ASSIGN]);
- fixture.detectChanges();
+ describe('component', () => {
+ describe('set vorgangWithEingang', () => {
+ it('should have Aktenzeichen', () => {
+ expect(component.hasAktenzeichen).toBeTruthy();
+ });
- const userElement = fixture.nativeElement.querySelector(user);
+ it.each([null, EMPTY_STRING])('should NOT have aktenzeichen for %s', (aktenzeichen: string) => {
+ const vorgangWithEingang = createVorgangWithEingangResource();
+ vorgangWithEingang.aktenzeichen = aktenzeichen;
+ component.vorgangWithEingang = vorgangWithEingang;
- expect(userElement).toBeInstanceOf(HTMLElement);
- });
-
- it('should NOT be visible', () => {
- component.vorgangWithEingang = createVorgangWithEingangResource();
- fixture.detectChanges();
-
- const userElement = fixture.nativeElement.querySelector(user);
-
- expect(userElement).not.toBeInstanceOf(HTMLElement);
+ expect(component.hasAktenzeichen).toBeFalsy();
+ });
});
});
- describe('set vorgangWithEingang', () => {
- it('should have Aktenzeichen', () => {
- expect(component.hasAktenzeichen).toBeTruthy();
- });
-
- it.each([null, EMPTY_STRING])('should NOT have aktenzeichen for %s', (aktenzeichen: string) => {
- const vorgangWithEingang = createVorgangWithEingangResource();
- vorgangWithEingang.aktenzeichen = aktenzeichen;
- component.vorgangWithEingang = vorgangWithEingang;
-
- expect(component.hasAktenzeichen).toBeFalsy();
- });
-
- it('should NOT set class text-gray-400 for aktenzeichen', () => {
- fixture.detectChanges();
-
- const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
-
- expect(element).not.toBeInstanceOf(DebugElement);
- });
-
- it.each([null, EMPTY_STRING])('should set class text-gray-400 for aktenzeichen %s', (aktenzeichen: string) => {
- const vorgangWithEingang = createVorgangWithEingangResource();
- vorgangWithEingang.aktenzeichen = aktenzeichen;
- component.vorgangWithEingang = vorgangWithEingang;
+ describe('template', () => {
+ describe('bearbeiter/user icon', () => {
+ it('should be visible', () => {
+ component.vorgangWithEingang = createVorgangWithEingangResource([VorgangHeaderLinkRel.ASSIGN]);
+ fixture.detectChanges();
- fixture.detectChanges();
+ existsAsHtmlElement(fixture, user);
+ });
- const element = getDebugElementFromFixtureByCss(fixture, 'div.text-gray-400');
+ it('should NOT be visible', () => {
+ component.vorgangWithEingang = createVorgangWithEingangResource();
+ fixture.detectChanges();
- expect(element).toBeInstanceOf(DebugElement);
+ notExistsAsHtmlElement(fixture, user);
+ });
});
- it.each([null, EMPTY_STRING])('should set class text-gray-400 for alfa-aktenzeichen-editable %s', (aktenzeichen: string) => {
- const vorgangWithEingang = createVorgangWithEingangResource();
- vorgangWithEingang.aktenzeichen = aktenzeichen;
- component.vorgangWithEingang = vorgangWithEingang;
-
- fixture.detectChanges();
+ describe('aktenzeichen icon', () => {
+ it('should be text filled', () => {
+ const icon: IconComponent = getMockComponent(fixture, IconComponent);
- const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
-
- expect(element).toHaveClass('text-gray-400');
- });
+ expect(icon.fill).toBe('text');
+ });
- it('should NOT set class text-gray-400 for alfa-aktenzeichen-editable', () => {
- fixture.detectChanges();
+ it('should be neutral filled', () => {
+ component.hasAktenzeichen = false;
- const element = getElementFromFixture(fixture, aktenzeichenEditableComponentDataTestId);
+ fixture.detectChanges();
+ const icon: IconComponent = getMockComponent(fixture, IconComponent);
- expect(element).not.toHaveClass('text-gray-400');
+ expect(icon.fill).toBe('neutral');
+ });
});
});
});