Show only last 5 contributors in thread-preview (close #411)

client/components/messaging/thread-preview/thread-preview.html

@@ -14,7 +14,7 @@
             {{ numReplies }} replies
     </div>
     <div class="app-thread-header-metadata">
-        <user-avatar *ngFor="let contributor of thread.contributors | slice: 1" [user]="contributor" [size]="contributorAvatarSize"></user-avatar>
+        <user-avatar *ngFor="let contributor of thread.contributors | slice: 1 | takeRight: 5" [user]="contributor" [size]="contributorAvatarSize"></user-avatar>
     </div>
     <div class="app-thread-header-open-thread">
         <a mat-icon-button (click)="showThread()" matTooltip="Show thread" [matTooltipPosition]="tooltipPosition">

client/components/pipes/pipes.module.ts

@@ -4,6 +4,7 @@ import { DateAndTimePipe } from './date/date-and-time.pipe';
 import { DateLongPipe } from './date/date-long.pipe';
 import { LastUpdatedPipe } from './date/last-updated.pipe';
 import { SameDayPipe } from './date/same-day.pipe';
+import { TakeRightPipe } from './take-right.pipe';
 
 @NgModule({
     imports: [
@@ -13,13 +14,15 @@ import { SameDayPipe } from './date/same-day.pipe';
         DateAndTimePipe,
         DateLongPipe,
         LastUpdatedPipe,
-        SameDayPipe
+        SameDayPipe,
+        TakeRightPipe
     ],
     exports: [
         DateAndTimePipe,
         DateLongPipe,
         LastUpdatedPipe,
-        SameDayPipe
+        SameDayPipe,
+        TakeRightPipe
     ]
 })
 export class PipesModule { }

client/components/pipes/take-right.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { takeRight } from 'lodash/fp';
+
+@Pipe({
+    name: 'takeRight'
+})
+export class TakeRightPipe implements PipeTransform {
+    transform(items: any[], n = 1): any[] {
+        return takeRight(n, items);
+    }
+}