From 6279ca0640a60dc86f220912f8b9a3b096229a0c Mon Sep 17 00:00:00 2001
From: Davut Beyazit <davut.beyazit@mni.thm.de>
Date: Mon, 24 May 2021 22:45:05 +0200
Subject: [PATCH] Added counts to dialog
---
.../room-edit/room-edit.component.html | 11 +-
.../_dialogs/room-edit/room-edit.component.ts | 14 ---
.../topic-cloud-filter.component.html | 30 ++++-
.../topic-cloud-filter.component.scss | 30 ++++-
.../topic-cloud-filter.component.ts | 109 ++++++++++++------
.../dialog-action-buttons.component.html | 1 -
.../dialog-action-buttons.component.ts | 3 -
.../shared/header/header.component.html | 2 +-
8 files changed, 127 insertions(+), 73 deletions(-)
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
index d01e87169..a622874b1 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.html
@@ -55,18 +55,9 @@
</mat-tab>
</mat-tab-group>
<div fxLayoutAlign="center center">
-
<label for="myCheck" style="background: darkgreen; font-size: larger;">{{ 'room-page.block' | translate }} </label>
<input type="checkbox" id= "myCheck" [(ngModel)]= "check" >
-
- <!-- <button mat-raised-button
- type="delete"
- style="background-color: teal;"
- (click)="blockedQuestions()"
- aria-labelledby="block">
- <mat-icon>block</mat-icon>
- {{ 'room-page.block' | translate }}</button> -->
-
+
<button mat-raised-button
class="delete"
(click)="openDeleteRoomDialog()"
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.ts b/src/app/components/creator/_dialogs/room-edit/room-edit.component.ts
index 021fb6491..8a1222d4c 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.ts
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.ts
@@ -71,7 +71,6 @@ export class RoomEditComponent implements OnInit {
save(): void {
this.editRoom.closed = this.check;
- console.log(this.check);
this.roomService.updateRoom(this.editRoom).subscribe(r => this.editRoom = r);
if (!this.roomNameFormControl.hasError('required')
&& !this.roomNameFormControl.hasError('minlength')
@@ -95,17 +94,4 @@ export class RoomEditComponent implements OnInit {
buildSaveActionCallback(): () => void {
return () => this.save();
}
- public blockedQuestions() {
- var checkBox = <HTMLInputElement> document.getElementById("myCheck");
- var save = document.getElementById("save");
- if(checkBox.checked){
- console.log(checkBox.checked);
- // flip state if clicked
- this.editRoom.closed = !this.editRoom.closed;
- this.roomService.updateRoom(this.editRoom).subscribe(r => this.editRoom = r);
- }
- console.log(checkBox.checked);
-
- }
-
}
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
index cd595afd4..b01a4c381 100644
--- 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
@@ -4,9 +4,33 @@
<mat-divider></mat-divider>
<mat-radio-group [(ngModel)]="continueFilter" aria-label="Select an option">
- <mat-radio-button value="continueWithAll">{{allCommentCount}} {{'content.continue-with-all-questions' | translate}}</mat-radio-button>
- <mat-radio-button checked="true" value="continueWithCurr">{{'content.continue-with-current-questions' | translate}}</mat-radio-button>
- <mat-radio-button value="continueWithAllFromNow">{{'content.continue-with-all-questions-from-now' | translate}}</mat-radio-button>
+ <mat-radio-button value="continueWithAll">
+ <div class="elementRow">
+ <div class="elementText">
+ {{'content.continue-with-all-questions' | translate}}
+ </div>
+ <div class="elementIcons">
+ <mat-icon [inline]="true">comment</mat-icon> {{allCommentsCount}}
+ <mat-icon [inline]="true">person</mat-icon> {{allCommentsUsers}}
+ <mat-icon svgIcon="comment_tag" class="comment_tag-icon"></mat-icon> {{allCommentsKeywords}}
+ </div>
+ </div>
+ </mat-radio-button>
+ <mat-radio-button checked="true" value="continueWithCurr">
+ <div class="elementRow">
+ <div class="elementText">
+ {{'content.continue-with-current-questions' | translate}}
+ </div>
+ <div class="elementIcons">
+ <mat-icon [inline]="true">comment</mat-icon> {{filteredCommentsCount}}
+ <mat-icon [inline]="true">person</mat-icon> {{filteredCommentsUsers}}
+ <mat-icon svgIcon="comment_tag" class="comment_tag-icon"></mat-icon> {{filteredCommentsKeywords}}
+ </div>
+ </div>
+ </mat-radio-button>
+ <mat-radio-button value="continueWithAllFromNow">
+ {{'content.continue-with-all-questions-from-now' | translate}}
+ </mat-radio-button>
</mat-radio-group>
<app-dialog-action-buttons
buttonsLabelSection="content"
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
index d0f639b53..2a514ac55 100644
--- 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
@@ -1,12 +1,32 @@
-mat-radio-button{
+mat-radio-button {
margin: 5px;
-
}
-
-
mat-radio-group {
- display: flex;
+ display: flex;
flex-direction: column;
margin: 15px 0;
+}
+
+::ng-deep .mat-radio-label-content {
+ width: 100%;
+}
+
+.elementRow {
+ display: flex;
+ flex-direction: row;
+ width: 100% !important;
+}
+
+.elementText {
+ align-content: flex-start;
+ margin-right: 10px;
+}
+
+.elementIcons {
+ margin-left: auto;
+}
+
+.comment_tag-icon {
+ height: 16px !important;
}
\ 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
index ec8543b58..51f47e497 100644
--- 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
@@ -5,12 +5,19 @@ 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 { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
import { CommentFilterOptions } from '../../../../utils/filter-options';
import { CommentService } from '../../../../services/http/comment.service';
import { RoomService } from '../../../../services/http/room.service';
import { Comment } from '../../../../models/comment';
+
+class CommentsCount {
+ comments : number;
+ users: number;
+ keywords: number;
+}
+
@Component({
selector: 'app-topic-cloud-filter',
templateUrl: './topic-cloud-filter.component.html',
@@ -24,17 +31,19 @@ export class TopicCloudFilterComponent implements OnInit {
continueFilter = 'continueWithCurr';
tmpFilter : CommentFilterOptions;
- allCommentCount:number;
- comments: Comment[] = [];
- roomId: string;
-
-
+ allCommentsCount : number;
+ allCommentsUsers : number;
+ allCommentsKeywords : number;
+
+ filteredCommentsCount : number;
+ filteredCommentsUsers : number;
+ filteredCommentsKeywords : number;
+
constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
public dialog: MatDialog,
public notificationService: NotificationService,
public translationService: TranslateService,
protected langService: LanguageService,
- private route: ActivatedRoute,
private router: Router,
protected roomService: RoomService,
private commentService: CommentService,
@@ -47,47 +56,75 @@ export class TopicCloudFilterComponent implements OnInit {
this.translationService.use(localStorage.getItem('currentLang'));
this.tmpFilter = CommentFilterOptions.readFilter();
localStorage.setItem("filtertmp", JSON.stringify(this.tmpFilter));
+
this.roomService.getRoomByShortId(this.shortId).subscribe(room => {
- this.roomId = room.id;
+ this.commentService.getAckComments(room.id).subscribe(comments => {
+ const counts = this.getCommentCounts(comments);
+ this.allCommentsCount = counts.comments;
+ this.allCommentsUsers = counts.users;
+ this.allCommentsKeywords = counts.keywords;
});
-
-
- this.commentService.getAckComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- });
- this.allCommentCount =this.comments.length;
+ this.commentService.getFilteredComments(room.id).subscribe(comments => {
+ const counts = this.getCommentCounts(comments);
+ this.filteredCommentsCount = counts.comments;
+ this.filteredCommentsUsers = counts.users;
+ this.filteredCommentsKeywords = counts.keywords;
+ });
+ });
}
closeDialog(): void {
}
+ getCommentCounts(comments : Comment[]) : CommentsCount {
+ let counts = new CommentsCount();
+ let userSet = new Set<number>();
+ let keywordSet = new Set<string>();
+
+ comments.forEach(c => {
+ if (c.userNumber) {
+ userSet.add(c.userNumber);
+ }
+ if (c.keywords) {
+ c.keywords.forEach(k => {
+ keywordSet.add(k);
+ });
+ }
+ });
+
+ counts.comments = comments.length;
+ counts.users = userSet.size;
+ counts.keywords = keywordSet.size;
+ return counts;
+ }
cancelButtonActionCallback(): () => void {
return () => this.dialogRef.close('abort');
}
- confirmButtonActionCallback(): () => void {
- let filter : CommentFilterOptions;
-
- switch (this.continueFilter) {
- case 'continueWithAll':
- filter = new CommentFilterOptions(); // all questions allowed
- break;
-
- case 'continueWithAllFromNow':
- filter = CommentFilterOptions.generateFilterNow(this.tmpFilter.filterSelected);
- break;
+ confirmButtonActionCallback() {
+ return () => {
+ let filter : CommentFilterOptions;
+
+ switch (this.continueFilter) {
+ case 'continueWithAll':
+ filter = new CommentFilterOptions(); // all questions allowed
+ break;
- case 'continueWithCurr':
- filter = JSON.parse(localStorage.getItem("filtertmp")) as CommentFilterOptions;
- break;
-
- default:
- return;
+ case 'continueWithAllFromNow':
+ filter = CommentFilterOptions.generateFilterNow(this.tmpFilter.filterSelected);
+ break;
+
+ case 'continueWithCurr':
+ filter = JSON.parse(localStorage.getItem("filtertmp")) as CommentFilterOptions;
+ break;
+
+ default:
+ return;
+ }
+
+ CommentFilterOptions.writeFilterStatic(filter);
+ this.dialogRef.close(this.router.navigateByUrl('/participant/room/' + this.shortId + '/comments/tagcloud'));
}
-
- CommentFilterOptions.writeFilterStatic(filter);
- return () => this.dialogRef.close(this.router.navigateByUrl('/participant/room/' + this.shortId + '/comments/tagcloud'));
}
-}
+}
\ No newline at end of file
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
index f0a7394e1..06bf0d6f8 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
@@ -9,7 +9,6 @@
*ngIf="confirmButtonClickAction !== undefined"
type="button"
mat-flat-button
- id="save"
class="mat-flat-button {{ confirmButtonType }}-confirm-button"
attr.aria-labelledby="{{ ariaPrefix + 'confirm' | translate }}"
(click)="performConfirmButtonClickAction()"
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.ts b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.ts
index 30a8efd75..7529dadb1 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.ts
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.ts
@@ -1,6 +1,4 @@
import { Component, OnInit, Input, Output } from '@angular/core';
-import { Room } from '../../../../models/room';
-import { RoomService } from '../../../../services/http/room.service';
/**
* Available confirm button types.
@@ -92,5 +90,4 @@ export class DialogActionButtonsComponent implements OnInit {
this.cancelButtonClickAction();
}
}
-
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 2615f73ee..274796201 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -351,7 +351,7 @@
<ng-container *ngIf="router.url.includes('/creator') || router.url.includes('/moderator')">
<button mat-menu-item
(click)="blockQuestions()"
- [ngClass]="{'color-warn': room.closed}"
+ [ngClass]="{'color-warn': room && room.closed}"
tabindex="0">
<mat-icon class="color-warn">block</mat-icon>
<span>{{'header.block' | translate}}</span>
--
GitLab