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