import { OnDestroy, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
-import { Subscription } from 'rxjs/Subscription'
-import { BehaviorSubject } from 'rxjs/BehaviorSubject'
-import { Observable } from 'rxjs/Observable'
import { NotificationsService } from 'angular2-notifications'
+import { Observable } from 'rxjs/Observable'
+import { Subscription } from 'rxjs/Subscription'
-import {
- SortField,
- Video,
- VideoPagination
-} from '../../shared'
+import { SortField, Video, VideoPagination } from '../../shared'
export abstract class AbstractVideoList implements OnInit, OnDestroy {
- loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
pagination: VideoPagination = {
currentPage: 1,
itemsPerPage: 25,
totalItems: null
}
- sort: SortField
+ sort: SortField = '-createdAt'
videos: Video[] = []
protected notificationsService: NotificationsService
protected router: Router
protected route: ActivatedRoute
-
protected subActivatedRoute: Subscription
+ protected abstract currentRoute: string
+
+ abstract titlePage: string
+ private loadedPages: { [ id: number ]: boolean } = {}
+
abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
ngOnInit () {
// Subscribe to route changes
- this.subActivatedRoute = this.route.params.subscribe(routeParams => {
- this.loadRouteParams(routeParams)
-
- this.getVideos()
- })
+ const routeParams = this.route.snapshot.params
+ this.loadRouteParams(routeParams)
+ this.loadMoreVideos('after')
}
ngOnDestroy () {
this.subActivatedRoute.unsubscribe()
}
- getVideos () {
- this.loading.next(true)
- this.videos = []
+ onNearOfTop () {
+ if (this.pagination.currentPage > 1) {
+ this.previousPage()
+ }
+ }
+
+ onNearOfBottom () {
+ if (this.hasMoreVideos()) {
+ this.nextPage()
+ }
+ }
+
+ loadMoreVideos (where: 'before' | 'after') {
+ if (this.loadedPages[this.pagination.currentPage] === true) return
const observable = this.getVideosObservable()
observable.subscribe(
({ videos, totalVideos }) => {
- this.videos = videos
+ this.loadedPages[this.pagination.currentPage] = true
this.pagination.totalItems = totalVideos
- this.loading.next(false)
+ if (where === 'before') {
+ this.videos = videos.concat(this.videos)
+ } else {
+ this.videos = this.videos.concat(videos)
+ }
},
error => this.notificationsService.error('Error', error.text)
)
}
- isThereNoVideo () {
- return !this.loading.getValue() && this.videos.length === 0
+ protected hasMoreVideos () {
+ if (!this.pagination.totalItems) return true
+
+ const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage
+ return maxPage > this.pagination.currentPage
}
- onPageChanged (event: { page: number }) {
- // Be sure the current page is set
- this.pagination.currentPage = event.page
+ protected previousPage () {
+ this.pagination.currentPage--
- this.navigateToNewParams()
+ this.setNewRouteParams()
+ this.loadMoreVideos('before')
}
- onSort (sort: SortField) {
- this.sort = sort
+ protected nextPage () {
+ this.pagination.currentPage++
- this.navigateToNewParams()
+ this.setNewRouteParams()
+ this.loadMoreVideos('after')
}
protected buildRouteParams () {
}
}
- protected navigateToNewParams () {
+ protected setNewRouteParams () {
const routeParams = this.buildRouteParams()
- this.router.navigate([ '/videos/list', routeParams ])
+ this.router.navigate([ this.currentRoute, routeParams ])
}
}