Changes in advanced Search page | loading modal in all search pages | changes to autocomplete

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@45439 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2017-01-18 08:11:55 +00:00
parent 77d912b2fc
commit a7680ac098
23 changed files with 243 additions and 80 deletions

View File

@ -4,9 +4,13 @@ import {Component} from '@angular/core';
selector: 'deposit-publications',
template: `
<deposit [compatibility]="'OpenDOAR'" [requestFor]="'Publications'"></deposit>
<!--h3>Or locate data provider in map</h3>
<div class="uk-margin-top">
<i-frame [url]="mapUrl"width="100%" height="600"></i-frame>
</div-->
`
})
export class DepositPublicationsComponent {
public mapUrl ="https://beta.openaire.eu/stats/markers.html";
}

View File

@ -66,6 +66,8 @@ export class AdvancedSearchDataProvidersComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search Publications: Execute search query "+parameters);
this._searchDataProvidersService.advancedSearchDataproviders(parameters, page, size).subscribe(
data => {
@ -78,6 +80,8 @@ export class AdvancedSearchDataProvidersComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -88,6 +92,8 @@ export class AdvancedSearchDataProvidersComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -71,6 +71,8 @@ export class AdvancedSearchDatasetsComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search Datasets: Execute search query "+parameters);
this._searchDatasetsService.advancedSearchDatasets(parameters, page, size).subscribe(
data => {
@ -83,6 +85,8 @@ export class AdvancedSearchDatasetsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -93,6 +97,8 @@ export class AdvancedSearchDatasetsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -50,6 +50,7 @@ export class AdvancedSearchOrganizationsComponent {
ngOnInit() {
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status =errorCodes.LOADING;
this.sub = this.route.queryParams.subscribe(params => {
let page = (params['page']=== undefined)?1:+params['page'];
this.searchUtils.page = ( page <= 0 ) ? 1 : page;
@ -68,6 +69,8 @@ export class AdvancedSearchOrganizationsComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search Organizations: Execute search query "+parameters);
this._searchOrganizationsService.advancedSearchOrganizations(parameters, page, size).subscribe(
data => {
@ -80,6 +83,8 @@ export class AdvancedSearchOrganizationsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -90,6 +95,8 @@ export class AdvancedSearchOrganizationsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -70,6 +70,8 @@ export class AdvancedSearchPeopleComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search People: Execute search query "+parameters);
this._searchPeopleService.advancedSearchPeople(parameters, page, size).subscribe(
data => {
@ -82,6 +84,8 @@ export class AdvancedSearchPeopleComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -92,6 +96,8 @@ export class AdvancedSearchPeopleComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -69,6 +69,8 @@ export class AdvancedSearchProjectsComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search Publications: Execute search query "+parameters);
this._searchProjectsService.advancedSearchProjects(parameters, page, size).subscribe(
data => {
@ -81,6 +83,8 @@ export class AdvancedSearchProjectsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -91,6 +95,8 @@ export class AdvancedSearchProjectsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -70,6 +70,8 @@ export class AdvancedSearchPublicationsComponent {
public getResults(parameters:string, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
console.info("Advanced Search Publications: Execute search query "+parameters);
this._searchPublicationsService.advancedSearchPublications(parameters, page, size).subscribe(
data => {
@ -82,6 +84,8 @@ export class AdvancedSearchPublicationsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -92,6 +96,8 @@ export class AdvancedSearchPublicationsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.NOT_AVAILABLE;
this.searchPage.closeLoading();
}
);
}

View File

@ -82,6 +82,8 @@ export class SearchCompatibleDataprovidersComponent {
private _getResults(parameters:string,refine:boolean, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchDataprovidersService.searchCompatibleDataproviders(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, []).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -94,6 +96,8 @@ export class SearchCompatibleDataprovidersComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -103,6 +107,8 @@ export class SearchCompatibleDataprovidersComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -83,6 +83,8 @@ export class SearchEntityRegistriesComponent {
private _getResults(parameters:string,refine:boolean, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchDataprovidersService.searchEntityRegistries(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, []).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -95,6 +97,8 @@ export class SearchEntityRegistriesComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -104,6 +108,8 @@ export class SearchEntityRegistriesComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -10,55 +10,49 @@ import {Dates} from '../../utils/string-utils.class';
selector: 'advanced-search-form',
template: `
<form class="uk-form">
<div *ngFor="let selectedField of selectedFields; let i = index" class="uk-form-row ">
<table class="uk-text-center">
<tr *ngFor="let selectedField of selectedFields; let i = index" class="uk-form-row ">
<td *ngIf ="i==0 ">Search for:</td>
<button type="button" class="uk-button uk-button-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">
<i class="uk-icon-minus"></i>
</button>
<!--div *ngIf = "i != 0" data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false" class="uk-button-dropdown">
<button class="uk-button">{{selectedField.operatorId}} <i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-bottom" aria-hidden="true" style="top: 30px; left: 0px;" tabindex="">
<ul class="uk-nav uk-nav-dropdown">
<li *ngFor="let op of operators">
<a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>
</li>
</ul>
</div>
</div-->
<select *ngIf = "i != 0" [(ngModel)]="selectedField.operatorId" name="selectOp_{{i}}" >
<td *ngIf = "i != 0" ><select [(ngModel)]="selectedField.operatorId" name="selectOp_{{i}}" >
<option *ngFor="let op of operators" (click)="fieldOperatorChanged(i, op.id, op.id)" [value]="op.id">{{op.id}}</option>
</select>
<!--button class="uk-button uk-button-disabled" type="button">
{{selectedField.name}}
</button-->
<select [(ngModel)]="selectedField.id" name="selectField_{{i}}" >
</select></td>
<td><select [(ngModel)]="selectedField.id" name="selectField_{{i}}" >
<option *ngFor="let id of fieldIds" (click)="fieldIdsChanged(i, id)" [value]="id">{{fieldIdsMap[id].name}}</option>
</select>
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'" type="text" class="form-control" placeholder="Type keywords..."
[(ngModel)]="selectedField.value" name="value[{{i}}]">
<input *ngIf = "fieldIdsMap[selectedField.id].type == 'year'" type="text" class="form-control" placeholder="Type Year..."
[(ngModel)]="selectedField.value" name="value[{{i}}]" (keyup)=validateDate(i,selectedField.value)>
<static-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" [(vocabularyId)] = selectedField.param
[(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [selectedValue]=selectedField.value [showSelected]=true
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
<static-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = [selectedField.id] [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
<entities-autocomplete *ngIf = "fieldIdsMap[selectedField.id].type == 'entity'" [entityType]=selectedField.param [selectedValue]=selectedField.value [showSelected]=true
</select></td>
<td *ngIf = "selectedField.type == 'keyword'" class="uk-width-1-3" ><input type="text" class="form-control" placeholder="Type keywords..."
[(ngModel)]="selectedField.value" name="value[{{i}}]"></td>
<td *ngIf = "selectedField.type == 'year'" class="uk-width-1-3"><input type="text" class="form-control" placeholder="Type Year..."
[(ngModel)]="selectedField.value" name="value[{{i}}]" (keyup)=validateDate(i,selectedField.value)></td>
<td *ngIf = "selectedField.type == 'vocabulary'" class="uk-width-1-3">
<static-autocomplete [(vocabularyId)] = selectedField.param
[(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [selectedValue]=selectedField.value [showSelected]=true
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
</td>
<td *ngIf = "selectedField.type == 'refine'" class="uk-width-1-3">
<static-autocomplete [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = [selectedField.id] [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete></td>
<td *ngIf = "selectedField.type == 'entity'" class="uk-width-1-3"><entities-autocomplete [entityType]=selectedField.param [selectedValue]=selectedField.value [showSelected]=true
[placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name" [multipleSelections]=false
(selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)" >
</entities-autocomplete>
</entities-autocomplete></td>
<div *ngIf = "fieldIdsMap[selectedField.id].type == 'boolean'" class="input-group">
<td *ngIf = "selectedField.type == 'boolean'" class="input-group">
<span class="input-group-addon">
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="true">Yes<br>
</span>
<span class="input-group-addon">
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param value="false">No<br>
</span>
</div>
</div>
</td>
<td *ngIf="selectedFields.length > 1"><button type="button" class="uk-button uk-button-danger" (click)="removeField(i)">
<i class="uk-icon-minus"></i>
</button></td>
<td *ngIf="i == selectedFields.length-1 " ><button type="button" class="uk-button uk-button-success" (click)="addField()">
<i class="uk-icon-plus"></i>
</button></td>
</tr>
</table>
<div class="uk-form-row ">
<!--div data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false" class="uk-button-dropdown">
@ -72,12 +66,12 @@ import {Dates} from '../../utils/string-utils.class';
</div>
</div-->
<select [(ngModel)]="newFieldId" name="selectField" >
<!--select [(ngModel)]="newFieldId" name="selectField" >
<option *ngFor="let id of fieldIds" (click)="newFieldIdsChanged(i, id)" [value]="id">{{fieldIdsMap[id].name}}</option>
</select>
<button type="button" class="uk-button uk-button-success" (click)="addField()">
<i class="uk-icon-plus"></i>
</button>
</button-->
</div>
@ -125,6 +119,7 @@ export class AdvancedSearchFormComponent {
addField() {
console.info("add filter"+this.fieldIds[0]+this.fieldIdsMap[this.fieldIds[0]].name+this.fieldIdsMap[this.fieldIds[0]].type);
this.newFieldId = this.fieldIds[0];
var type = this.fieldIdsMap[this.newFieldId].type;
if(type == "boolean"){
this.selectedFields.push(new AdvancedField(this.newFieldId,this.fieldIdsMap[this.newFieldId].param, this.fieldIdsMap[this.newFieldId].name, type, "true", "and"));
@ -148,16 +143,18 @@ export class AdvancedSearchFormComponent {
this.selectedFields[index].valid = Dates.isValidYear(value);
}
newFieldIdsChanged(index: number,id) {
this.newFieldId = id;
this.newFieldName = this.fieldIdsMap[this.newFieldId].name;
}
fieldIdsChanged(index: number,id) {
console.info('changed: index'+index+" id :"+id);
this.selectedFields[index].id = id;
this.selectedFields[index].name = this.fieldIdsMap[id].name;
this.selectedFields[index].type = this.fieldIdsMap[id].type;
this.selectedFields[index].value = "";
this.selectedFields[index].param = this.fieldIdsMap[id].param;
if(this.fieldIdsMap[id].type == "boolean"){
this.selectedFields[index].value = "true";
}
console.info('changed:' +this.selectedFields[index].name+" "+this.selectedFields[index].type+" "+ this.selectedFields[index].param );
}
valueChanged($event,index:number){
this.selectedFields[index].value = $event.value;

View File

@ -5,6 +5,7 @@ import {Filter, Value,AdvancedField} from '../searchUtils/searchHelperClasses.cl
import {SearchResult} from '../../utils/entities/searchResult';
import {SearchFields} from '../../utils/properties/searchFields';
import {SearchUtilsClass} from './searchUtils.class';
import {ModalLoading} from '../../utils/modal/loading.component';
@Component({
selector: 'advanced-search-page',
@ -46,6 +47,7 @@ import {SearchUtilsClass} from './searchUtils.class';
</div-->
</div>
</div>
<modal-loading [message]= "'Loading results...'"></modal-loading>
`
})
@ -59,6 +61,7 @@ export class AdvancedSearchPageComponent {
@Input() fieldIdsMap;//:{ [key:string]:{ name:string, operator:string, type:string, indexField:string, equalityOperator:string }} ;
@Input() selectedFields:AdvancedField[];
@Input() simpleSearchUrl: string;
@ViewChild (ModalLoading) loading : ModalLoading ;
public baseURLWithParameters:string = '';
@ -177,4 +180,11 @@ export class AdvancedSearchPageComponent {
return parameter+"Op";
}
}
// for loading
public openLoading(){
this.loading.open();
}
public closeLoading(){
this.loading.close();
}
}

View File

@ -45,13 +45,9 @@ export class BrowseEntitiesComponent {
}
public ngOnInit() {
console.log(this.searchFields.HIDDEN_FIELDS);
for(var i=0; i < this.searchFields.HIDDEN_FIELDS.length; i++){
console.log("hidden"+this.searchFields.HIDDEN_FIELDS[i]);
var index = this.refineFields.indexOf(this.searchFields.HIDDEN_FIELDS[i]) ;
if(index > -1){
console.log("remove"+this.searchFields.HIDDEN_FIELDS[i]);
this.refineFields.splice(index,1);
}

View File

@ -7,22 +7,30 @@ import { Filter, Value} from './searchHelperClasses.class';
selector: 'search-filter',
template: `
<div *ngIf="filter.countSelectedValues>0 " class = "uk-accordion " data-uk-accordion="{collapse: true, showfirst: true}">
<h3 class="uk-accordion-title">{{_formatTitle(filter.title,filter.values.length)}}
<div class = "uk-accordion " data-uk-accordion="{collapse: true, showfirst: true}">
<h3 class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
</h3>
<div data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
<div class="uk-accordion-content searchFilterBoxValues ">
<div *ngFor = "let value of filter.values" >
<div *ngFor = "let value of getSelectedValues(filter)" >
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
</div>
<div class="uk-grid-divider uk-margin-remove"></div>
<div *ngFor = "let value of getNotSelectedValues(filter)" >
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
</div>
<!--div *ngFor = "let value of filter.values" >
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
</div>
</div-->
</div>
</div>
</div>
<div *ngIf="filter.countSelectedValues == 0 " class = "uk-accordion " data-uk-accordion="{collapse: true, showfirst: false}">
<!--div *ngIf="filter.countSelectedValues == 0 " class = "uk-accordion " data-uk-accordion="{collapse: true, showfirst: false}">
<h3 class="uk-accordion-title">{{_formatTitle(filter.title,filter.values.length)}}
</h3>
<div data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
@ -34,7 +42,7 @@ import { Filter, Value} from './searchHelperClasses.class';
</div>
</div>
</div>
</div>
</div-->
`
})
@ -44,7 +52,7 @@ export class SearchFilterComponent {
@Input() filter:Filter;
@Input() showResultCount:boolean = true;
public showAll:boolean = false;
public _maxCharacters:number =30;
public _maxCharacters:number =28;
constructor () {
@ -69,14 +77,38 @@ export class SearchFilterComponent {
filterChange(selected:boolean){
if(selected){
this.filter.countSelectedValues++;
this.reorderFilterValues();
// this.reorderFilterValues();
}else{
this.filter.countSelectedValues--;
this.reorderFilterValues();
// this.reorderFilterValues();
}
}
getSelectedValues(filter):any{
var selected = [];
if(filter.countSelectedValues >0){
for (var i=0; i < filter.values.length; i++){
if(filter.values[i].selected){
selected.push(filter.values[i]);
}
}
}
return selected;
}
getNotSelectedValues(filter):any{
var notSselected = [];
if(filter.countSelectedValues >0){
for (var i=0; i < filter.values.length; i++){
if(!filter.values[i].selected){
notSselected.push(filter.values[i]);
}
}
}else {
notSselected = filter.values;
}
return notSselected;
}
reorderFilterValues() {
for(let value of this.filter.values) {
if(value.selected) {

View File

@ -6,6 +6,7 @@ import {SearchResult} from '../../utils/entities/searchResult';
import {SearchFields} from '../../utils/properties/searchFields';
import {SearchUtilsClass} from './searchUtils.class';
import {DOI} from '../../utils/string-utils.class';
import {ModalLoading} from '../../utils/modal/loading.component';
@Component({
selector: 'search-page',
@ -58,6 +59,8 @@ import {DOI} from '../../utils/string-utils.class';
</div>
</div>
<modal-loading [message]= "'Loading results...'"></modal-loading>
`
})
export class SearchPageComponent {
@ -72,6 +75,7 @@ export class SearchPageComponent {
@Input() showResultCount:boolean = true;
@Input() showRefine:boolean = true;
@Input() refineFields = [];
@ViewChild (ModalLoading) loading : ModalLoading ;
public fieldIdsMap;//: { [key:string]:{ name:string, operator:string, type:string, indexField:string, equalityOperator:string }};
private searchFieldsHelper:SearchFields = new SearchFields();
private queryParameters: Map<string, string> = new Map<string,string>();
@ -470,5 +474,12 @@ export class SearchPageComponent {
private quote(params: string):string {
return encodeURIComponent('"'+params+'"');
}
// for loading
public openLoading(){
this.loading.open();
}
public closeLoading(){
this.loading.close();
}
}

View File

@ -218,6 +218,8 @@ public getResultsForDeposit(id:string, type:string, page: number, size: number)
}
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchDataprovidersService.searchDataproviders(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -232,6 +234,7 @@ public getResultsForDeposit(id:string, type:string, page: number, size: number)
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -241,6 +244,7 @@ public getResultsForDeposit(id:string, type:string, page: number, size: number)
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -167,6 +167,8 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
}
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchDatasetsService.searchDatasets(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -180,6 +182,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -189,6 +192,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -81,6 +81,8 @@ export class SearchOrganizationsComponent {
}
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchOrganizationsService.searchOrganizations(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -94,6 +96,7 @@ export class SearchOrganizationsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -103,6 +106,7 @@ export class SearchOrganizationsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -154,6 +154,8 @@ public getResults(keyword:string,refine:boolean, page: number, size: number){
private _getResults(parameters:string,refine:boolean, page: number, size: number){
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this._searchPeopleService.searchPeople(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -166,6 +168,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -175,6 +178,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -84,8 +84,11 @@ export class SearchProjectsComponent {
if(!refine && !this.searchPage){
this.searchPage = new SearchPageComponent(this._location);
}
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchProjectsService.searchProjects(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -100,6 +103,7 @@ export class SearchProjectsComponent {
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -109,6 +113,7 @@ export class SearchProjectsComponent {
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -196,6 +196,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
}
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.LOADING;
this.searchPage.openLoading();
this.subResults = this._searchPublicationsService.searchPublications(parameters,(refine)?this.searchPage.getRefineFieldsQuery():null, page, size, this.searchPage.getFields()).subscribe(
data => {
this.searchUtils.totalResults = data[0];
@ -209,6 +210,7 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
if(this.searchUtils.totalResults == 0 ){
this.searchUtils.status = errorCodes.NONE;
}
this.searchPage.closeLoading();
},
err => {
console.log(err);
@ -218,6 +220,8 @@ private _getResults(parameters:string,refine:boolean, page: number, size: number
// }
var errorCodes:ErrorCodes = new ErrorCodes();
this.searchUtils.status = errorCodes.ERROR;
this.searchPage.closeLoading();
}
);
}

View File

@ -16,17 +16,23 @@ import {EntitiesSearchService} from '../services/entitySearch.service';
template: `
<span class="custom-autocomplete">
<span *ngIf = "showSelected && selectedValue != ''">
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)" > <span >{{truncate(showItem(item),14)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
</span>
</span>
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() >
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span>
<div *ngIf = "keyword != null && keyword.length > 0 " class="uk-dropdown" aria-expanded="true" style="display:block" >
<!--span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" >
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li>
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert="">{{warningMessage}}</span>
<span *ngIf="results > 0" > {{results}} results found:</span>
<span *ngIf="results == 0 && !showLoading" class="uk-alert uk-alert-info" data-uk-alert=""> No results found</span>
</li>
<li *ngFor=" let item of filtered | async">
<a (click)="select(item)">{{showItem(item)}}</a>
<a (click)="select(item)" [title]="showItem(item)">{{truncate(showItem(item),19)}}</a>
</li>
</ul>
@ -66,7 +72,8 @@ export class EntitiesAutocompleteComponent {
@Input() public funderId:string;
@Input() public entityType:string ;
@Input() public depositType:string ;
public results = 0;
public focus:boolean = false;
constructor (private _search:EntitiesSearchService, private myElement: ElementRef) {
@ -81,7 +88,7 @@ export class EntitiesAutocompleteComponent {
.switchMap((term: string) => {
var results = this._search.searchProjectsByFunder(term, (this.funderId == "0"?"":this.funderId));
this.showLoading = false;
// this.numFilteredResults = results.length;
this.results = results.length;
return results;
});
}else if(this.entityType == "organization" && this.depositType ){
@ -90,7 +97,7 @@ export class EntitiesAutocompleteComponent {
.switchMap((term: string) => {
var results = this._search.searchByDepositType(term, this.depositType);
this.showLoading = false;
// this.numFilteredResults = results.length;
this.results = results.length;
return results;
});
@ -102,7 +109,7 @@ export class EntitiesAutocompleteComponent {
.switchMap((term: string) => {
var results = this._search.searchByType(term, this.entityType);
this.showLoading = false;
// this.numFilteredResults = results.length;
this.results = results.length;
return results;
});
@ -134,6 +141,7 @@ export class EntitiesAutocompleteComponent {
this.searchTermStream.next(this.keyword);
// if(this.numFilteredResults ==0){
this.showLoading = true;
this.focus = true;
// }
}
@ -216,6 +224,10 @@ export class EntitiesAutocompleteComponent {
}
}
truncate(str:string, size:number):string{
if(str == null){return "";}
return (str.length > size)?str.substr(0,size)+'...':str;
}
private getSelectedNameFromGivenId(){
if(this.selectedValue && this.selectedValue.length > 0 ){
@ -242,6 +254,7 @@ export class EntitiesAutocompleteComponent {
this.keyword = "";
// this.numFilteredResults = 0;
this.searchTermStream.next(this.keyword);
this.focus=false;
}
}

View File

@ -3,19 +3,25 @@ import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmit
@Component({
selector: 'modal-loading',
template: `
<div class="modal fade" [open]="!isOpen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="">
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" [open]="!isOpen" data-uk-modal="{center:true}" tabindex="-1" role="dialog" >
<div class="uk-modal-dialog" role="">
<div class="modal-content">
<div class="modal-body">
<div >
<h3 class="text-center" >{{message}}</h3>
<div class="uk-modal-spinner"></div>
</div>
</div>
</div>
</div>
</div>
<!--div class="uk-modal uk-open" aria-hidden="false" style="display: block; overflow-y: scroll;">
<div class="uk-modal-dialog" tabindex="">
<div class="uk-modal-spinner"></div>
</div>
</div-->
`,
encapsulation: ViewEncapsulation.None,
})

View File

@ -12,19 +12,24 @@ import {RefineFieldResultsService} from '../services/refineFieldResults.service'
'(document:click)': 'handleClick($event)',
},
template: `
<span class="custom-autocomplete">
<span class="custom-autocomplete uk-width-1-1">
<span *ngIf = "showSelected && selectedValue != ''">
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" > <span >{{showItem(item)}} </span>
<span class="uk-alert-default" data-uk-alert="" *ngFor="let item of selected" [title]="showItem(item)"> <span >{{truncate(showItem(item),14)}} </span>
<span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <i class="uk-icon-remove clickable"></i> </span>
</span>
</span>
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span>
<div *ngIf="filtered.length > 0" class="uk-dropdown" aria-expanded="true" style="display:block" >
<!--span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" >
<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
<li>
<span *ngIf="showLoading" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
<span *ngIf="filtered.length > 0" > {{results}} results found:</span>
<span *ngIf="filtered.length == 0" class="uk-alert uk-alert-info" data-uk-alert=""> No results found</span>
</li>
<li *ngFor=" let item of filtered">
<a (click)="select(item)">{{showItem(item)}}</a>
<a (click)="select(item)" [title]="showItem(item)">{{truncate(showItem(item),19)}}</a>
</li>
</ul>
</div>
@ -59,6 +64,8 @@ export class StaticAutoCompleteComponent {
public showInput = true;
public sub;
public done = false;
public results = 0;
public focus:boolean = false;
constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService, private myElement: ElementRef) {
}
ngOnDestroy(){
@ -70,6 +77,7 @@ export class StaticAutoCompleteComponent {
if(this.list == undefined || this.list.length == 0){
this.showLoading = true;
console.log("getVocabulary id: "+ this.vocabularyId + " for entity: "+ this.entityName);
if(this.vocabularyId){
// this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);
// this.afterListFetchedActions();
@ -127,15 +135,17 @@ export class StaticAutoCompleteComponent {
}
filter() {
this.focus = true;
if(this.done){
this.infoMessage = "";
this.filtered = [];
if(this.keyword == ""){
var cut = 5;
var cut = 10;
if(this.list.length < 5){
cut = this.list.length;
}
this.filtered =this.list.slice(0, cut);
this.results = this.list.length;
this.filtered =this.list.slice(0, cut);
this.tries = 0;
this.warningMessage = "";
// } else if(this.keyword && this.keyword.length < this.keywordlimit){
@ -150,7 +160,12 @@ export class StaticAutoCompleteComponent {
this.filtered = this.list.filter(function(el){
return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
}.bind(this));
var cut = 10;
if(this.filtered .length < 5){
cut = this.list.length;
}
this.results = this.filtered.length;
this.filtered =this.filtered.slice(0, cut);
}
}
}
@ -238,6 +253,10 @@ export class StaticAutoCompleteComponent {
}
}
truncate(str:string, size:number):string{
if(str == null){return "";}
return (str.length > size)?str.substr(0,size)+'...':str;
}
private getSelectedNameFromGivenId(){
if(this.list == null ){
return;
@ -261,7 +280,8 @@ export class StaticAutoCompleteComponent {
clickedComponent = clickedComponent.parentNode;
} while (clickedComponent);
if(!inside){
this.filtered.splice(0, this.filtered.length);;
this.focus =false;
this.filtered.splice(0, this.filtered.length);
}
}