Merge branch 'staging' into 'master'

Staging

See merge request arsnova/frag.jetzt!666

src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts

-import { AfterViewInit, Component, Inject, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
 import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
-import { NotificationService } from '../../../../services/util/notification.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RoomService } from '../../../../services/http/room.service';
-import { Router } from '@angular/router';
-import { EventService } from '../../../../services/util/event.service';
 import { Room } from '../../../../models/room';
-import { FormControl, Validators } from '@angular/forms';
 import { WriteCommentComponent } from '../../../shared/write-comment/write-comment.component';
 
 @Component({
@@ -18,17 +14,11 @@ import { WriteCommentComponent } from '../../../shared/write-comment/write-comme
 export class RoomDescriptionSettingsComponent implements AfterViewInit {
 
   @ViewChild(WriteCommentComponent) writeComment: WriteCommentComponent;
-  editRoom: Room;
-  roomNameFormControl = new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]);
+  @Input() editRoom: Room;
 
   constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
-              public dialog: MatDialog,
-              public notificationService: NotificationService,
               public translationService: TranslateService,
-              protected roomService: RoomService,
-              public router: Router,
-              public eventService: EventService,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
+              protected roomService: RoomService) {
   }
 
 
@@ -39,26 +29,17 @@ export class RoomDescriptionSettingsComponent implements AfterViewInit {
   }
 
   buildCloseDialogActionCallback(): () => void {
-    return () => this.closeDialog('abort');
+    return () => this.dialogRef.close('abort');
   }
 
   buildSaveActionCallback(): () => void {
     return () => this.save();
   }
 
-  closeDialog(type: string): void {
-    this.dialogRef.close(type);
-  }
-
   save(): void {
     this.editRoom.description = this.writeComment.commentData.currentData;
     this.roomService.updateRoom(this.editRoom).subscribe(r => this.editRoom = r);
-    if (!this.roomNameFormControl.hasError('required')
-      && !this.roomNameFormControl.hasError('minlength')
-      && !this.roomNameFormControl.hasError('maxlength')) {
-      this.closeDialog('update');
-    }
-    this.closeDialog('update');
+    this.dialogRef.close('update');
   }
 
 }

src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html

+<h2 class="oldtypo-h2">{{ 'session.edit-session-name' | translate }}</h2>
+<div mat-dialog-content
+     *ngIf="editRoom">
+  <mat-form-field class="input-block">
+    <input (focus)="eventService.makeFocusOnInputTrue()"
+           (blur)="eventService.makeFocusOnInputFalse()"
+           matInput
+           [formControl]="roomNameFormControl"
+           name="room-name"
+           maxlength="20"
+           aria-labelledby="room-name"/>
+    <mat-placeholder class="placeholder">{{ 'session.session-name' | translate }}</mat-placeholder>
+    <mat-hint align="end"><span aria-hidden="true">{{ editRoom.name.length }} / 20</span></mat-hint>
+    <mat-error *ngIf="roomNameFormControl.hasError('required')
+          || roomNameFormControl.hasError('minlength')
+          || roomNameFormControl.hasError('maxlength')">
+      {{ 'room-page.name-length-error' | translate }}
+    </mat-error>
+  </mat-form-field>
+</div>
+<app-dialog-action-buttons
+  [buttonsLabelSection]="'room-page'"
+  [confirmButtonLabel]="'update'"
+  [showDivider]="false"
+  [spacing]="false"
+  [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+  [confirmButtonClickAction]="buildConfirmDialogActionCallback()"
+></app-dialog-action-buttons>

src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.spec.ts

+/*import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomNameSettingsComponent } from './room-name-settings.component';
+
+describe('RoomNameSettingsComponent', () => {
+  let component: RoomNameSettingsComponent;
+  let fixture: ComponentFixture<RoomNameSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RoomNameSettingsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoomNameSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+ */

src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Room } from '../../../../models/room';
+import { FormControl, Validators } from '@angular/forms';
+import { EventService } from '../../../../services/util/event.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
+import { RoomService } from '../../../../services/http/room.service';
+
+@Component({
+  selector: 'app-room-name-settings',
+  templateUrl: './room-name-settings.component.html',
+  styleUrls: ['./room-name-settings.component.scss']
+})
+export class RoomNameSettingsComponent implements OnInit {
+
+  @Input() editRoom: Room;
+  roomNameFormControl = new FormControl('', [
+    Validators.required, Validators.minLength(3), Validators.maxLength(20)
+  ]);
+
+  constructor(private dialogRef: MatDialogRef<RoomCreatorPageComponent>,
+              public eventService: EventService,
+              private roomService: RoomService) {
+  }
+
+  ngOnInit() {
+    this.roomNameFormControl.setValue(this.editRoom.name);
+  }
+
+  buildCloseDialogActionCallback(): () => void {
+    return () => this.dialogRef.close('abort');
+  }
+
+  buildConfirmDialogActionCallback(): () => void {
+    return () => this.save();
+  }
+
+  private save(): void {
+    if (!this.roomNameFormControl.hasError('required')
+      && !this.roomNameFormControl.hasError('minlength')
+      && !this.roomNameFormControl.hasError('maxlength')) {
+      this.editRoom.name = this.roomNameFormControl.value;
+      this.roomService.updateRoom(this.editRoom).subscribe(r => this.editRoom = r);
+      this.dialogRef.close('update');
+    }
+  }
+}

