]>
Commit | Line | Data |
---|---|---|
fd45e8f4 C |
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 | } |