From ec7555537cc3f0edcd8ab9d66d911818b798b10c Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Thu, 15 May 2025 11:42:39 +0200
Subject: [PATCH] OZG-7971 replace forwarding buttons
---
.../forwarding-by-email-form.component.html | 9 ++-
...forwarding-by-email-form.component.spec.ts | 7 ++-
...y-email-zustellen-container.component.html | 59 ++++++++-----------
...y-email-zustellen-container.component.scss | 9 ---
...mail-zustellen-container.component.spec.ts | 32 ++++------
.../forwarding/src/lib/forwarding.module.ts | 7 ++-
6 files changed, 53 insertions(+), 70 deletions(-)
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.html b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.html
index 1c778f0931..6d7e84fac5 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.html
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.html
@@ -41,14 +41,13 @@
>
</ozgcloud-text-editor>
- <ozgcloud-stroked-button-with-spinner
+ <ods-button-with-spinner
dataTestId="forward-button"
- toolTip="Vorgang weiterleiten"
- tooltipAriaType="aria-labelledby"
- icon="forward"
+ variant="outline"
type="submit"
text="Weiterleiten"
[stateResource]="forwardStateResource"
>
- </ozgcloud-stroked-button-with-spinner>
+ <ods-icon icon name="forward-vorgang" />
+ </ods-button-with-spinner>
</form>
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.spec.ts b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.spec.ts
index a7f290dba1..586254ac2b 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.spec.ts
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.spec.ts
@@ -22,7 +22,7 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { mock } from '@alfa-client/test-utils';
-import { OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent } from '@alfa-client/ui';
+import { OzgcloudTextEditorComponent } from '@alfa-client/ui';
import { VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@@ -30,6 +30,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
import { MockComponent } from 'ng-mocks';
import { ForwardingByEmailFormComponent } from './forwarding-by-email-form.component';
@@ -53,7 +55,8 @@ describe('ForwardingByEmailFormComponent', () => {
declarations: [
ForwardingByEmailFormComponent,
MatIcon,
- MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
+ MockComponent(ButtonWithSpinnerComponent),
+ MockComponent(IconComponent),
MockComponent(OzgcloudTextEditorComponent),
],
imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, BrowserAnimationsModule],
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.html b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.html
index dfb27830e9..aab205bb92 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.html
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.html
@@ -23,46 +23,39 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<p *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS">
- Wurde die Weiterleitung des Vorgangs bestätigt?
-</p>
+<p *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS">Wurde die Weiterleitung des Vorgangs bestätigt?</p>
-<div
- *ngIf="forwarding | hasLink: linkRel.SUCCESSFUL"
- class="confirmation"
- data-test-id="successfull-message"
->
+<div *ngIf="forwarding | hasLink: linkRel.SUCCESSFUL" class="confirmation" data-test-id="successfull-message">
<span>Die Weiterleitung des Vorgangs wurde bestätigt.</span>
<mat-icon>check_circle_outline</mat-icon>
</div>
-<div
- *ngIf="forwarding | hasLink: linkRel.FAILED"
- class="confirmation"
- data-test-id="failed-message"
->
+<div *ngIf="forwarding | hasLink: linkRel.FAILED" class="confirmation" data-test-id="failed-message">
<span>Die Weiterleitung des Vorgangs war nicht erfolgreich.</span>
<mat-icon>info_outline</mat-icon>
</div>
-<div class="buttons">
- <ozgcloud-stroked-button-with-spinner
- *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS"
- data-test-id="mark-as-success-button"
- text="Bestätigen"
- icon="check_circle_outline"
- [stateResource]="markAsSuccessCommandStateResource$ | async"
- (clickEmitter)="markAsSuccess()"
- >
- </ozgcloud-stroked-button-with-spinner>
-
- <ozgcloud-stroked-button-with-spinner
- *ngIf="forwarding | hasLink: linkRel.MARK_AS_FAIL"
- data-test-id="mark-as-fail-button"
- text="Widerrufen"
- icon="info_outline"
- [stateResource]="markAsFailCommandStateResource$ | async"
- (clickEmitter)="markAsFail()"
- >
- </ozgcloud-stroked-button-with-spinner>
+<div class="flex gap-2">
+ @if (forwarding | hasLink: linkRel.MARK_AS_SUCCESS) {
+ <ods-button-with-spinner
+ dataTestId="mark-as-success-button"
+ text="Bestätigen"
+ [stateResource]="markAsSuccessCommandStateResource$ | async"
+ (clickEmitter)="markAsSuccess()"
+ >
+ <ods-icon icon name="check-circle" fill="whitetext" />
+ </ods-button-with-spinner>
+ }
+
+ @if (forwarding | hasLink: linkRel.MARK_AS_FAIL) {
+ <ods-button-with-spinner
+ variant="outline"
+ dataTestId="mark-as-fail-button"
+ text="Widerrufen"
+ [stateResource]="markAsFailCommandStateResource$ | async"
+ (clickEmitter)="markAsFail()"
+ >
+ <ods-icon icon name="info" />
+ </ods-button-with-spinner>
+ }
</div>
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.scss b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.scss
index 03ed4ae3c8..584066627f 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.scss
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.scss
@@ -27,15 +27,6 @@
align-items: center;
}
-.buttons {
- margin: 16px -8px;
- display: flex;
-
- ozgcloud-stroked-button-with-spinner {
- margin: 0 8px;
- }
-}
-
p {
margin-top: 4px;
}
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.spec.ts b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.spec.ts
index e28f66a088..ac5ff3b812 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.spec.ts
+++ b/alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.spec.ts
@@ -23,10 +23,11 @@
*/
import { ForwardingLinkRel, ForwardingResource, ForwardingService } from '@alfa-client/forwarding-shared';
import { HasLinkPipe } from '@alfa-client/tech-shared';
-import { mock } from '@alfa-client/test-utils';
-import { OzgcloudStrokedButtonWithSpinnerComponent } from '@alfa-client/ui';
+import { existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIcon } from '@angular/material/icon';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
import { createForwardingResource } from 'libs/forwarding-shared/test/forwarding';
import { MockComponent } from 'ng-mocks';
import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-email-zustellen-container.component';
@@ -51,7 +52,8 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
HasLinkPipe,
ForwardingByEmailZustellenContainerComponent,
MatIcon,
- MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
+ ButtonWithSpinnerComponent,
+ MockComponent(IconComponent),
],
providers: [
{
@@ -95,18 +97,16 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
component.forwarding = createForwardingResource([ForwardingLinkRel.MARK_AS_SUCCESS]);
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(markAsSuccess);
- expect(button).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, markAsSuccess);
});
it('should be hidden', () => {
component.forwarding = forwarding;
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(markAsSuccess);
- expect(button).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, markAsSuccess);
});
});
@@ -115,18 +115,16 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
component.forwarding = createForwardingResource([ForwardingLinkRel.MARK_AS_FAIL]);
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(markAsFail);
- expect(button).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, markAsFail);
});
it('should be hidden', () => {
component.forwarding = forwarding;
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(markAsFail);
- expect(button).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, markAsFail);
});
});
@@ -135,18 +133,16 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
component.forwarding = createForwardingResource([ForwardingLinkRel.FAILED]);
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(failedMessage);
- expect(button).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, failedMessage);
});
it('should be hidden', () => {
component.forwarding = forwarding;
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(failedMessage);
- expect(button).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, failedMessage);
});
});
@@ -155,18 +151,16 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
component.forwarding = createForwardingResource([ForwardingLinkRel.SUCCESSFUL]);
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(successfullMessage);
- expect(button).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, successfullMessage);
});
it('should be hidden', () => {
component.forwarding = forwarding;
fixture.detectChanges();
- const button = fixture.nativeElement.querySelector(successfullMessage);
- expect(button).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, successfullMessage);
});
});
});
diff --git a/alfa-client/libs/forwarding/src/lib/forwarding.module.ts b/alfa-client/libs/forwarding/src/lib/forwarding.module.ts
index 387ac14e53..b7a762e2b2 100644
--- a/alfa-client/libs/forwarding/src/lib/forwarding.module.ts
+++ b/alfa-client/libs/forwarding/src/lib/forwarding.module.ts
@@ -24,11 +24,13 @@
import { CommandSharedModule } from '@alfa-client/command-shared';
import { ForwardingSharedModule } from '@alfa-client/forwarding-shared';
import { FormatDateWithTimePipe, HasLinkPipe, ToEmbeddedResourcesPipe } from '@alfa-client/tech-shared';
-import { ExpansionPanelComponent, OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent, SpinnerComponent, } from '@alfa-client/ui';
+import { ExpansionPanelComponent, OzgcloudTextEditorComponent, SpinnerComponent } from '@alfa-client/ui';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
import { ForwardingByEmailContainerComponent } from './forwarding-by-email-container/forwarding-by-email-container.component';
import { ForwardingByEmailFormComponent } from './forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component';
import { ForwardingByEmailFormularComponent } from './forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-formular.component';
@@ -42,7 +44,6 @@ import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-em
ForwardingSharedModule,
CommandSharedModule,
OzgcloudTextEditorComponent,
- OzgcloudStrokedButtonWithSpinnerComponent,
SpinnerComponent,
FormatDateWithTimePipe,
MatIcon,
@@ -50,6 +51,8 @@ import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-em
ToEmbeddedResourcesPipe,
ExpansionPanelComponent,
ReactiveFormsModule,
+ ButtonWithSpinnerComponent,
+ IconComponent,
],
declarations: [
ForwardingByEmailZustellenContainerComponent,
--
GitLab