diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts index 513830d6b..bfd5adaee 100644 --- a/client/angular/app/app.component.ts +++ b/client/angular/app/app.component.ts @@ -68,7 +68,6 @@ export class AppComponent { } onSearch(search: Search) { - console.log(search); if (search.value !== '') { this._router.navigate(['VideosList', { search: search.value, field: search.field }]); } else { diff --git a/client/angular/videos/components/list/sort.ts b/client/angular/videos/components/list/sort.ts new file mode 100644 index 000000000..6e8cc7936 --- /dev/null +++ b/client/angular/videos/components/list/sort.ts @@ -0,0 +1,3 @@ +export type SortField = "name" | "-name" + | "duration" | "-duration" + | "createdDate" | "-createdDate"; diff --git a/client/angular/videos/components/list/video-sort.component.html b/client/angular/videos/components/list/video-sort.component.html new file mode 100644 index 000000000..b1392ccca --- /dev/null +++ b/client/angular/videos/components/list/video-sort.component.html @@ -0,0 +1,5 @@ + diff --git a/client/angular/videos/components/list/video-sort.component.ts b/client/angular/videos/components/list/video-sort.component.ts new file mode 100644 index 000000000..e63a70e9e --- /dev/null +++ b/client/angular/videos/components/list/video-sort.component.ts @@ -0,0 +1,36 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +import { SortField } from './sort'; + +@Component({ + selector: 'my-video-sort', + // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ], + templateUrl: 'app/angular/videos/components/list/video-sort.component.html' +}) + +export class VideoSortComponent { + @Output() sort = new EventEmitter(); + + @Input() currentSort: SortField; + + sortChoices = { + 'name': 'Name - Asc', + '-name': "Name - Desc", + 'duration': "Duration - Asc", + '-duration': "Duration - Desc", + 'createdDate': "Created Date - Asc", + '-createdDate': "Created Date - Desc" + } + + get choiceKeys() { + return Object.keys(this.sortChoices); + } + + getStringChoice(choiceKey: SortField): string { + return this.sortChoices[choiceKey]; + } + + onSortChange() { + this.sort.emit(this.currentSort); + } +} diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html index 39cdf29ba..5524ab546 100644 --- a/client/angular/videos/components/list/videos-list.component.html +++ b/client/angular/videos/components/list/videos-list.component.html @@ -1,3 +1,8 @@ +
+ {{ pagination.total }} + +
+
There is no video.
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts index a17b06cd9..98fe7b153 100644 --- a/client/angular/videos/components/list/videos-list.component.ts +++ b/client/angular/videos/components/list/videos-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; +import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated'; import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; @@ -10,12 +10,14 @@ import { VideosService } from '../../videos.service'; import { Video } from '../../video'; import { VideoMiniatureComponent } from './video-miniature.component'; import { Search, SearchField } from '../../../app/search'; +import { VideoSortComponent } from './video-sort.component'; +import { SortField } from './sort'; @Component({ selector: 'my-videos-list', styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], templateUrl: 'app/angular/videos/components/list/videos-list.component.html', - directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent ] + directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ] }) export class VideosListComponent implements OnInit { @@ -26,18 +28,22 @@ export class VideosListComponent implements OnInit { itemsPerPage: 9, total: 0 } + sort: SortField; private search: Search; constructor( private _authService: AuthService, private _videosService: VideosService, - private _routeParams: RouteParams + private _routeParams: RouteParams, + private _router: Router ) { this.search = { value: this._routeParams.get('search'), field: this._routeParams.get('field') } + + this.sort = this._routeParams.get('sort') || '-createdDate'; } ngOnInit() { @@ -52,9 +58,9 @@ export class VideosListComponent implements OnInit { let observable = null; if (this.search.value !== null) { - observable = this._videosService.searchVideos(this.search, this.pagination); + observable = this._videosService.searchVideos(this.search, this.pagination, this.sort); } else { - observable = this._videosService.getVideos(this.pagination); + observable = this._videosService.getVideos(this.pagination, this.sort); } observable.subscribe( @@ -70,4 +76,9 @@ export class VideosListComponent implements OnInit { this.videos.splice(this.videos.indexOf(video), 1); } + onSort(sort: SortField) { + this.sort = sort; + this._router.navigate(['VideosList', { sort: this.sort }]); + this.getVideos(); + } } diff --git a/client/angular/videos/videos.service.ts b/client/angular/videos/videos.service.ts index 1329ead49..43e3346aa 100644 --- a/client/angular/videos/videos.service.ts +++ b/client/angular/videos/videos.service.ts @@ -6,6 +6,7 @@ import { Pagination } from './pagination'; import { Video } from './video'; import { AuthService } from '../users/services/auth.service'; import { Search } from '../app/search'; +import { SortField } from './components/list/sort'; @Injectable() export class VideosService { @@ -13,8 +14,11 @@ export class VideosService { constructor (private http: Http, private _authService: AuthService) {} - getVideos(pagination: Pagination) { + getVideos(pagination: Pagination, sort: SortField) { const params = this.createPaginationParams(pagination); + + if (sort) params.set('sort', sort) + return this.http.get(this._baseVideoUrl, { search: params }) .map(res => res.json()) .map(this.extractVideos) @@ -34,9 +38,12 @@ export class VideosService { .catch(this.handleError); } - searchVideos(search: Search, pagination: Pagination) { + searchVideos(search: Search, pagination: Pagination, sort: SortField) { const params = this.createPaginationParams(pagination); + if (search.field) params.set('field', search.field); + if (sort) params.set('sort', sort) + return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params }) .map(res => res.json()) .map(this.extractVideos) diff --git a/client/index.html b/client/index.html index 8b98cbbb2..db4b76613 100644 --- a/client/index.html +++ b/client/index.html @@ -22,6 +22,8 @@ + +