Add search with field choose support in client

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 @@
     </div>
 
     <div class="col-md-9">
-      <input
-        type="text" id="search_video" name="search_video" class="form-control" placeholder="Search a video..."
-        #search (keyup.enter)="doSearch(search.value)"
-      >
+      <my-search (search)="onSearch($event)"></my-search>
     </div>
   </header>
 
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 @@
 header div {
-  height: 50px;
   line-height: 25px;
   margin-bottom: 30px;
 }
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';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
 import { HTTP_PROVIDERS } from '@angular/http';
 
+import { DROPDOWN_DIRECTIVES} from  'ng2-bootstrap/components/dropdown';
+
 import { VideosAddComponent } from '../videos/components/add/videos-add.component';
 import { VideosListComponent } from '../videos/components/list/videos-list.component';
 import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
@@ -10,6 +12,8 @@ import { FriendsService } from '../friends/services/friends.service';
 import { UserLoginComponent } from '../users/components/login/login.component';
 import { AuthService } from '../users/services/auth.service';
 import { AuthStatus } from '../users/models/authStatus';
+import { SearchComponent } from './search.component';
+import { Search } from './search';
 
 @RouteConfig([
   {
@@ -39,12 +43,14 @@ import { AuthStatus } from '../users/models/authStatus';
     selector: 'my-app',
     templateUrl: 'app/angular/app/app.component.html',
     styleUrls: [ 'app/angular/app/app.component.css' ],
-    directives: [ ROUTER_DIRECTIVES ],
+    directives: [ ROUTER_DIRECTIVES, SearchComponent ],
     providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, VideosService, FriendsService, AuthService ]
 })
 
 export class AppComponent {
   isLoggedIn: boolean;
+  search_field: string = name;
+  choices = [  ];
 
   constructor(private _friendsService: FriendsService,
               private _authService: AuthService,
@@ -61,9 +67,10 @@ export class AppComponent {
     );
   }
 
-  doSearch(search: string) {
-    if (search !== '') {
-      this._router.navigate(['VideosList', { search: search }]);
+  onSearch(search: Search) {
+    console.log(search);
+    if (search.value !== '') {
+      this._router.navigate(['VideosList', { search: search.value, field: search.field }]);
     } else {
       this._router.navigate(['VideosList']);
     }
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 @@
+<div class="input-group">
+  <div class="input-group-btn" dropdown>
+    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
+      {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
+      <li *ngFor="let choice of choiceKeys" class="dropdown-item">
+        <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
+      </li>
+    </ul>
+  </div>
+
+  <input
+    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
+    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
+  >
+</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 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from '@angular/router-deprecated';
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import { DROPDOWN_DIRECTIVES} from  'ng2-bootstrap/components/dropdown';
+
+import { Search, SearchField } from './search';
+
+@Component({
+    selector: 'my-search',
+    templateUrl: 'app/angular/app/search.component.html',
+    directives: [ DROPDOWN_DIRECTIVES ]
+})
+
+export class SearchComponent {
+  @Output() search: EventEmitter<Search> = new EventEmitter<Search>();
+
+  searchCriterias: Search = {
+    field: "name",
+    value: ""
+  }
+  fieldChoices = {
+    name: "Name",
+    author: "Author",
+    podUrl: "Pod Url",
+    magnetUri: "Magnet Uri"
+  }
+
+  get choiceKeys() {
+    return Object.keys(this.fieldChoices);
+  }
+
+  getStringChoice(choiceKey: SearchField): string {
+    return this.fieldChoices[choiceKey];
+  }
+
+  choose($event:MouseEvent, choice: SearchField){
+    $event.preventDefault();
+    $event.stopPropagation();
+
+    this.searchCriterias.field = choice;
+  }
+
+  doSearch(): void {
+    this.search.emit(this.searchCriterias);
+  }
+
+}
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 @@
+export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
+
+export interface Search {
+  field: SearchField;
+  value: string;
+}