Merge pull request 'OZG-5810 Add spinner to button' (#625) from...

Merge pull request 'OZG-5810 Add spinner to button' (#625) from OZG-5810-Spinner-Weiter-Button into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/625


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-steps-content.component.html

@@ -7,6 +7,7 @@
   <alfa-vorgang-detail-bescheiden-antrag-bescheiden></alfa-vorgang-detail-bescheiden-antrag-bescheiden>
   <alfa-vorgang-detail-bescheiden-weiter-button
     (clickEmitter)="changeActiveStep(2)"
+    [submitResource]="submitResource"
   ></alfa-vorgang-detail-bescheiden-weiter-button>
 </alfa-vorgang-detail-bescheiden-step-content>
 
@@ -22,6 +23,7 @@
   ></alfa-vorgang-detail-bescheiden-dokumente-hinzufuegen>
   <alfa-vorgang-detail-bescheiden-weiter-button
     (clickEmitter)="changeActiveStep(3)"
+    [submitResource]="submitResource"
   ></alfa-vorgang-detail-bescheiden-weiter-button>
 </alfa-vorgang-detail-bescheiden-step-content>
 

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-steps-content.component.ts

-import { HttpError, StateResource, hasStateResourceError, isLoaded } from '@alfa-client/tech-shared';
+import {
+  HttpError,
+  StateResource,
+  createEmptyStateResource,
+  hasStateResourceError,
+  isLoaded,
+} from '@alfa-client/tech-shared';
 import {
   VorgangService,
   VorgangWithEingangLinkRel,
@@ -6,7 +12,7 @@ import {
 } from '@alfa-client/vorgang-shared';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Resource, hasLink } from '@ngxp/rest';
-import { BehaviorSubject, Observable, combineLatest, filter, first, map } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest, filter, first, map, tap } from 'rxjs';
 import { BescheidenFormService } from '../../bescheiden.formservice';
 
 @Component({
@@ -24,6 +30,8 @@ export class VorgangDetailBescheidenStepsContentComponent implements OnInit {
 
   showBescheidErstellungUeberspringen$: Observable<boolean>;
 
+  submitResource: StateResource<Resource | HttpError> = createEmptyStateResource();
+
   constructor(
     private readonly vorgangService: VorgangService,
     private formService: BescheidenFormService,
@@ -45,7 +53,11 @@ export class VorgangDetailBescheidenStepsContentComponent implements OnInit {
     if (this.canChangeTo(step)) {
       this.formService
         .submit()
-        .pipe(filter(this.noError), first())
+        .pipe(
+          tap((resource: StateResource<Resource | HttpError>) => (this.submitResource = resource)),
+          filter(this.noError),
+          first(),
+        )
         .subscribe(() => {
           this.formService.setActiveStep(step);
           this.activeStepChange.emit(step);

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-weiter-button/vorgang-detail-bescheiden-weiter-button.component.html

-<ods-button
+<ods-button-with-spinner
   *ngIf="showButton$ | async"
   (clickEmitter)="clickEmitter.emit()"
+  [stateResource]="submitResource"
   variant="primary"
   size="medium"
   class="mt-8 flex"
   dataTestId="bescheid-weiter-button"
   text="Weiter"
 >
-</ods-button>
+</ods-button-with-spinner>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-weiter-button/vorgang-detail-bescheiden-weiter-button.component.ts

 import { BescheidLinkRel, BescheidService } from '@alfa-client/bescheid-shared';
-import { isLoaded } from '@alfa-client/tech-shared';
+import {
+  HttpError,
+  StateResource,
+  createEmptyStateResource,
+  isLoaded,
+} from '@alfa-client/tech-shared';
 import { VorgangService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { hasLink } from '@ngxp/rest';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Resource, hasLink } from '@ngxp/rest';
 import { Observable, filter, map, merge } from 'rxjs';
 import { BescheidenFormService } from '../../bescheiden.formservice';
 
@@ -11,6 +16,7 @@ import { BescheidenFormService } from '../../bescheiden.formservice';
   templateUrl: './vorgang-detail-bescheiden-weiter-button.component.html',
 })
 export class VorgangDetailBescheidenWeiterButtonComponent implements OnInit {
+  @Input() submitResource: StateResource<Resource | HttpError> = createEmptyStateResource();
   @Output() clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
   showButton$: Observable<boolean>;