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