OZG-7510 extract save/cancel button

alfa-client/libs/admin/shared/src/index.ts

+export * from './lib/admin-cancel-button/admin-cancel-button.component';
+export * from './lib/admin-save-button/admin-save-button.component';
 export * from './lib/routes';
+export * from './lib/token';

alfa-client/libs/admin/shared/src/lib/admin-cancel-button/admin-cancel-button.component.html

+<ods-routing-button [linkPath]="linkPath" text="Abbrechen" variant="outline" dataTestId="cancel-button">
+  <ods-close-icon icon class="fill-primary" />
+</ods-routing-button>

alfa-client/libs/admin/shared/src/lib/admin-cancel-button/admin-cancel-button.component.spec.ts

+import { AdminCancelButtonComponent } from '@admin-client/shared';
+import { getMockComponent } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RoutingButtonComponent } from '@ods/component';
+import { CloseIconComponent } from '@ods/system';
+import { MockComponent } from 'ng-mocks';
+
+describe('AdminCancelButtonComponent', () => {
+  let component: AdminCancelButtonComponent;
+  let fixture: ComponentFixture<AdminCancelButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminCancelButtonComponent],
+      declarations: [MockComponent(RoutingButtonComponent), MockComponent(CloseIconComponent)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AdminCancelButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('button', () => {
+    it('should be called with linkPath', () => {
+      component.linkPath = 'dummyLinkPath';
+
+      fixture.detectChanges();
+
+      expect(getMockComponent(fixture, RoutingButtonComponent).linkPath).toBe('dummyLinkPath');
+    });
+  });
+});

alfa-client/libs/admin/shared/src/lib/admin-cancel-button/admin-cancel-button.component.ts

+import { ROUTES } from '@admin-client/shared';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RoutingButtonComponent } from '@ods/component';
+import { CloseIconComponent } from '@ods/system';
+
+@Component({
+  selector: 'admin-cancel-button',
+  templateUrl: './admin-cancel-button.component.html',
+  standalone: true,
+  imports: [CommonModule, RoutingButtonComponent, CloseIconComponent],
+})
+export class AdminCancelButtonComponent {
+  @Input() linkPath: string;
+
+  public readonly Routes = ROUTES;
+}

alfa-client/libs/admin/shared/src/lib/admin-save-button/admin-save-button.component.html

+<ods-button-with-spinner
+  (clickEmitter)="submit()"
+  text="Speichern"
+  dataTestId="save-button"
+  [stateResource]="stateResource$ | async"
+/>

alfa-client/libs/admin/shared/src/lib/admin-save-button/admin-save-button.component.spec.ts

