]>
Commit | Line | Data |
---|---|---|
230809ef | 1 | import { Component, OnInit } from '@angular/core'; |
00a44645 | 2 | import { Router, ROUTER_DIRECTIVES, RouteSegment } from '@angular/router'; |
dc8bc31b | 3 | |
32294074 C |
4 | import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; |
5 | ||
41a2aee3 C |
6 | import { |
7 | LoaderComponent, | |
8 | Pagination, | |
9 | SortField, | |
10 | Video, | |
11 | VideoService | |
4a6995be C |
12 | } from '../shared'; |
13 | import { AuthService, Search, SearchField, User } from '../../shared'; | |
501bc6c2 | 14 | import { VideoMiniatureComponent } from './video-miniature.component'; |
cf20596c | 15 | import { VideoSortComponent } from './video-sort.component'; |
00a44645 | 16 | import { SearchService } from '../../shared'; |
dc8bc31b C |
17 | |
18 | @Component({ | |
19 | selector: 'my-videos-list', | |
4a6995be C |
20 | styles: [ require('./video-list.component.scss') ], |
21 | template: require('./video-list.component.html'), | |
f0a397ee | 22 | directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ] |
dc8bc31b C |
23 | }) |
24 | ||
41a2aee3 | 25 | export class VideoListComponent implements OnInit { |
4fd8aa32 | 26 | loading = false; |
32294074 C |
27 | pagination: Pagination = { |
28 | currentPage: 1, | |
29 | itemsPerPage: 9, | |
30 | total: 0 | |
aff038cd | 31 | }; |
cf20596c | 32 | sort: SortField; |
4fd8aa32 C |
33 | user: User = null; |
34 | videos: Video[] = []; | |
dc8bc31b | 35 | |
471bc22f | 36 | private search: Search; |
98b01bac | 37 | |
dc8bc31b | 38 | constructor( |
ccf6ed16 | 39 | private authService: AuthService, |
4fd8aa32 | 40 | private router: Router, |
00a44645 C |
41 | private routeSegment: RouteSegment, |
42 | private videoService: VideoService, | |
43 | private searchService: SearchService // Temporary | |
44 | ) {} | |
dc8bc31b C |
45 | |
46 | ngOnInit() { | |
ccf6ed16 | 47 | if (this.authService.isLoggedIn()) { |
1553e15d C |
48 | this.user = User.load(); |
49 | } | |
50 | ||
00a44645 C |
51 | this.search = { |
52 | value: this.routeSegment.getParam('search'), | |
53 | field: <SearchField>this.routeSegment.getParam('field') | |
54 | }; | |
55 | ||
56 | // Temporary | |
57 | this.searchChanged(this.search); | |
58 | ||
59 | this.sort = <SortField>this.routeSegment.getParam('sort') || '-createdDate'; | |
60 | ||
dc8bc31b C |
61 | this.getVideos(); |
62 | } | |
63 | ||
64 | getVideos() { | |
157cb9c9 C |
65 | this.loading = true; |
66 | this.videos = []; | |
67 | ||
98b01bac C |
68 | let observable = null; |
69 | ||
00a44645 | 70 | if (this.search.value) { |
ccf6ed16 | 71 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); |
98b01bac | 72 | } else { |
ccf6ed16 | 73 | observable = this.videoService.getVideos(this.pagination, this.sort); |
98b01bac C |
74 | } |
75 | ||
76 | observable.subscribe( | |
32294074 C |
77 | ({ videos, totalVideos }) => { |
78 | this.videos = videos; | |
79 | this.pagination.total = totalVideos; | |
4fd8aa32 | 80 | |
157cb9c9 | 81 | this.loading = false; |
32294074 | 82 | }, |
dc8bc31b C |
83 | error => alert(error) |
84 | ); | |
85 | } | |
86 | ||
9bfe96e1 C |
87 | noVideo() { |
88 | return !this.loading && this.videos.length === 0; | |
89 | } | |
90 | ||
ccf6ed16 | 91 | onRemoved(video: Video) { |
443ecefe | 92 | this.getVideos(); |
dc8bc31b C |
93 | } |
94 | ||
cf20596c C |
95 | onSort(sort: SortField) { |
96 | this.sort = sort; | |
a99593ed C |
97 | |
98 | const params: any = { | |
99 | sort: this.sort | |
100 | }; | |
101 | ||
102 | if (this.search.value) { | |
a99593ed | 103 | params.field = this.search.field; |
4fd8aa32 | 104 | params.search = this.search.value; |
a99593ed C |
105 | } |
106 | ||
00a44645 C |
107 | this.router.navigate(['/videos/list', params]); |
108 | } | |
109 | ||
110 | searchChanged(search: Search) { | |
111 | this.searchService.searchChanged.next(search); | |
cf20596c | 112 | } |
dc8bc31b | 113 | } |