Skip to content
Snippets Groups Projects
Commit 77aea9a4 authored by Thisari Muthuwahandi's avatar Thisari Muthuwahandi
Browse files

Add search function and design

parent 7b047359
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 87 deletions
src/app/components/shared/comment-list/comment-list.component.html
+ 7
− 9
View file @ 77aea9a4
......@@ -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
src/app/components/shared/comment-list/comment-list.component.scss
+ 6
− 30
View file @ 77aea9a4
......@@ -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
}
src/app/components/shared/comment-list/comment-list.component.ts
+ 3
− 8
View file @ 77aea9a4
......@@ -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));
}
}
src/app/services/http/comment.service.ts
+ 1
− 18
View file @ 77aea9a4
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'))
);
}
}
src/assets/i18n/participant/de.json
+ 15
− 11
View file @ 77aea9a4
{
"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
src/assets/i18n/participant/en.json
+ 15
− 11
View file @ 77aea9a4
{
"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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment