Commit 6bb46078 authored by Lukas Haase's avatar Lukas Haase
Browse files

improve questionwall sort, sort by favorites, sort by user

parent 0f988be1
......@@ -16,6 +16,7 @@
<button ars-btn (click)="sortTime(true)"><i>expand_more</i></button>
<button ars-btn (click)="sortScore()"><p>{{'question-wall.sort-score' | translate}}</p><i>expand_less</i></button>
<button ars-btn (click)="sortScore(true)"><i>expand_more</i></button>
<button ars-btn (click)="filterFavorites()"><i>star</i><p>{{'question-wall.filter-favorite' | translate}}</p></button>
</ars-col>
</ars-fill>
</ars-style-btn-material>
......@@ -46,7 +47,18 @@
</ars-fill>
</ars-fill>
<ars-col [width]="450" [overflow]="'auto'" class="questionwall-list" #colComponent>
<ars-row *ngFor="let comment of comments" class="questionwall-comment-anchor">
<ars-row *ngIf="hasFilter" class="questionwall-list-filter" [height]="45">
<ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
<ars-col ars-btn-wrp [xp]="48">
<button ars-btn><p>{{filterTitle | translate}} {{filterDesc}}</p></button>
</ars-col>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp [xp]="48">
<button ars-btn (click)="deactivateFilter()"><i>remove_circle</i><p>remove filter</p></button>
</ars-col>
</ars-style-btn-material>
</ars-row>
<ars-row *ngFor="let comment of hasFilter?commentsFilter:comments" class="questionwall-comment-anchor">
<ars-row style="box-sizing:border-box;padding:8px;">
<ars-row
[ngClass]="comment===commentFocus?'questionwall-comment-border-on':'questionwall-comment-border-off'"
......@@ -56,24 +68,18 @@
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col class="questionwall-comment-meta">
<i class="questionwall-icon">person</i>
<p class="questionwall-comment-user">{{comment.comment.userNumber}}</p>
<p (click)="filterUser(comment);" class="questionwall-comment-user">{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-fill></ars-fill>
<ars-col>
<p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
</ars-col>
<ars-col>
<!-- Fav,Mark as wrong/correct -->
<!--
<ars-style-btn-material>
<ars-col ars-btn-wrp [xp]="16" [extraStart]="true" class="questionwall-comment-btn">
<button ars-btn><i>check_circle</i></button>
<button ars-btn><i>not_interested</i></button>
<button ars-btn><i>{{comment.comment.favorite?'star':'star_border'}}</i></button>
</ars-col>
</ars-style-btn-material>
-->
<!-- <ars-style-btn-material>-->
<!-- <ars-col ars-btn-wrp [xp]="16" [extraStart]="true" class="questionwall-comment-btn">-->
<!-- <button ars-btn><i>{{comment.comment.favorite?'star':'star_border'}}</i></button>-->
<!-- </ars-col>-->
<!-- </ars-style-btn-material>-->
</ars-col>
</ars-row>
<ars-row
......
......@@ -33,7 +33,7 @@
&-comment{
&-meta{
display:flex;
justify-content:start;
justify-content:flex-start;
flex-direction:row;
}
&-border{
......@@ -83,6 +83,10 @@
box-sizing:border-box;
padding:16px 0px;
border-left:solid 1px var(--ars-border-color);
&-filter{
border-top:solid 1px var(--ars-border-color);
border-bottom:solid 1px var(--ars-border-color);
}
}
&-present{
font-size:45px;
......
......@@ -26,11 +26,15 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
roomId: string;
room: Room;
comments: QuestionWallComment[] = [];
commentsFilter: QuestionWallComment[] = [];
commentFocus: QuestionWallComment;
unreadComments = 0;
focusIncommingComments = false;
timeUpdateInterval;
keySupport: QuestionWallKeyEventSupport;
hasFilter = false;
filterTitle = 'Test';
filterDesc = 'test';
public wrap<E>(e: E, action: (e: E) => void) {
action(e);
......@@ -66,7 +70,10 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.translateService.use(localStorage.getItem('currentLang'));
this.commentService.getAckComments(this.roomId).subscribe(e => {
e.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
e.forEach(c => this.comments.push(new QuestionWallComment(c, true)));
e.forEach(c => {
const comment = new QuestionWallComment(c, true);
this.comments.push(comment);
});
});
this.roomService.getRoom(this.roomId).subscribe(e => {
this.room = e;
......@@ -127,7 +134,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
getCommentFocusIndex() {
return this.comments.indexOf(this.commentFocus);
return this.getCurrentCommentList().indexOf(this.commentFocus);
}
moveComment(fx: number) {
......@@ -189,18 +196,51 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
sort(fun: (a, b) => number, reverse: boolean) {
const commentList = this.getCurrentCommentList();
if (reverse) {
this.comments.sort(this.reverse(fun));
commentList.sort(this.reverse(fun));
} else {
this.comments.sort(fun);
commentList.sort(fun);
}
setTimeout(() => {
this.focusComment(this.comments[this.comments.length - 1]);
if (commentList.length > 1) {
this.focusComment(commentList[commentList.length - 1]);
}
}, 0);
}
getCurrentCommentList() {
if (this.hasFilter) {
return this.commentsFilter;
} else {
return this.comments;
}
}
reverse(fun: (a, b) => number): (a, b) => number {
return (a, b) => fun(b, a);
}
filterFavorites() {
this.filterTitle = 'question-wall.filter-favorite';
this.filterDesc = '';
this.commentsFilter = this.comments.filter(x => x.comment.favorite);
this.hasFilter = true;
}
filterUser(comment: QuestionWallComment) {
this.filterTitle = 'question-wall.filter-user';
this.filterDesc = comment.comment.userNumber + '';
this.commentsFilter = this.comments.filter(x => x.comment.userNumber === comment.comment.userNumber);
this.hasFilter = true;
}
deactivateFilter() {
this.hasFilter = false;
}
toggleFilter() {
this.hasFilter = !this.hasFilter;
}
}
......@@ -129,6 +129,8 @@
"intro-title": "Fragen-Fokus",
"intro-desc": "Klick auf eine Frage oder navigiere mit der Leertaste vorwärts oder mit den Pfeiltasten vor und zurück.",
"sort-time": "Zeit",
"sort-score": "Bewertung"
"sort-score": "Bewertung",
"filter-user": "Benutzer",
"filter-favorite": "Favoriten"
}
}
......@@ -128,6 +128,8 @@
"intro-title": "Question Focus",
"intro-desc": "Click on a question or navigate forwards with the space bar or backwards and forwards with the arrow keys.",
"sort-time": "Time",
"sort-score": "Score"
"sort-score": "Score",
"filter-user": "User",
"filter-favorite": "Favorites"
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment