aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/angular/app
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/app
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/app')
-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
6 files changed, 83 insertions, 9 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}