diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html index 5208601479dad8501b716bb3ca8f810f74b6c548..97c482e39a582d0f2cd02bab8d7ca9c1e17065e4 100644 --- a/src/app/components/shared/comment-list/comment-list.component.html +++ b/src/app/components/shared/comment-list/comment-list.component.html @@ -3,15 +3,15 @@ <mat-icon>search</mat-icon> </mat-label> <input matInput #searchBox placeholder="Search in comments" (focus)="hideCommentsList=true" - (input)="search(searchBox.value)"> + (input)="searchComments(searchBox.value)"> <button mat-flat-button color="accent" (click)="hideCommentsList=false; searchBox.value='';">Cancel</button> </div> -<!--<mat-card class="outer-card"> - <app-comment *ngFor="let current of comments$ | async" [comment]="current"> </app-comment> -</mat-card>--> -<mat-nav-list class="app-class" *ngIf="hideCommentsList"> - <a mat-list-item href="/comment/{{comment.id}}" *ngFor="let comment of comments$ | async"> {{comment.subject}} </a> + +<mat-nav-list class="app-class" *ngIf="hideCommentsList && searchBox.value != ''"> + <a mat-list-item href="/comment/{{comment.id}}" *ngFor="let comment of filteredComments"> {{comment.subject}} </a> </mat-nav-list> + + <mat-card class="outer-card" *ngIf="!hideCommentsList"> <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment> </mat-card> \ No newline at end of file diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts index 26485ee824eec6da56fa5cf324e17bfbb5e2b22c..697c52967a2cedc3ffbc0685eb6715036eaf83a7 100644 --- a/src/app/components/shared/comment-list/comment-list.component.ts +++ b/src/app/components/shared/comment-list/comment-list.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; import { Comment } from '../../../models/comment'; import { CommentService } from '../../../services/http/comment.service'; import { TranslateService } from '@ngx-translate/core'; @@ -15,7 +14,7 @@ export class CommentListComponent implements OnInit { isLoading = true; roomId: string; private hideCommentsList: boolean; - private comments$: Observable<Comment[]>; + private filteredComments: Comment[]; constructor(private commentService: CommentService, private route: ActivatedRoute, @@ -43,6 +42,7 @@ export class CommentListComponent implements OnInit { }); } - search(term: string): void { + searchComments(term: string): void { + this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term)); } }