+import { ADMIN_FORMSERVICE } from '@admin-client/shared';
+import { AbstractFormService, createStateResource, StateResource } from '@alfa-client/tech-shared';
+import { dispatchEventFromFixture, getMockComponent, Mock, MockEvent } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Resource } from '@ngxp/rest';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { getDataTestIdAttributeOf } from 'libs/tech-shared/test/data-test';
+import { singleCold } from 'libs/tech-shared/test/marbles';
+import { createDummyResource } from 'libs/tech-shared/test/resource';
+import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { AdminSaveButtonComponent } from './admin-save-button.component';
+
+describe('AdminSaveButtonComponent', () => {
+  let component: AdminSaveButtonComponent;
+  let fixture: ComponentFixture<AdminSaveButtonComponent>;
+
+  let formService: Mock<AbstractFormService<Resource>>;
+
+  const saveButton: string = getDataTestIdAttributeOf('save-button');
+
+  const stateResource: StateResource<Resource> = createStateResource(createDummyResource());
+
+  beforeEach(async () => {
+    formService = <any>{ submit: jest.fn().mockReturnValue(singleCold(stateResource)) };
+
+    await TestBed.configureTestingModule({
+      imports: [AdminSaveButtonComponent],
+      declarations: [MockComponent(ButtonWithSpinnerComponent)],
+    })
+      .overrideComponent(AdminSaveButtonComponent, {
+        set: {
+          providers: [
+            {
+              provide: ADMIN_FORMSERVICE,
+              useValue: formService,
+            },
+          ],
+        },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AdminSaveButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('on submit', () => {
+    it('should call formService', () => {
+      dispatchEventFromFixture(fixture, saveButton, MockEvent.CLICK);
+
+      expect(formService.submit).toHaveBeenCalled();
+    });
+
+    it('should assign state resource', () => {
+      dispatchEventFromFixture(fixture, saveButton, MockEvent.CLICK);
+
+      expect(component.stateResource$).toBeObservable(singleCold(stateResource));
+    });
+  });
+
+  describe('button', () => {
+    it('should call with stateResource', () => {
+      component.stateResource$ = of(stateResource);
+
+      fixture.detectChanges();
+
+      const comp: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
+      expect(comp.stateResource).toBe(stateResource);
+    });
+  });
+});

alfa-client/libs/admin/shared/src/lib/admin-save-button/admin-save-button.component.ts

+import { ADMIN_FORMSERVICE } from '@admin-client/shared';
+import { AbstractFormService, createEmptyStateResource } from '@alfa-client/tech-shared';
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { Resource } from '@ngxp/rest';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { of } from 'rxjs';
+
+@Component({
+  selector: 'admin-save-button',
+  standalone: true,
+  imports: [CommonModule, ButtonWithSpinnerComponent],
+  templateUrl: './admin-save-button.component.html',
+})
+export class AdminSaveButtonComponent {
+  private formService: AbstractFormService<Resource> = inject(ADMIN_FORMSERVICE);
+
+  public stateResource$ = of(createEmptyStateResource<Resource>());
+
+  public submit(): void {
+    this.stateResource$ = this.formService.submit();
+  }
+}

alfa-client/libs/admin/shared/src/lib/token.ts

+import { AbstractFormService } from '@alfa-client/tech-shared';
+import { InjectionToken } from '@angular/core';
+import { Resource } from '@ngxp/rest';
+
+export const ADMIN_FORMSERVICE = new InjectionToken<AbstractFormService<Resource>>('adminFormService');

alfa-client/libs/admin/statistik/src/lib/statistik-fields-form/admin-statistik-fields-form.component.html

@@ -7,7 +7,7 @@
         [formControlName]="StatistikFieldsFormService.FIELD_FORM_ENGINE_NAME"
         label="Formengine"
         placeholder="Tragen Sie hier die Formengine des Formulars ein."
-        data-test-id="form-engine-input"
+        data-test-id="form-engine-name-input"
       ></ods-text-editor>
       <ods-text-editor
         [formControlName]="StatistikFieldsFormService.FIELD_FORM_ID"
@@ -34,23 +34,12 @@
     </div>
   </form>
 
-  <ods-button text="Datenfeld hinzufügen" dataTestId="add-data-field-button" (clickEmitter)="formService.addMapping()">
+  <ods-button text="Datenfeld hinzufügen" dataTestId="add-mapping-button" (clickEmitter)="formService.addMapping()">
     <ods-plus-icon icon class="fill-whitetext" />
   </ods-button>
 
   <div class="mt-4 flex gap-4">
-    <ods-button-with-spinner
-      (clickEmitter)="formService.submit()"
-      text="Speichern"
-      dataTestId="save-statistik-fields-button"
-    ></ods-button-with-spinner>
-    <ods-routing-button
-      [linkPath]="Routes.STATISTIK"
-      text="Abbrechen"
-      variant="outline"
-      dataTestId="cancel-statistik-fields-button"
-    >
-      <ods-close-icon icon class="fill-primary"
-    /></ods-routing-button>
+    <admin-save-button />
+    <admin-cancel-button [linkPath]="Routes.STATISTIK" />
   </div>
 </div>

alfa-client/libs/admin/statistik/src/lib/statistik-fields-form/admin-statistik-fields-form.component.spec.ts

+import { ADMIN_FORMSERVICE } from '@admin-client/shared';
 import { EMPTY_STRING } from '@alfa-client/tech-shared';
 import { dispatchEventFromFixture, existsAsHtmlElement, mock, Mock, MockEvent, mockGetValue } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { ButtonWithSpinnerComponent, RoutingButtonComponent, TextEditorComponent } from '@ods/component';
-import { ButtonComponent, CloseIconComponent } from '@ods/system';
+import { TextEditorComponent } from '@ods/component';
+import { ButtonComponent, PlusIconComponent } from '@ods/system';
 import { MockComponent } from 'ng-mocks';
 import {
   getDataTestIdAttributeOf,
   getDataTestIdOf,
   getDynamicDataTestIdAttributOf,
 } from '../../../../../tech-shared/test/data-test';
+import { AdminCancelButtonComponent } from '../../../../shared/src/lib/admin-cancel-button/admin-cancel-button.component';
+import { AdminSaveButtonComponent } from '../../../../shared/src/lib/admin-save-button/admin-save-button.component';
 import { AdminStatistikFieldsFormComponent } from './admin-statistik-fields-form.component';
 import { StatistikFieldsFormService } from './statistik-fields.formservice';
 
@@ -24,9 +27,6 @@ describe('AdminStatistikFieldsFormComponent', () => {
   const mappingField: string = getDataTestIdOf('mapping-field-0');
   const removeMappingButton: string = getDynamicDataTestIdAttributOf('remove-mapping-button-0');
 
-  const saveButtonTestId: string = getDataTestIdAttributeOf('save-statistik-fields-button');
-  const cancelButtonTestId: string = getDataTestIdAttributeOf('cancel-statistik-fields-button');
-
   const formBuilder: FormBuilder = new FormBuilder();
 
   let formService: Mock<StatistikFieldsFormService>;
@@ -59,9 +59,9 @@ describe('AdminStatistikFieldsFormComponent', () => {
         AdminStatistikFieldsFormComponent,
         MockComponent(TextEditorComponent),
         MockComponent(ButtonComponent),
-        MockComponent(ButtonWithSpinnerComponent),
-        MockComponent(RoutingButtonComponent),
-        MockComponent(CloseIconComponent),
+        MockComponent(PlusIconComponent),
+        MockComponent(AdminSaveButtonComponent),
+        MockComponent(AdminCancelButtonComponent),
       ],
       imports: [ReactiveFormsModule],
     })
@@ -72,6 +72,10 @@ describe('AdminStatistikFieldsFormComponent', () => {
               provide: StatistikFieldsFormService,
               useValue: formService,
             },
+            {
+              provide: ADMIN_FORMSERVICE,
+              useValue: formService,
+            },
           ],
         },
       })
@@ -138,21 +142,5 @@ describe('AdminStatistikFieldsFormComponent', () => {
         expect(formService.removeMapping).toHaveBeenCalledWith(0);
       });
     });
