</div>
<div class="col-md-9">
- <my-search (search)="onSearch($event)"></my-search>
+ <my-search></my-search>
</div>
</header>
import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { FriendService } from './friends';
import {
AuthService,
AuthStatus,
- Search,
SearchComponent,
SearchService
} from './shared';
constructor(
private authService: AuthService,
private friendService: FriendService,
+ private route: ActivatedRoute,
private router: Router
) {
this.isLoggedIn = this.authService.isLoggedIn();
);
}
- onSearch(search: Search) {
- if (search.value !== '') {
- const params = {
- field: search.field,
- search: search.value
- };
-
- this.router.navigate(['/videos/list', params]);
- } else {
- this.router.navigate(['/videos/list']);
- }
- }
-
// FIXME
logout() {
// this._authService.logout();
-import { Component, EventEmitter, Output, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
})
export class SearchComponent implements OnInit {
- @Output() search = new EventEmitter<Search>();
-
fieldChoices = {
name: 'Name',
author: 'Author',
constructor(private searchService: SearchService) {}
ngOnInit() {
- this.searchService.searchChanged.subscribe(
+ // Subscribe is the search changed
+ // Usually changed by videos list component
+ this.searchService.updateSearch.subscribe(
newSearchCriterias => {
// Put a field by default
if (!newSearchCriterias.field) {
}
doSearch() {
- this.search.emit(this.searchCriterias);
+ this.searchService.searchUpdated.next(this.searchCriterias);
}
getStringChoice(choiceKey: SearchField) {
// Remove it when we'll be able to subscribe to router changes
@Injectable()
export class SearchService {
- searchChanged: Subject<Search>;
+ searchUpdated: Subject<Search>;
+ updateSearch: Subject<Search>;
constructor() {
- this.searchChanged = new Subject<Search>();
+ this.updateSearch = new Subject<Search>();
+ this.searchUpdated = new Subject<Search>();
}
}
</div>
<div class="videos-miniatures">
- <div class="col-md-12 no-video" *ngIf="noVideo()">There is no video.</div>
+ <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
- <my-video-miniature class="ng-animate "*ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
+ <my-video-miniature
+ class="ng-animate"
+ *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" (removed)="onRemoved(video)"
+ >
</my-video-miniature>
</div>
<pagination *ngIf="pagination.totalItems !== null"
[totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
- [(ngModel)]="pagination.currentPage" (pageChanged)="getVideos()"
+ [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
></pagination>
videos: Video[] = [];
private search: Search;
- private sub: any;
+ private subActivatedRoute: any;
+ private subSearch: any;
constructor(
private authService: AuthService,
) {}
ngOnInit() {
- this.sub = this.route.params.subscribe(routeParams => {
- if (this.authService.isLoggedIn()) {
- this.user = User.load();
- }
+ if (this.authService.isLoggedIn()) {
+ this.user = User.load();
+ }
- this.search = {
- value: routeParams['search'],
- field: <SearchField>routeParams['field']
- };
+ // Subscribe to route changes
+ this.subActivatedRoute = this.route.params.subscribe(routeParams => {
+ this.loadRouteParams(routeParams);
// Update the search service component
- this.searchService.searchChanged.next(this.search);
+ this.searchService.updateSearch.next(this.search);
+ this.getVideos();
+ });
- this.sort = <SortField>routeParams['sort'] || '-createdDate';
+ // Subscribe to search changes
+ this.subSearch = this.searchService.searchUpdated.subscribe(search => {
+ this.search = search;
- this.getVideos();
+ this.navigateToNewParams();
});
}
ngOnDestroy() {
- this.sub.unsubscribe();
+ this.subActivatedRoute.unsubscribe();
+ this.subSearch.unsubscribe();
}
getVideos(detectChanges = true) {
this.loading.next(true);
this.videos = [];
- this.pagination.currentPage = 1;
this.changeDetector.detectChanges();
);
}
- noVideo() {
- return !this.loading && this.videos.length === 0;
+ isThereNoVideo() {
+ return !this.loading.getValue() && this.videos.length === 0;
+ }
+
+ onPageChanged(event: any) {
+ // Be sure the current page is set
+ this.pagination.currentPage = event.page;
+
+ this.navigateToNewParams();
}
onRemoved(video: Video) {
- this.getVideos(false);
+ this.getVideos();
}
onSort(sort: SortField) {
this.sort = sort;
+ this.navigateToNewParams();
+ }
+
+ private buildRouteParams() {
+ // There is always a sort and a current page
const params: any = {
- sort: this.sort
+ sort: this.sort,
+ page: this.pagination.currentPage
};
+ // Maybe there is a search
if (this.search.value) {
params.field = this.search.field;
params.search = this.search.value;
}
- this.router.navigate(['/videos/list', params]);
+ return params;
+ }
+
+ private loadRouteParams(routeParams) {
+ if (routeParams['search'] !== undefined) {
+ this.search = {
+ value: routeParams['search'],
+ field: <SearchField>routeParams['field']
+ };
+ } else {
+ this.search = {
+ value: '',
+ field: 'name'
+ };
+ }
+
+ this.sort = <SortField>routeParams['sort'] || '-createdDate';
+
+ this.pagination.currentPage = parseInt(routeParams['page']) || 1;
+
+ this.changeDetector.detectChanges();
+ }
+
+ private navigateToNewParams() {
+ const routeParams = this.buildRouteParams();
+ this.router.navigate(['/videos/list', routeParams]);
}
}
<div class="video-miniature-tags">
<span *ngFor="let tag of video.tags" class="video-miniature-tag">
- <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a>
+ <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
</span>
</div>
</span>
- <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">{{ video.by }}</a>
+ <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
<span class="video-miniature-created-date">{{ video.createdDate | date:'short' }}</span>
</div>
</div>
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
-import { Video, VideoService } from '../shared';
+import { SortField, Video, VideoService } from '../shared';
import { User } from '../../shared';
@Component({
export class VideoMiniatureComponent {
@Output() removed = new EventEmitter<any>();
+ @Input() currentSort: SortField;
@Input() user: User;
@Input() video: Video;
"src/app/shared/users/index.ts",
"src/app/shared/users/token.model.ts",
"src/app/shared/users/user.model.ts",
+ "src/app/shared/videos-params.ts",
"src/app/videos/index.ts",
"src/app/videos/shared/index.ts",
"src/app/videos/shared/loader/index.ts",
projects / github / Chocobozzz / PeerTube.git / commitdiff
