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 import {  } from '../../shared'
  17
  18 @Component({
  19   selector: 'my-videos-list',
  20   styleUrls: [ './video-list.component.scss' ],
  21   templateUrl: './video-list.component.html'
  22 })
  23 export class VideoListComponent implements OnInit, OnDestroy {
  24   loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
  25   pagination: VideoPagination = {
  26     currentPage: 1,
  27     itemsPerPage: 25,
  28     totalItems: null
  29   }
  30   sort: SortField
  31   user: AuthUser = null
  32   videos: Video[] = []
  33
  34   private search: Search
  35   private subActivatedRoute: Subscription
  36   private subSearch: Subscription
  37
  38   constructor (
  39     private notificationsService: NotificationsService,
  40     private authService: AuthService,
  41     private changeDetector: ChangeDetectorRef,
  42     private router: Router,
  43     private route: ActivatedRoute,
  44     private videoService: VideoService,
  45     private searchService: SearchService
  46   ) {}
  47
  48   ngOnInit () {
  49     if (this.authService.isLoggedIn()) {
  50       this.user = AuthUser.load()
  51     }
  52
  53     // Subscribe to route changes
  54     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
  55       this.loadRouteParams(routeParams)
  56
  57       // Update the search service component
  58       this.searchService.updateSearch.next(this.search)
  59       this.getVideos()
  60     })
  61
  62     // Subscribe to search changes
  63     this.subSearch = this.searchService.searchUpdated.subscribe(search => {
  64       this.search = search
  65       // Reset pagination
  66       this.pagination.currentPage = 1
  67
  68       this.navigateToNewParams()
  69     })
  70   }
  71
  72   ngOnDestroy () {
  73     this.subActivatedRoute.unsubscribe()
  74     this.subSearch.unsubscribe()
  75   }
  76
  77   getVideos () {
  78     this.loading.next(true)
  79     this.videos = []
  80
  81     let observable = null
  82     if (this.search.value) {
  83       observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
  84     } else {
  85       observable = this.videoService.getVideos(this.pagination, this.sort)
  86     }
  87
  88     observable.subscribe(
  89       ({ videos, totalVideos }) => {
  90         this.videos = videos
  91         this.pagination.totalItems = totalVideos
  92
  93         this.loading.next(false)
  94       },
  95       error => this.notificationsService.error('Error', error.text)
  96     )
  97   }
  98
  99   isThereNoVideo () {
 100     return !this.loading.getValue() && this.videos.length === 0
 101   }
 102
 103   onPageChanged (event: { page: number }) {
 104     // Be sure the current page is set
 105     this.pagination.currentPage = event.page
 106
 107     this.navigateToNewParams()
 108   }
 109
 110   onSort (sort: SortField) {
 111     this.sort = sort
 112
 113     this.navigateToNewParams()
 114   }
 115
 116   private buildRouteParams () {
 117     // There is always a sort and a current page
 118     const params = {
 119       sort: this.sort,
 120       page: this.pagination.currentPage
 121     }
 122
 123     // Maybe there is a search
 124     if (this.search.value) {
 125       params['field'] = this.search.field
 126       params['search'] = this.search.value
 127     }
 128
 129     return params
 130   }
 131
 132   private loadRouteParams (routeParams: { [ key: string ]: any }) {
 133     if (routeParams['search'] !== undefined) {
 134       this.search = {
 135         value: routeParams['search'],
 136         field: routeParams['field'] as SearchField
 137       }
 138     } else {
 139       this.search = {
 140         value: '',
 141         field: 'name'
 142       }
 143     }
 144
 145     this.sort = routeParams['sort'] as SortField || '-createdAt'
 146
 147     if (routeParams['page'] !== undefined) {
 148       this.pagination.currentPage = parseInt(routeParams['page'], 10)
 149     } else {
 150       this.pagination.currentPage = 1
 151     }
 152   }
 153
 154   private navigateToNewParams () {
 155     const routeParams = this.buildRouteParams()
 156     this.router.navigate([ '/videos/list', routeParams ])
 157   }
 158 }