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