OZG-6988 add buttons and dynamic fields

Sub task: OZG-7446

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

@@ -25,11 +25,14 @@
 -->
 <h1 class="heading-1" data-test-id="statistik-header-text">Statistik</h1>
 @if (evaluateAdditionalFields) {
-  <admin-statistik-fields-form data-test-id="statistik-fields-form"></admin-statistik-fields-form>
+  <admin-statistik-fields-form
+    (cancel)="hideEvaluateFieldsForm()"
+    data-test-id="statistik-fields-form"
+  ></admin-statistik-fields-form>
 } @else {
   <ods-button
     text="Weitere Felder auswerten"
-    (clickEmitter)="onEvaluateAdditionalFields()"
+    (clickEmitter)="showEvaluateFieldsForm()"
     data-test-id="weitere-felder-auswerten-button"
   ></ods-button>
 }

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

@@ -56,15 +56,25 @@ describe('StatistikContainerComponent', () => {
       expect(component.evaluateAdditionalFields).toBeFalsy();
     });
 
-    describe('onEvaluateAdditionalFieldsClick', () => {
+    describe('showEvaluateFieldsForm', () => {
       it('should update component state', () => {
         component.evaluateAdditionalFields = false;
 
-        component.onEvaluateAdditionalFields();
+        component.showEvaluateFieldsForm();
 
         expect(component.evaluateAdditionalFields).toBeTruthy();
       });
     });
+
+    describe('hideEvaluateFieldsForm', () => {
+      it('should update component state', () => {
+        component.evaluateAdditionalFields = true;
+
+        component.hideEvaluateFieldsForm();
+
+        expect(component.evaluateAdditionalFields).toBeFalsy();
+      });
+    });
   });
 
   describe('template', () => {
@@ -86,7 +96,7 @@ describe('StatistikContainerComponent', () => {
       describe('output', () => {
         describe('clickEmitter', () => {
           it('should call handler', () => {
-            component.onEvaluateAdditionalFields = jest.fn();
+            component.showEvaluateFieldsForm = jest.fn();
             component.evaluateAdditionalFields = false;
             fixture.detectChanges();
 
@@ -96,13 +106,13 @@ describe('StatistikContainerComponent', () => {
               name: 'clickEmitter',
             });
 
-            expect(component.onEvaluateAdditionalFields).toHaveBeenCalled();
+            expect(component.showEvaluateFieldsForm).toHaveBeenCalled();
           });
         });
       });
     });
 
-    describe('stastik fields form', () => {
+    describe('statistik fields form', () => {
       it('should exists', () => {
         component.evaluateAdditionalFields = true;
 
@@ -118,6 +128,24 @@ describe('StatistikContainerComponent', () => {
 
         notExistsAsHtmlElement(fixture, statistikFieldsFormTestId);
       });
+
+      describe('output', () => {
+        describe('cancel', () => {
+          it('should hide form', () => {
+            component.evaluateAdditionalFields = true;
+            component.hideEvaluateFieldsForm = jest.fn();
+            fixture.detectChanges();
+
+            triggerEvent({
+              fixture,
+              elementSelector: statistikFieldsFormTestId,
+              name: 'cancel',
+            });
+
+            expect(component.hideEvaluateFieldsForm).toHaveBeenCalled();
+          });
+        });
+      });
     });
   });
 });

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

@@ -35,7 +35,11 @@ import { AdminStatistikFieldsFormComponent } from './statistik-fields-form/admin
 export class StatistikContainerComponent {
   public evaluateAdditionalFields: boolean = false;
 
-  public onEvaluateAdditionalFields(): void {
+  public showEvaluateFieldsForm(): void {
     this.evaluateAdditionalFields = true;
   }
+
+  public hideEvaluateFieldsForm(): void {
+    this.evaluateAdditionalFields = false;
+  }
 }

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

@@ -13,3 +13,19 @@
   placeholder="Tragen Sie hier die FormID des Formulars ein"
   data-test-id="form-id-input"
 ></ods-text-input>
+
+@for (dataFieldControl of dataFieldsFormControls; track $index) {
+  <ods-text-input
+    [fieldControl]="dataFieldControl"
+    label="Pfad des Datenfeldes"
+    placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
+    [attr.data-test-id]="'data-statistik-field-' + $index"
+  ></ods-text-input>
+}
+
+<ods-button text="Datenfeld hinzufügen" (clickEmitter)="addDataField()" data-test-id="add-data-field-button"> </ods-button>
+
+<ods-button text="Speichern" data-test-id="save-statistik-fields-button"></ods-button>
+<ods-button text="Abbrechen" (clickEmitter)="cancel.emit()" data-test-id="cancel-statistik-fields-button">
+  <ods-close-icon icon></ods-close-icon>
+</ods-button>

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

-import { existsAsHtmlElement, getElementComponentFromFixtureByCss } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getElementComponentFromFixtureByCss, triggerEvent } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { TextInputComponent } from '@ods/system';
@@ -12,6 +12,10 @@ describe('AdminStatistikFieldsFormComponent', () => {
 
   const formEngineInputTestId: string = getDataTestIdOf('form-engine-input');
   const formIdInputTestId: string = getDataTestIdOf('form-id-input');
+  const addDataFieldButtonTestId: string = getDataTestIdOf('add-data-field-button');
+  const saveButtonTestId: string = getDataTestIdOf('save-statistik-fields-button');
+  const cancelButtonTestId: string = getDataTestIdOf('cancel-statistik-fields-button');
+  const dataField1TestId: string = getDataTestIdOf('data-statistik-field-0');
 
   let formService: StatistikFieldsFormService;
 
@@ -20,6 +24,17 @@ describe('AdminStatistikFieldsFormComponent', () => {
   });
 
   beforeEach(async () => {
+    TestBed.overrideComponent(AdminStatistikFieldsFormComponent, {
+      set: {
+        providers: [
+          {
+            provide: StatistikFieldsFormService,
+            useValue: formService,
+          },
+        ],
+      },
+    });
+
     await TestBed.configureTestingModule({
       imports: [AdminStatistikFieldsFormComponent],
       providers: [{ provide: StatistikFieldsFormService, useValue: formService }],
@@ -38,7 +53,17 @@ describe('AdminStatistikFieldsFormComponent', () => {
     it('should set form controls', () => {
       expect(component.formEngineFormControl).toBeDefined();
       expect(component.formIdFormControl).toBeDefined();
-      expect(component.dataFieldsFormArray).toBeDefined();
+      expect(component.dataFieldsFormControls).toBeDefined();
+    });
+
+    describe('addDataField', () => {
+      it('should call form service', () => {
+        formService.addDataField = jest.fn();
+
+        component.addDataField();
+
+        expect(formService.addDataField).toHaveBeenCalled();
+      });
     });
   });
 
@@ -81,6 +106,81 @@ describe('AdminStatistikFieldsFormComponent', () => {
       });
     });
 
-    describe('data field input', () => {});
+    describe('data field input', () => {
+      it('should exists', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, dataField1TestId);
+      });
+
+      it('should have been called with inputs', () => {
+        fixture.detectChanges();
+
+        const dataFieldInput: TextInputComponent = getElementComponentFromFixtureByCss<TextInputComponent>(
+          fixture,
+          dataField1TestId,
+        );
+
+        expect(dataFieldInput.fieldControl).toEqual(component.dataFieldsFormControls[0]);
+      });
+    });
+
+    describe('add data field button', () => {
+      it('should exists', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, addDataFieldButtonTestId);
+      });
+
+      describe('output', () => {
+        describe('clickEmitter', () => {
+          it('should call handler', () => {
+            fixture.detectChanges();
+            component.addDataField = jest.fn();
+
+            triggerEvent({
+              fixture,
+              elementSelector: addDataFieldButtonTestId,
+              name: 'clickEmitter',
+            });
+
+            expect(component.addDataField).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+
+    describe('save button', () => {
+      it('should exists', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, saveButtonTestId);
+      });
+    });
+
+    describe('cancel button', () => {
+      it('should exists', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, cancelButtonTestId);
+      });
+
+      describe('output', () => {
+        describe('clickEmitter', () => {
+          it('should emit', () => {
+            component.cancel.emit = jest.fn();
+            fixture.detectChanges();
+
+            triggerEvent({
+              fixture,
+              elementSelector: cancelButtonTestId,
+              name: 'clickEmitter',
+            });
+
+            expect(component.cancel.emit).toHaveBeenCalled();
+          });
+        });
+      });
+    });
   });
 });

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

 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { FormArray, FormControl } from '@angular/forms';
-import { TextInputComponent } from '@ods/system';
+import { Component, EventEmitter, inject, Output } from '@angular/core';
+import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ButtonComponent, CloseIconComponent, TextInputComponent } from '@ods/system';
 import { StatistikFieldsFormService } from './statistik-fields.formservice';
 
 @Component({
   selector: 'admin-statistik-fields-form',
   standalone: true,
-  imports: [CommonModule, TextInputComponent],
+  imports: [CommonModule, TextInputComponent, ButtonComponent, CloseIconComponent, ReactiveFormsModule],
+  providers: [StatistikFieldsFormService],
   templateUrl: './admin-statistik-fields-form.component.html',
 })
 export class AdminStatistikFieldsFormComponent {
+  @Output() public readonly cancel: EventEmitter<void> = new EventEmitter<void>();
+
   private readonly formService = inject(StatistikFieldsFormService);
 
   public readonly formEngineFormControl: FormControl = this.formService.form.controls[
@@ -19,7 +22,11 @@ export class AdminStatistikFieldsFormComponent {
   public readonly formIdFormControl: FormControl = this.formService.form.controls[
     StatistikFieldsFormService.FIELD_FORM_ID
   ] as FormControl;
-  public readonly dataFieldsFormArray: FormArray = this.formService.form.controls[
-    StatistikFieldsFormService.FIELD_DATA_FIELDS
-  ] as FormArray;
+  public readonly dataFieldsFormControls: FormControl[] = (
+    this.formService.form.controls[StatistikFieldsFormService.FIELD_DATA_FIELDS] as FormArray
+  ).controls as FormControl[];
+
+  public addDataField(): void {
+    this.formService.addDataField();
+  }
 }

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

@@ -25,4 +25,8 @@ export class StatistikFieldsFormService extends AbstractFormService {
   protected getPathPrefix(): string {
     return 'settingBody';
   }
+
+  public addDataField(): void {
+    (this.form.controls[StatistikFieldsFormService.FIELD_DATA_FIELDS] as FormArray).push(new FormControl(EMPTY_STRING));
+  }
 }