diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 8c5285e4b..ab8e0c283 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -6,7 +6,7 @@
-
+
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 88b181f9c..354d00a7a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { FriendService } from './friends';
import {
AuthService,
AuthStatus,
- Search,
SearchComponent,
SearchService
} from './shared';
@@ -27,6 +26,7 @@ export class AppComponent {
constructor(
private authService: AuthService,
private friendService: FriendService,
+ private route: ActivatedRoute,
private router: Router
) {
this.isLoggedIn = this.authService.isLoggedIn();
@@ -40,19 +40,6 @@ export class AppComponent {
);
}
- onSearch(search: Search) {
- if (search.value !== '') {
- const params = {
- field: search.field,
- search: search.value
- };
-
- this.router.navigate(['/videos/list', params]);
- } else {
- this.router.navigate(['/videos/list']);
- }
- }
-
// FIXME
logout() {
// this._authService.logout();
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index d33701bc8..e864fbc17 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
@@ -13,8 +13,6 @@ import { SearchService } from './search.service';
})
export class SearchComponent implements OnInit {
- @Output() search = new EventEmitter();
-
fieldChoices = {
name: 'Name',
author: 'Author',
@@ -30,7 +28,9 @@ export class SearchComponent implements OnInit {
constructor(private searchService: SearchService) {}
ngOnInit() {
- this.searchService.searchChanged.subscribe(
+ // Subscribe is the search changed
+ // Usually changed by videos list component
+ this.searchService.updateSearch.subscribe(
newSearchCriterias => {
// Put a field by default
if (!newSearchCriterias.field) {
@@ -58,7 +58,7 @@ export class SearchComponent implements OnInit {
}
doSearch() {
- this.search.emit(this.searchCriterias);
+ this.searchService.searchUpdated.next(this.searchCriterias);
}
getStringChoice(choiceKey: SearchField) {
diff --git a/client/src/app/shared/search/search.service.ts b/client/src/app/shared/search/search.service.ts
index 0e41cdd34..c7993db3d 100644
--- a/client/src/app/shared/search/search.service.ts
+++ b/client/src/app/shared/search/search.service.ts
@@ -7,9 +7,11 @@ import { Search } from './search.model';
// Remove it when we'll be able to subscribe to router changes
@Injectable()
export class SearchService {
- searchChanged: Subject;
+ searchUpdated: Subject;
+ updateSearch: Subject;
constructor() {
- this.searchChanged = new Subject();
+ this.updateSearch = new Subject();
+ this.searchUpdated = new Subject();
}
}
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 0e17ef2c4..e119517a8 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -8,13 +8,16 @@
-
There is no video.
+
There is no video.
-
+
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 0ebf0ef5c..5691d684e 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -37,7 +37,8 @@ export class VideoListComponent implements OnInit, OnDestroy {
videos: Video[] = [];
private search: Search;
- private sub: any;
+ private subActivatedRoute: any;
+ private subSearch: any;
constructor(
private authService: AuthService,
@@ -49,33 +50,35 @@ export class VideoListComponent implements OnInit, OnDestroy {
) {}
ngOnInit() {
- this.sub = this.route.params.subscribe(routeParams => {
- if (this.authService.isLoggedIn()) {
- this.user = User.load();
- }
+ if (this.authService.isLoggedIn()) {
+ this.user = User.load();
+ }
- this.search = {
- value: routeParams['search'],
- field: routeParams['field']
- };
+ // Subscribe to route changes
+ this.subActivatedRoute = this.route.params.subscribe(routeParams => {
+ this.loadRouteParams(routeParams);
// Update the search service component
- this.searchService.searchChanged.next(this.search);
-
- this.sort = routeParams['sort'] || '-createdDate';
-
+ this.searchService.updateSearch.next(this.search);
this.getVideos();
});
+
+ // Subscribe to search changes
+ this.subSearch = this.searchService.searchUpdated.subscribe(search => {
+ this.search = search;
+
+ this.navigateToNewParams();
+ });
}
ngOnDestroy() {
- this.sub.unsubscribe();
+ this.subActivatedRoute.unsubscribe();
+ this.subSearch.unsubscribe();
}
getVideos(detectChanges = true) {
this.loading.next(true);
this.videos = [];
- this.pagination.currentPage = 1;
this.changeDetector.detectChanges();
@@ -98,26 +101,65 @@ export class VideoListComponent implements OnInit, OnDestroy {
);
}
- noVideo() {
- return !this.loading && this.videos.length === 0;
+ isThereNoVideo() {
+ return !this.loading.getValue() && this.videos.length === 0;
+ }
+
+ onPageChanged(event: any) {
+ // Be sure the current page is set
+ this.pagination.currentPage = event.page;
+
+ this.navigateToNewParams();
}
onRemoved(video: Video) {
- this.getVideos(false);
+ this.getVideos();
}
onSort(sort: SortField) {
this.sort = sort;
+ this.navigateToNewParams();
+ }
+
+ private buildRouteParams() {
+ // There is always a sort and a current page
const params: any = {
- sort: this.sort
+ sort: this.sort,
+ page: this.pagination.currentPage
};
+ // Maybe there is a search
if (this.search.value) {
params.field = this.search.field;
params.search = this.search.value;
}
- this.router.navigate(['/videos/list', params]);
+ return params;
+ }
+
+ private loadRouteParams(routeParams) {
+ if (routeParams['search'] !== undefined) {
+ this.search = {
+ value: routeParams['search'],
+ field: routeParams['field']
+ };
+ } else {
+ this.search = {
+ value: '',
+ field: 'name'
+ };
+ }
+
+ this.sort = routeParams['sort'] || '-createdDate';
+
+ this.pagination.currentPage = parseInt(routeParams['page']) || 1;
+
+ this.changeDetector.detectChanges();
+ }
+
+ private navigateToNewParams() {
+ const routeParams = this.buildRouteParams();
+ this.router.navigate(['/videos/list', routeParams]);
}
}
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 3cf28620e..373ff6bfb 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -17,12 +17,12 @@
- {{ video.by }}
+ {{ video.by }}
{{ video.createdDate | date:'short' }}
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 90645d67f..84bab950e 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -2,7 +2,7 @@ import { DatePipe } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
-import { Video, VideoService } from '../shared';
+import { SortField, Video, VideoService } from '../shared';
import { User } from '../../shared';
@Component({
@@ -16,6 +16,7 @@ import { User } from '../../shared';
export class VideoMiniatureComponent {
@Output() removed = new EventEmitter();
+ @Input() currentSort: SortField;
@Input() user: User;
@Input() video: Video;
diff --git a/client/tsconfig.json b/client/tsconfig.json
index c7f61902c..79f889c3d 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -45,6 +45,7 @@
"src/app/shared/users/index.ts",
"src/app/shared/users/token.model.ts",
"src/app/shared/users/user.model.ts",
+ "src/app/shared/videos-params.ts",
"src/app/videos/index.ts",
"src/app/videos/shared/index.ts",
"src/app/videos/shared/loader/index.ts",