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

   1 import { OnInit } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { NotificationsService } from 'angular2-notifications'
   4 import { Observable } from 'rxjs/Observable'
   5 import { SortField } from './sort-field.type'
   6 import { VideoPagination } from './video-pagination.model'
   7 import { Video } from './video.model'
   8
   9 export abstract class AbstractVideoList implements OnInit {
  10   pagination: VideoPagination = {
  11     currentPage: 1,
  12     itemsPerPage: 25,
  13     totalItems: null
  14   }
  15   sort: SortField = '-createdAt'
  16   defaultSort: SortField = '-createdAt'
  17   videos: Video[] = []
  18   loadOnInit = true
  19
  20   protected notificationsService: NotificationsService
  21   protected router: Router
  22   protected route: ActivatedRoute
  23
  24   protected abstract currentRoute: string
  25
  26   abstract titlePage: string
  27   private loadedPages: { [ id: number ]: boolean } = {}
  28
  29   abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
  30
  31   ngOnInit () {
  32     // Subscribe to route changes
  33     const routeParams = this.route.snapshot.params
  34     this.loadRouteParams(routeParams)
  35
  36     if (this.loadOnInit === true) this.loadMoreVideos('after')
  37   }
  38
  39   onNearOfTop () {
  40     if (this.pagination.currentPage > 1) {
  41       this.previousPage()
  42     }
  43   }
  44
  45   onNearOfBottom () {
  46     if (this.hasMoreVideos()) {
  47       this.nextPage()
  48     }
  49   }
  50
  51   reloadVideos () {
  52     this.videos = []
  53     this.loadedPages = {}
  54     this.loadMoreVideos('before')
  55   }
  56
  57   loadMoreVideos (where: 'before' | 'after') {
  58     if (this.loadedPages[this.pagination.currentPage] === true) return
  59
  60     const observable = this.getVideosObservable()
  61
  62     observable.subscribe(
  63       ({ videos, totalVideos }) => {
  64         // Paging is too high, return to the first one
  65         if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
  66           this.pagination.currentPage = 1
  67           this.setNewRouteParams()
  68           return this.reloadVideos()
  69         }
  70
  71         this.loadedPages[this.pagination.currentPage] = true
  72         this.pagination.totalItems = totalVideos
  73
  74         if (where === 'before') {
  75           this.videos = videos.concat(this.videos)
  76         } else {
  77           this.videos = this.videos.concat(videos)
  78         }
  79       },
  80       error => this.notificationsService.error('Error', error.text)
  81     )
  82   }
  83
  84   protected hasMoreVideos () {
  85     // No results
  86     if (this.pagination.totalItems === 0) return false
  87
  88     // Not loaded yet
  89     if (!this.pagination.totalItems) return true
  90
  91     const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
  92     return maxPage > this.pagination.currentPage
  93   }
  94
  95   protected previousPage () {
  96     this.pagination.currentPage--
  97
  98     this.setNewRouteParams()
  99     this.loadMoreVideos('before')
 100   }
 101
 102   protected nextPage () {
 103     this.pagination.currentPage++
 104
 105     this.setNewRouteParams()
 106     this.loadMoreVideos('after')
 107   }
 108
 109   protected buildRouteParams () {
 110     // There is always a sort and a current page
 111     const params = {
 112       sort: this.sort,
 113       page: this.pagination.currentPage
 114     }
 115
 116     return params
 117   }
 118
 119   protected loadRouteParams (routeParams: { [ key: string ]: any }) {
 120     this.sort = routeParams['sort'] as SortField || this.defaultSort
 121
 122     if (routeParams['page'] !== undefined) {
 123       this.pagination.currentPage = parseInt(routeParams['page'], 10)
 124     } else {
 125       this.pagination.currentPage = 1
 126     }
 127   }
 128
 129   protected setNewRouteParams () {
 130     const routeParams = this.buildRouteParams()
 131     this.router.navigate([ this.currentRoute, routeParams ])
 132   }
 133 }