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: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
  23 })
  24
  25 export class VideoListComponent implements OnInit {
  26   user: User = null;
  27   videos: Video[] = [];
  28   pagination: Pagination = {
  29     currentPage: 1,
  30     itemsPerPage: 9,
  31     total: 0
  32   };
  33   sort: SortField;
  34   loading: boolean = false;
  35
  36   private search: Search;
  37
  38   constructor(
  39     private _authService: AuthService,
  40     private _videoService: VideoService,
  41     private _routeParams: RouteParams,
  42     private _router: Router
  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         this.loading = false;
  77       },
  78       error => alert(error)
  79     );
  80   }
  81
  82   onRemoved(video: Video): void {
  83     this.videos.splice(this.videos.indexOf(video), 1);
  84   }
  85
  86   onSort(sort: SortField) {
  87     this.sort = sort;
  88
  89     const params: any = {
  90       sort: this.sort
  91     };
  92
  93     if (this.search.value) {
  94       params.search = this.search.value;
  95       params.field = this.search.field;
  96     }
  97
  98     this._router.navigate(['VideosList', params]);
  99     this.getVideos();
 100   }
 101 }