1 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
2 import { AsyncPipe } from '@angular/common';
3 import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
4 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
6 import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
14 import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
15 import { VideoMiniatureComponent } from './video-miniature.component';
16 import { VideoSortComponent } from './video-sort.component';
17 import { SearchService } from '../../shared';
20 selector: 'my-videos-list',
21 styles: [ require('./video-list.component.scss') ],
23 template: require('./video-list.component.html'),
24 directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
27 export class VideoListComponent implements OnInit, OnDestroy {
28 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
29 pagination: RestPagination = {
35 user: AuthUser = null;
38 private search: Search;
39 private subActivatedRoute: any;
40 private subSearch: any;
43 private authService: AuthService,
44 private changeDetector: ChangeDetectorRef,
45 private router: Router,
46 private route: ActivatedRoute,
47 private videoService: VideoService,
48 private searchService: SearchService
52 if (this.authService.isLoggedIn()) {
53 this.user = AuthUser.load();
56 // Subscribe to route changes
57 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
58 this.loadRouteParams(routeParams);
60 // Update the search service component
61 this.searchService.updateSearch.next(this.search);
65 // Subscribe to search changes
66 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
69 this.pagination.currentPage = 1;
71 this.navigateToNewParams();
76 this.subActivatedRoute.unsubscribe();
77 this.subSearch.unsubscribe();
81 this.loading.next(true);
84 this.changeDetector.detectChanges();
86 let observable = null;
88 if (this.search.value) {
89 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
91 observable = this.videoService.getVideos(this.pagination, this.sort);
95 ({ videos, totalVideos }) => {
97 this.pagination.totalItems = totalVideos;
99 this.loading.next(false);
101 error => alert(error)
106 return !this.loading.getValue() && this.videos.length === 0;
109 onPageChanged(event: any) {
110 // Be sure the current page is set
111 this.pagination.currentPage = event.page;
113 this.navigateToNewParams();
116 onRemoved(video: Video) {
120 onSort(sort: SortField) {
123 this.navigateToNewParams();
126 private buildRouteParams() {
127 // There is always a sort and a current page
128 const params: any = {
130 page: this.pagination.currentPage
133 // Maybe there is a search
134 if (this.search.value) {
135 params.field = this.search.field;
136 params.search = this.search.value;
142 private loadRouteParams(routeParams) {
143 if (routeParams['search'] !== undefined) {
145 value: routeParams['search'],
146 field: <SearchField>routeParams['field']
155 this.sort = <SortField>routeParams['sort'] || '-createdDate';
157 if (routeParams['page'] !== undefined) {
158 this.pagination.currentPage = parseInt(routeParams['page']);
160 this.pagination.currentPage = 1;
163 this.changeDetector.detectChanges();
166 private navigateToNewParams() {
167 const routeParams = this.buildRouteParams();
168 this.router.navigate(['/videos/list', routeParams]);