From 40934576d543e6d125c6c202179902f8c640c830 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Thu, 9 Jul 2020 13:34:50 +0200
Subject: [PATCH] add categories to questionwall
---
.../question-wall.component.html | 83 +++++++++++++++++--
.../question-wall.component.scss | 21 +++++
.../question-wall/question-wall.component.ts | 22 +++--
src/assets/i18n/participant/de.json | 5 +-
src/assets/i18n/participant/en.json | 5 +-
5 files changed, 120 insertions(+), 16 deletions(-)
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index baea087e9..416077744 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -31,9 +31,27 @@
<span>{{'question-wall.filter-disapproved' | translate}}</span>
</button>
</mat-menu>
- <button ars-btn [mat-menu-trigger-for]="sortMenu" matRipple><i>sort</i><p>{{'question-wall.sort' | translate}}</p></button>
- <button ars-btn [mat-menu-trigger-for]="filterMenu" matRipple><i>filter_list</i><p>Filter</p></button>
- <button ars-btn (click)="openUserMap()" matRipple><i>person</i><p>{{'question-wall.filter-user'| translate}}</p></button>
+ <mat-menu #filterTagMenu>
+ <button mat-menu-item *ngFor="let tag of tags" (click)="filterTag(tag)">
+ <span>{{tag}}</span>
+ </button>
+ </mat-menu>
+ <button ars-btn [mat-menu-trigger-for]="sortMenu" matRipple>
+ <i>sort</i>
+ <p>{{'question-wall.sort' | translate}}</p>
+ </button>
+ <button ars-btn [mat-menu-trigger-for]="filterMenu" matRipple>
+ <i>filter_list</i>
+ <p>Filter</p>
+ </button>
+ <button ars-btn [mat-menu-trigger-for]="filterTagMenu" matRipple>
+ <mat-icon class="icon-svg" svgIcon="comment_tag"></mat-icon>
+ <p>{{'question-wall.filter-tag' | translate}}</p>
+ </button>
+ <button ars-btn (click)="openUserMap()" matRipple>
+ <i>person</i>
+ <p>{{'question-wall.filter-user'| translate}}</p>
+ </button>
</ars-col>
</ars-fill>
</ars-style-btn-material>
@@ -51,10 +69,25 @@
<h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
</ars-row>
<ars-row>
- <ars-row class="bound" style="padding:16px 32px 16px 32px;">
- <markdown [data]="commentFocus.comment.body"></markdown>
+ <ars-row class="bound" style="padding:16px 32px 16px 32px;box-sizing:border-box;max-width:100%;">
+ <markdown style="max-width:100%" class="questionwall-present-markdown" [data]="commentFocus.comment.body"></markdown>
</ars-row>
</ars-row>
+ <ars-row [height]="50">
+ <ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="32" [extra]="true" class="questionwall-comment-btn">
+ <button ars-btn (click)="likeComment(commentFocus)" matRipple><i>thumb_up</i><p>{{commentFocus.comment.score}}</p></button>
+ <button ars-btn (click)="dislikeComment(commentFocus)" matRipple><i>thumb_down</i></button>
+ </ars-col>
+ <ars-fill></ars-fill>
+ <ars-col ars-btn-wrp [xp]="32" [extra]="true" *ngIf="commentFocus.comment.tag">
+ <button ars-btn matRipple (click)="filterTag(commentFocus.comment.tag);">
+ <mat-icon class="icon-svg" svgIcon="comment_tag"></mat-icon>
+ <p>{{commentFocus.comment.tag}}</p>
+ </button>
+ </ars-col>
+ </ars-style-btn-material>
+ </ars-row>
</ng-container>
<ng-container *ngIf="!commentFocus">
<p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
@@ -65,17 +98,24 @@
<ars-fill>
</ars-fill>
</ars-fill>
- <ars-col ars-flex-box [width]="450" class="questionwall-list" #colComponent>
+ <ars-col ars-flex-box [width]="450" class="questionwall-list" #colComponent>
<ars-row>
<ars-row *ngIf="hasFilter" class="questionwall-list-border-bottom" [height]="50">
<ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
<ars-col ars-btn-wrp [xp]="48">
- <button ars-btn matRipple><i>{{filterIcon}}</i><p>{{filterTitle | translate}} {{filterDesc}}</p></button>
+ <button ars-btn matRipple>
+ <mat-icon *ngIf="isSvgIcon" class="icon-svg" [svgIcon]="filterIcon"></mat-icon>
+ <i *ngIf="!isSvgIcon">{{filterIcon}}</i>
+ <p>{{filterTitle | translate}} {{filterDesc}}</p>
+ </button>
</ars-col>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp [xp]="48">
- <button ars-btn (click)="deactivateFilter()" matRipple><i>remove_circle</i><p>{{'question-wall.filter-remove' | translate}}</p></button>
+ <button ars-btn (click)="deactivateFilter()" matRipple>
+ <i>remove_circle</i>
+ <p>{{'question-wall.filter-remove' | translate}}</p>
+ </button>
</ars-col>
</ars-style-btn-material>
</ars-row>
@@ -85,7 +125,16 @@
<ars-row *ngIf="!userSelection">
- <ars-row *ngFor="let comment of hasFilter?commentsFilter:comments" class="questionwall-comment-anchor" style="float:left;">
+ <ars-fill *ngIf="(hasFilter?commentsFilter:comments).length==0"
+ style="float:left;">
+ <p class="questionwall-present-introduction-desc">
+ {{'question-wall.no-result' | translate}}
+ </p>
+ </ars-fill>
+
+ <ars-row *ngFor="let comment of hasFilter?commentsFilter:comments"
+ class="questionwall-comment-anchor"
+ style="float:left;">
<ars-row style="box-sizing:border-box;padding:8px;">
<ars-row
[ngClass]="comment===commentFocus?'questionwall-comment-border-on':'questionwall-comment-border-off'"
@@ -114,6 +163,12 @@
<button ars-btn (click)="dislikeComment(comment)" matRipple><i>thumb_down</i></button>
</ars-col>
<ars-fill (click)="focusComment(comment)" style="cursor:pointer"></ars-fill>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true"*ngIf="comment.comment.tag">
+ <button ars-btn (click)="filterTag(comment.comment.tag);" matRipple>
+ <mat-icon class="icon-svg" svgIcon="comment_tag"></mat-icon>
+ <p>{{comment.comment.tag}}</p>
+ </button>
+ </ars-col>
</ars-style-btn-material>
</ars-row>
</ars-row>
@@ -128,8 +183,18 @@
<ars-col ars-btn-wrp [xp]="24" [extra]="true">
<button ars-btn (click)="cancelUserMap()" matRipple><i>arrow_back</i></button>
</ars-col>
+ <ars-col ars-btn-wrp [xp]="24" [extra]="true">
+ <button ars-btn class="pseudo-button">
+ <i>person</i>
+ <p>{{'question-wall.filter-user' | translate}}</p>
+ </button>
+ </ars-col>
</ars-row>
<ars-row ars-btn-wrp [xp]="48" [yp]="32">
+ <button ars-btn disabled class="questionwall-list-border-bottom pseudo-button">
+ <p>{{'question-wall.filter-user' | translate}}-ID</p>
+ <p>{{'question-wall.filter-user-count' | translate}}</p>
+ </button>
<button ars-btn mat-ripple *ngFor="let user of userList" (click)="applyUserMap(user[1])">
<p>{{user[1]}}</p><p>{{user[0]}}</p>
</button>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index 5bece8d8b..e3e11612e 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -11,6 +11,19 @@
box-shadow:inset 0 0 0 1px black;
}
+ .icon-svg{
+ color:var(--ars-header-color);
+ height:18px;
+ width:18px;
+ }
+
+ .pseudo-button{
+ cursor:default;
+ >*{
+ cursor:default;
+ }
+ }
+
.questionwall{
&-icon{
font-family:'Material Icons', serif;
@@ -175,3 +188,11 @@
}
}
+
+:host ::ng-deep{
+ .questionwall-present-markdown{
+ img{
+ width:100%!important;
+ }
+ }
+}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
index 17cb3b3e9..67b9bc702 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
@@ -36,9 +36,11 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
filterTitle = '';
filterDesc = '';
filterIcon = '';
+ isSvgIcon = false;
userMap: Map<number, number> = new Map<number, number>();
userList = [];
userSelection = false;
+ tags;
public wrap<E>(e: E, action: (e: E) => void) {
action(e);
@@ -81,6 +83,9 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
});
this.roomService.getRoom(this.roomId).subscribe(e => {
this.room = e;
+ this.tags = e.extensions['tags']['tags'];
+ console.log(e);
+ console.log(this.tags);
});
this.wsCommentService.getCommentStream(this.roomId).subscribe(e => {
this.commentService.getComment(JSON.parse(e.body).payload.id).subscribe(comment => {
@@ -199,6 +204,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
openUserMap() {
+ if (this.userSelection) {return; }
this.hasFilter = false;
this.createUserMap();
this.userSelection = true;
@@ -255,7 +261,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
filterFavorites() {
- this.filter('star', 'question-wall.filter-favorite', '',
+ this.filter('star', false, 'question-wall.filter-favorite', '',
x => x.comment.favorite);
}
@@ -264,22 +270,28 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
filterUserByNumber(user: number) {
- this.filter('person', 'question-wall.filter-user', user + '',
+ this.filter('person', false, 'question-wall.filter-user', user + '',
x => x.comment.userNumber === user);
}
filterApproved() {
- this.filter('check_circle', 'question-wall.filter-approved', '',
+ this.filter('check_circle', false, 'question-wall.filter-approved', '',
x => x.comment.correct === CorrectWrong.CORRECT);
}
filterDisapproved() {
- this.filter('block', 'question-wall.filter-disapproved', '',
+ this.filter('block', false, 'question-wall.filter-disapproved', '',
x => x.comment.correct === CorrectWrong.WRONG);
}
- filter(icon: string, title: string, desc: string, filter: (x: QuestionWallComment) => boolean) {
+ filterTag(tag: string) {
+ this.filter('comment_tag', true, '', tag, x => x.comment.tag === tag);
+ }
+
+ filter(icon: string, isSvgIcon: boolean, title: string, desc: string, filter: (x: QuestionWallComment) => boolean) {
+ this.cancelUserMap();
this.filterIcon = icon;
+ this.isSvgIcon = isSvgIcon;
this.filterTitle = title;
this.filterDesc = desc;
this.commentsFilter = this.comments.filter(filter);
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 9c04e8975..2890ebe50 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -143,6 +143,9 @@
"filter-favorite": "Favoriten",
"filter-approved": "Bejaht",
"filter-disapproved": "Verneint",
- "filter-remove": "Filter entfernen"
+ "filter-remove": "Filter entfernen",
+ "filter-tag": "Kategorie",
+ "no-result": "Keine Ergebnisse",
+ "filter-user-count": "Anzahl der Kommentare"
}
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index ae5884276..b4c9015d7 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -142,6 +142,9 @@
"filter-favorite": "Favorites",
"filter-approved": "Affirmed",
"filter-disapproved": "Negated",
- "filter-remove": "Remove Filter"
+ "filter-remove": "Remove Filter",
+ "filter-tag": "Category",
+ "no-result": "No result",
+ "filter-user-count": "Number of comments"
}
}
--
GitLab