Added Button and Dialog

WIP

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

@@ -25,6 +25,7 @@ import { TitleService } from '../../../services/util/title.service';
 import { DeleteCommentsComponent } from '../_dialogs/delete-comments/delete-comments.component';
 import { Export } from '../../../models/export';
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
+import { TopicCloudFilterComponent } from '../../shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -72,6 +73,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     nav('roomBonusToken', () => this.showBonusTokenDialog());
     nav('moderator', () => this.showModeratorsDialog());
     nav('tags', () => this.showTagsDialog());
+    nav('topicCloud', () => this.showTagCloud());
     nav('exportQuestions', () => {
       const exp: Export = new Export(
         this.room,
@@ -275,7 +277,15 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     dialogRef.componentInstance.room = this.room;
   }
 
+  showTagCloud(): void {
+    console.log("Showtagcloud called");
+    const dialogRef = this.dialog.open(TopicCloudFilterComponent, {
+      width: '400px'
+    });
+  }
+
   showTagsDialog(): void {
+    console.log("Showtag called");
     this.updRoom = JSON.parse(JSON.stringify(this.room));
     const dialogRef = this.dialog.open(TagsComponent, {
       width: '400px'

src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html

+<app-dialog-action-buttons
+  buttonsLabelSection="content"
+  confirmButtonLabel="delete"
+  [confirmButtonType]=confirmButtonType
+  [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+  [confirmButtonClickAction]="buildCommentDeleteActionCallback()"
+>
+</app-dialog-action-buttons>

src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.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);
+  }
+  
+  .tags {
+    padding-left: 3%;
+    &:nth-child(even) {
+      background-color: var(--alt-dialog);
+    }
+  }
+  
+  mat-hint {
+    color: var(--on-surface) !important;
+    margin-right: 1%;
+  }
+  
\ No newline at end of file

src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts

+import { Component, Inject, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { NotificationService } from '../../../../services/util/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { RoomCreatorPageComponent } from '../../../creator/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';
+import { DialogConfirmActionButtonType } from '../../../shared/dialog/dialog-action-buttons/dialog-action-buttons.component';
+
+@Component({
+  selector: 'app-topic-cloud-filter',
+  templateUrl: './topic-cloud-filter.component.html',
+  styleUrls: ['./topic-cloud-filter.component.scss']
+})
+export class TopicCloudFilterComponent {
+  confirmButtonType: DialogConfirmActionButtonType = DialogConfirmActionButtonType.Alert;
+
+  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));
+  }
+
+  closeDialog(): void {
+  }
+
+  /**
+   * 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();
+  }
+
+  buildCommentDeleteActionCallback(): () => void {
+    return () => this.dialogRef.close('delete');
+  }
+}

src/app/components/shared/comment-list/comment-list.component.ts

@@ -29,6 +29,7 @@ import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/
 import { Export } from '../../../models/export';
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
 import { ModeratorService } from '../../../services/http/moderator.service';
+import { TopicCloudFilterComponent } from '../_dialogs/topic-cloud-filter/topic-cloud-filter.component';
 
 export enum Period {
   FROMNOW    = 'from-now',

src/app/components/shared/header/header.component.html

@@ -143,7 +143,7 @@
               <button mat-menu-item
                       tabindex="0"
                       *ngIf="deviceType !== 'mobile'"
-                      routerLink="participant/room/{{shortId}}/comments/tagcloud">
+                      (click)="navigateTopicCloud()">
                 <mat-icon>cloud
                 </mat-icon>
                 <span>{{'header.tag-cloud' | translate}}</span>

src/app/components/shared/header/header.component.ts

@@ -21,6 +21,8 @@ import { QrCodeDialogComponent } from '../_dialogs/qr-code-dialog/qr-code-dialog
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
 import { MotdService } from '../../../services/http/motd.service';
 import { RoomService } from '../../../services/http/room.service';
+import { TopicCloudFilterComponent } from '../_dialogs/topic-cloud-filter/topic-cloud-filter.component';
+import { FormArray } from '@angular/forms';
 
 @Component({
   selector: 'app-header',
@@ -46,7 +48,8 @@ export class HeaderComponent implements OnInit {
               public eventService: EventService,
               private bonusTokenService: BonusTokenService,
               private _r: Renderer2,
-              private motdService: MotdService
+              private motdService: MotdService,
+              private confirmDialog: MatDialog
   ) {
   }
 
@@ -282,4 +285,10 @@ export class HeaderComponent implements OnInit {
     this.eventService.broadcast('navigate', 'createQuestion');
   }
 
+  public navigateTopicCloud() {
+    const confirmDialogRef = this.confirmDialog.open(TopicCloudFilterComponent, {
+
+    });
+  }
+
 }

src/app/components/shared/shared.module.ts

@@ -29,7 +29,8 @@ import { QRCodeModule } from 'angularx-qrcode';
 import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.component';
 import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
 
-import { TagCloudModule } from 'angular-tag-cloud-module';
+import { TagCloudModule } from 'angular-tag-cloud-module';
+import { TopicCloudFilterComponent } from './_dialogs/topic-cloud-filter/topic-cloud-filter.component';
 
 @NgModule({
   imports: [
@@ -64,7 +65,8 @@ import { TagCloudModule } from 'angular-tag-cloud-module';
     RemoveFromHistoryComponent,
     CommentAnswerComponent,
     MotdDialogComponent,
-    MotdMessageComponent
+    MotdMessageComponent,
+    TopicCloudFilterComponent
   ],
   exports: [
     RoomJoinComponent,