Merge branch '358-improve-questionwall-sort' into 'master'

improve questionwall sort, sort by favorites, sort by user

Closes #358

See merge request arsnova/frag.jetzt!332

src/app/components/shared/questionwall/question-wall/question-wall.component.html

@@ -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

src/app/components/shared/questionwall/question-wall/question-wall.component.scss

@@ -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;

src/app/components/shared/questionwall/question-wall/question-wall.component.ts

@@ -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;
+  }
+
 }

src/assets/i18n/participant/de.json

@@ -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"
   }
 }

src/assets/i18n/participant/en.json

@@ -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"
   }
 }