Add search bar and search components.

This commit is contained in:
2019-02-13 20:43:01 +01:00
parent 3e1c53b86b
commit b25192ea99
8 changed files with 67 additions and 8 deletions

View File

@@ -90,7 +90,7 @@ public class PostController {
@JsonView(View.PostDTO.class)
@GetMapping("/search/{searchCriteria}")
public List<PostDTO> search(@PathVariable("searchCriteria") final String pSearchCriteria) {
public List<Post> search(@PathVariable("searchCriteria") final String pSearchCriteria) {
return postService.search(pSearchCriteria);
}

View File

@@ -115,7 +115,7 @@ public class PostService {
}
}
public List<PostDTO> search(String pSearchCriteria) {
public List<Post> search(String pSearchCriteria) {
final String[] criteriasArray = pSearchCriteria.split(" ");
final List<SearchEntity> listSearchEntities = new LinkedList<>();
@@ -125,7 +125,7 @@ public class PostService {
});
Collections.sort(listSearchEntities, (e1, e2) -> e2.getScore() - e1.getScore());
return listSearchEntities.stream().map(SearchEntity::getPost).map(PostDTO::new).collect(Collectors.toList());
return listSearchEntities.stream().map(SearchEntity::getPost).collect(Collectors.toList());
}
void calculateScore(final SearchEntity searchPost, final String[] pCriteriasArray) {

View File

@@ -34,10 +34,12 @@ import { NotFoundComponent } from './not-found/not-found.component';
import { ByCategoryComponent } from './posts/byCategory/by-category.component';
import { CreateUpdatePostComponent } from './posts/create-update/create-update-post.component';
import { VersionRevisionComponent } from './version-revisions/version-revisions.component';
import { SearchComponent } from './search/search.component';
// Reusable components
import { PostCardComponent } from './core/post-card/post-card.component';
import { SpinnerComponent } from './core/directives/spinner/spinner.component';
import { SearchBarComponent } from './core/directives/search-bar/search-bar.component';
// Services
import { HeaderService } from './header/header.service';
@@ -52,6 +54,7 @@ import { PostService } from './posts/post.service';
import { ByCategoryService } from './posts/byCategory/by-category.service';
import { CreateUpdatePostService } from './posts/create-update/create-update-post.service';
import { VersionRevisionService } from './version-revisions/version-revisions.service';
import { SearchService } from './search/search.service';
@NgModule({
declarations: [
@@ -72,7 +75,9 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
NotFoundComponent,
ByCategoryComponent,
CreateUpdatePostComponent,
VersionRevisionComponent
VersionRevisionComponent,
SearchComponent,
SearchBarComponent
],
imports: [
BrowserModule,
@@ -82,8 +87,8 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
MDBBootstrapModule.forRoot(),
RouterModule.forRoot(
appRoutes,
// { enableTracing: true } // Enabling tracing
{ onSameUrlNavigation: 'reload' }
// { enableTracing: true }, // Enabling tracing
{ onSameUrlNavigation: 'reload'}
)
],
providers: [
@@ -100,6 +105,7 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
ByCategoryService,
CreateUpdatePostService,
VersionRevisionService,
SearchService,
{ provide: HTTP_INTERCEPTORS, useClass: UnauthorizedInterceptor, multi: true }
],
bootstrap: [AppComponent]

View File

@@ -14,6 +14,7 @@ import { PostComponent } from './posts/post.component';
import { ByCategoryComponent } from './posts/byCategory/by-category.component';
import { CreateUpdatePostComponent } from './posts/create-update/create-update-post.component';
import { VersionRevisionComponent } from './version-revisions/version-revisions.component';
import { SearchComponent } from './search/search.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@@ -24,6 +25,7 @@ export const appRoutes: Routes = [
{ path: 'posts/update/:postKey', component: CreateUpdatePostComponent, canActivate: [AuthGuard] },
{ path: 'posts/:postKey', component: PostComponent },
{ path: 'posts/byCategory/:categoryId', component: ByCategoryComponent},
{ path: 'posts/search/:searchCriteria', component: SearchComponent },
{ path: 'myPosts', component: MyPostsComponent, canActivate: [AuthGuard] },
{ path: 'accountSettings', component: AccountSettingsComponent, canActivate: [AuthGuard] },
{ path: 'changePassword', component: ChangePasswordComponent, canActivate: [AuthGuard] },

View File

@@ -27,9 +27,10 @@ import { Router } from '@angular/router';
color: white;
background-color: #5c6bc0;
border-radius: 2px;
border-style: unset;
border-style: unset;
padding-left: 10px;
padding-right: 35px;
transition: all 0.2s ease-in;
}
input#search:focus {

View File

@@ -8,7 +8,7 @@
</logo>
<links>
<div class="navbar-nav ml-auto nav-flex-icons">
<!-- <app-search-bar></app-search-bar> -->
<app-search-bar></app-search-bar>
</div>
<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;">
<li class="nav-item" *ngIf="!isAuthenticated()">

View File

@@ -0,0 +1,36 @@
import { Component, OnInit } from '@angular/core';
import { Post } from '../core/entities';
import { SearchService } from './search.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-search',
template: `
<div>
<h1>Résultats de la recherche</h1>
<app-spinner *ngIf="!listArticle"></app-spinner>
<div *ngIf="listArticle" class="col-lg-8 offset-lg-2">
<app-post-card *ngFor="let post of listArticle" [post]="post"></app-post-card>
</div>
</div>
`
})
export class SearchComponent implements OnInit {
searchLoading: boolean;
listArticle: Array<Post>;
constructor(
private activatedRoute: ActivatedRoute,
private searchService: SearchService
) {
this.searchLoading = true;
}
ngOnInit(): void {
this.searchService.search(this.activatedRoute.snapshot.paramMap.get('searchCriteria'))
.subscribe(listArticle => {
this.listArticle = listArticle;
this.searchLoading = false;
});
}
}

View File

@@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Post } from '../core/entities';
@Injectable()
export class SearchService {
constructor(private http: HttpClient) {}
search(searchCriteria: string): Observable<Array<Post>> {
return this.http.get<Array<Post>>(`/api/posts/search/${searchCriteria}`);
}
}