Client: save page params as well

4 files changed, 71 insertions, 25 deletions

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 @@
 </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>
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: <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.searchService.updateSearch.next(this.search);
+      this.getVideos();
+    });
 
-      this.sort = <SortField>routeParams['sort'] || '-createdDate';
+    // Subscribe to search changes
+    this.subSearch = this.searchService.searchUpdated.subscribe(search => {
+      this.search = search;
 
-      this.getVideos();
+      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]);
   }
 }
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 @@
 
       <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>
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<any>();
 
+  @Input() currentSort: SortField;
   @Input() user: User;
   @Input() video: Video;