Add search bar and search components.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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] },
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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()">
|
||||
|
||||
36
src/main/ts-v7/src/app/search/search.component.ts
Normal file
36
src/main/ts-v7/src/app/search/search.component.ts
Normal 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;
|
||||
});
|
||||
}
|
||||
}
|
||||
14
src/main/ts-v7/src/app/search/search.service.ts
Normal file
14
src/main/ts-v7/src/app/search/search.service.ts
Normal 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}`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user