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

   1 import { Component, OnDestroy, OnInit } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { Subscription } from 'rxjs/Subscription'
   4 import { BehaviorSubject } from 'rxjs/BehaviorSubject'
   5
   6 import { NotificationsService } from 'angular2-notifications'
   7
   8 import { AuthService } from '../../core'
   9 import {
  10   SortField,
  11   Video,
  12   VideoService,
  13   VideoPagination
  14 } from '../shared'
  15 import { Search, SearchField, SearchService, User } from '../../shared'
  16
  17 @Component({
  18   selector: 'my-videos-list',
  19   styleUrls: [ './video-list.component.scss' ],
  20   templateUrl: './video-list.component.html'
  21 })
  22 export class VideoListComponent implements OnInit, OnDestroy {
  23   loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
  24   pagination: VideoPagination = {
  25     currentPage: 1,
  26     itemsPerPage: 25,
  27     totalItems: null
  28   }
  29   sort: SortField
  30   user: User
  31   videos: Video[] = []
  32
  33   private search: Search
  34   private subActivatedRoute: Subscription
  35   private subSearch: Subscription
  36
  37   constructor (
  38     private authService: AuthService,
  39     private notificationsService: NotificationsService,
  40     private router: Router,
  41     private route: ActivatedRoute,
  42     private videoService: VideoService,
  43     private searchService: SearchService
  44   ) {}
  45
  46   ngOnInit () {
  47     this.user = this.authService.getUser()
  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     let observable = null
  78     if (this.search.value) {
  79       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
  80     } else {
  81       observable = this.videoService.getVideos(this.pagination, this.sort)
  82     }
  83
  84     observable.subscribe(
  85       ({ videos, totalVideos }) => {
  86         this.videos = videos
  87         this.pagination.totalItems = totalVideos
  88
  89         this.loading.next(false)
  90       },
  91       error => this.notificationsService.error('Error', error.text)
  92     )
  93   }
  94
  95   isThereNoVideo () {
  96     return !this.loading.getValue() && this.videos.length === 0
  97   }
  98
  99   onPageChanged (event: { page: number }) {
 100     // Be sure the current page is set
 101     this.pagination.currentPage = event.page
 102
 103     this.navigateToNewParams()
 104   }
 105
 106   onSort (sort: SortField) {
 107     this.sort = sort
 108
 109     this.navigateToNewParams()
 110   }
 111
 112   private buildRouteParams () {
 113     // There is always a sort and a current page
 114     const params = {
 115       sort: this.sort,
 116       page: this.pagination.currentPage
 117     }
 118
 119     // Maybe there is a search
 120     if (this.search.value) {
 121       params['field'] = this.search.field
 122       params['search'] = this.search.value
 123     }
 124
 125     return params
 126   }
 127
 128   private loadRouteParams (routeParams: { [ key: string ]: any }) {
 129     if (routeParams['search'] !== undefined) {
 130       this.search = {
 131         value: routeParams['search'],
 132         field: routeParams['field'] as SearchField
 133       }
 134     } else {
 135       this.search = {
 136         value: '',
 137         field: 'name'
 138       }
 139     }
 140
 141     this.sort = routeParams['sort'] as SortField || '-createdAt'
 142
 143     if (routeParams['page'] !== undefined) {
 144       this.pagination.currentPage = parseInt(routeParams['page'], 10)
 145     } else {
 146       this.pagination.currentPage = 1
 147     }
 148   }
 149
 150   private navigateToNewParams () {
 151     const routeParams = this.buildRouteParams()
 152     this.router.navigate([ '/videos/list', routeParams ])
 153   }
 154 }