Client: save page params as well

client/src/app/app.component.html

@@ -6,7 +6,7 @@
     </div>
 
     <div class="col-md-9">
-      <my-search (search)="onSearch($event)"></my-search>
+      <my-search></my-search>
     </div>
   </header>
 

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();

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<Search>();
-
   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) {

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<Search>;
+  searchUpdated: Subject<Search>;
+  updateSearch: Subject<Search>;
 
   constructor() {
-    this.searchChanged = new Subject<Search>();
+    this.updateSearch = new Subject<Search>();
+    this.searchUpdated = new Subject<Search>();
   }
 }

client/src/app/videos/video-list/video-list.component.html

@@ -8,13 +8,16 @@
 </div>
 
 <div class="videos-miniatures">
-  <div class="col-md-12 no-video" *ngIf="noVideo()">There is no video.</div>
+  <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
 
-  <my-video-miniature class="ng-animate "*ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
+  <my-video-miniature
+    class="ng-animate"
+    *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" (removed)="onRemoved(video)"
+  >
   </my-video-miniature>
 </div>
 
 <pagination *ngIf="pagination.totalItems !== null"
   [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
-  [(ngModel)]="pagination.currentPage" (pageChanged)="getVideos()"
+  [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
 ></pagination>

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: <SearchField>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 = <SortField>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: <SearchField>routeParams['field']
+      };
+    } else {
+      this.search = {
+        value: '',
+        field: 'name'
+      };
+    }
+
+    this.sort = <SortField>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]);
   }
 }

client/src/app/videos/video-list/video-miniature.component.html

@@ -17,12 +17,12 @@
 
       <div class="video-miniature-tags">
         <span *ngFor="let tag of video.tags" class="video-miniature-tag">
-          <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a>
+          <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
         </span>
       </div>
     </span>
 
-    <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">{{ video.by }}</a>
+    <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
     <span class="video-miniature-created-date">{{ video.createdDate | date:'short' }}</span>
   </div>
 </div>

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<any>();
 
+  @Input() currentSort: SortField;
   @Input() user: User;
   @Input() video: Video;
 

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",