1 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'
2 import { ActivatedRoute, Router } from '@angular/router'
3 import { Subscription } from 'rxjs/Subscription'
4 import { BehaviorSubject } from 'rxjs/BehaviorSubject'
6 import { NotificationsService } from 'angular2-notifications'
14 import { AuthService, AuthUser } from '../../core'
15 import { Search, SearchField, SearchService } from '../../shared'
18 selector: 'my-videos-list',
19 styleUrls: [ './video-list.component.scss' ],
20 templateUrl: './video-list.component.html'
22 export class VideoListComponent implements OnInit, OnDestroy {
23 loading: BehaviorSubject<boolean> = new BehaviorSubject(false)
24 pagination: VideoPagination = {
33 private search: Search
34 private subActivatedRoute: Subscription
35 private subSearch: Subscription
38 private notificationsService: NotificationsService,
39 private authService: AuthService,
40 private changeDetector: ChangeDetectorRef,
41 private router: Router,
42 private route: ActivatedRoute,
43 private videoService: VideoService,
44 private searchService: SearchService
48 if (this.authService.isLoggedIn()) {
49 this.user = AuthUser.load()
52 // Subscribe to route changes
53 this.subActivatedRoute = this.route.params.subscribe(routeParams => {
54 this.loadRouteParams(routeParams)
56 // Update the search service component
57 this.searchService.updateSearch.next(this.search)
61 // Subscribe to search changes
62 this.subSearch = this.searchService.searchUpdated.subscribe(search => {
65 this.pagination.currentPage = 1
67 this.navigateToNewParams()
72 this.subActivatedRoute.unsubscribe()
73 this.subSearch.unsubscribe()
77 this.loading.next(true)
81 if (this.search.value) {
82 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort)
84 observable = this.videoService.getVideos(this.pagination, this.sort)
88 ({ videos, totalVideos }) => {
90 this.pagination.totalItems = totalVideos
92 this.loading.next(false)
94 error => this.notificationsService.error('Error', error.text)
99 return !this.loading.getValue() && this.videos.length === 0
102 onPageChanged (event: { page: number }) {
103 // Be sure the current page is set
104 this.pagination.currentPage = event.page
106 this.navigateToNewParams()
109 onSort (sort: SortField) {
112 this.navigateToNewParams()
115 private buildRouteParams () {
116 // There is always a sort and a current page
119 page: this.pagination.currentPage
122 // Maybe there is a search
123 if (this.search.value) {
124 params['field'] = this.search.field
125 params['search'] = this.search.value
131 private loadRouteParams (routeParams: { [ key: string ]: any }) {
132 if (routeParams['search'] !== undefined) {
134 value: routeParams['search'],
135 field: routeParams['field'] as SearchField
144 this.sort = routeParams['sort'] as SortField || '-createdAt'
146 if (routeParams['page'] !== undefined) {
147 this.pagination.currentPage = parseInt(routeParams['page'], 10)
149 this.pagination.currentPage = 1
153 private navigateToNewParams () {
154 const routeParams = this.buildRouteParams()
155 this.router.navigate([ '/videos/list', routeParams ])