Add trivial sort for the client

pull/10/head
Chocobozzz 2016-05-23 11:07:42 +02:00
parent 8140a704bb
commit cf20596c10
9 changed files with 78 additions and 8 deletions

View File

@ -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 {

View File

@ -0,0 +1,3 @@
export type SortField = "name" | "-name"
| "duration" | "-duration"
| "createdDate" | "-createdDate";

View File

@ -0,0 +1,5 @@
<select [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
<option *ngFor="let choice of choiceKeys" [value]="choice">
{{ getStringChoice(choice) }}
</option>
</select>

View File

@ -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<any>();
@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);
}
}

View File

@ -1,3 +1,8 @@
<div class="videos-info">
<span class="videos-total-results"> {{ pagination.total }}</span>
<my-video-sort [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
</div>
<div class="videos-miniatures">
<div *ngIf="videos.length === 0">There is no video.</div>

View File

@ -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: <SearchField>this._routeParams.get('field')
}
this.sort = <SortField>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();
}
}

View File

@ -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)

View File

@ -22,6 +22,8 @@
<script src="/app/node_modules/webtorrent/webtorrent.min.js"></script>
<script src="/app/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/app/systemjs.config.js"></script>
<script>

View File

@ -31,7 +31,9 @@
"angular/users/models/user.ts",
"angular/users/services/auth.service.ts",
"angular/videos/components/add/videos-add.component.ts",
"angular/videos/components/list/sort.ts",
"angular/videos/components/list/video-miniature.component.ts",
"angular/videos/components/list/video-sort.component.ts",
"angular/videos/components/list/videos-list.component.ts",
"angular/videos/components/watch/videos-watch.component.ts",
"angular/videos/pagination.ts",