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 { Subscription } from 'rxjs/Subscription'
   4 import { BehaviorSubject } from 'rxjs/BehaviorSubject'
   5
   6 import { NotificationsService } from 'angular2-notifications'
   7
   8 import {
   9   SortField,
  10   Video,
  11   VideoService,
  12   VideoPagination
  13 } from '../shared'
  14 import { AuthService, AuthUser } from '../../core'
  15 import { Search, SearchField, SearchService } 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: AuthUser = null
  31   videos: Video[] = []
  32
  33   private search: Search
  34   private subActivatedRoute: Subscription
  35   private subSearch: Subscription
  36
  37   constructor (
  38     private notificationsService: NotificationsService,
  39     private authService: AuthService,
  40     private changeDetector: ChangeDetectorRef,
  41     private router: Router,
  42     private route: ActivatedRoute,
  43     private videoService: VideoService,
  44     private searchService: SearchService
  45   ) {}
  46
  47   ngOnInit () {
  48     if (this.authService.isLoggedIn()) {
  49       this.user = AuthUser.load()
  50     }
  51
  52     // Subscribe to route changes
  53     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
  54       this.loadRouteParams(routeParams)
  55
  56       // Update the search service component
  57       this.searchService.updateSearch.next(this.search)
  58       this.getVideos()
  59     })
  60
  61     // Subscribe to search changes
  62     this.subSearch = this.searchService.searchUpdated.subscribe(search => {
  63       this.search = search
  64       // Reset pagination
  65       this.pagination.currentPage = 1
  66
  67       this.navigateToNewParams()
  68     })
  69   }
  70
  71   ngOnDestroy () {
  72     this.subActivatedRoute.unsubscribe()
  73     this.subSearch.unsubscribe()
  74   }
  75
  76   getVideos () {
  77     this.loading.next(true)
  78     this.videos = []
  79
  80     let observable = null
  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 => this.notificationsService.error('Error', error.text)
  95     )
  96   }
  97
  98   isThereNoVideo () {
  99     return !this.loading.getValue() && this.videos.length === 0
 100   }
 101
 102   onPageChanged (event: { page: number }) {
 103     // Be sure the current page is set
 104     this.pagination.currentPage = event.page
 105
 106     this.navigateToNewParams()
 107   }
 108
 109   onSort (sort: SortField) {
 110     this.sort = sort
 111
 112     this.navigateToNewParams()
 113   }
 114
 115   private buildRouteParams () {
 116     // There is always a sort and a current page
 117     const params = {
 118       sort: this.sort,
 119       page: this.pagination.currentPage
 120     }
 121
 122     // Maybe there is a search
 123     if (this.search.value) {
 124       params['field'] = this.search.field
 125       params['search'] = this.search.value
 126     }
 127
 128     return params
 129   }
 130
 131   private loadRouteParams (routeParams: { [ key: string ]: any }) {
 132     if (routeParams['search'] !== undefined) {
 133       this.search = {
 134         value: routeParams['search'],
 135         field: routeParams['field'] as SearchField
 136       }
 137     } else {
 138       this.search = {
 139         value: '',
 140         field: 'name'
 141       }
 142     }
 143
 144     this.sort = routeParams['sort'] as SortField || '-createdAt'
 145
 146     if (routeParams['page'] !== undefined) {
 147       this.pagination.currentPage = parseInt(routeParams['page'], 10)
 148     } else {
 149       this.pagination.currentPage = 1
 150     }
 151   }
 152
 153   private navigateToNewParams () {
 154     const routeParams = this.buildRouteParams()
 155     this.router.navigate([ '/videos/list', routeParams ])
 156   }
 157 }