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