diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-07-18 15:39:10 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-07-18 15:39:10 +0200 |
commit | bddab65ae58e347693b777cccf791201fdbcff4d (patch) | |
tree | 9d3c35c8ab9ef7bfb99ebe95b79c5309a7025112 /client/src/app/videos/video-list/video-list.component.ts | |
parent | 0629423ce335137ce77d1ee8fe30fc0eee36d83b (diff) | |
download | PeerTube-bddab65ae58e347693b777cccf791201fdbcff4d.tar.gz PeerTube-bddab65ae58e347693b777cccf791201fdbcff4d.tar.zst PeerTube-bddab65ae58e347693b777cccf791201fdbcff4d.zip |
Client: save page params as well
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.ts | 80 |
1 files changed, 61 insertions, 19 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 0ebf0ef5c..5691d684e 100644 --- a/client/src/app/videos/video-list/video-list.component.ts +++ b/client/src/app/videos/video-list/video-list.component.ts | |||
@@ -37,7 +37,8 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
37 | videos: Video[] = []; | 37 | videos: Video[] = []; |
38 | 38 | ||
39 | private search: Search; | 39 | private search: Search; |
40 | private sub: any; | 40 | private subActivatedRoute: any; |
41 | private subSearch: any; | ||
41 | 42 | ||
42 | constructor( | 43 | constructor( |
43 | private authService: AuthService, | 44 | private authService: AuthService, |
@@ -49,33 +50,35 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
49 | ) {} | 50 | ) {} |
50 | 51 | ||
51 | ngOnInit() { | 52 | ngOnInit() { |
52 | this.sub = this.route.params.subscribe(routeParams => { | 53 | if (this.authService.isLoggedIn()) { |
53 | if (this.authService.isLoggedIn()) { | 54 | this.user = User.load(); |
54 | this.user = User.load(); | 55 | } |
55 | } | ||
56 | 56 | ||
57 | this.search = { | 57 | // Subscribe to route changes |
58 | value: routeParams['search'], | 58 | this.subActivatedRoute = this.route.params.subscribe(routeParams => { |
59 | field: <SearchField>routeParams['field'] | 59 | this.loadRouteParams(routeParams); |
60 | }; | ||
61 | 60 | ||
62 | // Update the search service component | 61 | // Update the search service component |
63 | this.searchService.searchChanged.next(this.search); | 62 | this.searchService.updateSearch.next(this.search); |
63 | this.getVideos(); | ||
64 | }); | ||
64 | 65 | ||
65 | this.sort = <SortField>routeParams['sort'] || '-createdDate'; | 66 | // Subscribe to search changes |
67 | this.subSearch = this.searchService.searchUpdated.subscribe(search => { | ||
68 | this.search = search; | ||
66 | 69 | ||
67 | this.getVideos(); | 70 | this.navigateToNewParams(); |
68 | }); | 71 | }); |
69 | } | 72 | } |
70 | 73 | ||
71 | ngOnDestroy() { | 74 | ngOnDestroy() { |
72 | this.sub.unsubscribe(); | 75 | this.subActivatedRoute.unsubscribe(); |
76 | this.subSearch.unsubscribe(); | ||
73 | } | 77 | } |
74 | 78 | ||
75 | getVideos(detectChanges = true) { | 79 | getVideos(detectChanges = true) { |
76 | this.loading.next(true); | 80 | this.loading.next(true); |
77 | this.videos = []; | 81 | this.videos = []; |
78 | this.pagination.currentPage = 1; | ||
79 | 82 | ||
80 | this.changeDetector.detectChanges(); | 83 | this.changeDetector.detectChanges(); |
81 | 84 | ||
@@ -98,26 +101,65 @@ export class VideoListComponent implements OnInit, OnDestroy { | |||
98 | ); | 101 | ); |
99 | } | 102 | } |
100 | 103 | ||
101 | noVideo() { | 104 | isThereNoVideo() { |
102 | return !this.loading && this.videos.length === 0; | 105 | return !this.loading.getValue() && this.videos.length === 0; |
106 | } | ||
107 | |||
108 | onPageChanged(event: any) { | ||
109 | // Be sure the current page is set | ||
110 | this.pagination.currentPage = event.page; | ||
111 | |||
112 | this.navigateToNewParams(); | ||
103 | } | 113 | } |
104 | 114 | ||
105 | onRemoved(video: Video) { | 115 | onRemoved(video: Video) { |
106 | this.getVideos(false); | 116 | this.getVideos(); |
107 | } | 117 | } |
108 | 118 | ||
109 | onSort(sort: SortField) { | 119 | onSort(sort: SortField) { |
110 | this.sort = sort; | 120 | this.sort = sort; |
111 | 121 | ||
122 | this.navigateToNewParams(); | ||
123 | } | ||
124 | |||
125 | private buildRouteParams() { | ||
126 | // There is always a sort and a current page | ||
112 | const params: any = { | 127 | const params: any = { |
113 | sort: this.sort | 128 | sort: this.sort, |
129 | page: this.pagination.currentPage | ||
114 | }; | 130 | }; |
115 | 131 | ||
132 | // Maybe there is a search | ||
116 | if (this.search.value) { | 133 | if (this.search.value) { |
117 | params.field = this.search.field; | 134 | params.field = this.search.field; |
118 | params.search = this.search.value; | 135 | params.search = this.search.value; |
119 | } | 136 | } |
120 | 137 | ||
121 | this.router.navigate(['/videos/list', params]); | 138 | return params; |
139 | } | ||
140 | |||
141 | private loadRouteParams(routeParams) { | ||
142 | if (routeParams['search'] !== undefined) { | ||
143 | this.search = { | ||
144 | value: routeParams['search'], | ||
145 | field: <SearchField>routeParams['field'] | ||
146 | }; | ||
147 | } else { | ||
148 | this.search = { | ||
149 | value: '', | ||
150 | field: 'name' | ||
151 | }; | ||
152 | } | ||
153 | |||
154 | this.sort = <SortField>routeParams['sort'] || '-createdDate'; | ||
155 | |||
156 | this.pagination.currentPage = parseInt(routeParams['page']) || 1; | ||
157 | |||
158 | this.changeDetector.detectChanges(); | ||
159 | } | ||
160 | |||
161 | private navigateToNewParams() { | ||
162 | const routeParams = this.buildRouteParams(); | ||
163 | this.router.navigate(['/videos/list', routeParams]); | ||
122 | } | 164 | } |
123 | } | 165 | } |