]>
Commit | Line | Data |
---|---|---|
1 | import { Component, OnInit } from '@angular/core'; | |
2 | import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; | |
3 | ||
4 | import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; | |
5 | ||
6 | import { | |
7 | LoaderComponent, | |
8 | Pagination, | |
9 | SortField, | |
10 | Video, | |
11 | VideoService | |
12 | } from '../shared/index'; | |
13 | import { Search, SearchField } from '../../shared/index'; | |
14 | import { AuthService, User } from '../../users/index'; | |
15 | import { VideoMiniatureComponent } from './video-miniature.component'; | |
16 | import { VideoSortComponent } from './video-sort.component'; | |
17 | ||
18 | @Component({ | |
19 | selector: 'my-videos-list', | |
20 | styleUrls: [ 'client/app/videos/video-list/video-list.component.css' ], | |
21 | templateUrl: 'client/app/videos/video-list/video-list.component.html', | |
22 | directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ] | |
23 | }) | |
24 | ||
25 | export class VideoListComponent implements OnInit { | |
26 | user: User = null; | |
27 | videos: Video[] = []; | |
28 | pagination: Pagination = { | |
29 | currentPage: 1, | |
30 | itemsPerPage: 9, | |
31 | total: 0 | |
32 | }; | |
33 | sort: SortField; | |
34 | loading = false; | |
35 | ||
36 | private search: Search; | |
37 | ||
38 | constructor( | |
39 | private authService: AuthService, | |
40 | private videoService: VideoService, | |
41 | private routeParams: RouteParams, | |
42 | private router: Router | |
43 | ) { | |
44 | this.search = { | |
45 | value: this.routeParams.get('search'), | |
46 | field: <SearchField>this.routeParams.get('field') | |
47 | }; | |
48 | ||
49 | this.sort = <SortField>this.routeParams.get('sort') || '-createdDate'; | |
50 | } | |
51 | ||
52 | ngOnInit() { | |
53 | if (this.authService.isLoggedIn()) { | |
54 | this.user = User.load(); | |
55 | } | |
56 | ||
57 | this.getVideos(); | |
58 | } | |
59 | ||
60 | getVideos() { | |
61 | this.loading = true; | |
62 | this.videos = []; | |
63 | ||
64 | let observable = null; | |
65 | ||
66 | if (this.search.value !== null) { | |
67 | observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); | |
68 | } else { | |
69 | observable = this.videoService.getVideos(this.pagination, this.sort); | |
70 | } | |
71 | ||
72 | observable.subscribe( | |
73 | ({ videos, totalVideos }) => { | |
74 | this.videos = videos; | |
75 | this.pagination.total = totalVideos; | |
76 | this.loading = false; | |
77 | }, | |
78 | error => alert(error) | |
79 | ); | |
80 | } | |
81 | ||
82 | onRemoved(video: Video) { | |
83 | this.videos.splice(this.videos.indexOf(video), 1); | |
84 | } | |
85 | ||
86 | onSort(sort: SortField) { | |
87 | this.sort = sort; | |
88 | ||
89 | const params: any = { | |
90 | sort: this.sort | |
91 | }; | |
92 | ||
93 | if (this.search.value) { | |
94 | params.search = this.search.value; | |
95 | params.field = this.search.field; | |
96 | } | |
97 | ||
98 | this.router.navigate(['VideosList', params]); | |
99 | this.getVideos(); | |
100 | } | |
101 | } |