Add search with field choose support in client

client/angular/app/app.component.html

@@ -6,10 +6,7 @@
     </div>
 
     <div class="col-md-9">
-      <input
+      <my-search (search)="onSearch($event)"></my-search>
-        type="text" id="search_video" name="search_video" class="form-control" placeholder="Search a video..."
-        #search (keyup.enter)="doSearch(search.value)"
-      >
     </div>
   </header>
 

client/angular/app/app.component.scss

@@ -1,5 +1,4 @@
 header div {
-  height: 50px;
   line-height: 25px;
   margin-bottom: 30px;
 }

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) {
+  onSearch(search: Search) {
-    if (search !== '') {
+    console.log(search);
-      this._router.navigate(['VideosList', { search: search }]);
+    if (search.value !== '') {
+      this._router.navigate(['VideosList', { search: search.value, field: search.field }]);
     } else {
       this._router.navigate(['VideosList']);
     }

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>

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);
+  }
+
+}

client/angular/app/search.ts

@@ -0,0 +1,6 @@
+export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
+
+export interface Search {
+  field: SearchField;
+  value: string;
+}

client/angular/videos/components/list/videos-list.component.ts

@@ -9,6 +9,7 @@ import { User } from '../../../users/models/user';
 import { VideosService } from '../../videos.service';
 import { Video } from '../../video';
 import { VideoMiniatureComponent } from './video-miniature.component';
+import { Search, SearchField } from '../../../app/search';
 
 @Component({
   selector: 'my-videos-list',
@@ -26,14 +27,17 @@ export class VideosListComponent implements OnInit {
     total: 0
   }
 
-  private search: string;
+  private search: Search;
 
   constructor(
     private _authService: AuthService,
     private _videosService: VideosService,
     private _routeParams: RouteParams
   ) {
-    this.search = this._routeParams.get('search');
+    this.search = {
+      value: this._routeParams.get('search'),
+      field: <SearchField>this._routeParams.get('field')
+    }
   }
 
   ngOnInit() {
@@ -47,7 +51,7 @@ export class VideosListComponent implements OnInit {
   getVideos() {
     let observable = null;
 
-    if (this.search !== null) {
+    if (this.search.value !== null) {
       observable = this._videosService.searchVideos(this.search, this.pagination);
     } else {
       observable = this._videosService.getVideos(this.pagination);

client/angular/videos/videos.service.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Rx';
 import { Pagination } from './pagination';
 import { Video } from './video';
 import { AuthService } from '../users/services/auth.service';
+import { Search } from '../app/search';
 
 @Injectable()
 export class VideosService {
@@ -13,8 +14,8 @@ export class VideosService {
   constructor (private http: Http, private _authService: AuthService) {}
 
   getVideos(pagination: Pagination) {
-    const params = { search: this.createPaginationParams(pagination) };
+    const params = this.createPaginationParams(pagination);
-    return this.http.get(this._baseVideoUrl, params)
+    return this.http.get(this._baseVideoUrl, { search: params })
                     .map(res => res.json())
                     .map(this.extractVideos)
                     .catch(this.handleError);
@@ -33,9 +34,10 @@ export class VideosService {
                     .catch(this.handleError);
   }
 
-  searchVideos(search: string, pagination: Pagination) {
+  searchVideos(search: Search, pagination: Pagination) {
-    const params = { search: this.createPaginationParams(pagination) };
+    const params = this.createPaginationParams(pagination);
-    return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search), params)
+    if (search.field) params.set('field', search.field);
+    return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params })
                     .map(res => res.json())
                     .map(this.extractVideos)
                     .catch(this.handleError);

client/index.html

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

client/tsconfig.json

@@ -21,6 +21,8 @@
   "compileOnSave": false,
   "files": [
     "angular/app/app.component.ts",
+    "angular/app/search.component.ts",
+    "angular/app/search.ts",
     "angular/friends/services/friends.service.ts",
     "angular/main.ts",
     "angular/users/components/login/login.component.ts",