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