From 77aea9a49964519422eb41bb9e1f0cde0e53b778 Mon Sep 17 00:00:00 2001
From: Thisari Muthuwahandi <thisari.muthuwahandi@mni.thm.de>
Date: Wed, 20 Mar 2019 09:13:21 +0100
Subject: [PATCH] Add search function and design
---
.../comment-list/comment-list.component.html | 16 ++++-----
.../comment-list/comment-list.component.scss | 36 ++++---------------
.../comment-list/comment-list.component.ts | 11 ++----
src/app/services/http/comment.service.ts | 19 +---------
src/assets/i18n/participant/de.json | 26 ++++++++------
src/assets/i18n/participant/en.json | 26 ++++++++------
6 files changed, 47 insertions(+), 87 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 97c482e39..abe72767a 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -2,16 +2,14 @@
<mat-label>
<mat-icon>search</mat-icon>
</mat-label>
- <input matInput #searchBox placeholder="Search in comments" (focus)="hideCommentsList=true"
- (input)="searchComments(searchBox.value)">
- <button mat-flat-button color="accent" (click)="hideCommentsList=false; searchBox.value='';">Cancel</button>
+ <input #searchBox placeholder="{{ 'comment-list-page.search-box-placeholder-text' | translate }}"
+ (focus)="hideCommentsList=true" (input)="searchComments(searchBox.value)">
+ <button mat-flat-button color="accent" *ngIf="hideCommentsList"
+ (click)="hideCommentsList=false;searchBox.value='';">{{ 'comment-list-page.cancel' | translate }}</button>
</div>
-
-<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 && searchBox.value!=''">
+ <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
+</mat-card>
<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 ae4e237cd..c7889db8d 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -7,45 +7,20 @@ app-comment {
overflow: auto;
overflow-wrap: break-word;
}
-mat-card-content>:first-child {
- margin-top: 20px;
-}
-
-mat-toolbar {
- border-radius: 10px;
- margin-bottom: 20px;
- background-color: #bbdefb;
-}
input {
box-sizing: border-box;
- padding: 5px 10px 5px 10px;
-}
-
-mat-list-item{
-height:50px;
-}
-
-a {
- text-decoration: none;
- display: block;
- color: black;
- background-color: #b2dfdb;
-}
-
-mat-nav-list :hover {
+ padding: 0 10px 0 20px;
+ width: 100%;
background-color: #4db6ac;
-}
-
-.app-class .mat-list-item {
- padding: 1px;
+ border: none;
}
button{
border-left: 3px solid #b2dfdb;
border-radius: 0px;
min-height: 100% !important;
- min-width: 80px;
+ min-width: 100px;
}
mat-icon {
@@ -53,10 +28,11 @@ mat-icon {
}
mat-label {
+ min-height: 100% !important;
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 697c52967..8b104e1f2 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -13,15 +13,10 @@ export class CommentListComponent implements OnInit {
comments: Comment[];
isLoading = true;
roomId: string;
- private hideCommentsList: boolean;
- private filteredComments: Comment[];
+ hideCommentsList: boolean;
+ filteredComments: Comment[];
constructor(private commentService: CommentService,
- 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));
@@ -42,7 +37,7 @@ export class CommentListComponent implements OnInit {
});
}
- searchComments(term: string): void {
+ searchComments(term: string): void {
this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
}
}
diff --git a/src/app/services/http/comment.service.ts b/src/app/services/http/comment.service.ts
index 13c5436c8..5a6b17c0b 100644
--- a/src/app/services/http/comment.service.ts
+++ b/src/app/services/http/comment.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Comment } from '../../models/comment';
import { catchError, tap } from 'rxjs/operators';
@@ -60,22 +60,6 @@ export class CommentService extends BaseHttpService {
);
}
- searchComments(roomId: string, term:string): Observable<Comment[]> {
- const connectionUrl = this.apiUrl.base + this.apiUrl.comment + this.apiUrl.find;
- term = term.trim();
-
- // Add safe, URL encoded search parameter if there is a search term
- const options = term ?
- { params: new HttpParams().set('subject', term) } : {};
- return this.http.post<Comment[]>(connectionUrl, {
- properties: { roomId: roomId },
- externalFilters: {}
- }, options).pipe(
- tap(_ => ''),
- catchError(this.handleError<Comment[]>('getComments', []))
- );
- }
-
updateComment(comment: Comment): Observable<any> {
const connectionUrl = this.apiUrl.base + this.apiUrl.comment + '/' + comment.id;
return this.http.put(connectionUrl, comment, httpOptions).pipe(
@@ -83,5 +67,4 @@ export class CommentService extends BaseHttpService {
catchError(this.handleError<any>('updateComment'))
);
}
-
}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 37a0e47f1..250ae2ea9 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -1,8 +1,8 @@
{
"home-page": {
- "no-room-found": "Es wurde keine Session mit dieser ID gefunden",
- "please-enter": "Bitte geben Sie eine Session-ID ein",
- "exactly-8": "Eine Session-ID hat genau 8 Ziffern"
+ "no-room-found": "Es wurde keine Session mit dieser ID gefunden.",
+ "please-enter": "Bitte geben Sie eine Session-ID ein.",
+ "exactly-8": "Eine Session-ID hat genau 8 Ziffern."
},
"room-page": {
"comments": "Kommentare",
@@ -19,9 +19,13 @@
"enter-comment": "Kommentar",
"send": "Senden",
"abort": "Abbrechen",
- "error-comment": "Bitte geben Sie einen Kommentartext ein",
- "error-title": "Bitte geben Sie einen Titel ein",
- "error-both-fields": "Bitte füllen Sie alle Felder aus"
+ "error-comment": "Bitte geben Sie einen Kommentartext ein.",
+ "error-title": "Bitte geben Sie einen Titel ein.",
+ "error-both-fields": "Bitte füllen Sie alle Felder aus."
+ },
+ "comment-list-page": {
+ "search-box-placeholder-text": "Search in comments",
+ "cancel": "Abbrechen"
},
"answer": {
"submit": "Absenden",
@@ -29,9 +33,9 @@
"sent": "Antwort gesendet",
"abstention-sent": "Enthaltung gesendet",
"your-answer": "Ihre Antwort",
- "at-least-one": "Bitte wählen sie mindestens eine Antwort",
- "please-one": "Bitte wählen sie eine Antwort",
- "please-answer": "Bitte geben sie eine Antwort ein"
+ "at-least-one": "Bitte wählen sie mindestens eine Antwort.",
+ "please-one": "Bitte wählen sie eine Antwort.",
+ "please-answer": "Bitte geben sie eine Antwort ein."
},
"statistic": {
"content": "Frage",
@@ -39,9 +43,9 @@
"answers": "Antworten",
"percentage": "Prozent",
"abstentions": "Enthaltungen",
- "no-questions": "Es sind noch keine Antworten vorhanden",
+ "no-questions": "Es sind noch keine Antworten vorhanden.",
"good": "Gut",
"improvable": "Luft nach oben",
"no-answers": "Keine Antworten"
}
-}
+}
\ No newline at end of file
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index 9fb7c9f2b..b129791e4 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -1,8 +1,8 @@
{
"home-page": {
- "no-room-found": "No session was found with this ID",
- "please-enter": "Please enter a session-ID",
- "exactly-8": "A session-ID has exactly 8 digits"
+ "no-room-found": "No session was found with this ID.",
+ "please-enter": "Please enter a session-ID.",
+ "exactly-8": "A session-ID has exactly 8 digits."
},
"room-page": {
"comments": "Comments",
@@ -19,9 +19,13 @@
"enter-comment": "Comment",
"send": "Send",
"abort": "Cancel",
- "error-title": "Please enter a title",
- "error-comment": "Please enter a comment-text",
- "error-both-fields": "Please fill in all fields"
+ "error-title": "Please enter a title.",
+ "error-comment": "Please enter a comment-text.",
+ "error-both-fields": "Please fill in all fields."
+ },
+ "comment-list-page": {
+ "search-box-placeholder-text": "Search in comments",
+ "cancel": "Cancel"
},
"answer": {
"submit": "Submit",
@@ -29,9 +33,9 @@
"sent": "Answer sent",
"abstention-sent": "Abstention sent",
"your-answer": "Your answer",
- "at-least-one": "Please select at least one answer",
- "please-one": "Please select an answer",
- "please-answer": "Please enter an answer"
+ "at-least-one": "Please select at least one answer.",
+ "please-one": "Please select an answer.",
+ "please-answer": "Please enter an answer."
},
"statistic": {
"content": "Content",
@@ -39,9 +43,9 @@
"answers": "Answers",
"percentage": "Percentage",
"abstentions": "Abstentions",
- "no-questions": "There are no answers yet",
+ "no-questions": "There are no answers yet.",
"good": "Good",
"improvable": "Improvable",
"no-answers": "No answers"
}
-}
+}
\ No newline at end of file
--
GitLab