diff --git a/src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts b/src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts
index 1006684aa26ca7e6f900d42ad02ed35504193fda..3da889c4dae991dd14b5efec59e906681fd03b41 100644
--- a/src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts
+++ b/src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts
@@ -1,13 +1,9 @@
-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');
}
}
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..25a131cd29f8105283631f510026695efe313aa3
--- /dev/null
+++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.html
@@ -0,0 +1,28 @@
+<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>
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.scss b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.spec.ts b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..694be328f0d5dbbd25ae96eb84d3d04bb6bf9607
--- /dev/null
+++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.spec.ts
@@ -0,0 +1,26 @@
+/*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();
+ });
+});
+ */
diff --git a/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..47a8dcf6a7f1fb1e225d10456f17ed2f782494c8
--- /dev/null
+++ b/src/app/components/creator/_dialogs/room-name-settings/room-name-settings.component.ts
@@ -0,0 +1,47 @@
+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');
+ }
+ }
+}
diff --git a/src/app/components/creator/creator.module.ts b/src/app/components/creator/creator.module.ts
index b876aea134afe3d6bebcb146b45e339e0cf7881c..1f6944e22c53e24a2e2961dcaf97d3875f78ce35 100644
--- a/src/app/components/creator/creator.module.ts
+++ b/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: []
})
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index 3fdd9b3c900921f0004752f7bbbbe02a727ff03c..ac7a221f4b20d0c6ffa09b8773b275fcb3b6dc03 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/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">»{{room.name}}«</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>
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 215de327e5bad5d6d6e1fda3492f3c373f38fc27..fb0fd0d2d8356fcd2da226fd23f9c1fa278534bf 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/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;
+}
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.ts b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
index a783278555b4dc61ce7ac3558d8d9a7f530f32e3..aeff1ca57338ae1a0fb83d667806a9416c57414d 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.ts
+++ b/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',
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index f1bc2d019e09cb6c2642f402ae48daa1617b52db..b63adeb8ba43eb6f432120a132f6171d7c52d448 100644
--- a/src/assets/i18n/creator/de.json
+++ b/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": {
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 3d39c1bee90440be4a9d4a77e8f9bb3b21254efc..127f2eee379ba4c5d091b51b91a1465cbefa7b9c 100644
--- a/src/assets/i18n/creator/en.json
+++ b/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": {