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';
15 import { AuthService, Search, SearchField, User } from '../../shared';
16 import { VideoMiniatureComponent } from './video-miniature.component';
17 import { VideoSortComponent } from './video-sort.component';
18 import { SearchService } from '../../shared';
21 selector: 'my-videos-list',
22 styles: [ require('./video-list.component.scss') ],
24 template: require('./video-list.component.html'),
25 directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
28 export class VideoListComponent implements OnInit, OnDestroy {
29 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
30 pagination: Pagination = {
39 private search: Search;
40 private subActivatedRoute: any;
41 private subSearch: any;
44 private authService: AuthService,
45 private changeDetector: ChangeDetectorRef,
46 private router: Router,
47 private route: ActivatedRoute,
48 private videoService: VideoService,
49 private searchService: SearchService
53 if (this.authService.isLoggedIn()) {
54 this.user = User.load();
57 // Subscribe to route changes
58 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
59 this.loadRouteParams(routeParams);
61 // Update the search service component
62 this.searchService.updateSearch.next(this.search);
66 // Subscribe to search changes
67 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
70 this.navigateToNewParams();
75 this.subActivatedRoute.unsubscribe();
76 this.subSearch.unsubscribe();
79 getVideos(detectChanges = true) {
80 this.loading.next(true);
83 this.changeDetector.detectChanges();
85 let observable = null;
87 if (this.search.value) {
88 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
90 observable = this.videoService.getVideos(this.pagination, this.sort);
94 ({ videos, totalVideos }) => {
96 this.pagination.totalItems = totalVideos;
98 this.loading.next(false);
100 error => alert(error)
105 return !this.loading.getValue() && this.videos.length === 0;
108 onPageChanged(event: any) {
109 // Be sure the current page is set
110 this.pagination.currentPage = event.page;
112 this.navigateToNewParams();
115 onRemoved(video: Video) {
119 onSort(sort: SortField) {
122 this.navigateToNewParams();
125 private buildRouteParams() {
126 // There is always a sort and a current page
127 const params: any = {
129 page: this.pagination.currentPage
132 // Maybe there is a search
133 if (this.search.value) {
134 params.field = this.search.field;
135 params.search = this.search.value;
141 private loadRouteParams(routeParams) {
142 if (routeParams['search'] !== undefined) {
144 value: routeParams['search'],
145 field: <SearchField>routeParams['field']
154 this.sort = <SortField>routeParams['sort'] || '-createdDate';
156 this.pagination.currentPage = parseInt(routeParams['page']) || 1;
158 this.changeDetector.detectChanges();
161 private navigateToNewParams() {
162 const routeParams = this.buildRouteParams();
163 this.router.navigate(['/videos/list', routeParams]);