MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 23 Wiki Activity

Advanced Search Pubs: load fields values only once(for multiple filters with the same id), move the button and the field selection for new fields to the bottom, in autocomplete add focus/ unfocus functionality 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44349 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-10-27 12:35:51 +00:00
parent 4d8b8ff9a9
commit 3651ce0b3a
5 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts
View File

@ -11,7 +11,7 @@ import {SearchFields} from '../../utils/properties/searchFields';
<form class="">
<div *ngFor="let selectedField of selectedFields; let i = index" class="form-group form-inline">
<div *ngIf = "i != 0" class="input-group">
<button [style.width]="'120px'" type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="true">
<button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="true">
{{selectedField.operatorId}}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@ -22,34 +22,51 @@ import {SearchFields} from '../../utils/properties/searchFields';
</div>
<div class="input-group">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
<button class="btn btn-default btn-disabled" type="button">
{{selectedField.name}}
</button>
<!--button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
{{selectedField.name}}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let id of fieldIds">
<a (click)="fieldIdsChanged(i, id)">{{searchFields.ADVANCED_FIELDS_NAMES_IDS[id].name}}</a>
</li>
</ul>
</ul-->
</div>
<input *ngIf = "searchFields.ADVANCED_FIELDS_NAMES_IDS[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="selectedField.value" name="value[{{i}}]">
<div *ngIf = "searchFields.ADVANCED_FIELDS_NAMES_IDS[selectedField.id].type == 'vocabulary'" class="input-group">
<static-autocomplete2 [vocabularyId] = selectedField.id [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"></static-autocomplete2>
<static-autocomplete2 [(vocabularyId)] = selectedField.id [(list)] = this.fieldList[selectedField.id] [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2>
</div>
<div *ngIf = "searchFields.ADVANCED_FIELDS_NAMES_IDS[selectedField.id].type == 'refine'" class="input-group">
<static-autocomplete2 [entityName] = "entityType" [fieldName] = searchFields.ADVANCED_FIELDS_NAMES_IDS[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"></static-autocomplete2>
<static-autocomplete2 [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = searchFields.ADVANCED_FIELDS_NAMES_IDS[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2>
</div>
</div>
<button type="button" class="btn btn-success" (click)="addField()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="form-group form-inline">
<div class=" input-group">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
{{searchFields.ADVANCED_FIELDS_NAMES_IDS[newFieldId].name}}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let id of fieldIds">
<a (click)="fieldIdsChanged(i, id)">{{searchFields.ADVANCED_FIELDS_NAMES_IDS[id].name}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-success" (click)="addField()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
@ -64,13 +81,21 @@ export class AdvancedSearchFormComponent {
@Input() fieldIds: string[];
@Input() selectedFields:AdvancedField[];
@Output() queryChange = new EventEmitter();
newFieldId:string;
fieldList:{[id:string]:any[]} = {};
private searchFields:SearchFields = new SearchFields();
private operators: [{name:string, id:string}] = this.searchFields.ADVANCED_SEARCH_OPERATORS;
constructor () {
console.log("Constr: Advanced search form");
}
ngOnInit() {
console.log("Init: Advanced search form");
for(var i = 0; i < this.fieldIds.length; i++){
this.fieldList[this.fieldIds[i]]=[];
}
this.newFieldId = this.fieldIds[0];
}
queryChanged() {
@ -83,7 +108,7 @@ export class AdvancedSearchFormComponent {
addField() {
console.info("add filter"+this.fieldIds[0]+this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.fieldIds[0]].name+this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.fieldIds[0]].type);
this.selectedFields.push(new AdvancedField(this.fieldIds[0], this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.fieldIds[0]].name,this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.fieldIds[0]].type,"","and"));
this.selectedFields.push(new AdvancedField(this.newFieldId, this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.newFieldId].name,this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.newFieldId].type,"","and"));
}
@ -99,13 +124,17 @@ export class AdvancedSearchFormComponent {
}
fieldIdsChanged(index: number,id) {
this.selectedFields[index].id = id;
this.selectedFields[index].name = this.searchFields.ADVANCED_FIELDS_NAMES_IDS[id].name;
this.selectedFields[index].type = this.searchFields.ADVANCED_FIELDS_NAMES_IDS[id].type;
this.selectedFields[index].value = "";
this.newFieldId = id;
// this.selectedFields[index].id = id;
// this.selectedFields[index].name = this.searchFields.ADVANCED_FIELDS_NAMES_IDS[id].name;
// // this.selectedFields[index].type = "keyword";
// this.selectedFields[index].type = this.searchFields.ADVANCED_FIELDS_NAMES_IDS[id].type;
// this.selectedFields[index].value = "";
}
valueChanged($event,index:number){
console.log("Changed!"+index+$event.value)
this.selectedFields[index].value = $event.value;
}
listUpdated($event,fieldId:number){
this.fieldList[fieldId] = $event.value;
}
}

6
portal-2/src/app/searchPages/searchUtils/advancedSearchPage.component.ts
View File

@ -66,10 +66,12 @@ export class AdvancedSearchPageComponent {
@Output() queryChange = new EventEmitter();
constructor (private location: Location) {
console.log("Constr: AdvancedSearchPageComponent");
}
ngOnInit() {
console.log("Init: AdvancedSearchPageComponent");
this.totalResults = this.results.length;
}
public getSelectedFiltersFromUrl(params){
@ -125,7 +127,7 @@ export class AdvancedSearchPageComponent {
console.info("Creating Parameter:" + this.selectedFields[i].id+" :"+this.selectedFields[i].value);
if(this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.selectedFields[i].id] != undefined && this.selectedFields[i].value != ""){
params +="&"+ this.selectedFields[i].id
+ "="+ this.selectedFields[i].value+"&"+this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.selectedFields[i].id].operator
+ "="+ encodeURIComponent(this.selectedFields[i].value)+"&"+this.searchFields.ADVANCED_FIELDS_NAMES_IDS[this.selectedFields[i].id].operator
+ "=" + this.selectedFields[i].operatorId;
}
}

4
portal-2/src/app/sharedComponents/navigationBar.component.ts
View File

@ -32,8 +32,8 @@ import 'rxjs/Rx';
<li><a href="/search/find/people">People</a></li>
<li role="separator" class="divider"></li>
<li><a href="/search/data-providers">Compatible Data providers</a></li>
<!--li role="separator" class="divider"></li>
<li><a href="/search/advanced/publications">Advanced Search Publications</a></li-->
<li role="separator" class="divider"></li>
<li><a href="/search/advanced/publications">Advanced Search Publications</a></li>
</ul>
</li>
<li class="dropdown">

12
portal-2/src/app/utils/properties/searchFields.ts
View File

@ -24,9 +24,9 @@ export class SearchFields {
public PROJECT_PARAM_FIELDS:string[] = ["funder","fl0","fl1", "fl2", "start","end","sc39"];
public FIELDS_NAMES: { [key:string]:string } = {["funderid"]:"Funder",["fundinglevel0_id"]:"Funding Level 0",
["fundinglevel1_id"]:"Funding Level 1", ["fundinglevel2_id"]:"Funding Level 2", ["relfunderid"]:"Funder",
["relfundinglevel0_id"]:"Funding Level 0",["relfundinglevel1_id"]:"Funding Level 1", ["relfundinglevel2_id"]:"Funding Level 2",
public FIELDS_NAMES: { [key:string]:string } = {["funderid"]:"Funder",["fundinglevel0_id"]:"Funding Stream",
["fundinglevel1_id"]:"Funding Substream Level 1", ["fundinglevel2_id"]:"Funding Substream Level 2", ["relfunderid"]:"Funder",
["relfundinglevel0_id"]:"Funding Stream",["relfundinglevel1_id"]:"Funding Substream Level 1", ["relfundinglevel2_id"]:"Funding Substream Level 2",
["instancetypenameid"]:"Type",["resultlanguageid"]: "Language",["communityid"]: "Context",["resultacceptanceyear"]:"Year",
["resultbestlicense"]:"Access Mode",["resulthostingdatasourceid"]:"Hosting Data provider",
["collectedfromdatasourceid"]:"Collected from", ["datasourcetypeuiid"]:"Compatibility Type", ["datasourceodlanguages"]:"Language",
@ -44,9 +44,9 @@ export class SearchFields {
["author"]:{name:"Author",operator:"at", type:"keyword", indexField:"relperson"},
["publisher"]:{name:"Publisher",operator:"pb", type:"keyword", indexField:"resultpublisher"},
["funder"]:{name:"Funder",operator:"fn", type:"refine", indexField:"relfunderid"},
["funderlv0"]:{name:"Funding Level 0",operator:"fn0", type:"refine", indexField:"relfundinglevel0_id"},
["funderlv1"]:{name:"Funding Level 1",operator:"fn1", type:"refine", indexField:"relfundinglevel1_id"},
["funderlv2"]:{name:"Funding Level 2",operator:"fn2", type:"refine", indexField:"relfundinglevel2_id"},
["funderlv0"]:{name:"Funding Stream",operator:"fn0", type:"refine", indexField:"relfundinglevel0_id"},
["funderlv1"]:{name:"Funding Substream Level 1",operator:"fn1", type:"refine", indexField:"relfundinglevel1_id"},
["funderlv2"]:{name:"Funding Substream Level 2",operator:"fn2", type:"refine", indexField:"relfundinglevel2_id"},
["type"]:{name:"Type",operator:"tp", type:"vocabulary", indexField:"instancetypenameid"},
["lang"]: {name:"Language",operator:"ln", type:"vocabulary", indexField:"resultlanguageid"},
["community"]: {name:"Community",operator:"cm", type:"refine", indexField:"communityid"},

51
portal-2/src/app/utils/staticAutoComplete2.component.ts
View File

@ -8,9 +8,12 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
@Component({
selector: 'static-autocomplete2',
styleUrls: ['autoComplete.component.css'],
host: {
'(document:click)': 'handleClick($event)',
},
template: `
<div class="custom-autocomplete">
<div *ngIf = "showSelected">
<div *ngIf = "showSelected && selectedValue != ''">
<div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" class=" remove glyphicon glyphicon-remove"></span>
@ -39,6 +42,7 @@ export class StaticAutocomplete2Component {
@Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete";
@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
@Input() public filtered = []; // the entries resulted after filtering function
@Input() public selected = []; // the entries selected from user
@ -57,13 +61,22 @@ export class StaticAutocomplete2Component {
private tries = 0;
private showInput = true;
constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService) {
private sub;
constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService, private myElement: ElementRef) {
console.info("Type"+this.type);
}
ngOnDestroy(){
if(this.sub){
this.sub.destroy();
}
}
ngOnInit () {
if(this.list == undefined || this.list.length == 0){
if(this.vocabularyId){
this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId);
this.sub = this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId);
this.listUpdated.emit({
value: this.list
});
this.getSelectedNameFromGivenId();
if(this.list.length == 0){
this.warningMessage = "There are no results"
@ -75,6 +88,9 @@ export class StaticAutocomplete2Component {
data => {
this.list = data;
this.getSelectedNameFromGivenId();
this.listUpdated.emit({
value: this.list
});
if(this.list.length == 0 ){
this.warningMessage = "There are no results"
}
@ -86,6 +102,7 @@ export class StaticAutocomplete2Component {
}
);
}
}
}
filter() {
@ -196,18 +213,18 @@ export class StaticAutocomplete2Component {
}
}
// 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 = [];
// }
// }
handleClick(event){
var clickedComponent = event.target;
var inside = false;
do {
if (clickedComponent === this.myElement.nativeElement) {
inside = true;
}
clickedComponent = clickedComponent.parentNode;
} while (clickedComponent);
if(!inside){
this.filtered.splice(0, this.filtered.length);;
}
}
}