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:
parent
a3d93c97dd
commit
2c62cfe94d
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue