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

   1 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
   2 import { ActivatedRoute, Router } from '@angular/router';
   3 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
   4
   5 import { NotificationsService } from 'angular2-notifications';
   6
   7 import {
   8   SortField,
   9   Video,
  10   VideoService
  11 } from '../shared';
  12 import { AuthService, AuthUser } from '../../core';
  13 import { RestPagination, Search, SearchField } from '../../shared';
  14 import { SearchService } from '../../shared';
  15
  16 @Component({
  17   selector: 'my-videos-list',
  18   styleUrls: [ './video-list.component.scss' ],
  19   templateUrl: './video-list.component.html'
  20 })
  21 export class VideoListComponent implements OnInit, OnDestroy {
  22   loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
  23   pagination: RestPagination = {
  24     currentPage: 1,
  25     itemsPerPage: 25,
  26     totalItems: null
  27   };
  28   sort: SortField;
  29   user: AuthUser = null;
  30   videos: Video[] = [];
  31
  32   private search: Search;
  33   private subActivatedRoute: any;
  34   private subSearch: any;
  35
  36   constructor(
  37     private notificationsService: NotificationsService,
  38     private authService: AuthService,
  39     private changeDetector: ChangeDetectorRef,
  40     private router: Router,
  41     private route: ActivatedRoute,
  42     private videoService: VideoService,
  43     private searchService: SearchService
  44   ) {}
  45
  46   ngOnInit() {
  47     if (this.authService.isLoggedIn()) {
  48       this.user = AuthUser.load();
  49     }
  50
  51     // Subscribe to route changes
  52     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
  53       this.loadRouteParams(routeParams);
  54
  55       // Update the search service component
  56       this.searchService.updateSearch.next(this.search);
  57       this.getVideos();
  58     });
  59
  60     // Subscribe to search changes
  61     this.subSearch = this.searchService.searchUpdated.subscribe(search => {
  62       this.search = search;
  63       // Reset pagination
  64       this.pagination.currentPage = 1;
  65
  66       this.navigateToNewParams();
  67     });
  68   }
  69
  70   ngOnDestroy() {
  71     this.subActivatedRoute.unsubscribe();
  72     this.subSearch.unsubscribe();
  73   }
  74
  75   getVideos() {
  76     this.loading.next(true);
  77     this.videos = [];
  78
  79     this.changeDetector.detectChanges();
  80
  81     let observable = null;
  82
  83     if (this.search.value) {
  84       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
  85     } else {
  86       observable = this.videoService.getVideos(this.pagination, this.sort);
  87     }
  88
  89     observable.subscribe(
  90       ({ videos, totalVideos }) => {
  91         this.videos = videos;
  92         this.pagination.totalItems = totalVideos;
  93
  94         this.loading.next(false);
  95       },
  96       error => this.notificationsService.error('Error', error.text)
  97     );
  98   }
  99
 100   isThereNoVideo() {
 101     return !this.loading.getValue() && this.videos.length === 0;
 102   }
 103
 104   onPageChanged(event: any) {
 105     // Be sure the current page is set
 106     this.pagination.currentPage = event.page;
 107
 108     this.navigateToNewParams();
 109   }
 110
 111   onSort(sort: SortField) {
 112     this.sort = sort;
 113
 114     this.navigateToNewParams();
 115   }
 116
 117   private buildRouteParams() {
 118     // There is always a sort and a current page
 119     const params: any = {
 120       sort: this.sort,
 121       page: this.pagination.currentPage
 122     };
 123
 124     // Maybe there is a search
 125     if (this.search.value) {
 126       params.field = this.search.field;
 127       params.search = this.search.value;
 128     }
 129
 130     return params;
 131   }
 132
 133   private loadRouteParams(routeParams) {
 134     if (routeParams['search'] !== undefined) {
 135       this.search = {
 136         value: routeParams['search'],
 137         field: <SearchField>routeParams['field']
 138       };
 139     } else {
 140       this.search = {
 141         value: '',
 142         field: 'name'
 143       };
 144     }
 145
 146     this.sort = <SortField>routeParams['sort'] || '-createdAt';
 147
 148     if (routeParams['page'] !== undefined) {
 149       this.pagination.currentPage = parseInt(routeParams['page']);
 150     } else {
 151       this.pagination.currentPage = 1;
 152     }
 153
 154     this.changeDetector.detectChanges();
 155   }
 156
 157   private navigateToNewParams() {
 158     const routeParams = this.buildRouteParams();
 159     this.router.navigate(['/videos/list', routeParams]);
 160   }
 161 }