aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-list/video-list.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/video-list/video-list.component.ts')
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts126
1 files changed, 63 insertions, 63 deletions
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 16a40bdc4..0c36e5b08 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,17 +1,17 @@
1import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; 1import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'; 2import { ActivatedRoute, Router } from '@angular/router'
3import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 3import { BehaviorSubject } from 'rxjs/BehaviorSubject'
4 4
5import { NotificationsService } from 'angular2-notifications'; 5import { NotificationsService } from 'angular2-notifications'
6 6
7import { 7import {
8 SortField, 8 SortField,
9 Video, 9 Video,
10 VideoService 10 VideoService
11} from '../shared'; 11} from '../shared'
12import { AuthService, AuthUser } from '../../core'; 12import { AuthService, AuthUser } from '../../core'
13import { RestPagination, Search, SearchField } from '../../shared'; 13import { RestPagination, Search, SearchField } from '../../shared'
14import { SearchService } from '../../shared'; 14import { SearchService } from '../../shared'
15 15
16@Component({ 16@Component({
17 selector: 'my-videos-list', 17 selector: 'my-videos-list',
@@ -19,21 +19,21 @@ import { SearchService } from '../../shared';
19 templateUrl: './video-list.component.html' 19 templateUrl: './video-list.component.html'
20}) 20})
21export class VideoListComponent implements OnInit, OnDestroy { 21export class VideoListComponent implements OnInit, OnDestroy {
22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false); 22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
23 pagination: RestPagination = { 23 pagination: RestPagination = {
24 currentPage: 1, 24 currentPage: 1,
25 itemsPerPage: 25, 25 itemsPerPage: 25,
26 totalItems: null 26 totalItems: null
27 }; 27 }
28 sort: SortField; 28 sort: SortField
29 user: AuthUser = null; 29 user: AuthUser = null
30 videos: Video[] = []; 30 videos: Video[] = []
31 31
32 private search: Search; 32 private search: Search
33 private subActivatedRoute: any; 33 private subActivatedRoute: any
34 private subSearch: any; 34 private subSearch: any
35 35
36 constructor( 36 constructor (
37 private notificationsService: NotificationsService, 37 private notificationsService: NotificationsService,
38 private authService: AuthService, 38 private authService: AuthService,
39 private changeDetector: ChangeDetectorRef, 39 private changeDetector: ChangeDetectorRef,
@@ -43,114 +43,114 @@ export class VideoListComponent implements OnInit, OnDestroy {
43 private searchService: SearchService 43 private searchService: SearchService
44 ) {} 44 ) {}
45 45
46 ngOnInit() { 46 ngOnInit () {
47 if (this.authService.isLoggedIn()) { 47 if (this.authService.isLoggedIn()) {
48 this.user = AuthUser.load(); 48 this.user = AuthUser.load()
49 } 49 }
50 50
51 // Subscribe to route changes 51 // Subscribe to route changes
52 this.subActivatedRoute = this.route.params.subscribe(routeParams => { 52 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
53 this.loadRouteParams(routeParams); 53 this.loadRouteParams(routeParams)
54 54
55 // Update the search service component 55 // Update the search service component
56 this.searchService.updateSearch.next(this.search); 56 this.searchService.updateSearch.next(this.search)
57 this.getVideos(); 57 this.getVideos()
58 }); 58 })
59 59
60 // Subscribe to search changes 60 // Subscribe to search changes
61 this.subSearch = this.searchService.searchUpdated.subscribe(search => { 61 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
62 this.search = search; 62 this.search = search
63 // Reset pagination 63 // Reset pagination
64 this.pagination.currentPage = 1; 64 this.pagination.currentPage = 1
65 65
66 this.navigateToNewParams(); 66 this.navigateToNewParams()
67 }); 67 })
68 } 68 }
69 69
70 ngOnDestroy() { 70 ngOnDestroy () {
71 this.subActivatedRoute.unsubscribe(); 71 this.subActivatedRoute.unsubscribe()
72 this.subSearch.unsubscribe(); 72 this.subSearch.unsubscribe()
73 } 73 }
74 74
75 getVideos() { 75 getVideos () {
76 this.loading.next(true); 76 this.loading.next(true)
77 this.videos = []; 77 this.videos = []
78 78
79 let observable = null; 79 let observable = null
80 if (this.search.value) { 80 if (this.search.value) {
81 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); 81 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
82 } else { 82 } else {
83 observable = this.videoService.getVideos(this.pagination, this.sort); 83 observable = this.videoService.getVideos(this.pagination, this.sort)
84 } 84 }
85 85
86 observable.subscribe( 86 observable.subscribe(
87 ({ videos, totalVideos }) => { 87 ({ videos, totalVideos }) => {
88 this.videos = videos; 88 this.videos = videos
89 this.pagination.totalItems = totalVideos; 89 this.pagination.totalItems = totalVideos
90 90
91 this.loading.next(false); 91 this.loading.next(false)
92 }, 92 },
93 error => this.notificationsService.error('Error', error.text) 93 error => this.notificationsService.error('Error', error.text)
94 ); 94 )
95 } 95 }
96 96
97 isThereNoVideo() { 97 isThereNoVideo () {
98 return !this.loading.getValue() && this.videos.length === 0; 98 return !this.loading.getValue() && this.videos.length === 0
99 } 99 }
100 100
101 onPageChanged(event: any) { 101 onPageChanged (event: any) {
102 // Be sure the current page is set 102 // Be sure the current page is set
103 this.pagination.currentPage = event.page; 103 this.pagination.currentPage = event.page
104 104
105 this.navigateToNewParams(); 105 this.navigateToNewParams()
106 } 106 }
107 107
108 onSort(sort: SortField) { 108 onSort (sort: SortField) {
109 this.sort = sort; 109 this.sort = sort
110 110
111 this.navigateToNewParams(); 111 this.navigateToNewParams()
112 } 112 }
113 113
114 private buildRouteParams() { 114 private buildRouteParams () {
115 // There is always a sort and a current page 115 // There is always a sort and a current page
116 const params: any = { 116 const params: any = {
117 sort: this.sort, 117 sort: this.sort,
118 page: this.pagination.currentPage 118 page: this.pagination.currentPage
119 }; 119 }
120 120
121 // Maybe there is a search 121 // Maybe there is a search
122 if (this.search.value) { 122 if (this.search.value) {
123 params.field = this.search.field; 123 params.field = this.search.field
124 params.search = this.search.value; 124 params.search = this.search.value
125 } 125 }
126 126
127 return params; 127 return params
128 } 128 }
129 129
130 private loadRouteParams(routeParams) { 130 private loadRouteParams (routeParams) {
131 if (routeParams['search'] !== undefined) { 131 if (routeParams['search'] !== undefined) {
132 this.search = { 132 this.search = {
133 value: routeParams['search'], 133 value: routeParams['search'],
134 field: <SearchField>routeParams['field'] 134 field: routeParams['field'] as SearchField
135 }; 135 }
136 } else { 136 } else {
137 this.search = { 137 this.search = {
138 value: '', 138 value: '',
139 field: 'name' 139 field: 'name'
140 }; 140 }
141 } 141 }
142 142
143 this.sort = <SortField>routeParams['sort'] || '-createdAt'; 143 this.sort = routeParams['sort'] as SortField || '-createdAt'
144 144
145 if (routeParams['page'] !== undefined) { 145 if (routeParams['page'] !== undefined) {
146 this.pagination.currentPage = parseInt(routeParams['page']); 146 this.pagination.currentPage = parseInt(routeParams['page'], 10)
147 } else { 147 } else {
148 this.pagination.currentPage = 1; 148 this.pagination.currentPage = 1
149 } 149 }
150 } 150 }
151 151
152 private navigateToNewParams() { 152 private navigateToNewParams () {
153 const routeParams = this.buildRouteParams(); 153 const routeParams = this.buildRouteParams()
154 this.router.navigate(['/videos/list', routeParams]); 154 this.router.navigate(['/videos/list', routeParams])
155 } 155 }
156} 156}