src/app/components/creator/creator.module.ts

@@ -25,6 +25,7 @@ import { ArsModule } from '../../../../projects/ars/src/lib/ars.module';
 import { MatRippleModule } from '@angular/material/core';
 import { ProfanitySettingsComponent } from './_dialogs/profanity-settings/profanity-settings.component';
 import { RoomDescriptionSettingsComponent } from './_dialogs/room-description-settings/room-description-settings.component';
+import { RoomNameSettingsComponent } from './_dialogs/room-name-settings/room-name-settings.component';
 
 @NgModule({
   imports: [
@@ -60,7 +61,8 @@ import { RoomDescriptionSettingsComponent } from './_dialogs/room-description-se
     DeleteAnswerComponent,
     QuestionWallComponent,
     ProfanitySettingsComponent,
-    RoomDescriptionSettingsComponent
+    RoomDescriptionSettingsComponent,
+    RoomNameSettingsComponent
   ],
   exports: []
 })

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -12,6 +12,12 @@
                          fxLayout="row">
           <mat-card-title fxLayoutAlign="center">
             <h2 class="oldtypo-h2">&raquo;{{room.name}}&laquo;</h2>
+            <button mat-icon-button
+                    class="inline-icon-button"
+                    (click)="editSessionName()"
+                    aria-labelledby="edit_session_name">
+              <mat-icon matTooltip="{{ 'session.edit-session-name' | translate}}">edit</mat-icon>
+            </button>
           </mat-card-title>
           <mat-card-subtitle fxLayoutAlign="center">
             <span class="room-short-id">
@@ -131,6 +137,7 @@
                  [room]="room"></app-active-user>
 
 <div class="visually-hidden">
+  <div id="edit_session_name">{{'room-page.a11y-room-name' | translate}}</div>
   <div id="cloud_download">{{'room-page.a11y-cloud_download' | translate}}</div>
   <div id="question_answer">{{'room-page.a11y-question_answer' | translate}}</div>
   <div id="gavel">{{'room-page.a11y-gavel' | translate}}</div>

src/app/components/creator/room-creator-page/room-creator-page.component.scss

@@ -143,3 +143,8 @@ markdown {
   background: var(--secondary);
   color: var(--on-secondary);
 }
+
+.inline-icon-button {
+  width: max-content;
+  margin: 0.25em 0.25em 0.25em 0.75em;
+}

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -29,6 +29,7 @@ import { RoomDeleteComponent } from '../_dialogs/room-delete/room-delete.compone
 import { RoomDeleted } from '../../../models/events/room-deleted';
 import { ProfanitySettingsComponent } from '../_dialogs/profanity-settings/profanity-settings.component';
 import { RoomDescriptionSettingsComponent } from '../_dialogs/room-description-settings/room-description-settings.component';
+import { RoomNameSettingsComponent } from '../_dialogs/room-name-settings/room-name-settings.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -103,6 +104,16 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     dialogRef.componentInstance.editRoom=this.room;
   }
 
+  editSessionName() {
+    const dialogRef = this.dialog.open(RoomNameSettingsComponent, {
+      width: '900px',
+      maxWidth: 'calc( 100% - 50px )',
+      maxHeight: 'calc( 100vh - 50px )',
+      autoFocus: false
+    });
+    dialogRef.componentInstance.editRoom = this.room;
+  }
+
   editSessionDescription(){
     const dialogRef = this.dialog.open(RoomDescriptionSettingsComponent, {
       width: '900px',

src/assets/i18n/creator/de.json

@@ -394,6 +394,7 @@
     "description": "Text",
     "max-ls": "Maximale Anzahl Zeichen:",
     "session-name": "Name der Sitzung",
+    "edit-session-name": "Name der Sitzung bearbeiten",
     "preview": "Vorschau"
   },
   "tag-cloud-popup": {

src/assets/i18n/creator/en.json

@@ -393,6 +393,7 @@
     "description": "Description",
     "max-ls": "Max. characters:",
     "session-name": "Session name",
+    "edit-session-name": "Edit session name",
     "preview": "Preview"
   },
   "tag-cloud": {