diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-05-22 10:43:06 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-05-22 10:44:35 +0200 |
commit | 322940742b4dca168de6dfed0d1ebf5926dab528 (patch) | |
tree | 7b7fdb77595aa7d6a89d1045ab6012a9e1d68aab /client/angular/videos/components/list/videos-list.component.ts | |
parent | 46246b5f194caafba4e3a72e9365acd8b35785de (diff) | |
download | PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.gz PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.tar.zst PeerTube-322940742b4dca168de6dfed0d1ebf5926dab528.zip |
Add pagination support to the client
Diffstat (limited to 'client/angular/videos/components/list/videos-list.component.ts')
-rw-r--r-- | client/angular/videos/components/list/videos-list.component.ts | 23 |
1 files changed, 17 insertions, 6 deletions
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts index 6fc0c1f04..341afdaa6 100644 --- a/client/angular/videos/components/list/videos-list.component.ts +++ b/client/angular/videos/components/list/videos-list.component.ts | |||
@@ -1,7 +1,10 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; | 2 | import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; |
3 | 3 | ||
4 | import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; | ||
5 | |||
4 | import { AuthService } from '../../../users/services/auth.service'; | 6 | import { AuthService } from '../../../users/services/auth.service'; |
7 | import { Pagination } from '../../pagination'; | ||
5 | import { User } from '../../../users/models/user'; | 8 | import { User } from '../../../users/models/user'; |
6 | import { VideosService } from '../../videos.service'; | 9 | import { VideosService } from '../../videos.service'; |
7 | import { Video } from '../../video'; | 10 | import { Video } from '../../video'; |
@@ -11,21 +14,26 @@ import { VideoMiniatureComponent } from './video-miniature.component'; | |||
11 | selector: 'my-videos-list', | 14 | selector: 'my-videos-list', |
12 | styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], | 15 | styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], |
13 | templateUrl: 'app/angular/videos/components/list/videos-list.component.html', | 16 | templateUrl: 'app/angular/videos/components/list/videos-list.component.html', |
14 | directives: [ ROUTER_DIRECTIVES, VideoMiniatureComponent ] | 17 | directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent ] |
15 | }) | 18 | }) |
16 | 19 | ||
17 | export class VideosListComponent implements OnInit { | 20 | export class VideosListComponent implements OnInit { |
18 | user: User = null; | 21 | user: User = null; |
19 | videos: Video[] = []; | 22 | videos: Video[] = []; |
23 | pagination: Pagination = { | ||
24 | currentPage: 1, | ||
25 | itemsPerPage: 9, | ||
26 | total: 0 | ||
27 | } | ||
20 | 28 | ||
21 | private search: string; | 29 | private search: string; |
22 | 30 | ||
23 | constructor( | 31 | constructor( |
24 | private _authService: AuthService, | 32 | private _authService: AuthService, |
25 | private _videosService: VideosService, | 33 | private _videosService: VideosService, |
26 | routeParams: RouteParams | 34 | private _routeParams: RouteParams |
27 | ) { | 35 | ) { |
28 | this.search = routeParams.get('search'); | 36 | this.search = this._routeParams.get('search'); |
29 | } | 37 | } |
30 | 38 | ||
31 | ngOnInit() { | 39 | ngOnInit() { |
@@ -40,13 +48,16 @@ export class VideosListComponent implements OnInit { | |||
40 | let observable = null; | 48 | let observable = null; |
41 | 49 | ||
42 | if (this.search !== null) { | 50 | if (this.search !== null) { |
43 | observable = this._videosService.searchVideos(this.search); | 51 | observable = this._videosService.searchVideos(this.search, this.pagination); |
44 | } else { | 52 | } else { |
45 | observable = this._videosService.getVideos(); | 53 | observable = this._videosService.getVideos(this.pagination); |
46 | } | 54 | } |
47 | 55 | ||
48 | observable.subscribe( | 56 | observable.subscribe( |
49 | videos => this.videos = videos, | 57 | ({ videos, totalVideos }) => { |
58 | this.videos = videos; | ||
59 | this.pagination.total = totalVideos; | ||
60 | }, | ||
50 | error => alert(error) | 61 | error => alert(error) |
51 | ); | 62 | ); |
52 | } | 63 | } |