aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/angular
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-05-23 09:30:18 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-05-23 09:38:38 +0200
commit471bc22f19767c1cb1e7ba7ad0ddf0ff5f0e88f4 (patch)
tree606ccf517d76baf08539be7501d07dfd065884a9 /client/angular
parent322940742b4dca168de6dfed0d1ebf5926dab528 (diff)
downloadPeerTube-471bc22f19767c1cb1e7ba7ad0ddf0ff5f0e88f4.tar.gz
PeerTube-471bc22f19767c1cb1e7ba7ad0ddf0ff5f0e88f4.tar.zst
PeerTube-471bc22f19767c1cb1e7ba7ad0ddf0ff5f0e88f4.zip
Add search with field choose support in client
Diffstat (limited to 'client/angular')
-rw-r--r--client/angular/app/app.component.html5
-rw-r--r--client/angular/app/app.component.scss1
-rw-r--r--client/angular/app/app.component.ts15
-rw-r--r--client/angular/app/search.component.html17
-rw-r--r--client/angular/app/search.component.ts48
-rw-r--r--client/angular/app/search.ts6
-rw-r--r--client/angular/videos/components/list/videos-list.component.ts10
-rw-r--r--client/angular/videos/videos.service.ts12
8 files changed, 97 insertions, 17 deletions
diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html
index ccbaef947..48e97d523 100644
--- a/client/angular/app/app.component.html
+++ b/client/angular/app/app.component.html
@@ -6,10 +6,7 @@
6 </div> 6 </div>
7 7
8 <div class="col-md-9"> 8 <div class="col-md-9">
9 <input 9 <my-search (search)="onSearch($event)"></my-search>
10 type="text" id="search_video" name="search_video" class="form-control" placeholder="Search a video..."
11 #search (keyup.enter)="doSearch(search.value)"
12 >
13 </div> 10 </div>
14 </header> 11 </header>
15 12
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss
index 35f0e079b..e02c2d5b0 100644
--- a/client/angular/app/app.component.scss
+++ b/client/angular/app/app.component.scss
@@ -1,5 +1,4 @@
1header div { 1header div {
2 height: 50px;
3 line-height: 25px; 2 line-height: 25px;
4 margin-bottom: 30px; 3 margin-bottom: 30px;
5} 4}
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
index a105ed26a..513830d6b 100644
--- a/client/angular/app/app.component.ts
+++ b/client/angular/app/app.component.ts
@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
2import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated'; 2import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
3import { HTTP_PROVIDERS } from '@angular/http'; 3import { HTTP_PROVIDERS } from '@angular/http';
4 4
5import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
6
5import { VideosAddComponent } from '../videos/components/add/videos-add.component'; 7import { VideosAddComponent } from '../videos/components/add/videos-add.component';
6import { VideosListComponent } from '../videos/components/list/videos-list.component'; 8import { VideosListComponent } from '../videos/components/list/videos-list.component';
7import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component'; 9import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
@@ -10,6 +12,8 @@ import { FriendsService } from '../friends/services/friends.service';
10import { UserLoginComponent } from '../users/components/login/login.component'; 12import { UserLoginComponent } from '../users/components/login/login.component';
11import { AuthService } from '../users/services/auth.service'; 13import { AuthService } from '../users/services/auth.service';
12import { AuthStatus } from '../users/models/authStatus'; 14import { AuthStatus } from '../users/models/authStatus';
15import { SearchComponent } from './search.component';
16import { Search } from './search';
13 17
14@RouteConfig([ 18@RouteConfig([
15 { 19 {
@@ -39,12 +43,14 @@ import { AuthStatus } from '../users/models/authStatus';
39 selector: 'my-app', 43 selector: 'my-app',
40 templateUrl: 'app/angular/app/app.component.html', 44 templateUrl: 'app/angular/app/app.component.html',
41 styleUrls: [ 'app/angular/app/app.component.css' ], 45 styleUrls: [ 'app/angular/app/app.component.css' ],
42 directives: [ ROUTER_DIRECTIVES ], 46 directives: [ ROUTER_DIRECTIVES, SearchComponent ],
43 providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ] 47 providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ]
44}) 48})
45 49
46export class AppComponent { 50export class AppComponent {
47 isLoggedIn: boolean; 51 isLoggedIn: boolean;
52 search_field: string = name;
53 choices = [ ];
48 54
49 constructor(private _friendsService: FriendsService, 55 constructor(private _friendsService: FriendsService,
50 private _authService: AuthService, 56 private _authService: AuthService,
@@ -61,9 +67,10 @@ export class AppComponent {
61 ); 67 );
62 } 68 }
63 69
64 doSearch(search: string) { 70 onSearch(search: Search) {
65 if (search !== '') { 71 console.log(search);
66 this._router.navigate(['VideosList', { search: search }]); 72 if (search.value !== '') {
73 this._router.navigate(['VideosList', { search: search.value, field: search.field }]);
67 } else { 74 } else {
68 this._router.navigate(['VideosList']); 75 this._router.navigate(['VideosList']);
69 } 76 }
diff --git a/client/angular/app/search.component.html b/client/angular/app/search.component.html
new file mode 100644
index 000000000..fb13ac72e
--- /dev/null
+++ b/client/angular/app/search.component.html
@@ -0,0 +1,17 @@
1<div class="input-group">
2 <div class="input-group-btn" dropdown>
3 <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
4 {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
5 </button>
6 <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
7 <li *ngFor="let choice of choiceKeys" class="dropdown-item">
8 <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
9 </li>
10 </ul>
11 </div>
12
13 <input
14 type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
15 [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
16 >
17</div>
diff --git a/client/angular/app/search.component.ts b/client/angular/app/search.component.ts
new file mode 100644
index 000000000..3e8db70c0
--- /dev/null
+++ b/client/angular/app/search.component.ts
@@ -0,0 +1,48 @@
1import { Component, EventEmitter, Output } from '@angular/core';
2import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
3import { HTTP_PROVIDERS } from '@angular/http';
4
5import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
6
7import { Search, SearchField } from './search';
8
9@Component({
10 selector: 'my-search',
11 templateUrl: 'app/angular/app/search.component.html',
12 directives: [ DROPDOWN_DIRECTIVES ]
13})
14
15export class SearchComponent {
16 @Output() search: EventEmitter<Search> = new EventEmitter<Search>();
17
18 searchCriterias: Search = {
19 field: "name",
20 value: ""
21 }
22 fieldChoices = {
23 name: "Name",
24 author: "Author",
25 podUrl: "Pod Url",
26 magnetUri: "Magnet Uri"
27 }
28
29 get choiceKeys() {
30 return Object.keys(this.fieldChoices);
31 }
32
33 getStringChoice(choiceKey: SearchField): string {
34 return this.fieldChoices[choiceKey];
35 }
36
37 choose($event:MouseEvent, choice: SearchField){
38 $event.preventDefault();
39 $event.stopPropagation();
40
41 this.searchCriterias.field = choice;
42 }
43
44 doSearch(): void {
45 this.search.emit(this.searchCriterias);
46 }
47
48}
diff --git a/client/angular/app/search.ts b/client/angular/app/search.ts
new file mode 100644
index 000000000..c4e771b47
--- /dev/null
+++ b/client/angular/app/search.ts
@@ -0,0 +1,6 @@
1export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
2
3export interface Search {
4 field: SearchField;
5 value: string;
6}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index 341afdaa6..a17b06cd9 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -9,6 +9,7 @@ import { User } from '../../../users/models/user';
9import { VideosService } from '../../videos.service'; 9import { VideosService } from '../../videos.service';
10import { Video } from '../../video'; 10import { Video } from '../../video';
11import { VideoMiniatureComponent } from './video-miniature.component'; 11import { VideoMiniatureComponent } from './video-miniature.component';
12import { Search, SearchField } from '../../../app/search';
12 13
13@Component({ 14@Component({
14 selector: 'my-videos-list', 15 selector: 'my-videos-list',
@@ -26,14 +27,17 @@ export class VideosListComponent implements OnInit {
26 total: 0 27 total: 0
27 } 28 }
28 29
29 private search: string; 30 private search: Search;
30 31
31 constructor( 32 constructor(
32 private _authService: AuthService, 33 private _authService: AuthService,
33 private _videosService: VideosService, 34 private _videosService: VideosService,
34 private _routeParams: RouteParams 35 private _routeParams: RouteParams
35 ) { 36 ) {
36 this.search = this._routeParams.get('search'); 37 this.search = {
38 value: this._routeParams.get('search'),
39 field: <SearchField>this._routeParams.get('field')
40 }
37 } 41 }
38 42
39 ngOnInit() { 43 ngOnInit() {
@@ -47,7 +51,7 @@ export class VideosListComponent implements OnInit {
47 getVideos() { 51 getVideos() {
48 let observable = null; 52 let observable = null;
49 53
50 if (this.search !== null) { 54 if (this.search.value !== null) {
51 observable = this._videosService.searchVideos(this.search, this.pagination); 55 observable = this._videosService.searchVideos(this.search, this.pagination);
52 } else { 56 } else {
53 observable = this._videosService.getVideos(this.pagination); 57 observable = this._videosService.getVideos(this.pagination);
diff --git a/client/angular/videos/videos.service.ts b/client/angular/videos/videos.service.ts
index 94ef418eb..1329ead49 100644
--- a/client/angular/videos/videos.service.ts
+++ b/client/angular/videos/videos.service.ts
@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Rx';
5import { Pagination } from './pagination'; 5import { Pagination } from './pagination';
6import { Video } from './video'; 6import { Video } from './video';
7import { AuthService } from '../users/services/auth.service'; 7import { AuthService } from '../users/services/auth.service';
8import { Search } from '../app/search';
8 9
9@Injectable() 10@Injectable()
10export class VideosService { 11export class VideosService {
@@ -13,8 +14,8 @@ export class VideosService {
13 constructor (private http: Http, private _authService: AuthService) {} 14 constructor (private http: Http, private _authService: AuthService) {}
14 15
15 getVideos(pagination: Pagination) { 16 getVideos(pagination: Pagination) {
16 const params = { search: this.createPaginationParams(pagination) }; 17 const params = this.createPaginationParams(pagination);
17 return this.http.get(this._baseVideoUrl, params) 18 return this.http.get(this._baseVideoUrl, { search: params })
18 .map(res => res.json()) 19 .map(res => res.json())
19 .map(this.extractVideos) 20 .map(this.extractVideos)
20 .catch(this.handleError); 21 .catch(this.handleError);
@@ -33,9 +34,10 @@ export class VideosService {
33 .catch(this.handleError); 34 .catch(this.handleError);
34 } 35 }
35 36
36 searchVideos(search: string, pagination: Pagination) { 37 searchVideos(search: Search, pagination: Pagination) {
37 const params = { search: this.createPaginationParams(pagination) }; 38 const params = this.createPaginationParams(pagination);
38 return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search), params) 39 if (search.field) params.set('field', search.field);
40 return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params })
39 .map(res => res.json()) 41 .map(res => res.json())
40 .map(this.extractVideos) 42 .map(this.extractVideos)
41 .catch(this.handleError); 43 .catch(this.handleError);