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 {
   6   SortField,
   7   Video,
   8   VideoService
   9 } from '../shared';
  10 import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
  11 import { SearchService } from '../../shared';
  12
  13 @Component({
  14   selector: 'my-videos-list',
  15   styles: [ require('./video-list.component.scss') ],
  16   template: require('./video-list.component.html')
  17 })
  18
  19 export class VideoListComponent implements OnInit, OnDestroy {
  20   loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
  21   pagination: RestPagination = {
  22     currentPage: 1,
  23     itemsPerPage: 9,
  24     totalItems: null
  25   };
  26   sort: SortField;
  27   user: AuthUser = null;
  28   videos: Video[] = [];
  29
  30   private search: Search;
  31   private subActivatedRoute: any;
  32   private subSearch: any;
  33
  34   constructor(
  35     private authService: AuthService,
  36     private changeDetector: ChangeDetectorRef,
  37     private router: Router,
  38     private route: ActivatedRoute,
  39     private videoService: VideoService,
  40     private searchService: SearchService
  41   ) {}
  42
  43   ngOnInit() {
  44     if (this.authService.isLoggedIn()) {
  45       this.user = AuthUser.load();
  46     }
  47
  48     // Subscribe to route changes
  49     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
  50       this.loadRouteParams(routeParams);
  51
  52       // Update the search service component
  53       this.searchService.updateSearch.next(this.search);
  54       this.getVideos();
  55     });
  56
  57     // Subscribe to search changes
  58     this.subSearch = this.searchService.searchUpdated.subscribe(search => {
  59       this.search = search;
  60       // Reset pagination
  61       this.pagination.currentPage = 1;
  62
  63       this.navigateToNewParams();
  64     });
  65   }
  66
  67   ngOnDestroy() {
  68     this.subActivatedRoute.unsubscribe();
  69     this.subSearch.unsubscribe();
  70   }
  71
  72   getVideos() {
  73     this.loading.next(true);
  74     this.videos = [];
  75
  76     this.changeDetector.detectChanges();
  77
  78     let observable = null;
  79
  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 => alert(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   onRemoved(video: Video) {
 109     this.getVideos();
 110   }
 111
 112   onSort(sort: SortField) {
 113     this.sort = sort;
 114
 115     this.navigateToNewParams();
 116   }
 117
 118   private buildRouteParams() {
 119     // There is always a sort and a current page
 120     const params: any = {
 121       sort: this.sort,
 122       page: this.pagination.currentPage
 123     };
 124
 125     // Maybe there is a search
 126     if (this.search.value) {
 127       params.field = this.search.field;
 128       params.search = this.search.value;
 129     }
 130
 131     return params;
 132   }
 133
 134   private loadRouteParams(routeParams) {
 135     if (routeParams['search'] !== undefined) {
 136       this.search = {
 137         value: routeParams['search'],
 138         field: <SearchField>routeParams['field']
 139       };
 140     } else {
 141       this.search = {
 142         value: '',
 143         field: 'name'
 144       };
 145     }
 146
 147     this.sort = <SortField>routeParams['sort'] || '-createdDate';
 148
 149     if (routeParams['page'] !== undefined) {
 150       this.pagination.currentPage = parseInt(routeParams['page']);
 151     } else {
 152       this.pagination.currentPage = 1;
 153     }
 154
 155     this.changeDetector.detectChanges();
 156   }
 157
 158   private navigateToNewParams() {
 159     const routeParams = this.buildRouteParams();
 160     this.router.navigate(['/videos/list', routeParams]);
 161   }
 162 }