From b27202c56c386f672070a0c07a969f136b79c725 Mon Sep 17 00:00:00 2001
From: Thisari Muthuwahandi <thisari.muthuwahandi@mni.thm.de>
Date: Tue, 19 Mar 2019 12:52:47 +0100
Subject: [PATCH] design the search function
---
.../comment-list/comment-list.component.html | 25 ++++++---
.../comment-list/comment-list.component.scss | 52 ++++++++++---------
.../comment-list/comment-list.component.ts | 38 +++++++-------
3 files changed, 65 insertions(+), 50 deletions(-)
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 c16956721..520860147 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -1,8 +1,17 @@
-<input matInput #searchBox placeholder="search in comments" (input)="search(searchBox.value)">
-<ul class="search-results">
- <li *ngFor="let comment of comments$ | async">
- <a routerLink="/comment/{{comment.id}}">{{comment.subject}}</a>
-</ul>
-<mat-card class="outer-card">
- <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
-</mat-card>
+<div fxLayout="row" id="search-container">
+ <mat-label>
+ <mat-icon>search</mat-icon>
+ </mat-label>
+ <input matInput #searchBox placeholder="Search in comments" (focus)="hideCommentsList=true"
+ (input)="search(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>
+<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.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index e0954c5d5..ae4e237cd 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -17,42 +17,46 @@ mat-toolbar {
background-color: #bbdefb;
}
-.card-container {
- background-color: #b2dfdb;
- overflow: auto;
- overflow-wrap: break-word;
-}
-
-.outer-card {
- border-radius: 8px;
-}
-
input {
- border: 2px solid #4db6ac;
box-sizing: border-box;
- padding: 5px 10px 5px 30px;
- margin-bottom: 0px;
+ padding: 5px 10px 5px 10px;
}
-.search-results li {
- list-style-type: none;
- display: block;
- width: 100%;
- margin-top: 0px;
+mat-list-item{
+height:50px;
}
-li a {
- border: 1px solid #4db6ac;
+a {
text-decoration: none;
display: block;
color: black;
- background-color: #b2dfdb;
- padding: 10px;
+ background-color: #b2dfdb;
}
-.search-results :hover {
+mat-nav-list :hover {
background-color: #4db6ac;
}
-.search-results li a:hover {
+.app-class .mat-list-item {
+ padding: 1px;
+}
+
+button{
+ border-left: 3px solid #b2dfdb;
+ border-radius: 0px;
+ min-height: 100% !important;
+ min-width: 80px;
+}
+
+mat-icon {
+ padding: 10px;
+}
+
+mat-label {
+ border-radius: 0px;
+}
+
+#search-container{
+ background-color: #4db6ac;
+ margin-bottom: 10px;
}
\ 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 29fd368e1..26485ee82 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
import { TranslateService } from '@ngx-translate/core';
@@ -15,32 +14,35 @@ export class CommentListComponent implements OnInit {
comments: Comment[];
isLoading = true;
roomId: string;
- private searchTerms = new Subject<string>();
- comments$: Observable<Comment[]>;
+ private hideCommentsList: boolean;
+ private comments$: Observable<Comment[]>;
constructor(private commentService: CommentService,
- private translateService: TranslateService,
- protected langService: LanguageService) {
+ private route: ActivatedRoute,
+ private roomService: RoomService,
+ private location: Location,
+ private commentService: CommentService,
+ private notification: NotificationService,
+ private translateService: TranslateService,
+ protected langService: LanguageService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
ngOnInit() {
this.roomId = localStorage.getItem(`roomId`);
+ this.hideCommentsList = false;
this.getComments();
- this.comments$ = this.searchTerms.pipe(
- debounceTime(100),
- distinctUntilChanged(),
- // switch to new search observable each time the term changes
- switchMap((term: string) => this.commentService.searchComments(this.roomId, term)),
- );
- this.translateService.use(localStorage.getItem('currentLang'));
+ this.translateService.use(localStorage.getItem('currentLang'));
}
getComments(): void {
- this.commentService.getComments(this.roomId)
- .subscribe(comments => {
- this.comments = comments;
- this.isLoading = false;
- });
+ this.commentService.getComments(this.roomId)
+ .subscribe(comments => {
+ this.comments = comments;
+ this.isLoading = false;
+ });
+ }
+
+ search(term: string): void {
}
}
--
GitLab