Skip to content
Snippets Groups Projects
Commit d318a52c authored by OZGCloud's avatar OZGCloud
Browse files

OZG-4381 change reply selector to checkbox

parent 6bc103f7
No related branches found
No related tags found
No related merge requests found
Showing
with 59 additions and 62 deletions
<ng-container *ngIf="postfachFeatures$ | async as postfachFeatures"> <ng-container *ngIf="postfachFeatures$ | async as postfachFeatures">
<ozgcloud-enum-editor <ozgcloud-enum-editor *ngIf="postfachFeatures.reply" data-test-id="postfach-reply-option"
*ngIf="postfachFeatures.reply" label="Antwort vom Antragsteller benötigt" [formControlName]="formServiceClass.FIELD_REPLY_OPTION"
data-test-id="postfach-reply-option" [defaultItem]="uncheckedItem" [checkedItem]="checkedItem" [uncheckedItem]="uncheckedItem">
[formControlName]="formServiceClass.FIELD_REPLY_OPTION"
[defaultItem]="defaultItem"
[itemList]="itemList"
>
</ozgcloud-enum-editor> </ozgcloud-enum-editor>
</ng-container> </ng-container>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing'; 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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { import {
FORBIDDEN_REPLY_OPTION_ITEM, FORBIDDEN_REPLY_OPTION_ITEM,
...@@ -19,6 +19,7 @@ import { MockComponent } from 'ng-mocks'; ...@@ -19,6 +19,7 @@ import { MockComponent } from 'ng-mocks';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { PostfachMailFormservice } from '../postfach-mail.formservice'; import { PostfachMailFormservice } from '../postfach-mail.formservice';
import { PostfachNachrichtReplyEditorContainerComponent } from './postfach-nachricht-reply-editor-container.component'; import { PostfachNachrichtReplyEditorContainerComponent } from './postfach-nachricht-reply-editor-container.component';
import { forwardRef } from '@angular/core';
describe('PostfachNachrichtReplyEditorContainerComponent', () => { describe('PostfachNachrichtReplyEditorContainerComponent', () => {
let component: PostfachNachrichtReplyEditorContainerComponent; let component: PostfachNachrichtReplyEditorContainerComponent;
...@@ -39,7 +40,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => { ...@@ -39,7 +40,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ declarations: [
PostfachNachrichtReplyEditorContainerComponent, PostfachNachrichtReplyEditorContainerComponent,
MockComponent(EnumEditorComponent), MockComponent(EnumEditorComponent)
], ],
providers: [ providers: [
{ {
...@@ -49,7 +50,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => { ...@@ -49,7 +50,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
{ {
provide: FormGroupDirective, provide: FormGroupDirective,
useValue: formGroupDirective, useValue: formGroupDirective,
}, }
], ],
imports: [ReactiveFormsModule, BrowserAnimationsModule], imports: [ReactiveFormsModule, BrowserAnimationsModule],
}).compileComponents(); }).compileComponents();
...@@ -94,18 +95,22 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => { ...@@ -94,18 +95,22 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent); 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(); fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent); const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
expect(enumEditor.itemList).toEqual([ expect(enumEditor.checkedItem).toBe(POSSIBLE_REPLY_OPTION_ITEM);
POSSIBLE_REPLY_OPTION_ITEM,
FORBIDDEN_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', () => { describe('on unavailable feature', () => {
......
...@@ -17,16 +17,15 @@ import { PostfachMailFormservice } from '../postfach-mail.formservice'; ...@@ -17,16 +17,15 @@ import { PostfachMailFormservice } from '../postfach-mail.formservice';
viewProviders: [FormProvider], viewProviders: [FormProvider],
}) })
export class PostfachNachrichtReplyEditorContainerComponent implements OnInit { export class PostfachNachrichtReplyEditorContainerComponent implements OnInit {
public readonly itemList: EnumEditorItem[] = [ public readonly defaultItem: EnumEditorItem = FORBIDDEN_REPLY_OPTION_ITEM;
POSSIBLE_REPLY_OPTION_ITEM,
FORBIDDEN_REPLY_OPTION_ITEM,
];
public readonly defaultItem: EnumEditorItem = POSSIBLE_REPLY_OPTION_ITEM;
public readonly formServiceClass = PostfachMailFormservice; public readonly formServiceClass = PostfachMailFormservice;
public postfachFeatures$: Observable<Features>; public postfachFeatures$: Observable<Features>;
public checkedItem: EnumEditorItem = POSSIBLE_REPLY_OPTION_ITEM;
public uncheckedItem: EnumEditorItem = FORBIDDEN_REPLY_OPTION_ITEM;
constructor(private postfachService: PostfachService) { } constructor(private postfachService: PostfachService) { }
ngOnInit(): void { ngOnInit(): void {
......
...@@ -23,33 +23,4 @@ ...@@ -23,33 +23,4 @@
unter der Lizenz sind dem Lizenztext zu entnehmen. unter der Lizenz sind dem Lizenztext zu entnehmen.
--> -->
<ozgcloud-icon-button-with-spinner <mat-checkbox [checked]="selected" (change)="setSelection($event)">{{ label }}</mat-checkbox>
[icon]="selectedItem.icon" \ No newline at end of file
[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()"
/>
...@@ -30,6 +30,8 @@ import { ConvertForDataTestPipe } from '@alfa-client/tech-shared'; ...@@ -30,6 +30,8 @@ import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
import { IconButtonWithSpinnerComponent, UiModule } from '@alfa-client/ui'; import { IconButtonWithSpinnerComponent, UiModule } from '@alfa-client/ui';
import { MockComponent } from 'ng-mocks'; import { MockComponent } from 'ng-mocks';
import { EnumEditorComponent } from './enum-editor.component'; import { EnumEditorComponent } from './enum-editor.component';
import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
import { MatCheckboxChange } from '@angular/material/checkbox';
describe('EnumEditorComponent', () => { describe('EnumEditorComponent', () => {
let component: EnumEditorComponent; let component: EnumEditorComponent;
...@@ -51,6 +53,8 @@ describe('EnumEditorComponent', () => { ...@@ -51,6 +53,8 @@ describe('EnumEditorComponent', () => {
fixture = TestBed.createComponent(EnumEditorComponent); fixture = TestBed.createComponent(EnumEditorComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
component.defaultItem = { type: 'enumType', icon: 'x', text: 'y' }; 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' }]; component.itemList = [{ type: 'enumType', icon: 'x', text: 'y' }];
fixture.detectChanges(); fixture.detectChanges();
}); });
...@@ -58,4 +62,24 @@ describe('EnumEditorComponent', () => { ...@@ -58,4 +62,24 @@ describe('EnumEditorComponent', () => {
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); 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');
})
})
}); });
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component'; import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
import { EnumEditorItem } from './enum-editor.model'; import { EnumEditorItem } from './enum-editor.model';
import { MatCheckboxChange } from '@angular/material/checkbox';
@Component({ @Component({
selector: 'ozgcloud-enum-editor', selector: 'ozgcloud-enum-editor',
...@@ -33,16 +34,19 @@ import { EnumEditorItem } from './enum-editor.model'; ...@@ -33,16 +34,19 @@ import { EnumEditorItem } from './enum-editor.model';
export class EnumEditorComponent extends FormControlEditorAbstractComponent implements OnInit { export class EnumEditorComponent extends FormControlEditorAbstractComponent implements OnInit {
@Input() label: string; @Input() label: string;
@Input() itemList: EnumEditorItem[]; @Input() itemList: EnumEditorItem[];
@Input() defaultItem: EnumEditorItem; @Input() defaultItem: EnumEditorItem;
@Input() checkedItem: EnumEditorItem;
@Input() uncheckedItem: EnumEditorItem;
selectedItem: EnumEditorItem; public selected: boolean;
override ngOnInit(): void { override ngOnInit(): void {
this.selectedItem = this.defaultItem; this.selected = this.defaultItem === this.checkedItem;
this.writeValue(this.defaultItem.type);
} }
setSelectedEnumItem(item: EnumEditorItem): void { setSelection(event: MatCheckboxChange): void {
this.selectedItem = item; this.writeValue(event.checked ? this.checkedItem.type : this.uncheckedItem.type);
this.writeValue(item.type);
} }
} }
...@@ -117,7 +117,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o ...@@ -117,7 +117,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
ValidationErrorComponent, ValidationErrorComponent,
AutocompleteEditorComponent, AutocompleteEditorComponent,
FixedDialogComponent, FixedDialogComponent,
EnumEditorComponent,
InternalServerErrorDialogComponent, InternalServerErrorDialogComponent,
FileUploadEditorComponent, FileUploadEditorComponent,
MatTooltipDirective, MatTooltipDirective,
...@@ -218,7 +217,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o ...@@ -218,7 +217,6 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
ValidationErrorComponent, ValidationErrorComponent,
AutocompleteEditorComponent, AutocompleteEditorComponent,
FixedDialogComponent, FixedDialogComponent,
EnumEditorComponent,
InternalServerErrorDialogComponent, InternalServerErrorDialogComponent,
FileUploadEditorComponent, FileUploadEditorComponent,
MatTooltipDirective, MatTooltipDirective,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment