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