]>
Commit | Line | Data |
---|---|---|
bcd9f81e | 1 | import { Component, OnDestroy, OnInit } from '@angular/core' |
df98563e | 2 | import { ActivatedRoute, Router } from '@angular/router' |
33c4972d | 3 | import { Subscription } from 'rxjs/Subscription' |
df98563e | 4 | import { BehaviorSubject } from 'rxjs/BehaviorSubject' |
dc8bc31b | 5 | |
df98563e | 6 | import { NotificationsService } from 'angular2-notifications' |
7ddd02c9 | 7 | |
d6e32a2e | 8 | import { AuthService } from '../../core' |
41a2aee3 | 9 | import { |
41a2aee3 C |
10 | SortField, |
11 | Video, | |
d592e0a9 C |
12 | VideoService, |
13 | VideoPagination | |
df98563e | 14 | } from '../shared' |
d6e32a2e | 15 | import { Search, SearchField, SearchService, User} from '../../shared' |
dc8bc31b C |
16 | |
17 | @Component({ | |
18 | selector: 'my-videos-list', | |
ec8d8440 C |
19 | styleUrls: [ './video-list.component.scss' ], |
20 | templateUrl: './video-list.component.html' | |
dc8bc31b | 21 | }) |
0629423c | 22 | export class VideoListComponent implements OnInit, OnDestroy { |
df98563e | 23 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false) |
d592e0a9 | 24 | pagination: VideoPagination = { |
32294074 | 25 | currentPage: 1, |
383bfc83 | 26 | itemsPerPage: 25, |
0629423c | 27 | totalItems: null |
df98563e C |
28 | } |
29 | sort: SortField | |
d6e32a2e | 30 | user: User |
df98563e | 31 | videos: Video[] = [] |
dc8bc31b | 32 | |
df98563e | 33 | private search: Search |
33c4972d C |
34 | private subActivatedRoute: Subscription |
35 | private subSearch: Subscription | |
98b01bac | 36 | |
df98563e | 37 | constructor ( |
d6e32a2e | 38 | private authService: AuthService, |
7ddd02c9 | 39 | private notificationsService: NotificationsService, |
4fd8aa32 | 40 | private router: Router, |
0629423c | 41 | private route: ActivatedRoute, |
00a44645 | 42 | private videoService: VideoService, |
0629423c | 43 | private searchService: SearchService |
00a44645 | 44 | ) {} |
dc8bc31b | 45 | |
df98563e | 46 | ngOnInit () { |
d6e32a2e C |
47 | this.user = this.authService.getUser() |
48 | ||
bddab65a C |
49 | // Subscribe to route changes |
50 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { | |
df98563e | 51 | this.loadRouteParams(routeParams) |
00a44645 | 52 | |
0629423c | 53 | // Update the search service component |
df98563e C |
54 | this.searchService.updateSearch.next(this.search) |
55 | this.getVideos() | |
56 | }) | |
00a44645 | 57 | |
bddab65a C |
58 | // Subscribe to search changes |
59 | this.subSearch = this.searchService.searchUpdated.subscribe(search => { | |
df98563e | 60 | this.search = search |
7eef9535 | 61 | // Reset pagination |
df98563e | 62 | this.pagination.currentPage = 1 |
0629423c | 63 | |
df98563e C |
64 | this.navigateToNewParams() |
65 | }) | |
0629423c | 66 | } |
00a44645 | 67 | |
df98563e C |
68 | ngOnDestroy () { |
69 | this.subActivatedRoute.unsubscribe() | |
70 | this.subSearch.unsubscribe() | |
dc8bc31b C |
71 | } |
72 | ||
df98563e C |
73 | getVideos () { |
74 | this.loading.next(true) | |
75 | this.videos = [] | |
0629423c | 76 | |
df98563e | 77 | let observable = null |
00a44645 | 78 | if (this.search.value) { |
df98563e | 79 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort) |
98b01bac | 80 | } else { |
df98563e | 81 | observable = this.videoService.getVideos(this.pagination, this.sort) |
98b01bac C |
82 | } |
83 | ||
84 | observable.subscribe( | |
32294074 | 85 | ({ videos, totalVideos }) => { |
df98563e C |
86 | this.videos = videos |
87 | this.pagination.totalItems = totalVideos | |
4fd8aa32 | 88 | |
df98563e | 89 | this.loading.next(false) |
32294074 | 90 | }, |
7ddd02c9 | 91 | error => this.notificationsService.error('Error', error.text) |
df98563e | 92 | ) |
dc8bc31b C |
93 | } |
94 | ||
df98563e C |
95 | isThereNoVideo () { |
96 | return !this.loading.getValue() && this.videos.length === 0 | |
bddab65a C |
97 | } |
98 | ||
33c4972d | 99 | onPageChanged (event: { page: number }) { |
bddab65a | 100 | // Be sure the current page is set |
df98563e | 101 | this.pagination.currentPage = event.page |
bddab65a | 102 | |
df98563e | 103 | this.navigateToNewParams() |
9bfe96e1 C |
104 | } |
105 | ||
df98563e C |
106 | onSort (sort: SortField) { |
107 | this.sort = sort | |
a99593ed | 108 | |
df98563e | 109 | this.navigateToNewParams() |
bddab65a C |
110 | } |
111 | ||
df98563e | 112 | private buildRouteParams () { |
bddab65a | 113 | // There is always a sort and a current page |
33c4972d | 114 | const params = { |
bddab65a C |
115 | sort: this.sort, |
116 | page: this.pagination.currentPage | |
df98563e | 117 | } |
a99593ed | 118 | |
bddab65a | 119 | // Maybe there is a search |
a99593ed | 120 | if (this.search.value) { |
33c4972d C |
121 | params['field'] = this.search.field |
122 | params['search'] = this.search.value | |
a99593ed C |
123 | } |
124 | ||
df98563e | 125 | return params |
bddab65a C |
126 | } |
127 | ||
33c4972d | 128 | private loadRouteParams (routeParams: { [ key: string ]: any }) { |
bddab65a C |
129 | if (routeParams['search'] !== undefined) { |
130 | this.search = { | |
131 | value: routeParams['search'], | |
df98563e C |
132 | field: routeParams['field'] as SearchField |
133 | } | |
bddab65a C |
134 | } else { |
135 | this.search = { | |
136 | value: '', | |
137 | field: 'name' | |
df98563e | 138 | } |
bddab65a C |
139 | } |
140 | ||
df98563e | 141 | this.sort = routeParams['sort'] as SortField || '-createdAt' |
bddab65a | 142 | |
7eef9535 | 143 | if (routeParams['page'] !== undefined) { |
df98563e | 144 | this.pagination.currentPage = parseInt(routeParams['page'], 10) |
7eef9535 | 145 | } else { |
df98563e | 146 | this.pagination.currentPage = 1 |
7eef9535 | 147 | } |
bddab65a C |
148 | } |
149 | ||
df98563e C |
150 | private navigateToNewParams () { |
151 | const routeParams = this.buildRouteParams() | |
d592e0a9 | 152 | this.router.navigate([ '/videos/list', routeParams ]) |
00a44645 | 153 | } |
dc8bc31b | 154 | } |