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 @@
- +
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 @@ +
+
+ + +
+ + +
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 = new EventEmitter(); + + 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; +} 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'; 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: 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); 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'; 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) }; - return this.http.get(this._baseVideoUrl, params) + const params = this.createPaginationParams(pagination); + 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) { - const params = { search: this.createPaginationParams(pagination) }; - return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search), params) + searchVideos(search: Search, pagination: Pagination) { + const params = this.createPaginationParams(pagination); + 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); diff --git a/client/index.html b/client/index.html index c9bc7adb2..8b98cbbb2 100644 --- a/client/index.html +++ b/client/index.html @@ -22,8 +22,6 @@ - -