Publication page & project PAge: add claim result inline, fix claim context - use autocomplete component, in home page add keyword to the url when user searches for a term

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44421 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-11-09 12:35:25 +00:00
parent 0b6839b702
commit 3f972fabcb
10 changed files with 108 additions and 104 deletions

View File

@ -1,8 +1,8 @@
import {Component, Input,Output, ElementRef, EventEmitter} from '@angular/core';
import {Component, Input,Output, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ContextsService} from '../../services/contexts.service';
import {ClaimContext} from '../../utils/entities/claimEntities.class';
import { StaticAutocomplete2Component } from '../../utils/staticAutoComplete2.component';
@Component({
selector: 'claim-contexts',
@ -32,13 +32,9 @@ import {ClaimContext} from '../../utils/entities/claimEntities.class';
</ul>
</div>
<!--input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() -->
<static-autocomplete2 [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)"></static-autocomplete2>
</div>
<static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter(query)" type="context"></static-autocomplete>
</div>
</div>
<div class="panel-body" *ngIf=" inline && showComponent ">
<div class=" form-horizontal">
<div class=" form-group ">
@ -63,19 +59,9 @@ import {ClaimContext} from '../../utils/entities/claimEntities.class';
</ul>
</div>
<!--div class="form-group">
<input id="community" type="text" class="validate filter-input input-sm form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
</div-->
<static-autocomplete2 [(list)] = concepts [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Search for Concepts'" title = "Concepts:" [multipleSelections]=true (addItem) = "select($event)"></static-autocomplete2> <!--static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></static-autocomplete-->
</div>
<static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></static-autocomplete>
</div>
<!--div class="suggestions" *ngIf="filteredList.length > 0">
<ul class="list-group" >
<li class="list-group-item" *ngFor=" let item of filteredList">
<a (click)="select(item)">{{item.label}}</a>
</li>
</ul>
</div-->
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
<div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>
@ -90,6 +76,7 @@ export class ClaimContextComponent {
@Input() public selectedCategoryId:string ="0";
@Output() cselectedCommunityChange = new EventEmitter();
@Output() selectedCategoryChange = new EventEmitter();
@ViewChild (StaticAutocomplete2Component) autocomplete : StaticAutocomplete2Component ;
public query = '';
public filteredList = [];
@ -100,7 +87,7 @@ private selectedCommunityLabel:string = "Community:";
public categories:string[];
private selectedCategoryLabel:string ="Category:";
public concepts:string[];
public concepts = [];
public warningMessage = "";
public infoMessage = "";
@ -111,48 +98,9 @@ constructor(private _contextService: ContextsService,myElement: ElementRef) {
this.elementRef = myElement;
}
// filter() {
// this.warningMessage = "";
// this.infoMessage = "";
// if(this.selectedCommunityId == "0"){
// this.warningMessage = "Please select Community";
// }else if (this.query !== ""){
// this.warningMessage = "";
// this.infoMessage = "";
// if(this.selectedCategoryId == "0"){
// this.warningMessage = "Specify category for more concepts";
// }
// this.filteredList = this.concepts.filter(function(el){
// return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
// }.bind(this));
// if(this.filteredList.length == 0 ){
// this.infoMessage = "No results found";
// }
// }else{
// this.filteredList = [];
// }
//
// }
select($event){
var item = $event.value;
filter($event) {
var query = $event.value;
this.query = $event.value;
this.filteredList = this.concepts.filter(function(el){
return el.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
}.bind(this));
var list = [ ];
for (var _i = 0; _i < this.filteredList.length; _i++) {
let item = this.filteredList[_i];
var context: ClaimContext= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
list.push(context);
}
this.filteredList = list;
}
select(item){
this.query = "";
this.filteredList = [];
var context: ClaimContext= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
var found:boolean = false;
this.warningMessage = "";
@ -160,7 +108,7 @@ select(item){
let item = this.selectedList[_i];
if(item.concept.id == context.concept.id){
found=true;
this.warningMessage = "Concept already in selected list";
// this.warningMessage = "Concept already in selected list";
}
}
if (!found) {
@ -168,19 +116,6 @@ select(item){
}
}
// handleClick(event){
// var clickedComponent = event.target;
// var inside = false;
// do {
// if (clickedComponent === this.elementRef.nativeElement) {
// inside = true;
// }
// clickedComponent = clickedComponent.parentNode;
// } while (clickedComponent);
// if(!inside){
// this.filteredList = [];
// }
// }
getCommunities () {
this._contextService.getCommunities().subscribe(
data => {
@ -200,7 +135,6 @@ getCommunities () {
if (this.query !== ""){
var event = {value: ""};
event.value = this.query;
this.filter(event);
}
},
@ -212,11 +146,12 @@ getCommunities () {
if(this.selectedCategoryId != '0'){
this._contextService.getConcepts(this.selectedCategoryId, "").subscribe(
data => {
this.concepts = data.concept;
this.concepts = data;
this.autocomplete.updateList(this.concepts);
if (this.query !== ""){
var event = {value: ""};
event.value = this.query;
this.filter(event);
// this.filter(event);
}
},
err => console.error(err)
@ -228,17 +163,21 @@ getCommunities () {
communityChanged(communityId:string, communityLabel:string){
this.warningMessage = "";
this.infoMessage = "";
this.selectedCommunityId= communityId;
this.selectedCommunityLabel= communityLabel;
this.getCategories();
if(this.selectedCommunityId != communityId){
this.selectedCommunityId = communityId;
this.selectedCommunityLabel = communityLabel;
this.getCategories();
}
}
categoryChanged(categoryId:string, categoryLabel:string){
this.warningMessage = "";
this.infoMessage = "";
this.selectedCategoryId = categoryId;
this.selectedCategoryLabel = categoryLabel;
this.getConcepts();
if(this.selectedCategoryId != categoryId){
this.selectedCategoryId = categoryId;
this.selectedCategoryLabel = categoryLabel;
this.getConcepts();
}
}

View File

@ -122,7 +122,7 @@ export class ClaimDatasetComponent {
}
private searchOpenaire (term: string, size : number, page : number) {
this._searchDatasetsService.searchDatasets(term, null, page, size, []).subscribe(
this._searchDatasetsService.searchDatasets('q='+term+'&op=and', null, page, size, []).subscribe(
data => {
if(data != null) {
this.openairePage=page;

View File

@ -162,7 +162,7 @@ private getCrossrefResults (term: string, size : number, page : number) {
}
private searchOpenaire(term: string, size : number, page : number) {
this.openaireStatus = this.errorCodes.LOADING;
this._searchPublicationsService.searchPublications(term, null, page, size, []).subscribe(
this._searchPublicationsService.searchPublications('q='+term+'&op=and', null, page, size, []).subscribe(
data => {
if(data != null) {
this.openairePage=page;

View File

@ -34,7 +34,7 @@
<div class="text-justify" [innerHTML]="datasetInfo.description"></div>
</blockquote>
<div class="text-right">
<div class="text-right">
<button (click)=" toggleClaimResult()" class = "btn btn-primary btn-xs" >Add Research Results</button>
</div>
<inline-claim-result inlineType ="dataset" [inlineEntity]="result" (datasetAdded)="resultsAdded($event,false)" (publicationAdded)="resultsAdded($event,true)" ></inline-claim-result>

View File

@ -53,6 +53,10 @@
</a>
</dd>
</dl>
<div class="text-right">
<button (click)=" toggleClaimResult()" class = "btn btn-primary btn-xs" >Add Research Results</button>
</div>
<inline-claim-result inlineType ="project" [inlineEntity]="project" (datasetAdded)="resultsAdded($event,false)" (publicationAdded)="resultsAdded($event,true)" ></inline-claim-result>
<ul class="nav nav-tabs">
<li class="active">
@ -154,13 +158,13 @@
[filename]="'publications.csv'">
</export>
</li>
<li class="list-group-item">
<!--li class="list-group-item">
<div class="text-center">
<a class="btn btn-primary" href="/linking">
Link Research Results
</a>
</div>
</li>
</li-->
<li class="list-group-item">
<div class="text-center">
<a class="btn btn-primary" href="/deposit">

View File

@ -46,6 +46,10 @@
<blockquote *ngIf="publicationInfo.description != ''">
<div class="text-justify" [innerHTML]="publicationInfo.description"></div>
</blockquote>
<div class="text-right">
<button (click)=" toggleClaimResult()" class = "btn btn-primary btn-xs" >Add Research Results</button>
</div>
<inline-claim-result inlineType ="publication" [inlineEntity]="result" (datasetAdded)="resultsAdded($event,false)" (publicationAdded)="resultsAdded($event,true)" ></inline-claim-result>
<ul class="nav nav-tabs">
<li class="active">

View File

@ -68,12 +68,12 @@ export class PublicationComponent {
this.errorMessage=""
if(this.articleId==null || this.articleId==''){
this.warningMessage="No valid publication id";
console.info("novalid");
}else{
console.info("do request");
this._publicationService.getPublicationInfo(this.articleId).subscribe(
}else{
this._publicationService.getPublicationInfo(this.articleId).subscribe(
data => {
this.publicationInfo = data;
this.result = []
this.result = {id: id, type :"dataset", source : "openaire", title: this.publicationInfo.title,url: '', result: '', accessRights: this.publicationInfo.bestlicense, embargoEndDate: ''};
let bioentitiesNum = 0;
if(this.publicationInfo.bioentities != undefined) {

View File

@ -138,8 +138,7 @@ export class SearchComponent {
private searchOrganizationsComponent: SearchOrganizationsComponent;
private searchPeopleComponent: SearchPeopleComponent;
//TODO add more viewchild for other entities
private subPub;private subData;private subProjects;private subOrg;private subPeople; private subDataPr;
constructor ( private route: ActivatedRoute,
private _searchPublicationsService: SearchPublicationsService,
private _searchDataprovidersService: SearchDataprovidersService,
@ -169,6 +168,24 @@ export class SearchComponent {
private ngOnDestroy() {
this.sub.unsubscribe();
if(this.keyword !=null && this.keyword.length > 0){
if(this.subPub){
this.subPub.unsubscribe();
}
if(this.subData){
this.subData.unsubscribe();
}
if(this.subProjects){
this.subProjects.unsubscribe();
}
if(this.subOrg){
this.subOrg.unsubscribe();
}
if(this.subPeople){
this.subPeople.unsubscribe();
}
if(this.subDataPr){
this.subDataPr.unsubscribe();
}
this.subPublicationsCount.unsubscribe();
this.subDatasetsCount.unsubscribe();
this.subProjectsCount.unsubscribe();
@ -229,6 +246,11 @@ export class SearchComponent {
private keywordChanged($event){
this.keyword = $event.value;
console.info("Search Find: search with keyword \"" + this.keyword + "\"" );
if(location.pathname.indexOf("search/find") ==-1){
this.location.go(location.pathname+"search/find","?keyword=" + this.keyword);
}else{
this.location.go(location.pathname,"?keyword=" + this.keyword);
}
//unsubscribeSearch();
@ -256,7 +278,7 @@ export class SearchComponent {
private count() {
this.subPublicationsCount = this.route.queryParams.subscribe(params => {
this._searchPublicationsService.numOfSearchPublications(this.keyword).subscribe(
this.subPub = this._searchPublicationsService.numOfSearchPublications(this.keyword).subscribe(
data => {
this.searchPublicationsComponent.totalResults = data;
},
@ -267,7 +289,7 @@ export class SearchComponent {
})
this.subDatasetsCount = this.route.queryParams.subscribe(params => {
this._searchDatasetsService.numOfSearchDatasets(this.keyword).subscribe(
this.subData = this._searchDatasetsService.numOfSearchDatasets(this.keyword).subscribe(
data => {
this.searchDatasetsComponent.totalResults = data;
},
@ -278,7 +300,7 @@ export class SearchComponent {
})
this.subProjectsCount = this.route.queryParams.subscribe(params => {
this._searchProjectsService.numOfSearchProjects(this.keyword).subscribe(
this.subProjects = this._searchProjectsService.numOfSearchProjects(this.keyword).subscribe(
data => {
this.searchProjectsComponent.totalResults = data;
},
@ -291,7 +313,7 @@ export class SearchComponent {
this.searchDataProvidersComponent.getNumForSearch(this.keyword);
this.subOrganizationsCount = this.route.queryParams.subscribe(params => {
this._searchOrganizationsService.numOfSearchOrganizations(this.keyword).subscribe(
this.subOrg = this._searchOrganizationsService.numOfSearchOrganizations(this.keyword).subscribe(
data => {
this.searchOrganizationsComponent.totalResults = data;
},
@ -302,7 +324,7 @@ export class SearchComponent {
})
this.subPeopleCount = this.route.queryParams.subscribe(params => {
this._searchPeopleService.numOfSearchPeople(this.keyword).subscribe(
this.subPeople = this._searchPeopleService.numOfSearchPeople(this.keyword).subscribe(
data => {
this.searchPeopleComponent.totalResults = data;
},

View File

@ -4,6 +4,7 @@ import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Claim} from '../utils/entities/claim';
import {OpenaireProperties} from '../utils/properties/openaireProperties';
import {AutoCompleteValue} from '../searchPages/searchUtils/searchHelperClasses.class';
@Injectable()
export class ContextsService {
@ -33,9 +34,22 @@ export class ContextsService {
let url= this.baseUrl + 'categories/' + categoryId+ "/concepts";
return this.http.get( url)
.map(request => <any> request.json().data)
.do(request => console.info("Get claims: offset = " ))
.map(res => this.parse(res.concept))
.do(res => console.info(res ))
.catch(this.handleError);
}
parse (data: any):AutoCompleteValue[] {
var array:AutoCompleteValue[] =[]
for(var i = 0; i < data.length; i++){
var value:AutoCompleteValue = new AutoCompleteValue();
value.id = data[i].id;
value.label = data[i].label;
array.push(value);
}
return array;
}
private handleError (error: Response) {
// in a real world app, we may send the error to some remote logging infrastructure

View File

@ -41,6 +41,7 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
export class StaticAutocomplete2Component {
@Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete";
@Output() addItem = new EventEmitter(); // when selected list changes update parent component
@Output() selectedValueChanged = new EventEmitter(); // when changed a method for filtering will be called
@Output() listUpdated = new EventEmitter(); // when changed a method for filtering will be called
@Input() public list = []; // the entries resulted after filtering function
@ -49,6 +50,7 @@ export class StaticAutocomplete2Component {
@Input() public keywordlimit = 3; // the minimum length of keyword
@Input() public showSelected = true; // the minimum length of keyword
@Input() public multipleSelections:boolean = true;
@Input() public allowDuplicates:boolean = false;
@Input() public selectedValue:string = '';
@Input() public vocabularyId:string ;
@Input() public fieldName:string ;
@ -71,7 +73,10 @@ export class StaticAutocomplete2Component {
}
}
ngOnInit () {
console.log("auto complete init : list length"+this.list.length);
if(this.list == undefined || this.list.length == 0){
if(this.vocabularyId){
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
this.afterListFetchedActions();
@ -90,9 +95,15 @@ export class StaticAutocomplete2Component {
);
}
}else{
console.log("auto complete init : list length"+this.list.length);
this.afterListFetchedActions();
}
}
public updateList(list){ // used in claim context autocomplete
this.list = list;
this.afterListFetchedActions()
}
private afterListFetchedActions(){
this.getSelectedNameFromGivenId();
@ -100,13 +111,14 @@ export class StaticAutocomplete2Component {
value: this.list
});
if(this.list == null || this.list.length == 0 ){
this.warningMessage = "There are no results"
return
this.warningMessage = "There are no results";
return;
}
this.done = true;
if(this.keyword != ""){
this.filter();
}
}
filter() {
if(this.done){
@ -147,12 +159,16 @@ export class StaticAutocomplete2Component {
this.selectedValueChanged.emit({
value: this.selectedValue
});
}
}
select(item:any){
// console.log("select"+this.selected.length + item.id + " "+ item.label);
if(this.multipleSelections){
var index:number =this.checkIfExists(item,this.selected);
if (index > -1) {
if (index > -1 && !this.allowDuplicates) {
this.keyword = "";
this.filtered.splice(0, this.filtered.length);
return;
@ -161,6 +177,9 @@ export class StaticAutocomplete2Component {
this.selected.push(item);
this.keyword = "";
this.filtered.splice(0, this.filtered.length);
this.addItem.emit({
value: item
});
}
}else{
this.selected.splice(0, this.selected.length);
@ -174,6 +193,8 @@ export class StaticAutocomplete2Component {
});
}
console.log("selected"+this.selected.length );
}
private checkIfExists(item:any,list):number{