Skip to content
Snippets Groups Projects
Commit be2818aa authored by Lukas Haase's avatar Lukas Haase
Browse files

Questionwall improve sort

parent 65e87464
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 199 additions and 76 deletions
projects/ars/src/lib/components/content/menu/ButtonWrapper.directive.ts
+ 9
− 5
View file @ be2818aa
......@@ -57,11 +57,15 @@ export class ButtonWrapperDirective implements OnInit, AfterViewInit {
// init padding for each button
if (this.ft.isCol()) {
this.btn.forEach(e => e.setPadding(this.xs / 2, this.xe / 2, 0, 0));
if (this.extraStart) {
this.btn.first.setPaddingLeft(this.xs);
}
if (this.extraEnd) {
this.btn.last.setPaddingRight(this.xe);
if (this.extraStart && this.extraEnd && this.btn.length == 1) {
this.btn.first.setPadding(this.xs, this.xe, 0, 0);
} else {
if (this.extraStart) {
this.btn.first.setPaddingLeft(this.xs);
}
if (this.extraEnd) {
this.btn.last.setPaddingRight(this.xe);
}
}
} else {
this.btn.forEach(e => e.setPadding(this.xs / 2, this.xe / 2, this.ys / 2, this.ye / 2));
......
projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss
+ 5
− 0
View file @ be2818aa
......@@ -38,6 +38,11 @@
font-weight:500;
font-size:14px;
line-height:14px;
color:var(--ars-button-color);
}
ars-row > button > *:nth-child(2){
float:right;
}
button > *:nth-child(2){
......
src/app/components/creator/creator.module.ts
+ 3
− 1
View file @ be2818aa
......@@ -22,6 +22,7 @@ import { MarkdownModule } from 'ngx-markdown';
import { DeleteAnswerComponent } from './_dialogs/delete-answer/delete-answer.component';
import { QuestionWallComponent } from '../shared/questionwall/question-wall/question-wall.component';
import { ArsModule } from '../../../../projects/ars/src/lib/ars.module';
import { MatRippleModule } from '@angular/material/core';
@NgModule({
imports: [
......@@ -39,7 +40,8 @@ import { ArsModule } from '../../../../projects/ars/src/lib/ars.module';
isolate: true
}),
MarkdownModule,
ArsModule
ArsModule,
MatRippleModule
],
declarations: [
RoomCreatorPageComponent,
......
src/app/components/shared/questionwall/question-wall/question-wall.component.html
+ 95
− 57
View file @ be2818aa
......@@ -3,7 +3,7 @@
<ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
<ars-fill ars-flex-box>
<ars-col ars-btn-wrp [xp]="16" [yp]="0" [extra]="true">
<button ars-btn (click)="leave()"><i>arrow_back</i></button>
<button ars-btn (click)="leave()" matRipple><i>arrow_back</i></button>
</ars-col>
</ars-fill>
<ars-col>
......@@ -12,11 +12,28 @@
<ars-fill ars-flex-box>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp [xp]="16" [extra]="true">
<button ars-btn (click)="sortTime()"><p>{{'question-wall.sort-time' | translate}}</p><i>expand_less</i></button>
<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>
<mat-menu #sortMenu>
<button mat-menu-item (click)="sortTime(true)">Newest</button>
<button mat-menu-item (click)="sortTime()">Oldest</button>
<button mat-menu-item (click)="sortScore(true)">Score</button>
</mat-menu>
<mat-menu #filterMenu>
<button mat-menu-item (click)="filterFavorites()">
<mat-icon>star</mat-icon>
<span>Favorite</span>
</button>
<button mat-menu-item (click)="filterFavorites()">
<mat-icon>check_circle</mat-icon>
<span>approved</span>
</button>
<button mat-menu-item (click)="filterFavorites()">
<mat-icon>block</mat-icon>
<span>disapproved</span>
</button>
</mat-menu>
<button ars-btn [mat-menu-trigger-for]="sortMenu" matRipple><i>sort</i><p>Sort</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>user</p></button>
</ars-col>
</ars-fill>
</ars-style-btn-material>
......@@ -46,65 +63,86 @@
<ars-fill>
</ars-fill>
</ars-fill>
<ars-col [width]="450" [overflow]="'auto'" class="questionwall-list" #colComponent>
<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-col ars-flex-box [width]="450" class="questionwall-list" #colComponent>
<ars-row>
<ars-row *ngIf="hasFilter" class="questionwall-list-border-bottom" [height]="45">
<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>
</ars-col>
<ars-fill></ars-fill>
<ars-col ars-btn-wrp [xp]="48">
<button ars-btn (click)="deactivateFilter()" matRipple><i>remove_circle</i><p>remove filter</p></button>
</ars-col>
</ars-style-btn-material>
</ars-row>
</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'"
style="border-radius:5px">
<ars-row ars-flex-box
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col class="questionwall-comment-meta">
<i class="questionwall-icon">person</i>
<p (click)="filterUser(comment);" class="questionwall-comment-user">{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-col>
<p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
</ars-col>
<ars-col>
<!-- <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-fill class="questionwall-list-comments">
<ars-row *ngIf="!userSelection">
<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'"
style="border-radius:5px">
<ars-row ars-flex-box
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col class="questionwall-comment-meta">
<i class="questionwall-icon">person</i>
<p (click)="filterUser(comment);" class="questionwall-comment-user" matRipple>{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-col>
<p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
</ars-col>
</ars-row>
<ars-row
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:0 16px;cursor:pointer">
<p class="questionwall-comment-body">{{comment.comment.body}}</p>
</ars-row>
<ars-row [height]="50">
<ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
<ars-col ars-btn-wrp [xp]="16" [extra]="true" class="questionwall-comment-btn">
<button ars-btn (click)="likeComment(comment)" matRipple><i>thumb_up</i><p>{{comment.comment.score}}</p></button>
<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-style-btn-material>
</ars-row>
</ars-row>
</ars-row>
<ars-row
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:0 16px;cursor:pointer">
<p class="questionwall-comment-body">{{comment.comment.body}}</p>
</ars-row>
</ars-row>
<ars-row *ngIf="userSelection">
<ars-style-btn-material style="width:100%">
<ars-row [height]="50" ars-flex-box class="questionwall-list-border-bottom">
<ars-col ars-btn-wrp [xp]="24" [extra]="true">
<button ars-btn (click)="cancelUserMap()" matRipple><i>arrow_back</i></button>
</ars-col>
</ars-row>
<ars-row [height]="50">
<ars-style-btn-material style="width:100%;height:100%;" ars-flex-box>
<ars-col ars-btn-wrp [xp]="16" [extra]="true" class="questionwall-comment-btn">
<button ars-btn (click)="likeComment(comment)"><i>thumb_up</i><p>{{comment.comment.score}}</p></button>
<button ars-btn (click)="dislikeComment(comment)"><i>thumb_down</i></button>
</ars-col>
<ars-fill (click)="focusComment(comment)" style="cursor:pointer"></ars-fill>
</ars-style-btn-material>
<ars-row ars-btn-wrp [xp]="48" [yp]="32">
<button ars-btn mat-ripple *ngFor="let user of userList" (click)="applyUserMap(user[1])">
<p>{{user[1]}}</p><p>{{user[0]}}</p>
</button>
</ars-row>
</ars-row>
</ars-style-btn-material>
</ars-row>
</ars-row>
</ars-fill>
</ars-col>
</ars-fill>
<ars-row [height]="50" class="questionwall-footer">
<ars-style-btn-material style="width:100%;" ars-flex-box>
<ars-col ars-btn-wrp [xp]="16" [extra]="true">
<button ars-btn (click)="toggleFocusIncommingComments()">
<button ars-btn (click)="toggleFocusIncommingComments()" matRipple>
<ng-container *ngIf="focusIncommingComments">
<i>{{'question-wall.auto-renew-off-icon' | translate}}</i>
<p>{{'question-wall.auto-renew-off' | translate}}</p>
......@@ -120,11 +158,11 @@
<p *ngIf="unreadComments" style="line-height:18px;" class="questionwall-text-color">{{unreadComments}}</p>
</ars-col>
<ars-col ars-btn-wrp [xp]="16" [extra]="true">
<button ars-btn (click)="prevComment()">
<button ars-btn (click)="prevComment()" matRipple>
<i>{{'question-wall.prev-comment-icon' | translate}}</i>
<p>{{'question-wall.prev-comment' | translate}}</p>
</button>
<button ars-btn (click)="nextComment()">
<button ars-btn (click)="nextComment()" matRipple>
<i>{{'question-wall.next-comment-icon' | translate}}</i>
<p>{{'question-wall.next-comment' | translate}}</p>
</button>
......
src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+ 18
− 1
View file @ be2818aa
......@@ -5,6 +5,12 @@
margin:0;
}
.test{
width:100%;
height:250px;
box-shadow:inset 0 0 0 1px black;
}
.questionwall{
&-icon{
font-family:'Material Icons', serif;
......@@ -81,12 +87,23 @@
}
&-list{
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);
}
&-border-bottom{
border-bottom:solid 1px var(--ars-border-color);
}
&-comments{
}
&-scroll{
width:100%;
height:100%;
display:flex;
flex-direction:column;
background-color:orange;
}
}
&-present{
font-size:45px;
......
src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+ 69
− 12
View file @ be2818aa
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { StyleDebug } from '../../../../../../projects/ars/src/lib/models/debug/StyleDebug';
import { CommentService } from '../../../../services/http/comment.service';
import { Comment } from '../../../../models/comment';
import { RoomService } from '../../../../services/http/room.service';
......@@ -13,6 +12,7 @@ import { LanguageService } from '../../../../services/util/language.service';
import { TranslateService } from '@ngx-translate/core';
import { Rescale } from '../../../../models/rescale';
import { QuestionWallKeyEventSupport } from '../QuestionWallKeyEventSupport';
import { CorrectWrong } from '../../../../models/correct-wrong.enum';
@Component({
selector: 'app-question-wall',
......@@ -33,8 +33,12 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
timeUpdateInterval;
keySupport: QuestionWallKeyEventSupport;
hasFilter = false;
filterTitle = 'Test';
filterDesc = 'test';
filterTitle = '';
filterDesc = '';
filterIcon = '';
userMap: Map<number, number> = new Map<number, number>();
userList = [];
userSelection = false;
public wrap<E>(e: E, action: (e: E) => void) {
action(e);
......@@ -69,7 +73,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
QuestionWallComment.updateTimeFormat(localStorage.getItem('currentLang'));
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.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
e.forEach(c => {
const comment = new QuestionWallComment(c, true);
this.comments.push(comment);
......@@ -175,6 +179,34 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.focusIncommingComments = !this.focusIncommingComments;
}
createUserMap() {
this.userMap = new Map();
this.comments.forEach(c => {
if (!this.userMap.has(c.comment.userNumber)) {
this.userMap.set(c.comment.userNumber, 0);
}
this.userMap.set(c.comment.userNumber, this.userMap.get(c.comment.userNumber) + 1);
});
this.userList = [];
this.userMap.forEach((num, user) => {
this.userList.push([num, user]);
});
}
applyUserMap(user: number) {
this.userSelection = false;
this.filterUserByNumber(user);
}
openUserMap() {
this.createUserMap();
this.userSelection = true;
}
cancelUserMap() {
this.userSelection = false;
}
leave() {
document.getElementById('back-button').click();
}
......@@ -204,7 +236,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
setTimeout(() => {
if (commentList.length > 1) {
this.focusComment(commentList[commentList.length - 1]);
this.focusComment(commentList[0]);
}
}, 0);
}
......@@ -222,17 +254,42 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
filterFavorites() {
this.filterTitle = 'question-wall.filter-favorite';
this.filterDesc = '';
this.commentsFilter = this.comments.filter(x => x.comment.favorite);
this.hasFilter = true;
this.filter('star', 'question-wall.filter-favorite', '',
x => x.comment.favorite);
}
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.filterUserByNumber(comment.comment.userNumber);
}
filterUserByNumber(user: number) {
this.filter('person', 'question-wall.filter-user', user + '',
x => x.comment.userNumber === user);
}
filterApproved() {
this.filter('check_circle', 'question-wall.filter-disapproved', '',
x => x.comment.correct === CorrectWrong.CORRECT);
}
filterDisapproved() {
this.filter('block', 'question-wall.filter-disapproved', '',
x => x.comment.correct === CorrectWrong.WRONG);
}
filter(icon: string, title: string, desc: string, filter: (x: QuestionWallComment) => boolean) {
this.filterIcon = icon;
this.filterTitle = title;
this.filterDesc = desc;
this.commentsFilter = this.comments.filter(filter);
this.hasFilter = true;
setTimeout(() => this.focusFirstComment(), 0);
}
focusFirstComment() {
if (this.getCurrentCommentList().length > 0) {
this.commentFocus = this.getCurrentCommentList()[0];
}
}
deactivateFilter() {
......
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