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

Merge pull request 'OZG-4381 OZG-4892 replace mail reply option with checkbox'...

Merge pull request 'OZG-4381 OZG-4892 replace mail reply option with checkbox' (#435) from OZG-4381-OZG-4892-replace-drop-down-with-checkbox into OZG-4381-versenden-von-rueckfragen

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/435
parents 1c288700 08278ca6
No related branches found
No related tags found
No related merge requests found
Showing
with 152 additions and 32 deletions
......@@ -21,7 +21,7 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { EnumEditorItem } from '@alfa-client/ui';
import { CheckboxEnumEditorItem } from '@alfa-client/ui';
import { getEmbeddedResource } from '@ngxp/rest';
import { isNil } from 'lodash-es';
import { PostfachMailListLinkRel } from './postfach.linkrel';
......@@ -77,13 +77,9 @@ export function getPostfachNachrichtenCount(
}
}
export const FORBIDDEN_REPLY_OPTION_ITEM: EnumEditorItem = {
export const FORBIDDEN_REPLY_OPTION_ITEM: CheckboxEnumEditorItem = {
type: ReplyOption.FORBIDDEN,
svgIcon: 'no_reply',
text: 'Antworten unterbinden',
};
export const POSSIBLE_REPLY_OPTION_ITEM: EnumEditorItem = {
export const POSSIBLE_REPLY_OPTION_ITEM: CheckboxEnumEditorItem = {
type: ReplyOption.POSSIBLE,
icon: 'reply',
text: 'Antworten erlauben',
};
......@@ -46,7 +46,7 @@
[postfachNachricht]="dialogData.postfachNachricht"
></alfa-postfach-nachricht-attachment-container>
<div class="button-bar-bottom">
<div class="button-bar-bottom space-between">
<ozgcloud-stroked-button-with-spinner
data-test-id="postfach-send-button"
[stateResource]="sendInProgress$ | async"
......
......@@ -65,3 +65,8 @@
min-height: 20px;
}
}
.space-between {
display: flex;
justify-content: space-between;
}
<ng-container *ngIf="postfachFeatures$ | async as postfachFeatures">
<ozgcloud-enum-editor
<ozgcloud-checkbox-enum-editor
*ngIf="postfachFeatures.reply"
data-test-id="postfach-reply-option"
label="Antwort vom Antragsteller benötigt"
[formControlName]="formServiceClass.FIELD_REPLY_OPTION"
[defaultItem]="defaultItem"
[itemList]="itemList"
[defaultItem]="checkedItem"
[checkedItem]="checkedItem"
[uncheckedItem]="uncheckedItem"
>
</ozgcloud-enum-editor>
</ozgcloud-checkbox-enum-editor>
</ng-container>
......@@ -13,12 +13,12 @@ import {
mock,
notExistsAsHtmlElement,
} from '@alfa-client/test-utils';
import { EnumEditorComponent } from '@alfa-client/ui';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
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 { CheckboxEnumEditorComponent } from '@alfa-client/ui';
describe('PostfachNachrichtReplyEditorContainerComponent', () => {
let component: PostfachNachrichtReplyEditorContainerComponent;
......@@ -39,7 +39,7 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
await TestBed.configureTestingModule({
declarations: [
PostfachNachrichtReplyEditorContainerComponent,
MockComponent(EnumEditorComponent),
MockComponent(CheckboxEnumEditorComponent),
],
providers: [
{
......@@ -86,25 +86,41 @@ describe('PostfachNachrichtReplyEditorContainerComponent', () => {
it.skip('should be called with formControlName', () => {
fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
const enumEditor: CheckboxEnumEditorComponent = getMockComponent(
fixture,
CheckboxEnumEditorComponent,
);
expect(enumEditor.control).toBe(PostfachMailFormservice.FIELD_REPLY_OPTION);
});
it('should be called with defaultItem', () => {
fixture.detectChanges();
const enumEditor: EnumEditorComponent = getMockComponent(fixture, EnumEditorComponent);
const enumEditor: CheckboxEnumEditorComponent = getMockComponent(
fixture,
CheckboxEnumEditorComponent,
);
expect(enumEditor.defaultItem).toBe(POSSIBLE_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,
]);
const enumEditor: CheckboxEnumEditorComponent = getMockComponent(
fixture,
CheckboxEnumEditorComponent,
);
expect(enumEditor.checkedItem).toBe(POSSIBLE_REPLY_OPTION_ITEM);
});
it('should be called with unchecked item', () => {
fixture.detectChanges();
const enumEditor: CheckboxEnumEditorComponent = getMockComponent(
fixture,
CheckboxEnumEditorComponent,
);
expect(enumEditor.uncheckedItem).toBe(FORBIDDEN_REPLY_OPTION_ITEM);
});
});
......
import { Component, OnInit } from '@angular/core';
import {
FORBIDDEN_REPLY_OPTION_ITEM,
Features,
FORBIDDEN_REPLY_OPTION_ITEM,
POSSIBLE_REPLY_OPTION_ITEM,
PostfachService,
} from '@alfa-client/postfach-shared';
import { FormProvider } from '@alfa-client/tech-shared';
import { EnumEditorItem } from '@alfa-client/ui';
import { CheckboxEnumEditorItem } from '@alfa-client/ui';
import { Observable } from 'rxjs';
import { PostfachMailFormservice } from '../postfach-mail.formservice';
......@@ -17,16 +17,13 @@ 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 formServiceClass = PostfachMailFormservice;
public postfachFeatures$: Observable<Features>;
public checkedItem: CheckboxEnumEditorItem = POSSIBLE_REPLY_OPTION_ITEM;
public uncheckedItem: CheckboxEnumEditorItem = FORBIDDEN_REPLY_OPTION_ITEM;
constructor(private postfachService: PostfachService) {}
ngOnInit(): void {
......
......@@ -10,7 +10,7 @@
"error",
{
"type": "attribute",
"prefix": "alfa",
"prefix": "ozgcloud",
"style": "camelCase"
}
],
......@@ -18,7 +18,7 @@
"error",
{
"type": "element",
"prefix": "alfa",
"prefix": "ozgcloud",
"style": "kebab-case"
}
]
......
......@@ -58,3 +58,5 @@ export * from './lib/ui/subnavigation/subnavigation.component';
export * from './lib/ui/ozgcloud-button/ozgcloud-icon-button-primary/ozgcloud-icon-button-primary.component';
export * from './lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component';
export * from './lib/ui/ui.module';
export * from './lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.component';
export * from './lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.model';
<mat-checkbox color="primary" [checked]="selected" (change)="setSelection($event)"
>{{ label }}
</mat-checkbox>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
import { IconButtonWithSpinnerComponent, UiModule } from '@alfa-client/ui';
import { MockComponent } from 'ng-mocks';
import { CheckboxEnumEditorComponent } from '@alfa-client/ui';
describe('CheckboxEnumEditorComponent', () => {
let component: CheckboxEnumEditorComponent;
let fixture: ComponentFixture<CheckboxEnumEditorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
CheckboxEnumEditorComponent,
MatIcon,
ConvertForDataTestPipe,
MockComponent(IconButtonWithSpinnerComponent),
],
imports: [UiModule, MatFormFieldModule, ReactiveFormsModule, BrowserAnimationsModule],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(CheckboxEnumEditorComponent);
component = fixture.componentInstance;
component.defaultItem = { type: 'enumType' };
component.checkedItem = { type: 'positive' };
component.uncheckedItem = { type: 'negative' };
fixture.detectChanges();
});
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');
});
});
});
import { Component, Input, OnInit } from '@angular/core';
import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
import { CheckboxEnumEditorItem } from './checkbox-enum-editor.model';
import { MatCheckboxChange } from '@angular/material/checkbox';
/**
* Ein Checkbox, dessen Wert beim FormControl statt boolean als string aus dem enum editor item
* abgebildet wird.
*/
@Component({
selector: 'ozgcloud-checkbox-enum-editor',
templateUrl: './checkbox-enum-editor.component.html',
styleUrls: ['./checkbox-enum-editor.component.scss'],
})
export class CheckboxEnumEditorComponent
extends FormControlEditorAbstractComponent
implements OnInit
{
@Input() label: string;
@Input() defaultItem: CheckboxEnumEditorItem;
@Input() checkedItem: CheckboxEnumEditorItem;
@Input() uncheckedItem: CheckboxEnumEditorItem;
public selected: boolean;
override ngOnInit(): void {
this.selected = this.defaultItem === this.checkedItem;
this.writeValue(this.defaultItem.type);
}
setSelection(event: MatCheckboxChange): void {
this.writeValue(event.checked ? this.checkedItem.type : this.uncheckedItem.type);
}
}
export interface CheckboxEnumEditorItem {
type: any;
}
......@@ -97,6 +97,7 @@ import { SubnavigationComponent } from './subnavigation/subnavigation.component'
import { ValidationErrorComponent } from './validation-error/validation-error.component';
import { OzgcloudIconButtonPrimaryComponent } from './ozgcloud-button/ozgcloud-icon-button-primary/ozgcloud-icon-button-primary.component';
import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/ozgcloud-paste-text-button.component';
import { CheckboxEnumEditorComponent } from './editor/checkbox-enum-editor/checkbox-enum-editor.component';
@NgModule({
declarations: [
......@@ -146,6 +147,7 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
BasicDialogComponent,
OzgcloudButtonContentComponent,
OzgcloudPasteTextButtonComponent,
CheckboxEnumEditorComponent,
],
imports: [
MatButtonModule,
......@@ -245,6 +247,7 @@ import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button/o
SnackbarCloseButtonComponent,
BasicDialogComponent,
OzgcloudPasteTextButtonComponent,
CheckboxEnumEditorComponent,
],
providers: [
{
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment