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

alfa-client/libs/postfach-shared/src/lib/postfach.util.ts

@@ -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',
 };

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-mail-form.component.html

@@ -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"

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-mail-form.component.scss

@@ -65,3 +65,8 @@
     min-height: 20px;
   }
 }
+
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.html

 <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>

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.spec.ts

@@ -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);
       });
     });
 

alfa-client/libs/postfach/src/lib/postfach-mail-form/postfach-nachricht-reply-editor-container/postfach-nachricht-reply-editor-container.component.ts

 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 {

alfa-client/libs/ui/.eslintrc.json

@@ -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"
           }
         ]

alfa-client/libs/ui/src/index.ts

@@ -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';

alfa-client/libs/ui/src/lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.component.html

+<mat-checkbox color="primary" [checked]="selected" (change)="setSelection($event)"
+  >{{ label }}
+</mat-checkbox>

alfa-client/libs/ui/src/lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.component.spec.ts

+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');
+    });
+  });
+});

alfa-client/libs/ui/src/lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.component.ts

+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);
+  }
+}

alfa-client/libs/ui/src/lib/ui/editor/checkbox-enum-editor/checkbox-enum-editor.model.ts

+export interface CheckboxEnumEditorItem {
+  type: any;
+}

alfa-client/libs/ui/src/lib/ui/ui.module.ts

@@ -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: [
     {