1 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
2 import { ActivatedRoute, Router } from '@angular/router';
3 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
10 import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
11 import { SearchService } from '../../shared';
14 selector: 'my-videos-list',
15 styleUrls: [ './video-list.component.scss' ],
16 templateUrl: './video-list.component.html'
19 export class VideoListComponent implements OnInit, OnDestroy {
20 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
21 pagination: RestPagination = {
27 user: AuthUser = null;
30 private search: Search;
31 private subActivatedRoute: any;
32 private subSearch: any;
35 private authService: AuthService,
36 private changeDetector: ChangeDetectorRef,
37 private router: Router,
38 private route: ActivatedRoute,
39 private videoService: VideoService,
40 private searchService: SearchService
44 if (this.authService.isLoggedIn()) {
45 this.user = AuthUser.load();
48 // Subscribe to route changes
49 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
50 this.loadRouteParams(routeParams);
52 // Update the search service component
53 this.searchService.updateSearch.next(this.search);
57 // Subscribe to search changes
58 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
61 this.pagination.currentPage = 1;
63 this.navigateToNewParams();
68 this.subActivatedRoute.unsubscribe();
69 this.subSearch.unsubscribe();
73 this.loading.next(true);
76 this.changeDetector.detectChanges();
78 let observable = null;
80 if (this.search.value) {
81 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
83 observable = this.videoService.getVideos(this.pagination, this.sort);
87 ({ videos, totalVideos }) => {
89 this.pagination.totalItems = totalVideos;
91 this.loading.next(false);
93 error => alert(error.text)
98 return !this.loading.getValue() && this.videos.length === 0;
101 onPageChanged(event: any) {
102 // Be sure the current page is set
103 this.pagination.currentPage = event.page;
105 this.navigateToNewParams();
108 onRemoved(video: Video) {
112 onSort(sort: SortField) {
115 this.navigateToNewParams();
118 private buildRouteParams() {
119 // There is always a sort and a current page
120 const params: any = {
122 page: this.pagination.currentPage
125 // Maybe there is a search
126 if (this.search.value) {
127 params.field = this.search.field;
128 params.search = this.search.value;
134 private loadRouteParams(routeParams) {
135 if (routeParams['search'] !== undefined) {
137 value: routeParams['search'],
138 field: <SearchField>routeParams['field']
147 this.sort = <SortField>routeParams['sort'] || '-createdDate';
149 if (routeParams['page'] !== undefined) {
150 this.pagination.currentPage = parseInt(routeParams['page']);
152 this.pagination.currentPage = 1;
155 this.changeDetector.detectChanges();
158 private navigateToNewParams() {
159 const routeParams = this.buildRouteParams();
160 this.router.navigate(['/videos/list', routeParams]);