diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html index 8ee2413999f33a618d0ac6032951ae56f9589939..6672f64a191f3f553427fcd51ad8c8708e624371 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html +++ b/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> } diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.spec.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.spec.ts index 8c02510de78974e809e86d6db354a09cd52b4879..2dc542e50c57ce3bce6d22c3e646e9d9ee34ae19 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.spec.ts +++ b/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(); + }); + }); + }); }); }); }); diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.ts index e6442a1ebc348518ff9e9e1e2e6076b12e00b450..a48ea7f7be10edad82d75012817aa433ec8c1e26 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.ts +++ b/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; + } } diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html index fa88869240cab091c0f576ce8d75b3c238049b75..d74c8c031ff2fe29979e3f84c1dc2c33ff655e29 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html +++ b/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> diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.spec.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.spec.ts index 652e4a4905147d4ba1a65f5db80993b6f9548951..5bdad007133959a41c98b1a679448300f2f853be 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.spec.ts +++ b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.spec.ts @@ -1,4 +1,4 @@ -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(); + }); + }); + }); + }); }); }); diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts index d6a268624c29f3bd8e8d74f305778777c6330def..c8a3fd46c6fd7f19c5541b2ca36c14e5b574af03 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts +++ b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts @@ -1,16 +1,19 @@ 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(); + } } diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/statistik-fields.formservice.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/statistik-fields.formservice.ts index 78cc57f803ab5a4af7f0e7f27c910ef3eea26fb4..2f6610d53b9da6db523e167b77d8c5396be6d99d 100644 --- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/statistik-fields.formservice.ts +++ b/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)); + } }