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     let observable = null;
  80     if (this.search.value) {
  81       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
  82     } else {
  83       observable = this.videoService.getVideos(this.pagination, this.sort);
  84     }
  85
  86     observable.subscribe(
  87       ({ videos, totalVideos }) => {
  88         this.videos = videos;
  89         this.pagination.totalItems = totalVideos;
  90
  91         this.loading.next(false);
  92       },
  93       error => this.notificationsService.error('Error', error.text)
  94     );
  95   }
  96
  97   isThereNoVideo() {
  98     return !this.loading.getValue() && this.videos.length === 0;
  99   }
 100
 101   onPageChanged(event: any) {
 102     // Be sure the current page is set
 103     this.pagination.currentPage = event.page;
 104
 105     this.navigateToNewParams();
 106   }
 107
 108   onSort(sort: SortField) {
 109     this.sort = sort;
 110
 111     this.navigateToNewParams();
 112   }
 113
 114   private buildRouteParams() {
 115     // There is always a sort and a current page
 116     const params: any = {
 117       sort: this.sort,
 118       page: this.pagination.currentPage
 119     };
 120
 121     // Maybe there is a search
 122     if (this.search.value) {
 123       params.field = this.search.field;
 124       params.search = this.search.value;
 125     }
 126
 127     return params;
 128   }
 129
 130   private loadRouteParams(routeParams) {
 131     if (routeParams['search'] !== undefined) {
 132       this.search = {
 133         value: routeParams['search'],
 134         field: <SearchField>routeParams['field']
 135       };
 136     } else {
 137       this.search = {
 138         value: '',
 139         field: 'name'
 140       };
 141     }
 142
 143     this.sort = <SortField>routeParams['sort'] || '-createdAt';
 144
 145     if (routeParams['page'] !== undefined) {
 146       this.pagination.currentPage = parseInt(routeParams['page']);
 147     } else {
 148       this.pagination.currentPage = 1;
 149     }
 150   }
 151
 152   private navigateToNewParams() {
 153     const routeParams = this.buildRouteParams();
 154     this.router.navigate(['/videos/list', routeParams]);
 155   }
 156 }