-
-    describe('save button', () => {
-      it('should exists', () => {
-        fixture.detectChanges();
-
-        existsAsHtmlElement(fixture, saveButtonTestId);
-      });
-    });
-
-    describe('cancel button', () => {
-      it('should exists', () => {
-        fixture.detectChanges();
-
-        existsAsHtmlElement(fixture, cancelButtonTestId);
-      });
-    });
   });
 });

alfa-client/libs/admin/statistik/src/lib/statistik-fields-form/admin-statistik-fields-form.component.ts

-import { ROUTES } from '@admin-client/shared';
+import { ADMIN_FORMSERVICE, AdminCancelButtonComponent, AdminSaveButtonComponent, ROUTES } from '@admin-client/shared';
 import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { ButtonWithSpinnerComponent, RoutingButtonComponent, TextEditorComponent } from '@ods/component';
-import { ButtonComponent, CloseIconComponent, PlusIconComponent } from '@ods/system';
+import { TextEditorComponent } from '@ods/component';
+import { ButtonComponent, PlusIconComponent } from '@ods/system';
 import { StatistikFieldsFormService } from './statistik-fields.formservice';
 
 @Component({
   selector: 'admin-statistik-fields-form',
+  templateUrl: './admin-statistik-fields-form.component.html',
   standalone: true,
   imports: [
     CommonModule,
     ButtonComponent,
-    CloseIconComponent,
-    ReactiveFormsModule,
     PlusIconComponent,
+    ReactiveFormsModule,
     TextEditorComponent,
-    RoutingButtonComponent,
-    ButtonWithSpinnerComponent,
+    AdminSaveButtonComponent,
+    AdminCancelButtonComponent,
   ],
-  providers: [StatistikFieldsFormService],
-  templateUrl: './admin-statistik-fields-form.component.html',
+  providers: [{ provide: ADMIN_FORMSERVICE, useClass: StatistikFieldsFormService }],
 })
 export class AdminStatistikFieldsFormComponent {
-  public readonly formService = inject(StatistikFieldsFormService);
+  public readonly formService = <StatistikFieldsFormService>inject(ADMIN_FORMSERVICE);
 
   public readonly StatistikFieldsFormService = StatistikFieldsFormService;
   public readonly Routes = ROUTES;