From d318a52cdaae05fd35251534eabc765a4f310f4b Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 28 Feb 2024 09:18:34 +0100
Subject: [PATCH] OZG-4381 change reply selector to checkbox
---
...icht-reply-editor-container.component.html | 12 +++----
...t-reply-editor-container.component.spec.ts | 23 ++++++++------
...hricht-reply-editor-container.component.ts | 11 +++----
.../enum-editor/enum-editor.component.html | 31 +------------------
.../enum-editor/enum-editor.component.spec.ts | 24 ++++++++++++++
.../enum-editor/enum-editor.component.ts | 14 ++++++---
.../formcontrol-editor.abstract.component.ts | 2 +-
alfa-client/libs/ui/src/lib/ui/ui.module.ts | 4 +--
8 files changed, 59 insertions(+), 62 deletions(-)
diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.html b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.html
index 4d6b604752..0ccbd92902 100644
--- a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.html
+++ b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.html
@@ -1,10 +1,6 @@
<ng-container *ngIf="postfachFeatures$ | async as postfachFeatures">
- <ozgcloud-enum-editor
- *ngIf="postfachFeatures.reply"
- data-test-id="postfach-reply-option"
- [formControlName]="formServiceClass.FIELD_REPLY_OPTION"
- [defaultItem]="defaultItem"
- [itemList]="itemList"
- >
+ <ozgcloud-enum-editor *ngIf="postfachFeatures.reply" data-test-id="postfach-reply-option"
+ label="Antwort vom Antragsteller benötigt" [formControlName]="formServiceClass.FIELD_REPLY_OPTION"
+ [defaultItem]="uncheckedItem" [checkedItem]="checkedItem" [uncheckedItem]="uncheckedItem">
</ozgcloud-enum-editor>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.spec.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.spec.ts
index ef6570a027..a11f31b413 100644
--- a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.spec.ts
+++ b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.spec.ts
@@ -1,5 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, FormGroupDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
FORBIDDEN_REPLY_OPTION_ITEM,
@@ -19,6 +19,7 @@ import { MockComponent } from 'ng-mocks';
import { of } from 'rxjs';
import { PostfachMailFormservice } from '../postfach-mail.formservice';
import { PostfachNachrichtReplyEditorContainerComponent } from './postfach-nachricht-reply-editor-container.component';
+import { forwardRef } from '@angular/core';
describe('PostfachNachrichtReplyEditorContainerComponent', () => {
let component: PostfachNachrichtReplyEditorContainerComponent;
@@ -39,7 +40,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
await TestBed.configureTestingModule({
declarations: [
PostfachNachrichtReplyEditorContainerComponent,
- MockComponent(EnumEditorComponent),
+ MockComponent(EnumEditorComponent)
],
providers: [
{
@@ -49,7 +50,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
{
provide: FormGroupDirective,
useValue: formGroupDirective,
- },
+ }
],
imports: [ReactiveFormsModule, BrowserAnimationsModule],
}).compileComponents();
@@ -94,18 +95,22 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
- expect(enumEditor.defaultItem).toBe(POSSIBLE_REPLY_OPTION_ITEM);
+ expect(enumEditor.defaultItem).toBe(FORBIDDEN_REPLY_OPTION_ITEM);
});
- it('should be called wirh itemList', () => {
+ it('should be called with checked item', () => {
fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
- expect(enumEditor.itemList).toEqual([
- POSSIBLE_REPLY_OPTION_ITEM,
- FORBIDDEN_REPLY_OPTION_ITEM,
- ]);
+ expect(enumEditor.checkedItem).toBe(POSSIBLE_REPLY_OPTION_ITEM);
});
+
+ it('should be called with unchecked item', () => {
+ fixture.detectChanges();
+
+ const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
+ expect(enumEditor.uncheckedItem).toBe(FORBIDDEN_REPLY_OPTION_ITEM);
+ })
});
describe('on unavailable feature', () => {
diff --git a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.ts b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.ts
index dff70f9872..22743dab12 100644
--- a/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.ts
+++ b/alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.ts
@@ -17,17 +17,16 @@ import { PostfachMailFormservice } from '../postfach-mail.formservice';
viewProviders: [FormProvider],
})
export class PostfachNachrichtReplyEditorContainerComponent implements OnInit {
- public readonly itemList: EnumEditorItem[] = [
- POSSIBLE_REPLY_OPTION_ITEM,
- FORBIDDEN_REPLY_OPTION_ITEM,
- ];
- public readonly defaultItem: EnumEditorItem = POSSIBLE_REPLY_OPTION_ITEM;
+ public readonly defaultItem: EnumEditorItem = FORBIDDEN_REPLY_OPTION_ITEM;
public readonly formServiceClass = PostfachMailFormservice;
public postfachFeatures$: Observable<Features>;
- constructor(private postfachService: PostfachService) {}
+ public checkedItem: EnumEditorItem = POSSIBLE_REPLY_OPTION_ITEM;
+ public uncheckedItem: EnumEditorItem = FORBIDDEN_REPLY_OPTION_ITEM;
+
+ constructor(private postfachService: PostfachService) { }
ngOnInit(): void {
this.postfachFeatures$ = this.postfachService.getFeatures();
diff --git a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.html b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.html
index 6425e1981f..3195ae545f 100644
--- a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.html
+++ b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.html
@@ -23,33 +23,4 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
-<ozgcloud-icon-button-with-spinner
- [icon]="selectedItem.icon"
- [svgIcon]="selectedItem.svgIcon"
- [matMenuTriggerFor]="menu.matMenu"
- toolTip="Antworten erlauben/unterbinden"
- class="reply-toggle"
->
-</ozgcloud-icon-button-with-spinner>
-
-<ozgcloud-menu #menu class="reply-option-menu">
- <button
- *ngFor="let item of itemList"
- mat-menu-item
- (click)="setSelectedEnumItem(item)"
- [attr.data-test-id]="(item.type | convertForDataTest) + '-enum-item'"
- [attr.aria-label]="item.text"
- >
- <mat-icon *ngIf="item.svgIcon" [svgIcon]="item.svgIcon"></mat-icon>
- <mat-icon *ngIf="!item.svgIcon">{{ item.icon }}</mat-icon>
- <span> {{ item.text }}</span>
- </button>
-</ozgcloud-menu>
-
-<mat-label>{{ label }}</mat-label>
-<input
- [formControl]="fieldControl"
- [attr.data-test-id]="(label | convertForDataTest) + '-enum-input'"
- type="hidden"
- (blur)="touch()"
-/>
+<mat-checkbox [checked]="selected" (change)="setSelection($event)">{{ label }}</mat-checkbox>
\ No newline at end of file
diff --git a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.spec.ts b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.spec.ts
index ebde58c7f1..02810003ee 100644
--- a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.spec.ts
+++ b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.spec.ts
@@ -30,6 +30,8 @@ import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
import { IconButtonWithSpinnerComponent, UiModule } from '@alfa-client/ui';
import { MockComponent } from 'ng-mocks';
import { EnumEditorComponent } from './enum-editor.component';
+import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
+import { MatCheckboxChange } from '@angular/material/checkbox';
describe('EnumEditorComponent', () => {
let component: EnumEditorComponent;
@@ -51,6 +53,8 @@ describe('EnumEditorComponent', () => {
fixture = TestBed.createComponent(EnumEditorComponent);
component = fixture.componentInstance;
component.defaultItem = { type: 'enumType', icon: 'x', text: 'y' };
+ component.checkedItem = { type: 'positive', icon: 'x', text: 'y' };
+ component.uncheckedItem = { type: 'negative', icon: 'x', text: 'y' }
component.itemList = [{ type: 'enumType', icon: 'x', text: 'y' }];
fixture.detectChanges();
});
@@ -58,4 +62,24 @@ describe('EnumEditorComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ describe('setSelection', () => {
+ const writeMethodMock = jest.fn();
+
+ beforeEach(() => {
+ component.writeValue = writeMethodMock;
+ })
+
+ it('should write checked value on selected', () => {
+ component.setSelection({ source: null, checked: true });
+
+ expect(writeMethodMock).toHaveBeenCalledWith('positive');
+ })
+
+ it('should write unchecked value on selected', () => {
+ component.setSelection({ source: null, checked: false });
+
+ expect(writeMethodMock).toHaveBeenCalledWith('negative');
+ })
+ })
});
diff --git a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.ts b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.ts
index 58a4a6f341..e5d1324fb0 100644
--- a/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.ts
+++ b/alfa-client/libs/ui/src/lib/ui/editor/enum-editor/enum-editor.component.ts
@@ -24,6 +24,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
import { EnumEditorItem } from './enum-editor.model';
+import { MatCheckboxChange } from '@angular/material/checkbox';
@Component({
selector: 'ozgcloud-enum-editor',
@@ -33,16 +34,19 @@ import { EnumEditorItem } from './enum-editor.model';
export class EnumEditorComponent extends FormControlEditorAbstractComponent implements OnInit {
@Input() label: string;
@Input() itemList: EnumEditorItem[];
+
@Input() defaultItem: EnumEditorItem;
+ @Input() checkedItem: EnumEditorItem;
+ @Input() uncheckedItem: EnumEditorItem;
- selectedItem: EnumEditorItem;
+ public selected: boolean;
override ngOnInit(): void {
- this.selectedItem = this.defaultItem;
+ this.selected = this.defaultItem === this.checkedItem;
+ this.writeValue(this.defaultItem.type);
}
- setSelectedEnumItem(item: EnumEditorItem): void {
- this.selectedItem = item;
- this.writeValue(item.type);
+ setSelection(event: MatCheckboxChange): void {
+ this.writeValue(event.checked ? this.checkedItem.type : this.uncheckedItem.type);
}
}
diff --git a/alfa-client/libs/ui/src/lib/ui/editor/formcontrol-editor.abstract.component.ts b/alfa-client/libs/ui/src/lib/ui/editor/formcontrol-editor.abstract.component.ts
index 345cf7de9e..8d81d9235d 100644
--- a/alfa-client/libs/ui/src/lib/ui/editor/formcontrol-editor.abstract.component.ts
+++ b/alfa-client/libs/ui/src/lib/ui/editor/formcontrol-editor.abstract.component.ts
@@ -89,7 +89,7 @@ export abstract class FormControlEditorAbstractComponent implements ControlValue
get issues(): Issue[] {
return this.fieldControl.errors ?
- Object.keys(this.fieldControl.errors).map((key) => <Issue>this.fieldControl.errors[key])
+ Object.keys(this.fieldControl.errors).map((key) => <Issue>this.fieldControl.errors[key])
: [];
}
}
diff --git a/alfa-client/libs/ui/src/lib/ui/ui.module.ts b/alfa-client/libs/ui/src/lib/ui/ui.module.ts
index 61c0bd7440..f0db9b3749 100644
--- a/alfa-client/libs/ui/src/lib/ui/ui.module.ts
+++ b/alfa-client/libs/ui/src/lib/ui/ui.module.ts
@@ -117,7 +117,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
ValidationErrorComponent,
AutocompleteEditorComponent,
FixedDialogComponent,
- EnumEditorComponent,
InternalServerErrorDialogComponent,
FileUploadEditorComponent,
MatTooltipDirective,
@@ -218,7 +217,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
ValidationErrorComponent,
AutocompleteEditorComponent,
FixedDialogComponent,
- EnumEditorComponent,
InternalServerErrorDialogComponent,
FileUploadEditorComponent,
MatTooltipDirective,
@@ -268,4 +266,4 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
},
],
})
-export class UiModule {}
+export class UiModule { }
--
GitLab