Revision 44262
Added by Argiro Kokogiannaki over 7 years ago
| modules/uoa-services-portal/trunk/portal-2/src/app/utils/autoComplete.component.ts | ||
|---|---|---|
| 1 |
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
|
|
| 2 |
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
|
|
| 3 |
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';
|
|
| 4 |
//Usage example |
|
| 5 |
//<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete> |
|
| 6 |
|
|
| 7 |
@Component({
|
|
| 8 |
selector: 'autocomplete', |
|
| 9 |
styleUrls: ['autoComplete.component.css'], |
|
| 10 |
template: ` |
|
| 11 |
<div class="bs-docs-grid"> |
|
| 12 |
<div class = "row-fluid form-inline auto-complete-box panel panel-default"> |
|
| 13 |
<div class="panel-heading">{{title}}</div>
|
|
| 14 |
<div class="panel-body"> |
|
| 15 |
<span *ngIf = "showSelected"> |
|
| 16 |
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > |
|
| 17 |
<span >{{showItem(item)}} </span>
|
|
| 18 |
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span> |
|
| 19 |
</span> |
|
| 20 |
</span> |
|
| 21 |
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() > |
|
| 22 |
<div class="suggestions" *ngIf="filtered.length > 0"> |
|
| 23 |
<ul class="list-group" > |
|
| 24 |
<li class="list-group-item" *ngFor=" let item of filtered"> |
|
| 25 |
<a (click)="select(item)">{{showItem(item)}}</a>
|
|
| 26 |
</li> |
|
| 27 |
</ul> |
|
| 28 |
</div> |
|
| 29 |
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
|
|
| 30 |
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div> |
|
| 31 |
</div> |
|
| 32 |
</div> |
|
| 33 |
</div> |
|
| 34 |
|
|
| 35 |
` |
|
| 36 |
}) |
|
| 37 |
export class AutocompleteComponent {
|
|
| 38 |
@Input() placeHolderMessage = "Search for entries"; |
|
| 39 |
@Input() title = "Autocomplete"; |
|
| 40 |
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called |
|
| 41 |
@Output() addNew = new EventEmitter(); // when changed a method for filtering will be called |
|
| 42 |
|
|
| 43 |
@Input() public filtered = []; // the entries resulted after filtering function |
|
| 44 |
@Input() public selected = []; // the entries selected from user |
|
| 45 |
@Input() public keywordlimit = 3; // the minimum length of keyword |
|
| 46 |
@Input() public showSelected = true; // the minimum length of keyword |
|
| 47 |
|
|
| 48 |
@Input() public keyword = ''; |
|
| 49 |
@Input() public type = 'search' //search, result, context, project |
|
| 50 |
private warningMessage = ""; |
|
| 51 |
private infoMessage = ""; |
|
| 52 |
|
|
| 53 |
private tries = 0; |
|
| 54 |
|
|
| 55 |
constructor () {
|
|
| 56 |
console.info("Type"+this.type);
|
|
| 57 |
} |
|
| 58 |
filter() {
|
|
| 59 |
this.infoMessage = ""; |
|
| 60 |
this.filtered = []; |
|
| 61 |
if(this.keyword == ""){
|
|
| 62 |
this.tries = 0; |
|
| 63 |
this.warningMessage = ""; |
|
| 64 |
} else if(this.keyword && this.keyword.length < this.keywordlimit){
|
|
| 65 |
this.tries++; |
|
| 66 |
if(this.tries == this.keywordlimit -1 ){
|
|
| 67 |
this.warningMessage = "Type at least " + this.keywordlimit + " characters"; |
|
| 68 |
this.tries = 0; |
|
| 69 |
} |
|
| 70 |
}else{
|
|
| 71 |
this.tries = 0; |
|
| 72 |
this.warningMessage = ""; |
|
| 73 |
this.keywordChange.emit({
|
|
| 74 |
value: this.keyword |
|
| 75 |
}); |
|
| 76 |
|
|
| 77 |
} |
|
| 78 |
} |
|
| 79 |
remove(item:any){
|
|
| 80 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 81 |
if (index > -1) {
|
|
| 82 |
this.selected.splice(index, 1); |
|
| 83 |
} |
|
| 84 |
|
|
| 85 |
} |
|
| 86 |
select(item:any){
|
|
| 87 |
|
|
| 88 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 89 |
if (index > -1) {
|
|
| 90 |
this.keyword = ""; |
|
| 91 |
this.filtered.splice(0, this.filtered.length); |
|
| 92 |
return; |
|
| 93 |
} |
|
| 94 |
else{
|
|
| 95 |
this.selected.push(item); |
|
| 96 |
this.keyword = ""; |
|
| 97 |
this.filtered.splice(0, this.filtered.length); |
|
| 98 |
} |
|
| 99 |
} |
|
| 100 |
private checkIfExists(item:any,list):number{
|
|
| 101 |
console.log("type "+this.type);
|
|
| 102 |
|
|
| 103 |
if(this.type == "search"){
|
|
| 104 |
console.log("Value");
|
|
| 105 |
}else if(this.type == "context"){
|
|
| 106 |
console.log("context");
|
|
| 107 |
|
|
| 108 |
for (var _i = 0; _i < list.length; _i++) {
|
|
| 109 |
let itemInList = list[_i]; |
|
| 110 |
console.log("itemiL "+itemInList.concept.id);
|
|
| 111 |
console.log("item "+item.concept.id);
|
|
| 112 |
|
|
| 113 |
if(item.concept.id == itemInList.concept.id){
|
|
| 114 |
return _i; |
|
| 115 |
} |
|
| 116 |
} |
|
| 117 |
}else if(this.type == "project"){
|
|
| 118 |
console.log("project");
|
|
| 119 |
}else {
|
|
| 120 |
console.log("no----");
|
|
| 121 |
} |
|
| 122 |
return -1; |
|
| 123 |
|
|
| 124 |
} |
|
| 125 |
showItem(item:any):string{
|
|
| 126 |
|
|
| 127 |
if (item.name){ //search
|
|
| 128 |
return item.name; |
|
| 129 |
}else if( item.concept && item.concept.label){ //context
|
|
| 130 |
return item.concept.label; |
|
| 131 |
}else if (item.label){ //simple
|
|
| 132 |
return item.label; |
|
| 133 |
} |
|
| 134 |
|
|
| 135 |
} |
|
| 136 |
|
|
| 137 |
|
|
| 138 |
// handleClick(event){
|
|
| 139 |
// var clickedComponent = event.target; |
|
| 140 |
// var inside = false; |
|
| 141 |
// do {
|
|
| 142 |
// if (clickedComponent === this.elementRef.nativeElement) {
|
|
| 143 |
// inside = true; |
|
| 144 |
// } |
|
| 145 |
// clickedComponent = clickedComponent.parentNode; |
|
| 146 |
// } while (clickedComponent); |
|
| 147 |
// if(!inside){
|
|
| 148 |
// this.filteredList = []; |
|
| 149 |
// } |
|
| 150 |
// } |
|
| 151 |
|
|
| 152 |
} |
|
| modules/uoa-services-portal/trunk/portal-2/src/app/test/test.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, ElementRef} from '@angular/core';
|
| 2 |
import { Subject } from 'rxjs/Subject';
|
|
| 3 |
import {Observable} from 'rxjs/Observable';
|
|
| 4 |
import {OpenaireProjectsService} from '../services/openaireProjects.service';
|
|
| 2 | 5 |
|
| 3 | 6 |
|
| 4 | 7 |
@Component({
|
| ... | ... | |
| 6 | 9 |
template: ` |
| 7 | 10 |
<!--i-frame url="https://google.com" width="30%" height="250"></i-frame--> |
| 8 | 11 |
<div style ="width:30%; height:250px;" > |
| 9 |
<autocomplete [(filtered)] =filtered [(selected)] =selected [showSelected]=false placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)" ></autocomplete>
|
|
| 12 |
<static-autocomplete [(filtered)] =filtered [(selected)] =selected [showSelected]=true placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)" ></static-autocomplete>
|
|
| 10 | 13 |
<div> |
| 11 | 14 |
Selected:: |
| 12 | 15 |
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > |
| 13 | 16 |
<span >{{item.label}} </span>
|
| 14 | 17 |
</span> |
| 18 |
|
|
| 19 |
<div style ="width:30%; height:250px;" > |
|
| 20 |
<dynamic-autocomplete [(filtered)] =filteredObs [(selected)] =selectedObs [showSelected]=true |
|
| 21 |
placeHolderMessage = "Search for Projects" title = "Projects:" [(searchTermStream)] = searchTermStream ></dynamic-autocomplete> |
|
| 22 |
<div> |
|
| 15 | 23 |
` |
| 24 |
//(keywordChange)="keywordChanged($event)" |
|
| 16 | 25 |
}) |
| 17 | 26 |
export class TestComponent {
|
| 27 |
// for auto complete observable: |
|
| 28 |
searchTermStream = new Subject<string>(); |
|
| 29 |
private selectedObs = []; |
|
| 30 |
filteredObs: Observable<{}> = this.searchTermStream
|
|
| 31 |
.debounceTime(300).distinctUntilChanged() |
|
| 32 |
.switchMap((term: string) => this.service(term)); |
|
| 33 |
|
|
| 34 |
service(term) {
|
|
| 35 |
var projects = this._projectService.searchForProjectsObs(term, "this.selectedFunderId"); |
|
| 36 |
console.info("Results: "+ projects);
|
|
| 37 |
for( var i = 0 ; i<projects.length ; i++){
|
|
| 38 |
|
|
| 39 |
} |
|
| 40 |
return projects; |
|
| 41 |
} |
|
| 42 |
constructor(private _projectService: OpenaireProjectsService) {
|
|
| 43 |
// this.elementRef = myElement; |
|
| 44 |
} |
|
| 45 |
|
|
| 18 | 46 |
private filtered = []; |
| 19 | 47 |
private selected = []; |
| 20 | 48 |
keywordChanged($event) {
|
| modules/uoa-services-portal/trunk/portal-2/src/app/utils/dynamicAutoComplete.component.ts | ||
|---|---|---|
| 1 |
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
|
|
| 2 |
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
|
|
| 3 |
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';
|
|
| 4 |
import {Observable} from 'rxjs/Observable';
|
|
| 5 |
import { Subject } from 'rxjs/Subject';
|
|
| 6 |
import {OpenaireProjectsService} from '../services/openaireProjects.service';
|
|
| 7 |
|
|
| 8 |
//Usage example |
|
| 9 |
//<dynamic-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></dynamic-autocomplete> |
|
| 10 |
|
|
| 11 |
@Component({
|
|
| 12 |
selector: 'dynamic-autocomplete', |
|
| 13 |
// styles: [` |
|
| 14 |
// .auto-complete-box{ }
|
|
| 15 |
// .auto-complete-choice .remove {
|
|
| 16 |
// cursor: pointer; |
|
| 17 |
// } |
|
| 18 |
// .auto-complete-choice{
|
|
| 19 |
// background: grey none repeat scroll 0 0; |
|
| 20 |
// border-color: grey; |
|
| 21 |
// border-radius: 5px; |
|
| 22 |
// border-style: solid; |
|
| 23 |
// color: white; |
|
| 24 |
// margin: 3px; |
|
| 25 |
// padding: 1px; |
|
| 26 |
// } |
|
| 27 |
// .auto-complete-input { border-radius:0; border-color: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset; }
|
|
| 28 |
// .form-control. auto-complete-input {box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset;}
|
|
| 29 |
// .auto-complete-box .suggestions.list-group-item {
|
|
| 30 |
// padding: 5px 10px; |
|
| 31 |
// } |
|
| 32 |
// `], |
|
| 33 |
styleUrls: ['autoComplete.component.css'], |
|
| 34 |
template: ` |
|
| 35 |
<div class="bs-docs-grid"> |
|
| 36 |
<div class = "row-fluid form-inline auto-complete-box panel panel-default"> |
|
| 37 |
<div class="panel-heading">{{title}}</div>
|
|
| 38 |
<div class="panel-body"> |
|
| 39 |
<span *ngIf = "showSelected"> |
|
| 40 |
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > |
|
| 41 |
<span >{{showItem(item)}} </span>
|
|
| 42 |
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span> |
|
| 43 |
</span> |
|
| 44 |
</span> |
|
| 45 |
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() > |
|
| 46 |
<div class="suggestions" *ngIf="filtered.length > 0"> |
|
| 47 |
<ul class="list-group" > |
|
| 48 |
<li class="list-group-item" *ngFor=" let item of filtered | async"> |
|
| 49 |
<a (click)="select(item)">{{showItem(item)}}</a>
|
|
| 50 |
</li> |
|
| 51 |
</ul> |
|
| 52 |
</div> |
|
| 53 |
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
|
|
| 54 |
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div> |
|
| 55 |
</div> |
|
| 56 |
</div> |
|
| 57 |
</div> |
|
| 58 |
|
|
| 59 |
` |
|
| 60 |
}) |
|
| 61 |
export class DynamicAutocompleteComponent {
|
|
| 62 |
@Input() placeHolderMessage = "Search for entries"; |
|
| 63 |
@Input() title = "Autocomplete"; |
|
| 64 |
@Input() public selected = []; // the entries selected from user |
|
| 65 |
@Input() public keywordlimit = 3; // the minimum length of keyword |
|
| 66 |
@Input() public showSelected = true; // the minimum length of keyword |
|
| 67 |
@Input() public keyword = ''; |
|
| 68 |
@Input() public type = 'search' //search, result, context, project |
|
| 69 |
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called |
|
| 70 |
@Output() addNew = new EventEmitter(); // when changed a method for filtering will be called |
|
| 71 |
// @Input() public selectedFunderId = ""; |
|
| 72 |
@Input() searchTermStream ; //= new Subject<string>(); |
|
| 73 |
@Input() filtered: Observable<{}> ;
|
|
| 74 |
// = this.searchTermStream |
|
| 75 |
// .debounceTime(300).distinctUntilChanged() |
|
| 76 |
// .switchMap((term: string) => this.service(term));// this._projectService.searchForProjectsObs(term, this.selectedFunderId)); |
|
| 77 |
private warningMessage = ""; |
|
| 78 |
private infoMessage = ""; |
|
| 79 |
|
|
| 80 |
private tries = 0; |
|
| 81 |
|
|
| 82 |
constructor(private _projectService: OpenaireProjectsService,myElement: ElementRef) {
|
|
| 83 |
// this.elementRef = myElement; |
|
| 84 |
} |
|
| 85 |
|
|
| 86 |
// service(term) {
|
|
| 87 |
// var projects = this._projectService.searchForProjectsObs(term, this.selectedFunderId); |
|
| 88 |
// console.info("Results: "+ projects);
|
|
| 89 |
// for( var i = 0 ; i<projects.length ; i++){
|
|
| 90 |
// |
|
| 91 |
// } |
|
| 92 |
// return projects; |
|
| 93 |
// } |
|
| 94 |
search() {
|
|
| 95 |
console.info("heeere "+this.keyword );
|
|
| 96 |
this.infoMessage = ""; |
|
| 97 |
// this.filtered = []; |
|
| 98 |
if(this.keyword == ""){
|
|
| 99 |
this.tries = 0; |
|
| 100 |
this.warningMessage = ""; |
|
| 101 |
} else if(this.keyword && this.keyword.length < this.keywordlimit){
|
|
| 102 |
this.tries++; |
|
| 103 |
if(this.tries == this.keywordlimit -1 ){
|
|
| 104 |
this.warningMessage = "Type at least " + this.keywordlimit + " characters"; |
|
| 105 |
this.tries = 0; |
|
| 106 |
} |
|
| 107 |
}else{
|
|
| 108 |
console.info("doo the search "+this.keyword );
|
|
| 109 |
|
|
| 110 |
this.tries = 0; |
|
| 111 |
this.warningMessage = ""; |
|
| 112 |
this.searchTermStream.next(this.keyword); |
|
| 113 |
|
|
| 114 |
} |
|
| 115 |
|
|
| 116 |
} |
|
| 117 |
|
|
| 118 |
remove(item:any){
|
|
| 119 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 120 |
if (index > -1) {
|
|
| 121 |
this.selected.splice(index, 1); |
|
| 122 |
} |
|
| 123 |
|
|
| 124 |
} |
|
| 125 |
select(item:any){
|
|
| 126 |
|
|
| 127 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 128 |
if (index > -1) {
|
|
| 129 |
this.keyword = ""; |
|
| 130 |
// this.filtered.splice(0, this.filtered.length); |
|
| 131 |
return; |
|
| 132 |
} |
|
| 133 |
else{
|
|
| 134 |
this.selected.push(item); |
|
| 135 |
this.keyword = ""; |
|
| 136 |
// this.filtered.splice(0, this.filtered.length); |
|
| 137 |
} |
|
| 138 |
} |
|
| 139 |
private checkIfExists(item:any,list):number{
|
|
| 140 |
console.log("type "+this.type);
|
|
| 141 |
|
|
| 142 |
if(this.type == "search"){
|
|
| 143 |
console.log("Value");
|
|
| 144 |
}else if(this.type == "context"){
|
|
| 145 |
console.log("context");
|
|
| 146 |
|
|
| 147 |
for (var _i = 0; _i < list.length; _i++) {
|
|
| 148 |
let itemInList = list[_i]; |
|
| 149 |
console.log("itemiL "+itemInList.concept.id);
|
|
| 150 |
console.log("item "+item.concept.id);
|
|
| 151 |
|
|
| 152 |
if(item.concept.id == itemInList.concept.id){
|
|
| 153 |
return _i; |
|
| 154 |
} |
|
| 155 |
} |
|
| 156 |
}else if(this.type == "project"){
|
|
| 157 |
console.log("project");
|
|
| 158 |
}else {
|
|
| 159 |
console.log("no----");
|
|
| 160 |
} |
|
| 161 |
return -1; |
|
| 162 |
|
|
| 163 |
} |
|
| 164 |
showItem(item:any):string{
|
|
| 165 |
|
|
| 166 |
if (item.name){ //search
|
|
| 167 |
return item.name; |
|
| 168 |
}else if( item.concept && item.concept.label){ //context
|
|
| 169 |
return item.concept.label; |
|
| 170 |
}else if (item.label){ //simple
|
|
| 171 |
return item.label; |
|
| 172 |
} |
|
| 173 |
|
|
| 174 |
} |
|
| 175 |
|
|
| 176 |
|
|
| 177 |
// handleClick(event){
|
|
| 178 |
// var clickedComponent = event.target; |
|
| 179 |
// var inside = false; |
|
| 180 |
// do {
|
|
| 181 |
// if (clickedComponent === this.elementRef.nativeElement) {
|
|
| 182 |
// inside = true; |
|
| 183 |
// } |
|
| 184 |
// clickedComponent = clickedComponent.parentNode; |
|
| 185 |
// } while (clickedComponent); |
|
| 186 |
// if(!inside){
|
|
| 187 |
// this.filteredList = []; |
|
| 188 |
// } |
|
| 189 |
// } |
|
| 190 |
|
|
| 191 |
} |
|
| modules/uoa-services-portal/trunk/portal-2/src/app/utils/properties/openaireProperties.ts | ||
|---|---|---|
| 21 | 21 |
private static claimsAPIURL = "http://scoobydoo.di.uoa.gr:8181/dnet-openaire-connector-service-1.0.0-SNAPSHOT/rest/claimsService/"; |
| 22 | 22 |
|
| 23 | 23 |
|
| 24 |
// private static searchAPIURL = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
|
|
| 24 |
private static searchAPIURL = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/"; |
|
| 25 | 25 |
//"http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/"; |
| 26 | 26 |
// private searchAPIURL = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2.0/api/"; |
| 27 |
private static searchAPIURL = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/"; |
|
| 27 |
// private static searchAPIURL = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
|
|
| 28 | 28 |
|
| 29 | 29 |
//private static searchServiveURL = "http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/"; |
| 30 | 30 |
private static searchServiveURL = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT/"; |
| modules/uoa-services-portal/trunk/portal-2/src/app/utils/staticAutoComplete.component.ts | ||
|---|---|---|
| 1 |
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
|
|
| 2 |
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
|
|
| 3 |
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';
|
|
| 4 |
//Usage example |
|
| 5 |
//<static-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></static-autocomplete> |
|
| 6 |
|
|
| 7 |
@Component({
|
|
| 8 |
selector: 'static-autocomplete', |
|
| 9 |
styleUrls: ['autoComplete.component.css'], |
|
| 10 |
template: ` |
|
| 11 |
<div class="bs-docs-grid"> |
|
| 12 |
<div class = "row-fluid form-inline auto-complete-box panel panel-default"> |
|
| 13 |
<div class="panel-heading">{{title}}</div>
|
|
| 14 |
<div class="panel-body"> |
|
| 15 |
<span *ngIf = "showSelected"> |
|
| 16 |
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > |
|
| 17 |
<span >{{showItem(item)}} </span>
|
|
| 18 |
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span> |
|
| 19 |
</span> |
|
| 20 |
</span> |
|
| 21 |
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() > |
|
| 22 |
<div class="suggestions" *ngIf="filtered.length > 0"> |
|
| 23 |
<ul class="list-group" > |
|
| 24 |
<li class="list-group-item" *ngFor=" let item of filtered"> |
|
| 25 |
<a (click)="select(item)">{{showItem(item)}}</a>
|
|
| 26 |
</li> |
|
| 27 |
</ul> |
|
| 28 |
</div> |
|
| 29 |
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
|
|
| 30 |
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div> |
|
| 31 |
</div> |
|
| 32 |
</div> |
|
| 33 |
</div> |
|
| 34 |
|
|
| 35 |
` |
|
| 36 |
}) |
|
| 37 |
export class StaticAutocompleteComponent {
|
|
| 38 |
@Input() placeHolderMessage = "Search for entries"; |
|
| 39 |
@Input() title = "Autocomplete"; |
|
| 40 |
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called |
|
| 41 |
@Output() addNew = new EventEmitter(); // when changed a method for filtering will be called |
|
| 42 |
|
|
| 43 |
@Input() public filtered = []; // the entries resulted after filtering function |
|
| 44 |
@Input() public selected = []; // the entries selected from user |
|
| 45 |
@Input() public keywordlimit = 3; // the minimum length of keyword |
|
| 46 |
@Input() public showSelected = true; // the minimum length of keyword |
|
| 47 |
|
|
| 48 |
@Input() public keyword = ''; |
|
| 49 |
@Input() public type = 'search' //search, result, context, project |
|
| 50 |
private warningMessage = ""; |
|
| 51 |
private infoMessage = ""; |
|
| 52 |
|
|
| 53 |
private tries = 0; |
|
| 54 |
|
|
| 55 |
constructor () {
|
|
| 56 |
console.info("Type"+this.type);
|
|
| 57 |
} |
|
| 58 |
filter() {
|
|
| 59 |
this.infoMessage = ""; |
|
| 60 |
this.filtered = []; |
|
| 61 |
if(this.keyword == ""){
|
|
| 62 |
this.tries = 0; |
|
| 63 |
this.warningMessage = ""; |
|
| 64 |
} else if(this.keyword && this.keyword.length < this.keywordlimit){
|
|
| 65 |
this.tries++; |
|
| 66 |
if(this.tries == this.keywordlimit -1 ){
|
|
| 67 |
this.warningMessage = "Type at least " + this.keywordlimit + " characters"; |
|
| 68 |
this.tries = 0; |
|
| 69 |
} |
|
| 70 |
}else{
|
|
| 71 |
this.tries = 0; |
|
| 72 |
this.warningMessage = ""; |
|
| 73 |
this.keywordChange.emit({
|
|
| 74 |
value: this.keyword |
|
| 75 |
}); |
|
| 76 |
|
|
| 77 |
} |
|
| 78 |
} |
|
| 79 |
remove(item:any){
|
|
| 80 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 81 |
if (index > -1) {
|
|
| 82 |
this.selected.splice(index, 1); |
|
| 83 |
} |
|
| 84 |
|
|
| 85 |
} |
|
| 86 |
select(item:any){
|
|
| 87 |
|
|
| 88 |
var index:number =this.checkIfExists(item,this.selected); |
|
| 89 |
if (index > -1) {
|
|
| 90 |
this.keyword = ""; |
|
| 91 |
this.filtered.splice(0, this.filtered.length); |
|
| 92 |
return; |
|
| 93 |
} |
|
| 94 |
else{
|
|
| 95 |
this.selected.push(item); |
|
| 96 |
this.keyword = ""; |
|
| 97 |
this.filtered.splice(0, this.filtered.length); |
|
| 98 |
} |
|
| 99 |
} |
|
| 100 |
private checkIfExists(item:any,list):number{
|
|
| 101 |
|
|
| 102 |
if(item.concept && item.concept.id ){
|
|
| 103 |
console.log("context");
|
|
| 104 |
|
|
| 105 |
for (var _i = 0; _i < list.length; _i++) {
|
|
| 106 |
let itemInList = list[_i]; |
|
| 107 |
if(item.concept.id == itemInList.concept.id){
|
|
| 108 |
return _i; |
|
| 109 |
} |
|
| 110 |
} |
|
| 111 |
}else if(item.id){
|
|
| 112 |
for (var _i = 0; _i < list.length; _i++) {
|
|
| 113 |
let itemInList = list[_i]; |
|
| 114 |
if(item.id == itemInList.id){
|
|
| 115 |
return _i; |
|
| 116 |
} |
|
| 117 |
} |
|
| 118 |
} |
|
| 119 |
return -1; |
|
| 120 |
|
|
| 121 |
} |
|
| 122 |
showItem(item:any):string{
|
|
| 123 |
|
|
| 124 |
if (item.name){ //search
|
|
| 125 |
return item.name; |
|
| 126 |
}else if( item.concept && item.concept.label){ //context
|
|
| 127 |
return item.concept.label; |
|
| 128 |
}else if (item.label){ //simple
|
|
| 129 |
return item.label; |
|
| 130 |
} |
|
| 131 |
|
|
| 132 |
} |
|
| 133 |
|
|
| 134 |
|
|
| 135 |
// handleClick(event){
|
|
| 136 |
// var clickedComponent = event.target; |
|
| 137 |
// var inside = false; |
|
| 138 |
// do {
|
|
| 139 |
// if (clickedComponent === this.elementRef.nativeElement) {
|
|
| 140 |
// inside = true; |
|
| 141 |
// } |
|
| 142 |
// clickedComponent = clickedComponent.parentNode; |
|
| 143 |
// } while (clickedComponent); |
|
| 144 |
// if(!inside){
|
|
| 145 |
// this.filteredList = []; |
|
| 146 |
// } |
|
| 147 |
// } |
|
| 148 |
|
|
| 149 |
} |
|
| modules/uoa-services-portal/trunk/portal-2/src/app/utils/utils.module.ts | ||
|---|---|---|
| 8 | 8 |
import {ProjectTitleFormatter} from './projectTitleFormatter.component';
|
| 9 | 9 |
import {PublicationTitleFormatter} from './publicationTitleFormatter.component';
|
| 10 | 10 |
import {PagingFormatter} from './pagingFormatter.component';
|
| 11 |
import {AutocompleteComponent} from './autoComplete.component';
|
|
| 12 |
|
|
| 11 |
import {StaticAutocompleteComponent} from './staticAutoComplete.component';
|
|
| 12 |
import {DynamicAutocompleteComponent} from './dynamicAutoComplete.component';
|
|
| 13 | 13 |
import {ShowDataProvidersComponent} from './showDataProviders.component';
|
| 14 | 14 |
import {ExportCSVComponent} from './exportCSV.component';
|
| 15 | 15 |
import {IFrameComponent} from './iframe.component';
|
| ... | ... | |
| 26 | 26 |
ProjectTitleFormatter, |
| 27 | 27 |
PublicationTitleFormatter, |
| 28 | 28 |
PagingFormatter, |
| 29 |
AutocompleteComponent, |
|
| 29 |
StaticAutocompleteComponent, |
|
| 30 |
DynamicAutocompleteComponent, |
|
| 30 | 31 |
ShowDataProvidersComponent, |
| 31 | 32 |
ExportCSVComponent, |
| 32 | 33 |
IFrameComponent, |
| 33 |
AutocompleteComponent |
|
| 34 | 34 |
|
| 35 | 35 |
], |
| 36 | 36 |
exports: [ |
| ... | ... | |
| 39 | 39 |
PublicationTitleFormatter, |
| 40 | 40 |
PagingFormatter, |
| 41 | 41 |
AlertModal, ModalLoading, |
| 42 |
AutocompleteComponent, |
|
| 42 |
StaticAutocompleteComponent, |
|
| 43 |
DynamicAutocompleteComponent, |
|
| 43 | 44 |
ShowDataProvidersComponent, |
| 44 | 45 |
ExportCSVComponent, |
| 45 | 46 |
IFrameComponent, |
| 46 |
AutocompleteComponent |
|
| 47 | 47 |
|
| 48 | 48 |
] |
| 49 | 49 |
}) |
| modules/uoa-services-portal/trunk/portal-2/src/app/services/searchDatasets.service.ts | ||
|---|---|---|
| 3 | 3 |
import {Observable} from 'rxjs/Observable';
|
| 4 | 4 |
import {OpenaireProperties} from '../utils/properties/openaireProperties';
|
| 5 | 5 |
import {SearchResult} from '../utils/entities/searchResult';
|
| 6 |
import {RefineResultsUtils} from './servicesUtils/refineResults.class';
|
|
| 6 | 7 |
|
| 7 | 8 |
@Injectable() |
| 8 | 9 |
export class SearchDatasetsService {
|
| ... | ... | |
| 10 | 11 |
|
| 11 | 12 |
constructor(private http: Http) {}
|
| 12 | 13 |
|
| 13 |
searchDatasets (params: string, page: number, size: number, flag: string):any {
|
|
| 14 |
searchDatasets (params: string, page: number, size: number, flag: string, refineFields:string[] ):any {
|
|
| 14 | 15 |
|
| 15 | 16 |
let link, url; |
| 16 | 17 |
|
| ... | ... | |
| 35 | 36 |
.map(res => <any> res.json()) |
| 36 | 37 |
.do(res => console.info(res)) |
| 37 | 38 |
//.map(res => []); |
| 38 |
.map(res => [res['meta'].total, this.parseResults(res['results'])]) |
|
| 39 |
.map(res => [res['meta'].total, this.parseResults(res['results']),RefineResultsUtils.parse(res['refineResults'],refineFields)])
|
|
| 39 | 40 |
; |
| 40 | 41 |
} |
| 41 | 42 |
|
| modules/uoa-services-portal/trunk/portal-2/src/app/services/services.module.ts | ||
|---|---|---|
| 2 | 2 |
import { CommonModule } from '@angular/common';
|
| 3 | 3 |
import { FormsModule } from '@angular/forms';
|
| 4 | 4 |
|
| 5 |
import {RefineResultsUtils} from './servicesUtils/refineResults.class';
|
|
| 5 | 6 |
|
| 6 | 7 |
//Services |
| 7 | 8 |
import { ContextsService} from './contexts.service';
|
| modules/uoa-services-portal/trunk/portal-2/src/app/services/searchProjects.service.ts | ||
|---|---|---|
| 3 | 3 |
import {Observable} from 'rxjs/Observable';
|
| 4 | 4 |
import {OpenaireProperties} from '../utils/properties/openaireProperties';
|
| 5 | 5 |
import {SearchResult} from '../utils/entities/searchResult';
|
| 6 |
// import {RefineParsingUtils} from './services-utils/refineResults.class';
|
|
| 6 |
import {RefineResultsUtils} from './servicesUtils/refineResults.class';
|
|
| 7 | 7 |
|
| 8 | 8 |
@Injectable() |
| 9 | 9 |
export class SearchProjectsService {
|
| ... | ... | |
| 11 | 11 |
|
| 12 | 12 |
constructor(private http: Http) {}
|
| 13 | 13 |
|
| 14 |
searchProjects (params: string, page: number, size: number):any {
|
|
| 14 |
searchProjects (params: string, page: number, size: number, refineFields:string[] ):any {
|
|
| 15 | 15 |
|
| 16 | 16 |
console.info("In searchProjects");
|
| 17 | 17 |
|
| ... | ... | |
| 19 | 19 |
|
| 20 | 20 |
let url = link+"?"; |
| 21 | 21 |
if(params != '') {
|
| 22 |
url += "q="+params+"&page="+page+"&size="+size;
|
|
| 22 |
url += params+"&page="+page+"&size="+size; |
|
| 23 | 23 |
} else {
|
| 24 | 24 |
url += "page="+page+"&size="+size; |
| 25 | 25 |
} |
| ... | ... | |
| 27 | 27 |
return this.http.get(url) |
| 28 | 28 |
.map(res => <any> res.json()) |
| 29 | 29 |
//.do(res => console.info(res)) |
| 30 |
.map(res => [res['meta'].total, this.parseResults(res['results'])]) |
|
| 31 |
; |
|
| 30 |
.map(res => [res['meta'].total, this.parseResults(res['results']),RefineResultsUtils.parse(res['refineResults'],refineFields)]); |
|
| 32 | 31 |
} |
| 33 | 32 |
|
| 34 | 33 |
|
| modules/uoa-services-portal/trunk/portal-2/src/app/services/servicesUtils/refineResults.class.ts | ||
|---|---|---|
| 1 | 1 |
|
| 2 |
import { Filter, Value} from '../../searchPages/searchUtils/searchHelperClasses.class';
|
|
| 3 |
import { SearchFields} from '../../utils/properties/searchFields';
|
|
| 2 | 4 |
|
| 3 | 5 |
|
| 4 |
class RefineParsingUtils {
|
|
| 6 |
export class RefineResultsUtils {
|
|
| 5 | 7 |
|
| 6 | 8 |
|
| 7 |
public static parse (data) {
|
|
| 8 |
// let results: SearchResult[] = []; |
|
| 9 |
// |
|
| 10 |
// let length = Array.isArray(data) ? data.length : 1; |
|
| 11 |
// |
|
| 12 |
// for(let i=0; i<length; i++) {
|
|
| 13 |
// let resData = length > 1 ? data[i]['result']['metadata']['oaf:entity']['oaf:project'] : data['result']['metadata']['oaf:entity']['oaf:project']; |
|
| 14 |
// |
|
| 15 |
// var result: SearchResult = new SearchResult(); |
|
| 16 |
} |
|
| 9 |
public static parse (data, fields:string[]):Filter[] {
|
|
| 10 |
// var data = this.json.refineReuslts; |
|
| 11 |
var searchFields:SearchFields = new SearchFields(); |
|
| 12 |
var filters:Filter[] = []; |
|
| 13 |
for(let j=0; j<fields.length; j++) {
|
|
| 14 |
|
|
| 15 |
var filter:Filter = new Filter(); |
|
| 16 |
filter.title = searchFields.FIELDS_NAMES[fields[j]]; |
|
| 17 |
filter.filterId = fields[j]; |
|
| 18 |
filter.originalFilterId = fields[j]; |
|
| 19 |
let field = data[fields[j]]; |
|
| 20 |
for(let i=0; i<field.length; i++) {
|
|
| 21 |
var value:Value = new Value(); |
|
| 22 |
value.name = field[i].name; |
|
| 23 |
value.number = field[i].count; |
|
| 24 |
value.id = field[i].id; |
|
| 25 |
filter.values.push(value); |
|
| 26 |
|
|
| 27 |
} |
|
| 28 |
filters.push(filter); |
|
| 29 |
} |
|
| 30 |
return filters; |
|
| 31 |
} |
|
| 32 |
|
|
| 17 | 33 |
} |
| modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/claim-utils/claimContext.component.ts | ||
|---|---|---|
| 37 | 37 |
|
| 38 | 38 |
|
| 39 | 39 |
</div> |
| 40 |
<autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter(query)" type="context"></autocomplete>
|
|
| 40 |
<static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter(query)" type="context"></static-autocomplete>
|
|
| 41 | 41 |
</div> |
| 42 | 42 |
<div class="panel-body" *ngIf=" inline && showComponent "> |
| 43 | 43 |
<div class=" form-horizontal"> |
| ... | ... | |
| 67 | 67 |
<input id="community" type="text" class="validate filter-input input-sm form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() > |
| 68 | 68 |
</div--> |
| 69 | 69 |
</div> |
| 70 |
<autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></autocomplete>
|
|
| 70 |
<static-autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></static-autocomplete>
|
|
| 71 | 71 |
</div> |
| 72 | 72 |
<!--div class="suggestions" *ngIf="filteredList.length > 0"> |
| 73 | 73 |
<ul class="list-group" > |
| ... | ... | |
| 200 | 200 |
if (this.query !== ""){
|
| 201 | 201 |
var event = {value: ""};
|
| 202 | 202 |
event.value = this.query; |
| 203 |
this.filter(event);
|
|
| 203 |
this.filter(event); |
|
| 204 | 204 |
} |
| 205 | 205 |
|
| 206 | 206 |
}, |
| modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts | ||
|---|---|---|
| 122 | 122 |
|
| 123 | 123 |
} |
| 124 | 124 |
private searchOpenaire (term: string, size : number, page : number) {
|
| 125 |
this._searchDatasetsService.searchDatasets(term, page, size, "claim").subscribe( |
|
| 125 |
this._searchDatasetsService.searchDatasets(term, page, size, "claim", []).subscribe(
|
|
| 126 | 126 |
data => {
|
| 127 | 127 |
if(data != null) {
|
| 128 | 128 |
this.openairePage=page; |
| modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/claim-utils/claimProject.component.ts | ||
|---|---|---|
| 84 | 84 |
|
| 85 | 85 |
</div> |
| 86 | 86 |
<modal-loading [message]= "'Loading...'"></modal-loading> |
| 87 |
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
|
|
| 88 |
<div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>
|
|
| 87 |
<!--div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
|
|
| 88 |
<div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div-->
|
|
| 89 | 89 |
` |
| 90 | 90 |
|
| 91 | 91 |
}) |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/find/search.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
|
| 2 | 2 |
import {Observable} from 'rxjs/Observable';
|
| 3 | 3 |
import {ActivatedRoute, Router} from '@angular/router';
|
| 4 |
import {Location} from '@angular/common';
|
|
| 4 | 5 |
|
| 5 | 6 |
import { SearchPublicationsComponent } from '../searchPublications.component';
|
| 6 | 7 |
import { SearchDataprovidersComponent } from '../searchDataproviders.component';
|
| ... | ... | |
| 132 | 133 |
private _searchDatasetsService: SearchDatasetsService, |
| 133 | 134 |
private _searchOrganizationsService: SearchOrganizationsService, |
| 134 | 135 |
private _searchPeopleService: SearchPeopleService, |
| 135 |
private _refineResultsService: RefineResultsService) {
|
|
| 136 |
private _refineResultsService: RefineResultsService, private location: Location ) {
|
|
| 136 | 137 |
this.searchPublicationsComponent = new SearchPublicationsComponent(this.route, this._searchPublicationsService); |
| 137 | 138 |
this.searchDataProvidersComponent = new SearchDataprovidersComponent(this.route,this._searchDataprovidersService); |
| 138 |
this.searchProjectsComponent = new SearchProjectsComponent(this.route, this._searchProjectsService,_refineResultsService);
|
|
| 139 |
this.searchProjectsComponent = new SearchProjectsComponent(this.route, this._searchProjectsService); |
|
| 139 | 140 |
this.searchDatasetsComponent = new SearchDatasetsComponent(this.route, this._searchDatasetsService,_refineResultsService); |
| 140 | 141 |
this.searchOrganizationsComponent = new SearchOrganizationsComponent(this.route, this._searchOrganizationsService,_refineResultsService); |
| 141 | 142 |
this.searchPeopleComponent = new SearchPeopleComponent(this.route, this._searchPeopleService); |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchPeople.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild} from '@angular/core';
|
| 2 | 2 |
import { ActivatedRoute} from '@angular/router';
|
| 3 |
import {Location} from '@angular/common';
|
|
| 3 | 4 |
|
| 4 | 5 |
import { Filter, Value} from './searchUtils/searchHelperClasses.class';
|
| 5 | 6 |
|
| 6 | 7 |
import {SearchPeopleService} from '../services/searchPeople.service';
|
| 7 | 8 |
import {SearchResult} from '../utils/entities/searchResult';
|
| 8 | 9 |
import {OpenaireProperties, ErrorCodes} from '../utils/properties/openaireProperties';
|
| 9 |
|
|
| 10 |
import {SearchFields} from '../utils/properties/searchFields';
|
|
| 11 |
import {SearchPageComponent } from './searchUtils/searchPage.component';
|
|
| 10 | 12 |
@Component({
|
| 11 | 13 |
selector: 'search-people', |
| 12 | 14 |
template: ` |
| ... | ... | |
| 29 | 31 |
private page :number = 1; |
| 30 | 32 |
private size :number = 10; |
| 31 | 33 |
private sub: any; |
| 34 |
private _location:Location; |
|
| 35 |
private refineFields = []; |
|
| 36 |
private searchFields:SearchFields = new SearchFields(); |
|
| 32 | 37 |
|
| 38 |
@ViewChild (SearchPageComponent) searchPage : SearchPageComponent ; |
|
| 39 |
|
|
| 33 | 40 |
constructor (private route: ActivatedRoute, private _searchPeopleService: SearchPeopleService ) {
|
| 34 | 41 |
//this.results =[]; |
| 35 | 42 |
//this.filters =[]; |
| 36 | 43 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 37 | 44 |
this.status =errorCodes.LOADING; |
| 38 | 45 |
this.baseUrl = OpenaireProperties.getLinkToSearchPeople(); |
| 46 |
//get refine field filters from url parameters |
|
| 47 |
if(!this.searchPage){
|
|
| 48 |
this.searchPage = new SearchPageComponent(this._location); |
|
| 49 |
} |
|
| 39 | 50 |
} |
| 40 | 51 |
|
| 41 | 52 |
private ngOnInit() {
|
| 53 |
this.searchPage.refineFields = this.refineFields; //TODO make it work as a directive |
|
| 42 | 54 |
this.sub = this.route.queryParams.subscribe(params => {
|
| 43 | 55 |
this.keyword = (params['keyword']?params['keyword']:''); |
| 44 | 56 |
this.page = (params['page']=== undefined)?1:+params['page']; |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchDataproviders.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild} from '@angular/core';
|
| 2 | 2 |
import { ActivatedRoute} from '@angular/router';
|
| 3 |
import {Location} from '@angular/common';
|
|
| 3 | 4 |
|
| 4 | 5 |
import { Filter, Value} from './searchUtils/searchHelperClasses.class';
|
| 5 | 6 |
|
| ... | ... | |
| 7 | 8 |
import {SearchResult} from '../utils/entities/searchResult';
|
| 8 | 9 |
import {OpenaireProperties, ErrorCodes} from '../utils/properties/openaireProperties';
|
| 9 | 10 |
import {SearchFields} from '../utils/properties/searchFields';
|
| 10 |
|
|
| 11 |
import {SearchPageComponent } from './searchUtils/searchPage.component';
|
|
| 11 | 12 |
@Component({
|
| 12 | 13 |
selector: 'search-dataproviders', |
| 13 | 14 |
template: ` |
| ... | ... | |
| 30 | 31 |
private page :number = 1; |
| 31 | 32 |
private size :number = 10; |
| 32 | 33 |
private sub: any; |
| 34 |
private _location:Location; |
|
| 35 |
private refineFields = []; |
|
| 36 |
private searchFields:SearchFields = new SearchFields(); |
|
| 37 |
@ViewChild (SearchPageComponent) searchPage : SearchPageComponent ; |
|
| 33 | 38 |
|
| 34 | 39 |
constructor (private route: ActivatedRoute, private _searchDataprovidersService: SearchDataprovidersService ) {
|
| 35 | 40 |
//this.results =[]; |
| ... | ... | |
| 37 | 42 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 38 | 43 |
this.status =errorCodes.LOADING; |
| 39 | 44 |
this.baseUrl = OpenaireProperties.getLinkToSearchDataProviders(); |
| 45 |
if(!this.searchPage){
|
|
| 46 |
this.searchPage = new SearchPageComponent(this._location); |
|
| 47 |
} |
|
| 40 | 48 |
} |
| 41 | 49 |
|
| 42 | 50 |
private ngOnInit() {
|
| 51 |
this.searchPage.refineFields = this.refineFields; |
|
| 52 |
|
|
| 43 | 53 |
this.sub = this.route.queryParams.subscribe(params => {
|
| 44 | 54 |
this.keyword = (params['keyword']?params['keyword']:''); |
| 45 | 55 |
this.page = (params['page']=== undefined)?1:+params['page']; |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchOrganizations.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild} from '@angular/core';
|
| 2 | 2 |
import { ActivatedRoute} from '@angular/router';
|
| 3 |
import {Location} from '@angular/common';
|
|
| 3 | 4 |
|
| 4 | 5 |
import { Filter, Value} from './searchUtils/searchHelperClasses.class';
|
| 5 | 6 |
|
| ... | ... | |
| 7 | 8 |
import {SearchOrganizationsService} from '../services/searchOrganizations.service';
|
| 8 | 9 |
import {SearchResult} from '../utils/entities/searchResult';
|
| 9 | 10 |
import {OpenaireProperties, ErrorCodes} from '../utils/properties/openaireProperties';
|
| 11 |
import {SearchFields} from '../utils/properties/searchFields';
|
|
| 10 | 12 |
import {SearchPageComponent } from './searchUtils/searchPage.component';
|
| 11 |
|
|
| 12 | 13 |
@Component({
|
| 13 | 14 |
selector: 'search-organizations', |
| 14 | 15 |
template: ` |
| ... | ... | |
| 31 | 32 |
private page :number = 1; |
| 32 | 33 |
private size :number = 10; |
| 33 | 34 |
private sub: any; |
| 35 |
private _location:Location; |
|
| 36 |
private refineFields = []; |
|
| 37 |
private searchFields:SearchFields = new SearchFields(); |
|
| 34 | 38 |
|
| 39 |
@ViewChild (SearchPageComponent) searchPage : SearchPageComponent ; |
|
| 40 |
|
|
| 35 | 41 |
constructor (private route: ActivatedRoute, private _searchOrganizationsService: SearchOrganizationsService, private _refineResultsService:RefineResultsService ) {
|
| 36 | 42 |
//this.results =[]; |
| 37 | 43 |
//this.filters =[]; |
| 38 | 44 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 39 | 45 |
this.status =errorCodes.LOADING; |
| 40 | 46 |
this.baseUrl = OpenaireProperties.getLinkToSearchOrganizations(); |
| 47 |
if(!this.searchPage){
|
|
| 48 |
this.searchPage = new SearchPageComponent(this._location); |
|
| 49 |
} |
|
| 41 | 50 |
} |
| 42 | 51 |
|
| 43 | 52 |
private ngOnInit() {
|
| 53 |
this.searchPage.refineFields = this.refineFields; |
|
| 54 |
|
|
| 44 | 55 |
this.sub = this.route.queryParams.subscribe(params => {
|
| 45 | 56 |
this.keyword = (params['keyword']?params['keyword']:''); |
| 46 | 57 |
this.page = (params['page']=== undefined)?1:+params['page']; |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchDatasets.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild} from '@angular/core';
|
| 2 | 2 |
import { ActivatedRoute} from '@angular/router';
|
| 3 |
|
|
| 3 |
import {Location} from '@angular/common';
|
|
| 4 | 4 |
import { Filter, Value} from './searchUtils/searchHelperClasses.class';
|
| 5 | 5 |
|
| 6 | 6 |
import {RefineResultsService} from '../services/servicesUtils/refineResuts.service';
|
| ... | ... | |
| 31 | 31 |
private page :number = 1; |
| 32 | 32 |
private size :number = 10; |
| 33 | 33 |
private sub: any; |
| 34 |
private refineFields = []; |
|
| 35 |
private searchFields:SearchFields = new SearchFields(); |
|
| 36 |
private _location:Location; |
|
| 34 | 37 |
|
| 38 |
|
|
| 35 | 39 |
@ViewChild (SearchPageComponent) searchPage : SearchPageComponent ; |
| 36 |
constructor (private route: ActivatedRoute, private _searchDatasetsService: SearchDatasetsService, private _refineResultsService:RefineResultsService ) {
|
|
| 40 |
constructor (private route: ActivatedRoute, private _searchDatasetsService: SearchDatasetsService, private _refineResultsService:RefineResultsService ) {
|
|
| 37 | 41 |
|
| 38 | 42 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 39 | 43 |
this.status =errorCodes.LOADING; |
| 40 | 44 |
this.baseUrl = OpenaireProperties.getLinkToSearchDatasets(); |
| 45 |
this.refineFields = this.searchFields.DATASET_FIELDS; |
|
| 46 |
if(!this.searchPage){
|
|
| 47 |
this.searchPage = new SearchPageComponent(this._location); |
|
| 48 |
} |
|
| 41 | 49 |
} |
| 42 | 50 |
|
| 43 | 51 |
private ngOnInit() {
|
| 52 |
this.searchPage.refineFields = this.refineFields; |
|
| 44 | 53 |
|
| 45 | 54 |
this.sub = this.route.queryParams.subscribe(params => {
|
| 46 |
this.keyword = (params['keyword']?params['keyword']:''); |
|
| 47 |
this.page = (params['page']=== undefined)?1:+params['page']; |
|
| 48 |
this.getRefineResults(); |
|
| 49 |
this.getResults(this.keyword, this.page, this.size, "searchPage"); |
|
| 55 |
this.keyword = (params['keyword']?params['keyword']:'');
|
|
| 56 |
this.page = (params['page']=== undefined)?1:+params['page'];
|
|
| 57 |
// this.getRefineResults();
|
|
| 58 |
this.getResults(this.keyword, this.page, this.size, "searchPage");
|
|
| 50 | 59 |
|
| 51 |
|
|
| 52 |
|
|
| 53 |
|
|
| 54 |
|
|
| 55 |
|
|
| 56 | 60 |
}); |
| 57 | 61 |
} |
| 58 | 62 |
|
| ... | ... | |
| 80 | 84 |
} |
| 81 | 85 |
public getResults(parameters:string, page: number, size: number, flag: string){
|
| 82 | 86 |
console.info("Search Datasets: Execute search query "+parameters);
|
| 83 |
this._searchDatasetsService.searchDatasets(parameters, page, size, flag).subscribe(
|
|
| 87 |
this._searchDatasetsService.searchDatasets(parameters+this.searchPage.getRefineFieldsQuery(), page, size,'searchPage', this.searchPage.getFields()).subscribe(
|
|
| 84 | 88 |
data => {
|
| 85 | 89 |
this.totalResults = data[0]; |
| 86 | 90 |
console.info("Search Datasets: results="+this.totalResults);
|
| 87 | 91 |
this.results = data[1]; |
| 92 |
this.filters = data[2]; |
|
| 88 | 93 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 89 | 94 |
this.status = errorCodes.DONE; |
| 90 | 95 |
if(this.totalResults == 0 ){
|
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchProjects.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild} from '@angular/core';
|
| 2 | 2 |
import { ActivatedRoute} from '@angular/router';
|
| 3 |
|
|
| 3 |
import {Location} from '@angular/common';
|
|
| 4 | 4 |
import { Filter, Value} from './searchUtils/searchHelperClasses.class';
|
| 5 |
import {RefineResultsService} from '../services/servicesUtils/refineResuts.service';
|
|
| 5 |
// import {RefineResultsService} from '../services/servicesUtils/refineResuts.service';
|
|
| 6 | 6 |
|
| 7 | 7 |
import {SearchProjectsService} from '../services/searchProjects.service';
|
| 8 | 8 |
import {SearchResult} from '../utils/entities/searchResult';
|
| ... | ... | |
| 15 | 15 |
|
| 16 | 16 |
<search-page pageTitle="Search Projects" type="project" [(filters)] = "filters" |
| 17 | 17 |
[(results)] = "results" [(totalResults)] = "totalResults" [(keyword)] = "keyword" |
| 18 |
[(page)] = "page" [(size)] = "size" [(status)] = "status" [baseUrl] = "baseUrl" (queryChange)="queryChanged($event)" > |
|
| 18 |
[(page)] = "page" [(size)] = "size" [(status)] = "status" [baseUrl] = "baseUrl" (queryChange)="queryChanged($event)" >
|
|
| 19 | 19 |
</search-page> |
| 20 |
<!--[refineParameters]="refineParameters"--> |
|
| 21 |
` |
|
| 20 |
` |
|
| 22 | 21 |
|
| 23 | 22 |
}) |
| 24 | 23 |
export class SearchProjectsComponent {
|
| ... | ... | |
| 31 | 30 |
private page :number = 1; |
| 32 | 31 |
private size :number = 10; |
| 33 | 32 |
private sub: any; |
| 34 |
private refineParameters = [];
|
|
| 33 |
private refineFields = [];
|
|
| 35 | 34 |
private searchFields:SearchFields = new SearchFields(); |
| 35 |
private urlParams : Map<string, string> ; |
|
| 36 |
private _location:Location; |
|
| 36 | 37 |
|
| 37 | 38 |
@ViewChild (SearchPageComponent) searchPage : SearchPageComponent ; |
| 38 | 39 |
|
| 39 |
constructor (private route: ActivatedRoute, private _searchProjectsService: SearchProjectsService, private _refineResultsService:RefineResultsService ) {
|
|
| 40 |
constructor (private route: ActivatedRoute, private _searchProjectsService: SearchProjectsService) {
|
|
| 40 | 41 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 41 | 42 |
this.status =errorCodes.LOADING; |
| 42 | 43 |
this.baseUrl = OpenaireProperties.getLinkToSearchProjects(); |
| 44 |
this.refineFields = this.searchFields.getPROJECT_FIELDS(); |
|
| 45 |
if(!this.searchPage){
|
|
| 46 |
this.searchPage = new SearchPageComponent(this._location); |
|
| 47 |
} |
|
| 43 | 48 |
} |
| 44 | 49 |
|
| 45 | 50 |
private ngOnInit() {
|
| 46 |
this.refineParameters = this.searchFields.getPROJECT_FIELDS(); |
|
| 47 |
this.searchPage.refineParameters = this.refineParameters; //TODO make it work as a directive |
|
| 51 |
this.searchPage.refineFields = this.refineFields; |
|
| 52 |
console.info("Here:: init pr"+this.refineFields.length);
|
|
| 53 |
//get refine field filters from url parameters |
|
| 48 | 54 |
|
| 49 | 55 |
this.sub = this.route.queryParams.subscribe(params => {
|
| 50 |
this.keyword = (params['keyword']?params['keyword']:''); |
|
| 51 |
this.page = (params['page']=== undefined)?1:+params['page']; |
|
| 52 | 56 |
|
| 53 |
var selected_filters = []; |
|
| 54 |
var searchFields:SearchFields = new SearchFields(); |
|
| 55 |
for(var i=0; i< searchFields.PROJECT_FIELDS.length ; i++){
|
|
| 56 |
var filterId = searchFields.PROJECT_FIELDS[i]; |
|
| 57 |
var filterParam = searchFields.PROJECT_PARAM_FIELDS[i]; |
|
| 58 |
if(params[filterParam] != undefined) {
|
|
| 59 |
selected_filters.push(filterId); |
|
| 60 |
} |
|
| 61 |
} |
|
| 62 |
this.getResults(this.keyword, this.page, this.size); |
|
| 63 |
this.getRefineResults(); |
|
| 64 |
// var filters = this.createFilters(selected_filters); |
|
| 57 |
//get keyword from url parameters |
|
| 58 |
this.keyword = (params['keyword']?params['keyword']:''); |
|
| 65 | 59 |
|
| 66 |
// for(var i=0; i< filters.length ; i++){
|
|
| 67 |
// var filter:Filter = filters[i]; |
|
| 68 |
// if(params[filter.filterId] != undefined) {
|
|
| 69 |
// let values = params[filter.filterId].split(",");
|
|
| 70 |
// for(let value of values) {
|
|
| 71 |
// for(let filterValue of filter.values) {
|
|
| 72 |
// if(filterValue.id == value) {
|
|
| 73 |
// filterValue.selected = true; |
|
| 74 |
// filter.countSelectedValues++; |
|
| 75 |
// } |
|
| 76 |
// } |
|
| 77 |
// } |
|
| 78 |
// } |
|
| 79 |
// } |
|
| 80 |
// this.filters = filters; |
|
| 60 |
//get page from url parameters |
|
| 61 |
this.page = (params['page']=== undefined)?1:+params['page']; |
|
| 81 | 62 |
|
| 63 |
|
|
| 64 |
this.searchPage.getSelectedFiltersFromUrl(params); |
|
| 65 |
this.getResults(this.keyword, this.page, this.size); |
|
| 82 | 66 |
}); |
| 83 | 67 |
} |
| 84 | 68 |
|
| 85 | 69 |
private ngOnDestroy() {
|
| 86 | 70 |
this.sub.unsubscribe(); |
| 87 | 71 |
} |
| 88 |
public getRefineResults (){
|
|
| 89 |
// this._refineResultsService.getRefineResults(this.searchPage.getFields()).subscribe( |
|
| 90 |
this._refineResultsService.getRefineResults(["projectendyear","projectstartyear","funderid","projectecsc39"]).subscribe( |
|
| 91 | 72 |
|
| 92 |
data => {
|
|
| 93 |
|
|
| 94 |
this.filters = data; |
|
| 95 |
|
|
| 96 |
}, |
|
| 97 |
err => {
|
|
| 98 |
console.error(err); |
|
| 99 |
//TODO check erros (service not available, bad request) |
|
| 100 |
// if( ){
|
|
| 101 |
// this.status = ErrorCodes.ERROR; |
|
| 102 |
// } |
|
| 103 |
|
|
| 104 |
} |
|
| 105 |
); |
|
| 106 |
} |
|
| 107 | 73 |
public getResults(parameters:string, page: number, size: number){
|
| 108 | 74 |
|
| 109 |
// var refine = "&refine=true"+this.searchPage.getRefineFieldsQuery(this.searchPage.getSelectedFilters()); |
|
| 110 |
this._searchProjectsService.searchProjects(parameters, page, size).subscribe( |
|
| 75 |
this._searchProjectsService.searchProjects(parameters+this.searchPage.getRefineFieldsQuery(), page, size, this.searchPage.getFields()).subscribe( |
|
| 111 | 76 |
data => {
|
| 112 | 77 |
this.totalResults = data[0]; |
| 113 | 78 |
console.info("search Projects: [Parameters:"+parameters+" ] [total results:"+this.totalResults+"]");
|
| 114 | 79 |
this.results = data[1]; |
| 80 |
this.filters = this.searchPage.checkSelectedFilters(data[2]); |
|
| 81 |
this.searchPage.updateBaseUrlWithParameters(this.filters); |
|
| 115 | 82 |
var errorCodes:ErrorCodes = new ErrorCodes(); |
| 116 |
this.status = errorCodes.DONE;
|
|
| 83 |
this.status = errorCodes.DONE; |
|
| 117 | 84 |
if(this.totalResults == 0 ){
|
| 118 | 85 |
this.status = errorCodes.NONE; |
| 119 | 86 |
} |
| ... | ... | |
| 130 | 97 |
); |
| 131 | 98 |
} |
| 132 | 99 |
|
| 133 |
private setFilters(){
|
|
| 134 |
//TODO set filters from |
|
| 135 |
} |
|
| 136 | 100 |
|
| 137 | 101 |
private queryChanged($event) {
|
| 102 |
this.urlParams = undefined; |
|
| 138 | 103 |
var parameters = $event.value; |
| 139 |
// this.filters = this.createFilters(this.searchPage.getSelectedFilters()); |
|
| 140 |
// this.getRefineResults(); |
|
| 141 | 104 |
this.getResults(parameters, this.page, this.size); |
| 142 | 105 |
} |
| 143 | 106 |
|
| 144 |
private createFilters(selected_filters:string[]):Filter[] {
|
|
| 145 |
|
|
| 146 |
var filter_original_ids = this.searchFields.PROJECT_FIELDS; // ["funderid","fundinglevel0_id","fundinglevel1_id","fundinglevel2_id","projectstartyear","projectendyear","projectecsc39"]; |
|
| 147 |
var filter_names = ["Funder","Funding level 0", "Funding level 1","Funding level 2", "Start Year","End Year","Special Clause 39"]; |
|
| 148 |
var filter_ids = this.searchFields.PROJECT_PARAM_FIELDS; |
|
| 149 |
|
|
| 150 |
var dependent: { [key:string]:string } = this.searchFields.DEPENDENT_FIELDS;
|
|
| 151 |
|
|
| 152 |
var hidden_filter_original_ids = this.searchFields.HIDDEN_FIELDS; |
|
| 153 |
|
|
| 154 |
var value_names=[["EC","FP7"],["1-fl0","2-fl0"],["1-fl1","2-fl1"],["1-fl2","2-fl2"],["2001","2005"],["2011","2015"],["yes","no"] ]; |
|
| 155 |
var value_ids=[["EC","FP7"],["1-fl0","2-fl0"],["1-fl1","2-fl1"],["1-fl2","2-fl2"],["2001","2005"],["2011","2015"],["yes","no"] ]; |
|
| 156 |
var value_original_ids=[["EC","FP7"],["1-fl0","2-fl0"],["1-fl1","2-fl1"],["1-fl2","2-fl2"],["2001","2005"],["2011","2015"],["yes","no"] ]; |
|
| 157 |
var filters: Filter[] =[]; |
|
| 158 |
for(var i =0 ; i < filter_original_ids.length;i++){
|
|
| 159 |
var dependentTo = dependent[filter_original_ids[i]]; |
|
| 160 |
// var old_filter = |
|
| 161 |
|
|
| 162 |
//if filter is not marked as hidden OR it is hidden but it is dependent to a field that it IS selected |
|
| 163 |
//dependentTo != undefined && |
|
| 164 |
if(hidden_filter_original_ids.indexOf(filter_original_ids[i]) == -1 || (selected_filters.indexOf(dependentTo) != -1) ){
|
|
| 165 |
var filter:Filter ; |
|
| 166 |
if(selected_filters.indexOf(filter_original_ids[i]) && this.filters.length > 0){
|
|
| 167 |
for(var j =0 ; j < this.filters.length;j++){
|
|
| 168 |
if(filter_original_ids[i] == this.filters[j].filterId){
|
|
| 169 |
filter = this.filters[j]; |
|
| 170 |
} |
|
| 171 |
} |
|
| 172 |
}else{
|
|
| 173 |
var values:Value[] = []; |
|
| 174 |
for(var j =0 ; j < value_names[i].length;j++){
|
|
| 175 |
var value:Value = {name: value_names[i][j], id: value_ids[i][j], number:j, selected:false}
|
|
| 176 |
values.push(value); |
|
| 177 |
} |
|
| 178 |
filter = {title: filter_names[i], filterId: filter_ids[i], originalFilterId: filter_original_ids[i], values : values, countSelectedValues:0, "filterOperator": 'or'}
|
|
| 179 |
|
|
| 180 |
} |
|
| 181 |
filters.push(filter); |
|
| 182 |
} |
|
| 183 |
|
|
| 184 |
} |
|
| 185 |
return filters; |
|
| 186 |
} |
|
| 187 |
|
|
| 188 | 107 |
} |
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchUtils/searchFilter.component.ts | ||
|---|---|---|
| 6 | 6 |
@Component({
|
| 7 | 7 |
selector: 'search-filter', |
| 8 | 8 |
template: ` |
| 9 |
<h4>{{filter.title}} </h4>
|
|
| 9 |
<h4>{{filter.title}}</h4>
|
|
| 10 | 10 |
<p *ngFor = "let value of filter.values.slice(0,5)" > |
| 11 | 11 |
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> |
| 12 |
<span> {{value.name}}</span><span *ngIf = "showResultCount === true" > ({{value.number}}) </span>
|
|
| 12 |
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
|
| 13 | 13 |
</p> |
| 14 | 14 |
|
| 15 | 15 |
<a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a> |
| 16 | 16 |
<span *ngIf = "filter.values.length > 5 && showAll" > |
| 17 | 17 |
<p *ngFor = "let value of filter.values.slice(5)" > |
| 18 | 18 |
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> |
| 19 |
<span> {{value.name}}</span><span *ngIf = "showResultCount === true" > ({{value.number}}) </span>
|
|
| 19 |
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}}) </span>
|
|
| 20 | 20 |
</p> |
| 21 | 21 |
<a (click)="toggleShowAll()" > Less</a> |
| 22 | 22 |
</span> |
| ... | ... | |
| 34 | 34 |
@Input() filter:Filter; |
| 35 | 35 |
@Input() showResultCount:boolean = true; |
| 36 | 36 |
private showAll:boolean = false; |
| 37 |
private _maxCharacters:number =30; |
|
| 37 | 38 |
|
| 38 | 39 |
constructor () {
|
| 39 |
|
|
| 40 |
// var str=(((value.name+" ("+value.number+")").length >_maxCharacters)?(value.name.substring(0,(_maxCharacters - (" ("+value.number+")").length - ('...').length))):value.name);
|
|
| 40 | 41 |
} |
| 41 | 42 |
|
| 42 | 43 |
ngOnInit() {
|
| 43 | 44 |
|
| 44 | 45 |
} |
| 45 | 46 |
|
| 47 |
private _formatName(value){
|
|
| 48 |
return (((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
|
|
| 49 |
} |
|
| 46 | 50 |
toggleShowAll(){
|
| 47 | 51 |
this.showAll = !this.showAll; |
| 48 | 52 |
if(this.showAll == false) {
|
| modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchUtils/searchPage.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
|
| 2 | 2 |
import {Observable} from 'rxjs/Observable';
|
| 3 | 3 |
import {Location} from '@angular/common';
|
| 4 |
|
|
| 5 | 4 |
import { Filter, Value} from './searchHelperClasses.class';
|
| 6 | 5 |
import {SearchResult} from '../../utils/entities/searchResult';
|
| 7 | 6 |
import {SearchFields} from '../../utils/properties/searchFields';
|
| ... | ... | |
| 25 | 24 |
|
| 26 | 25 |
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar"> |
| 27 | 26 |
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form> |
| 28 |
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [baseUrl] = "baseUrl+createQueryParameters()" [(totalResults)] = "totalResults" ></search-paging>
|
|
| 27 |
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [(baseUrl)] = "baseURLWithParameters" [(totalResults)] = "totalResults" ></search-paging>
|
|
| 29 | 28 |
<search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result> |
| 30 | 29 |
</div> |
| 31 | 30 |
</div> |
| 32 | 31 |
<div *ngIf="!showRefine" > |
| 33 | 32 |
|
| 34 | 33 |
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form> |
| 35 |
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [baseUrl] = "baseUrl+createQueryParameters()" [(totalResults)] = "totalResults" ></search-paging>
|
|
| 34 |
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [(baseUrl)] = "baseURLWithParameters" [(totalResults)] = "totalResults" ></search-paging>
|
|
| 36 | 35 |
<search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result> |
| 37 | 36 |
|
| 38 | 37 |
</div> |
| ... | ... | |
| 55 | 54 |
@Input() baseUrl:string = ''; |
| 56 | 55 |
@Input() showResultCount:boolean = true; |
| 57 | 56 |
@Input() showRefine:boolean = true; |
| 58 |
// @Input() |
|
| 59 |
refineParameters = []; |
|
| 60 |
private searchFields:SearchFields = new SearchFields(); |
|
| 57 |
@Input() refineFields = []; |
|
| 58 |
private searchFieldsHelper:SearchFields = new SearchFields(); |
|
| 59 |
private queryParameters: Map<string, string> = new Map<string,string>(); |
|
| 60 |
private baseURLWithParameters:string = ''; |
|
| 61 |
private sub: any; |
|
| 61 | 62 |
|
| 62 |
constructor (private location: Location) {
|
|
| 63 |
|
|
| 64 |
} |
|
| 63 |
constructor (private location: Location ) {
|
|
| 64 |
} |
|
| 65 | 65 |
|
| 66 | 66 |
ngOnInit() {
|
| 67 | 67 |
|
| 68 |
|
|
| 68 | 69 |
} |
| 70 |
ngAfterViewChecked(){
|
|
| 69 | 71 |
|
| 70 |
changekeyword(){
|
|
| 72 |
} |
|
| 73 |
public getSelectedFiltersFromUrl(params){
|
|
| 74 |
for(var i=0; i< this.refineFields.length ; i++){
|
|
| 75 |
var filterId = this.refineFields[i]; |
|
| 71 | 76 |
|
| 77 |
if(params[filterId] != undefined) {
|
|
| 78 |
if(this.queryParameters == undefined){
|
|
| 79 |
this.queryParameters = new Map<string,string>(); |
|
| 80 |
} |
|
| 81 |
this.queryParameters[filterId]=decodeURIComponent(params[filterId]); |
|
| 82 |
console.log("My PAram "+filterId+" : "+this.queryParameters[filterId]);
|
|
| 83 |
|
|
| 84 |
} |
|
| 85 |
} |
|
| 86 |
} |
|
| 87 |
/* |
|
| 88 |
* Mark as check the new filters that are selected, when you get them from search |
|
| 89 |
*/ |
|
| 90 |
public checkSelectedFilters(filters:Filter[]){
|
|
| 91 |
for(var i=0; i< filters.length ; i++){
|
|
| 92 |
var filter:Filter = filters[i]; |
|
| 93 |
if(this.queryParameters[filter.filterId] != undefined) {
|
|
| 94 |
let values = decodeURIComponent(this.queryParameters[filter.filterId]).split(",");
|
|
| 95 |
for(let value of values) {
|
|
| 96 |
for(let filterValue of filter.values) {
|
|
| 97 |
if(filterValue.id == value) {
|
|
| 98 |
filterValue.selected = true; |
|
| 99 |
filter.countSelectedValues++; |
|
| 100 |
} |
|
| 101 |
} |
|
| 102 |
} |
|
| 103 |
} |
|
| 104 |
} |
|
| 105 |
|
|
| 106 |
return filters; |
|
| 72 | 107 |
} |
| 73 |
|
|
| 74 |
private createUrlParameters(){
|
|
| 108 |
/* |
|
| 109 |
* Update the url with proper parameters. This is used as base url in Paging Component |
|
| 110 |
*/ |
|
| 111 |
public updateBaseUrlWithParameters(filters:Filter[]){
|
|
| 112 |
this.baseURLWithParameters = this.baseUrl + this.createUrlParameters(filters,false); |
|
| 113 |
} |
|
| 114 |
/* |
|
| 115 |
* |
|
| 116 |
*/ |
|
| 117 |
private createUrlParameters(filters:Filter[], includePage:boolean){
|
|
| 75 | 118 |
var allLimits="";//location.search.slice(1); |
| 76 |
for (let filter of this.filters){
|
|
| 119 |
for (let filter of filters){
|
|
| 77 | 120 |
var filterLimits=""; |
| 78 | 121 |
if(filter.countSelectedValues > 0){
|
| 79 | 122 |
for (let value of filter.values){
|
| 80 | 123 |
if(value.selected == true){
|
| 81 |
filterLimits+=((filterLimits.length == 0)?'':',') + value.id;
|
|
| 124 |
filterLimits+=((filterLimits.length == 0)?'':',') + encodeURIComponent(value.id);
|
|
| 82 | 125 |
} |
| 83 | 126 |
} |
| 84 |
allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':'&') +filter.filterId + '='+ filterLimits) ; |
|
| 127 |
this.queryParameters[filter.filterId]=filterLimits; |
|
| 128 |
allLimits+=((filterLimits.length == 0 )?'':"&" +filter.filterId + '='+ filterLimits) ; |
|
| 85 | 129 |
} |
| 86 | 130 |
} |
| 87 | 131 |
if(this.keyword.length > 0 ){
|
| 88 |
allLimits+=((allLimits.length == 0)?'':'&') + 'keyword=' + this.keyword;
|
|
| 132 |
allLimits+='&keyword=' + this.keyword;
|
|
| 89 | 133 |
} |
| 90 |
if(this.page != 1 ){
|
|
| 134 |
if(this.page != 1 && includePage){
|
|
| 91 | 135 |
allLimits+=((allLimits.length == 0)?'':'&') + 'page=' + this.page; |
| 92 | 136 |
} |
| 93 | 137 |
return allLimits; |
| 94 | 138 |
} |
| 95 |
private createQueryParameters(){
|
|
| 139 |
/* |
|
| 140 |
* |
|
| 141 |
*/ |
|
| 142 |
private createSearchQueryParameters(filters:Filter[]){
|
|
| 96 | 143 |
var allLimits=""; |
| 97 |
for (let filter of this.filters){
|
|
| 144 |
for (let filter of filters){
|
|
| 98 | 145 |
if(filter.countSelectedValues > 0){
|
| 99 | 146 |
var filterLimits=""; |
| 100 | 147 |
for (let value of filter.values){
|
| 101 | 148 |
if(value.selected == true){
|
| 149 |
// if(filter.filterOperator == 'not') {
|
|
| 150 |
// filterLimits+=((filterLimits.length == 0)?'':' and ') + filter.filterId + '<>'+ value.id; |
|
| 151 |
// } else {
|
|
| 152 |
// filterLimits+=((filterLimits.length == 0)?'':' '+filter.filterOperator+' ') + filter.filterId + '='+ value.id; |
|
| 153 |
// } |
|
| 102 | 154 |
if(filter.filterOperator == 'not') {
|
| 103 |
filterLimits+=((filterLimits.length == 0)?'':' and ') + filter.filterId + '<>'+ value.id;
|
|
| 155 |
filterLimits+='&' + filter.filterId + '='+ value.id+"&operator=not";
|
|
| 104 | 156 |
} else {
|
| 105 |
filterLimits+=((filterLimits.length == 0)?'':' '+filter.filterOperator+' ') + filter.filterId + '='+ value.id;
|
|
| 157 |
filterLimits+='&' + filter.filterId + '='+ value.id+"&operator="+filter.filterOperator;
|
|
| 106 | 158 |
} |
| 107 | 159 |
} |
| 108 | 160 |
} |
| 109 |
allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':' and ')+'('+filterLimits +')') ;
|
|
| 161 |
allLimits += filterLimits;
|
|
| 110 | 162 |
} |
| 111 | 163 |
} |
| 112 |
if(this.keyword.length > 0 ){
|
|
| 113 |
allLimits+= this.keyword + ((allLimits.length == 0)?'':'&') /*+ ' keyword=' */;
|
|
| 114 |
} |
|
| 115 |
return allLimits; |
|
| 164 |
// if(this.keyword.length > 0 ){
|
|
| 165 |
// allLimits= this.keyword + allLimits /*+ ' keyword=' */;
|
|
| 166 |
// }
|
|
| 167 |
return (this.keyword.length > 0?'q='+this.keyword:'')+allLimits;
|
|
| 116 | 168 |
} |
| 169 |
// |
|
| 117 | 170 |
private isFiltered(){
|
| 118 | 171 |
var filtered=false; |
| 119 | 172 |
for (let filter of this.filters){
|
| ... | ... | |
| 147 | 200 |
|
| 148 | 201 |
goTo(page:number = 1){
|
| 149 | 202 |
this.page = page; |
| 150 |
var urlParameters = this.createUrlParameters(); |
|
| 151 |
var queryParameters = this.createQueryParameters(); |
|
| 152 |
this.location.go(location.pathname,urlParameters); |
|
| 203 |
this.queryParameters = new Map<string,string>(); |
|
| 204 |
var urlParameters = this.createUrlParameters(this.filters,true); |
|
| 205 |
this.updateBaseUrlWithParameters(this.filters); |
|
| 206 |
var queryParameters = this.createSearchQueryParameters(this.filters); |
|
| 207 |
this.location.go(location.pathname,urlParameters); |
|
| 208 |
|
|
| 153 | 209 |
this.queryChange.emit({
|
| 154 | 210 |
value: queryParameters |
| 155 | 211 |
}); |
| ... | ... | |
| 162 | 218 |
this.keyword = $event.value; |
| 163 | 219 |
this.goTo(1); |
| 164 | 220 |
} |
| 221 |
/* |
|
| 222 |
* Get A sub-array of this.refineFields array, which contains the ids of the selected filters |
|
| 223 |
*/ |
|
| 165 | 224 |
public getSelectedFilters():string[] {
|
| 166 | 225 |
var selected:string[] = []; |
| 167 | 226 |
for(var i=0; i < this.filters.length; i++){
|
| 168 | 227 |
var filter:Filter = this.filters[i]; |
Also available in: Unified diff
In Projects search component and search PAge: create the proper query using url parameters, mark as checked the proper filters after getting the results from search, apply changes in other components so they can work too.