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