]>
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, | |
10 | Pagination, | |
11 | SortField, | |
12 | Video, | |
13 | VideoService | |
4a6995be C |
14 | } from '../shared'; |
15 | import { AuthService, Search, SearchField, User } from '../../shared'; | |
501bc6c2 | 16 | import { VideoMiniatureComponent } from './video-miniature.component'; |
cf20596c | 17 | import { VideoSortComponent } from './video-sort.component'; |
00a44645 | 18 | import { SearchService } from '../../shared'; |
dc8bc31b C |
19 | |
20 | @Component({ | |
21 | selector: 'my-videos-list', | |
4a6995be | 22 | styles: [ require('./video-list.component.scss') ], |
0629423c | 23 | pipes: [ AsyncPipe ], |
4a6995be | 24 | template: require('./video-list.component.html'), |
f0a397ee | 25 | directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ] |
dc8bc31b C |
26 | }) |
27 | ||
0629423c C |
28 | export class VideoListComponent implements OnInit, OnDestroy { |
29 | loading: BehaviorSubject<boolean> = new BehaviorSubject(false); | |
32294074 C |
30 | pagination: Pagination = { |
31 | currentPage: 1, | |
32 | itemsPerPage: 9, | |
0629423c | 33 | totalItems: null |
aff038cd | 34 | }; |
cf20596c | 35 | sort: SortField; |
4fd8aa32 C |
36 | user: User = null; |
37 | videos: Video[] = []; | |
dc8bc31b | 38 | |
471bc22f | 39 | private search: Search; |
0629423c | 40 | private sub: 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() { | |
0629423c C |
52 | this.sub = this.route.params.subscribe(routeParams => { |
53 | if (this.authService.isLoggedIn()) { | |
54 | this.user = User.load(); | |
55 | } | |
1553e15d | 56 | |
0629423c C |
57 | this.search = { |
58 | value: routeParams['search'], | |
59 | field: <SearchField>routeParams['field'] | |
60 | }; | |
00a44645 | 61 | |
0629423c C |
62 | // Update the search service component |
63 | this.searchService.searchChanged.next(this.search); | |
00a44645 | 64 | |
0629423c C |
65 | this.sort = <SortField>routeParams['sort'] || '-createdDate'; |
66 | ||
67 | this.getVideos(); | |
68 | }); | |
69 | } | |
00a44645 | 70 | |
0629423c C |
71 | ngOnDestroy() { |
72 | this.sub.unsubscribe(); | |
dc8bc31b C |
73 | } |
74 | ||
0629423c C |
75 | getVideos(detectChanges = true) { |
76 | this.loading.next(true); | |
157cb9c9 | 77 | this.videos = []; |
0629423c C |
78 | this.pagination.currentPage = 1; |
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 | }, |
dc8bc31b C |
97 | error => alert(error) |
98 | ); | |
99 | } | |
100 | ||
9bfe96e1 C |
101 | noVideo() { |
102 | return !this.loading && this.videos.length === 0; | |
103 | } | |
104 | ||
ccf6ed16 | 105 | onRemoved(video: Video) { |
0629423c | 106 | this.getVideos(false); |
dc8bc31b C |
107 | } |
108 | ||
cf20596c C |
109 | onSort(sort: SortField) { |
110 | this.sort = sort; | |
a99593ed C |
111 | |
112 | const params: any = { | |
113 | sort: this.sort | |
114 | }; | |
115 | ||
116 | if (this.search.value) { | |
a99593ed | 117 | params.field = this.search.field; |
4fd8aa32 | 118 | params.search = this.search.value; |
a99593ed C |
119 | } |
120 | ||
00a44645 C |
121 | this.router.navigate(['/videos/list', params]); |
122 | } | |
dc8bc31b | 123 | } |