5 files changed, 73 insertions, 0 deletions

diff --git a/client/app/shared/search/index.ts b/client/app/shared/search/index.ts
new file mode 100644
index 000000000..a49a4f1a9
--- /dev/null
+++ b/client/app/shared/search/index.ts
@@ -0,0 +1,3 @@
+export * from './search-field.type';
+export * from './search.component';
+export * from './search.model';
diff --git a/client/app/shared/search/search-field.type.ts b/client/app/shared/search/search-field.type.ts
new file mode 100644
index 000000000..846236290
--- /dev/null
+++ b/client/app/shared/search/search-field.type.ts
@@ -0,0 +1 @@
+export type SearchField = "name" | "author" | "podUrl" | "magnetUri";
diff --git a/client/app/shared/search/search.component.html b/client/app/shared/search/search.component.html
new file mode 100644
index 000000000..fb13ac72e
--- /dev/null
+++ b/client/app/shared/search/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/app/shared/search/search.component.ts b/client/app/shared/search/search.component.ts
new file mode 100644
index 000000000..d541cd0d6
--- /dev/null
+++ b/client/app/shared/search/search.component.ts
@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+import { DROPDOWN_DIRECTIVES} from  'ng2-bootstrap/components/dropdown';
+
+import { Search } from './search.model';
+import { SearchField } from './search-field.type';
+
+@Component({
+    selector: 'my-search',
+    templateUrl: 'client/app/shared/search/search.component.html',
+    directives: [ DROPDOWN_DIRECTIVES ]
+})
+
+export class SearchComponent {
+  @Output() search = new EventEmitter<Search>();
+
+  fieldChoices = {
+    name: 'Name',
+    author: 'Author',
+    podUrl: 'Pod Url',
+    magnetUri: 'Magnet Uri'
+  };
+  searchCriterias: Search = {
+    field: 'name',
+    value: ''
+  };
+
+  get choiceKeys() {
+    return Object.keys(this.fieldChoices);
+  }
+
+  choose($event: MouseEvent, choice: SearchField) {
+    $event.preventDefault();
+    $event.stopPropagation();
+
+    this.searchCriterias.field = choice;
+  }
+
+  doSearch() {
+    this.search.emit(this.searchCriterias);
+  }
+
+  getStringChoice(choiceKey: SearchField) {
+    return this.fieldChoices[choiceKey];
+  }
+}
diff --git a/client/app/shared/search/search.model.ts b/client/app/shared/search/search.model.ts
new file mode 100644
index 000000000..932a6566c
--- /dev/null
+++ b/client/app/shared/search/search.model.ts
@@ -0,0 +1,6 @@
+import { SearchField } from './search-field.type';
+
+export interface Search {
+  field: SearchField;
+  value: string;
+}