client/app/videos/video-list/video-list.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2 import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
   3
   4 import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
   5
   6 import {
   7   LoaderComponent,
   8   Pagination,
   9   SortField,
  10   Video,
  11   VideoService
  12 } from '../shared/index';
  13 import { AuthService, Search, SearchField, User } from '../../shared/index';
  14 import { VideoMiniatureComponent } from './video-miniature.component';
  15 import { VideoSortComponent } from './video-sort.component';
  16
  17 @Component({
  18   selector: 'my-videos-list',
  19   styleUrls: [ 'client/app/videos/video-list/video-list.component.css' ],
  20   templateUrl: 'client/app/videos/video-list/video-list.component.html',
  21   directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
  22 })
  23
  24 export class VideoListComponent implements OnInit {
  25   loading = false;
  26   pagination: Pagination = {
  27     currentPage: 1,
  28     itemsPerPage: 9,
  29     total: 0
  30   };
  31   sort: SortField;
  32   user: User = null;
  33   videos: Video[] = [];
  34
  35   private search: Search;
  36
  37   constructor(
  38     private authService: AuthService,
  39     private router: Router,
  40     private routeParams: RouteParams,
  41     private videoService: VideoService
  42   ) {
  43     this.search = {
  44       value: this.routeParams.get('search'),
  45       field: <SearchField>this.routeParams.get('field')
  46     };
  47
  48     this.sort = <SortField>this.routeParams.get('sort') || '-createdDate';
  49   }
  50
  51   ngOnInit() {
  52     if (this.authService.isLoggedIn()) {
  53       this.user = User.load();
  54     }
  55
  56     this.getVideos();
  57   }
  58
  59   getVideos() {
  60     this.loading = true;
  61     this.videos = [];
  62
  63     let observable = null;
  64
  65     if (this.search.value !== null) {
  66       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
  67     } else {
  68       observable = this.videoService.getVideos(this.pagination, this.sort);
  69     }
  70
  71     observable.subscribe(
  72       ({ videos, totalVideos }) => {
  73         this.videos = videos;
  74         this.pagination.total = totalVideos;
  75
  76         this.loading = false;
  77       },
  78       error => alert(error)
  79     );
  80   }
  81
  82   noVideo() {
  83     return !this.loading && this.videos.length === 0;
  84   }
  85
  86   onRemoved(video: Video) {
  87     this.videos.splice(this.videos.indexOf(video), 1);
  88   }
  89
  90   onSort(sort: SortField) {
  91     this.sort = sort;
  92
  93     const params: any = {
  94       sort: this.sort
  95     };
  96
  97     if (this.search.value) {
  98       params.field = this.search.field;
  99       params.search = this.search.value;
 100     }
 101
 102     this.router.navigate(['VideosList', params]);
 103     this.getVideos();
 104   }
 105 }