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