client/src/app/videos/video-list/shared/abstract-video-list.ts

   1 import { 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 import { Observable } from 'rxjs/Observable'
   6
   7 import { NotificationsService } from 'angular2-notifications'
   8
   9 import {
  10   SortField,
  11   Video,
  12   VideoPagination
  13 } from '../../shared'
  14
  15 export abstract class AbstractVideoList implements OnInit, OnDestroy {
  16   loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
  17   pagination: VideoPagination = {
  18     currentPage: 1,
  19     itemsPerPage: 25,
  20     totalItems: null
  21   }
  22   sort: SortField
  23   videos: Video[] = []
  24
  25   protected notificationsService: NotificationsService
  26   protected router: Router
  27   protected route: ActivatedRoute
  28
  29   protected subActivatedRoute: Subscription
  30
  31   abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
  32
  33   ngOnInit () {
  34     // Subscribe to route changes
  35     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
  36       this.loadRouteParams(routeParams)
  37
  38       this.getVideos()
  39     })
  40   }
  41
  42   ngOnDestroy () {
  43     this.subActivatedRoute.unsubscribe()
  44   }
  45
  46   getVideos () {
  47     this.loading.next(true)
  48     this.videos = []
  49
  50     const observable = this.getVideosObservable()
  51
  52     observable.subscribe(
  53       ({ videos, totalVideos }) => {
  54         this.videos = videos
  55         this.pagination.totalItems = totalVideos
  56
  57         this.loading.next(false)
  58       },
  59       error => this.notificationsService.error('Error', error.text)
  60     )
  61   }
  62
  63   isThereNoVideo () {
  64     return !this.loading.getValue() && this.videos.length === 0
  65   }
  66
  67   onPageChanged (event: { page: number }) {
  68     // Be sure the current page is set
  69     this.pagination.currentPage = event.page
  70
  71     this.navigateToNewParams()
  72   }
  73
  74   onSort (sort: SortField) {
  75     this.sort = sort
  76
  77     this.navigateToNewParams()
  78   }
  79
  80   protected buildRouteParams () {
  81     // There is always a sort and a current page
  82     const params = {
  83       sort: this.sort,
  84       page: this.pagination.currentPage
  85     }
  86
  87     return params
  88   }
  89
  90   protected loadRouteParams (routeParams: { [ key: string ]: any }) {
  91     this.sort = routeParams['sort'] as SortField || '-createdAt'
  92
  93     if (routeParams['page'] !== undefined) {
  94       this.pagination.currentPage = parseInt(routeParams['page'], 10)
  95     } else {
  96       this.pagination.currentPage = 1
  97     }
  98   }
  99
 100   protected navigateToNewParams () {
 101     const routeParams = this.buildRouteParams()
 102     this.router.navigate([ '/videos/list', routeParams ])
 103   }
 104 }