From 31de41f0401556ca36a61c03f7124fc668367580 Mon Sep 17 00:00:00 2001
From: Davut Beyazit <davut.beyazit@mni.thm.de>
Date: Sun, 2 May 2021 19:44:12 +0200
Subject: [PATCH] Added Button and Dialog WIP
---
.../room-creator-page.component.ts | 10 ++++
.../topic-cloud-filter.component.html | 8 +++
.../topic-cloud-filter.component.scss | 53 +++++++++++++++++++
.../topic-cloud-filter.component.ts | 50 +++++++++++++++++
.../comment-list/comment-list.component.ts | 1 +
.../shared/header/header.component.html | 2 +-
.../shared/header/header.component.ts | 11 +++-
src/app/components/shared/shared.module.ts | 6 ++-
8 files changed, 137 insertions(+), 4 deletions(-)
create mode 100644 src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
create mode 100644 src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
create mode 100644 src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
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 d7ccbb31a..e1ffc26c7 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
@@ -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'
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
new file mode 100644
index 000000000..e964194d8
--- /dev/null
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
@@ -0,0 +1,8 @@
+<app-dialog-action-buttons
+ buttonsLabelSection="content"
+ confirmButtonLabel="delete"
+ [confirmButtonType]=confirmButtonType
+ [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+ [confirmButtonClickAction]="buildCommentDeleteActionCallback()"
+>
+</app-dialog-action-buttons>
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
new file mode 100644
index 000000000..ba56099ba
--- /dev/null
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.scss
@@ -0,0 +1,53 @@
+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
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
new file mode 100644
index 000000000..aa474567d
--- /dev/null
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
@@ -0,0 +1,50 @@
+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');
+ }
+}
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 0ba2b4cd8..787b7359a 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/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',
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 1860e930f..5cae4b8fd 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/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>
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index f9ecf68ef..c94a8e6a0 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/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, {
+
+ });
+ }
+
}
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index e25728aa9..429e8e962 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/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,
--
GitLab