From: Chocobozzz <florian.bigard@gmail.com>
Date: Mon, 23 May 2016 07:30:18 +0000 (+0200)
Subject: Add search with field choose support in client
X-Git-Tag: v0.0.1-alpha~903
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=471bc22f19767c1cb1e7ba7ad0ddf0ff5f0e88f4;p=oweals%2Fpeertube.git
Add search with field choose support in client
---
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;
+}
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: <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);
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 @@
<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>
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 1d002f7b0..df46b5d46 100644
--- a/client/tsconfig.json
+++ b/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",