video-list.component.ts

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