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