Add tags setting dialog

Enable tags per default on room creation and add default tags.
Refactor comment extension settings.

src/app/components/creator/_dialogs/comment-settings/comment-settings.component.ts

@@ -30,6 +30,8 @@ export class CommentSettingsComponent implements OnInit {
   settingThreshold = false;
   enableCommentModeration = false;
   directSend = true;
+  tagsEnabled = false;
+  tags: string[] = [];
 
   constructor(
     public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
@@ -47,13 +49,19 @@ export class CommentSettingsComponent implements OnInit {
 
   ngOnInit() {
     if (this.editRoom.extensions && this.editRoom.extensions['comments']) {
-      if (this.editRoom.extensions['comments'].enableThreshold !== null) {
-        if (this.editRoom.extensions['comments'].commentThreshold) {
-          this.commentThreshold = this.editRoom.extensions['comments'].commentThreshold;
+      const commentExtension = this.editRoom.extensions['comments'];
+      if (commentExtension.enableThreshold !== null) {
+        if (commentExtension.commentThreshold) {
+          this.commentThreshold = commentExtension.commentThreshold;
         } else {
           this.commentThreshold = -100;
         }
-        this.settingThreshold = this.editRoom.extensions['comments'].enableThreshold;
+        this.settingThreshold = commentExtension.enableThreshold;
+      }
+
+      if (commentExtension.enableTags !== null) {
+        this.tagsEnabled = commentExtension.enableTags;
+        this.tags = commentExtension.tags;
       }
 
       if (this.editRoom.extensions['comments'].enableModeration !== null) {

src/app/components/creator/_dialogs/tags/tags.component.html

+<div mat-dialog-content>
+  <h2>{{'room-page.tags' | translate }}</h2>
+  <mat-divider></mat-divider>
+  <div fxLayout="column">
+    <!-- <div fxLayout="row">
+      <p>{{ 'room-page.tags' | translate }}&nbsp;
+        <mat-slide-toggle [(ngModel)]="tagsEnabled" aria-labelledby="tags" ></mat-slide-toggle>
+      </p>
+    </div> -->
+    <div fxLayout="row">
+      <mat-form-field class="input-block">
+        <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
+              matInput type="text" #tag aria-labelledby="tag-new"
+              [formControl]="tagFormControl" name="taginput"/>
+        <mat-placeholder class="placeholder">{{ 'room-page.tag-new' | translate }}</mat-placeholder>
+        <mat-error *ngIf="!tagFormControl.valid">
+          {{ 'room-page.tag-error' | translate }}
+        </mat-error>
+      </mat-form-field>
+      <span class="fill-remaining-space"></span>
+      <button mat-icon-button class="add" (click)="addTag(tag.value);" aria-labelledby="add-tag" >
+        <mat-icon class="add-icon">add_circle</mat-icon>
+      </button>
+      <span class="fill-remaining-space"></span>
+    </div>
+    <div *ngIf="tagsEnabled === true && tags !== undefined && tags.length > 0">
+      <div class="ta" fxLayout="row" *ngFor="let tag of tags">
+        <p>
+          {{tag}}
+        </p>
+        <span class="fill-remaining-space"></span>
+        <button mat-icon-button class="close" (click)="deleteTag(tag)" aria-labelledby="delete-tag">
+          <mat-icon class="close-icon">close</mat-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+  
+  <app-dialog-action-buttons
+    buttonsLabelSection="room-page"
+    confirmButtonLabel="update"
+    [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+    [confirmButtonClickAction]="buildSaveActionCallback()"
+  ></app-dialog-action-buttons>
+</div>

src/app/components/creator/_dialogs/tags/tags.component.scss

+mat-divider {
+  margin-bottom: 10px;
+  color: var(--on-surface) !important;
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+p {
+  font-size: medium;
+}
+
+mat-form-field {
+  width: 90%;
+  color: var(--on-surface);
+}
+
+.add {
+  width: 45px;
+  height: 45px;
+  text-align: center;
+  margin: 1% 2% 1% 1%;
+  color: var(--primary);
+}
+
+.add-icon {
+  width: 45px !important;
+  height: 45px !important;
+  font-size: 45px;
+  line-height: 100% !important;
+}
+
+.close {
+  margin-right: 10px;
+}
+
+.close-icon {
+  color: var(--red);
+}

src/app/components/creator/_dialogs/tags/tags.component.ts

+import { Component, Inject, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
+import { NotificationService } from '../../../../services/util/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
+import { LanguageService } from '../../../../services/util/language.service';
+import { EventService } from '../../../../services/util/event.service';
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-tags',
+  templateUrl: './tags.component.html',
+  styleUrls: ['./tags.component.scss']
+})
+export class TagsComponent implements OnInit {
+
+  extension: {};
+
+  tags: string[];
+  tagsEnabled: boolean;
+
+  tagFormControl = new FormControl('', [Validators.minLength(3), Validators.maxLength(15)]);
+  @ViewChild('tag') redel: ElementRef;
+
+  constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
+    public dialog: MatDialog,
+    public notificationService: NotificationService,
+    public translationService: TranslateService,
+    protected langService: LanguageService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public eventService: EventService) {
+      langService.langEmitter.subscribe(lang => translationService.use(lang));
+  }
+
+  ngOnInit() {
+    if (this.extension === undefined) {
+      this.extension = {};
+      let defaultTags = ['Question', 'Comment', 'Hint', 'Orga'];
+      if (localStorage.getItem('currentLang') === 'de') {
+        defaultTags = ['Frage', 'Kommentar', 'Hinweis', 'Orga'];
+      }
+      this.extension['enableTags'] = true;
+      this.extension['tags'] = defaultTags;
+      this.tags = defaultTags;
+      this.tagsEnabled = true;
+    } else {
+      this.tags = this.extension['tags'];
+      this.tagsEnabled = this.extension['enableTags'];
+    }
+  }
+
+  addTag(tag: string) {
+    if (this.tagFormControl.valid) {
+      this.tags.push(tag);
+      this.extension['tags'] = this.tags;
+      this.redel.nativeElement.value = '';
+    }
+  }
+
+  deleteTag(tag: string) {
+    this.tags = this.tags.filter(o => o !== tag);
+    this.extension['tags'] = this.tags;
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close(this.extension);
+  }
+
+
+  /**
+   * Returns a lambda which closes the dialog on call.
+   */
+  buildCloseDialogActionCallback(): () => void {
+    return () => this.dialogRef.close('abort');
+  }
+
+
+  /**
+   * Returns a lambda which executes the dialog dedicated action on call.
+   */
+  buildSaveActionCallback(): () => void {
+    return () => this.closeDialog();
+  }
+}

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

@@ -25,6 +25,7 @@ import { CommentExportComponent } from './_dialogs/comment-export/comment-export
 import { ModeratorsComponent } from './_dialogs/moderators/moderators.component';
 import { BonusTokenComponent } from './_dialogs/bonus-token/bonus-token.component';
 import { CommentSettingsComponent } from './_dialogs/comment-settings/comment-settings.component';
+import { TagsComponent } from './_dialogs/tags/tags.component';
 import { ModeratorDeleteComponent } from './_dialogs/moderator-delete/moderator-delete.component';
 import { DeleteCommentComponent } from './_dialogs/delete-comment/delete-comment.component';
 import { DeleteCommentsComponent } from './_dialogs/delete-comments/delete-comments.component';
@@ -65,6 +66,7 @@ import { MarkdownModule } from 'ngx-markdown';
     ModeratorsComponent,
     BonusTokenComponent,
     CommentSettingsComponent,
+    TagsComponent,
     ModeratorDeleteComponent,
     DeleteCommentsComponent,
     DeleteCommentComponent,
@@ -86,6 +88,7 @@ import { MarkdownModule } from 'ngx-markdown';
     BonusTokenComponent,
     CommentSettingsComponent,
     ModeratorDeleteComponent,
+    TagsComponent,
     DeleteCommentsComponent,
     DeleteCommentComponent,
     BonusDeleteComponent

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

@@ -36,6 +36,10 @@
             <mat-icon>grade</mat-icon>
             {{ 'room-page.bonus-token' | translate}}
           </button>
+          <button mat-menu-item (click)="showTagsDialog()" aria-labelledby= "person">
+            <mat-icon>grade</mat-icon>
+            {{ 'room-page.tags' | translate}}
+          </button>
         </mat-menu>
         <button  id="settings-menu"
                  mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu" aria-labelledby="settings">

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

@@ -16,6 +16,7 @@ import { CommentService } from '../../../services/http/comment.service';
 import { ModeratorsComponent } from '../_dialogs/moderators/moderators.component';
 import { BonusTokenComponent } from '../_dialogs/bonus-token/bonus-token.component';
 import { CommentSettingsComponent } from '../_dialogs/comment-settings/comment-settings.component';
+import { TagsComponent } from '../_dialogs/tags/tags.component';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { EventService } from '../../../services/util/event.service';
 import { KeyboardUtils } from '../../../utils/keyboard';
@@ -121,11 +122,12 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
 
   updateCommentSettings(settings: CommentSettingsDialog) {
     const commentExtension: TSMap<string, any> = new TSMap();
-    this.room.extensions = new TSMap();
     commentExtension.set('enableThreshold', settings.enableThreshold);
     commentExtension.set('commentThreshold', settings.threshold);
     commentExtension.set('enableModeration', settings.enableModeration);
-    this.room.extensions.set('comments', commentExtension);
+    commentExtension.set('enableTags', settings.enableTags);
+    commentExtension.set('tags', settings.tags);
+    this.room.extensions['comments'] = commentExtension;
 
     if (this.moderationEnabled && !settings.enableModeration) {
       this.viewModuleCount = this.viewModuleCount - 1;
@@ -210,6 +212,26 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     dialogRef.componentInstance.roomId = this.room.id;
   }
 
+  showTagsDialog(): void {
+    const dialogRef = this.dialog.open(TagsComponent, {
+      width: '400px'
+    });
+    let tagExtension;
+    if (this.room.extensions !== undefined && this.room.extensions['tags'] !== undefined) {
+      tagExtension = this.room.extensions['tags'];
+    }
+    dialogRef.componentInstance.extension = tagExtension;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'abort') {
+          return;
+        } else {
+          this.room.extensions['tags'] = result;
+          this.saveChanges();
+        }
+      });
+  }
+
   copyShortId(): void {
     const selBox = document.createElement('textarea');
     selBox.style.position = 'fixed';

src/app/components/shared/_dialogs/room-create/room-create.component.ts

@@ -66,7 +66,16 @@ export class RoomCreateComponent implements OnInit {
     const commentExtension: TSMap<string, any> = new TSMap();
     newRoom.extensions = new TSMap();
     commentExtension.set('enableModeration', true);
+
+    const tagsExtension: TSMap<string, any> = new TSMap();
+    let defaultTags = ['Question', 'Comment', 'Hint', 'Orga'];
+    if (localStorage.getItem('currentLang') === 'de') {
+      defaultTags = ['Frage', 'Kommentar', 'Hinweis', 'Orga'];
+    }
+    tagsExtension.set('enableTags', true);
+    tagsExtension.set('tags', defaultTags);
     newRoom.extensions.set('comments', commentExtension);
+    newRoom.extensions.set('tags', tagsExtension);
     newRoom.name = longRoomName;
     newRoom.abbreviation = '00000000';
     newRoom.description = '';

src/app/models/comment-settings-dialog.ts

@@ -3,16 +3,22 @@ export class CommentSettingsDialog {
   threshold: number;
   enableModeration: boolean;
   directSend: boolean;
+  enableTags: boolean;
+  tags: string[];
 
   constructor(
     enableThreshold: boolean = false,
     threshold: number = -100,
     enableModeration: boolean = false,
-    directSend: boolean = true
+    directSend: boolean = true,
+    enableTags: boolean = false,
+    tags: string[] = []
   ) {
     this.enableThreshold = enableThreshold;
     this.threshold = threshold;
     this.enableModeration = enableModeration;
     this.directSend = directSend;
+    this.enableTags = enableTags;
+    this.tags = tags;
   }
 }

src/assets/i18n/creator/de.json

@@ -207,6 +207,9 @@
     "settings-comment-moderation": "Fragen moderieren",
     "settings-direct-send": "Fragen sofort sichtbar",
     "sure": "Bist du sicher?",
+    "tag-new": "Neue Kategorie:",
+    "tag-error": "Muss zwischen 3 und 15 Zeichen liegen",
+    "tags": "Tags",
     "threshold": "Schwellenwert",
     "update": "Speichern",
     "update-description": "Speichert die Änderungen",

src/assets/i18n/creator/en.json

@@ -208,6 +208,9 @@
     "settings-comment-moderation": "Moderate questions",
     "settings-direct-send": "Questions instantly visible",
     "sure": "Are you sure?",
+    "tag-new": "New tag:",
+    "tag-error": "Between 3 and 15 characters",
+    "tags": "Tags",
     "threshold": "Threshold",
     "update": "Save",
     "update-description": "Save changes",