minor changes in search form and paging

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43959 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-10-07 10:17:41 +00:00
parent a3d93c97dd
commit 2c62cfe94d
5 changed files with 79 additions and 43 deletions

View File

@ -2,7 +2,13 @@ import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { SearchPublicationsComponent } from '../searchPublications.component'; import { SearchPublicationsComponent } from '../searchPublications.component';
import { SearchDataprovidersComponent } from '../searchDataproviders.component';
import { SearchProjectsComponent } from '../searchProjects.component';
import {SearchPublicationsService} from '../../services/searchPublications.service'; import {SearchPublicationsService} from '../../services/searchPublications.service';
import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
import {SearchProjectsService} from '../../services/searchProjects.service';
import {OpenaireProperties} from '../../utils/properties/openaireProperties'; import {OpenaireProperties} from '../../utils/properties/openaireProperties';
@Component({ @Component({
@ -24,54 +30,59 @@ import {OpenaireProperties} from '../../utils/properties/openaireProperties';
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li [class]="activeTab=='publications'?'active':''" > <li [class]="activeTab=='publications'?'active':''" >
<a data-toggle="tab" href="#pubsTab"> <a data-toggle="tab" href="#pubsTab">
Publications Publications ({{searchPublicationsComponent.totalResults}})
</a> </a>
</li> </li>
<li [class]="activeTab=='datasets'?'active':''" > <li [class]="activeTab=='datasets'?'active':''" >
<a data-toggle="tab" href="#dataTab"> <a data-toggle="tab" href="#dataTab">
Datasets Datasets (-)
</a> </a>
</li> </li>
<li > <li >
<a data-toggle="tab" href="#projectsTab"> <a data-toggle="tab" href="#projectsTab">
Projects Projects ({{searchProjectsComponent.totalResults}})
</a> </a>
</li > </li >
<li> <li>
<a data-toggle="tab" href="#dataProviderTab"> <a data-toggle="tab" href="#dataProviderTab">
Data Providers Data Providers ({{searchDataProvidersComponent.totalResults}})
</a> </a>
</li> </li>
<li> <li>
<a data-toggle="tab" href="#organizationsTab" > <a data-toggle="tab" href="#organizationsTab" >
Organizations Organizations (-)
</a> </a>
</li> </li>
<li> <li>
<a data-toggle="tab" href="#peopleTab" > <a data-toggle="tab" href="#peopleTab" >
People People (-)
</a> </a>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div id="pubsTab" class="tab-pane fade in active panel-body"> <div id="pubsTab" class="tab-pane fade in active panel-body">
<div class = "text-right" *ngIf = "searchPublicationsComponent.totalResults > 10" ><a [href] = "linkToSearchPublications" >Show all</a></div> <div class = "text-right" *ngIf = "searchPublicationsComponent.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.totalResults}} results</a></div>
<search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result> <search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>
</div> </div>
<div id="dataTab" class="tab-pane fade in active panel-body" > <div id="dataTab" class="tab-pane fade in active panel-body" >
<!--search-result [results]="results" [page]="page"></search-result--> <!--div class = "text-right" *ngIf = "searchPublicationsComponent.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.totalResults}} results</a></div>
<search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result-->
</div> </div>
<div id="projectsTab" class="tab-pane fade in active panel-body" > <div id="projectsTab" class="tab-pane fade in active panel-body" >
<!--search-result [results]="results" [page]="page"></search-result--> <div class = "text-right" *ngIf = "searchProjectsComponent.totalResults > 10" ><a [href] = "linkToSearchProjects" >View all {{searchProjectsComponent.totalResults}} results</a></div>
<search-result [(results)]="searchProjectsComponent.results" [(status)]= "searchProjectsComponent.status"></search-result>
</div> </div>
<div id="dataProviderTab" class="tab-pane fade in active panel-body" > <div id="dataProviderTab" class="tab-pane fade in active panel-body" >
<!--search-result [results]="results" [page]="page"></search-result--> <div class = "text-right" *ngIf = "searchDataProvidersComponent.totalResults > 10" ><a [href] = "linkToSearchDataproviders" >View all {{searchDataProvidersComponent.totalResults}} results</a></div>
<search-result [(results)]="searchDataProvidersComponent.results" [(status)]= "searchDataProvidersComponent.status"></search-result>
</div> </div>
<div id="organizationsTab" class="tab-pane fade in active panel-body" > <div id="organizationsTab" class="tab-pane fade in active panel-body" >
<!--search-result [results]="results" [page]="page"></search-result--> <!--<div class = "text-right" *ngIf = "searchPublicationsComponent.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.totalResults}} results</a></div>
<search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>-->
</div> </div>
<div id="peopleTab" class="tab-pane fade in active panel-body" > <div id="peopleTab" class="tab-pane fade in active panel-body" >
<!--search-result [results]="results" [page]="page"></search-result--> <!--<div class = "text-right" *ngIf = "searchPublicationsComponent.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.totalResults}} results</a></div>
<search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>-->
</div> </div>
</div> </div>
</div> </div>
@ -91,12 +102,20 @@ export class SearchComponent {
private activeTab = "datasets"; private activeTab = "datasets";
private linkToSearchPublications = ""; private linkToSearchPublications = "";
private linkToSearchProjects = "";
private linkToSearchDataproviders = "";
private searchPublicationsComponent : SearchPublicationsComponent; private searchPublicationsComponent : SearchPublicationsComponent;
private searchDataProvidersComponent : SearchDataprovidersComponent;
private searchProjectsComponent : SearchProjectsComponent;
//TODO add more viewchild for other entities //TODO add more viewchild for other entities
constructor ( private route: ActivatedRoute,private _searchPublicationsService: SearchPublicationsService) { constructor ( private route: ActivatedRoute,private _searchPublicationsService: SearchPublicationsService,private _searchDataprovidersService: SearchDataprovidersService,private _searchProjectsService: SearchProjectsService) {
this.searchPublicationsComponent = new SearchPublicationsComponent(this.route, this._searchPublicationsService);; this.searchPublicationsComponent = new SearchPublicationsComponent(this.route, this._searchPublicationsService);
this.searchDataProvidersComponent = new SearchDataprovidersComponent(this.route,this._searchDataprovidersService);
this.searchProjectsComponent = new SearchProjectsComponent(this.route, this._searchProjectsService);;
} }
private ngOnInit() { private ngOnInit() {
@ -120,10 +139,14 @@ export class SearchComponent {
this.activeTab = "publications"; this.activeTab = "publications";
} }
private searchProjects() { private searchProjects() {
this.activeTab = "publications"; this.activeTab = "projects";
this.searchProjectsComponent.getResults(this.keyword, 1, 10);
this.linkToSearchProjects = OpenaireProperties.getLinkToSearchProjects() + this.keyword;
} }
private searchDataProviders() { private searchDataProviders() {
this.activeTab = "publications"; this.activeTab = "datproviders";
this.searchDataProvidersComponent.getResults(this.keyword, 1, 10);
this.linkToSearchDataproviders = OpenaireProperties.getLinkToSearchDataProviders() + this.keyword;
} }
private searchOrganizations() { private searchOrganizations() {
this.activeTab = "publications"; this.activeTab = "publications";
@ -133,9 +156,10 @@ export class SearchComponent {
} }
private keywordChanged($event){ private keywordChanged($event){
this.keyword = $event.value; this.keyword = $event.value;
this.activeTab = "datasets"; this.searchPublications();
this.searchPublications(); this.searchProjects();
this.searchDataProviders();
} }

View File

@ -14,6 +14,7 @@ import {AdvancedSearchPageComponent} from './searchUtils/advancedSearchPage.comp
import {SearchAllComponent} from '../searchAll/searchAll.component';//helpers import {SearchAllComponent} from '../searchAll/searchAll.component';//helpers
import {SearchPageComponent} from './searchUtils/searchPage.component'; import {SearchPageComponent} from './searchUtils/searchPage.component';
import {SearchFormComponent} from './searchUtils/searchForm.component'; import {SearchFormComponent} from './searchUtils/searchForm.component';
import {SearchPagingComponent} from './searchUtils/searchPaging.component';
import {SearchResultComponent} from './searchUtils/searchResult.component'; import {SearchResultComponent} from './searchUtils/searchResult.component';
import {SearchFilterComponent} from './searchUtils/searchFilter.component'; import {SearchFilterComponent} from './searchUtils/searchFilter.component';
@ -41,6 +42,7 @@ import {SearchComponent} from './find/search.component';
SearchFormComponent, SearchFormComponent,
SearchResultComponent, SearchResultComponent,
SearchFilterComponent, SearchFilterComponent,
SearchPagingComponent,
AdvancedSearchFormComponent, AdvancedSearchFormComponent,
SearchPublicationsComponent, SearchPublicationsComponent,
AdvancedSearchPublicationsComponent, AdvancedSearchPublicationsComponent,

View File

@ -6,7 +6,7 @@ import {Observable} from 'rxjs/Observable';
template: ` template: `
<form> <form>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Filter</span> <!--span class="input-group-addon" id="sizing-addon2">Filter</span-->
<input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" > <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" >
<span class="input-group-btn"> <span class="input-group-btn">
<button (click)="keywordChanged()" type="submit" class="btn btn-default">Search</button> <button (click)="keywordChanged()" type="submit" class="btn btn-default">Search</button>

View File

@ -23,29 +23,9 @@ import {SearchResult} from '../../utils/entities/searchResult';
</div> </div>
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar"> <div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
<!--form>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Filter</span>
<input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2" [(ngModel)]="keyword" name="keyword" >
<span class="input-group-btn">
<button (click)="goTo(1)" type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form-->
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form> <search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form>
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [baseUrl] = "baseUrl+createQueryParameters()" [(totalResults)] = "totalResults" ></search-paging>
<div class="text-right" *ngIf="results && results.length>= size">
<paging [currentPage]="page" [totalResults]="totalResults" [baseUrl]="baseUrl+createQueryParameters()" [size]="size"> </paging>
<!--paging-no-load [(currentPage)]="page" [totalResults]="totalResults" [size]="size" (pageChange)="pageChanged($event)" > </paging-no-load-->
</div>
<div>
<!--p *ngFor="let result of results">
<search-result [id]="result.id" [title]="result.title" [page]="page"></search-result>
</p-->
<search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result> <search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -72,8 +52,6 @@ export class SearchPageComponent {
ngOnInit() { ngOnInit() {
console.info(" page - value: "+this.page); console.info(" page - value: "+this.page);
console.log(" search page st: "+this.status);
//this.totalResults = this.totalResults;
console.info("searchPage total="+this.totalResults); console.info("searchPage total="+this.totalResults);
console.info("searchPage: results.length = "+this.results.length); console.info("searchPage: results.length = "+this.results.length);
} }

View File

@ -0,0 +1,32 @@
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'search-paging',
template: `
<div class= "searchPaging">
<div class="text-right" *ngIf="results && results.length>= size">
<paging [currentPage]="page" [totalResults]="totalResults" [baseUrl]="baseUrl" [size]="size"> </paging>
</div>
<div class="text-left" *ngIf="results && results.length> 0">
{{totalResults}} documents, page {{page}} of {{(totalResults/size)}}
</div>
</div>
`
})
export class SearchPagingComponent {
@Input() page:number = 1;
@Input() size:number = 1;
@Input() results;
@Input() baseUrl:string = "";
@Input() totalResults:number = 0;
constructor () {
}
ngOnInit() {
}
}