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