commiting a autocomlete component, commit a test-page component for component checks
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43890 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
b5d092b74c
commit
a3a3566dc3
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, ViewChild} from '@angular/core';
|
||||
import {Component, ViewChild, OnInit} from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import {ActivatedRoute} from '@angular/router';
|
||||
import {ActivatedRoute, Params} from '@angular/router';
|
||||
import {ProjectService} from '../../services/project.service';
|
||||
import {ProjectInfo} from '../../utils/entities/projectInfo';
|
||||
import {InlineClaimResultComponent} from '../../claimPages/inlineClaimResult/inlineClaimResult.component';
|
||||
|
|
@ -9,11 +9,17 @@ import {InlineClaimResultComponent} from '../../claimPages/inlineClaimResult/inl
|
|||
selector: 'project',
|
||||
templateUrl: 'project.component.html',
|
||||
})
|
||||
export class ProjectComponent {
|
||||
export class ProjectComponent implements OnInit{
|
||||
constructor (private _projectService: ProjectService,
|
||||
private route: ActivatedRoute) {
|
||||
console.info('project constructor');
|
||||
|
||||
// this.projectId = 'corda_______::2c37878a0cede85dbbd1081bb9b4a2f8';
|
||||
// console.info("1 Id is :"+this.projectId);
|
||||
// if(this.projectId){
|
||||
// this.getProjectInfo(this.projectId);
|
||||
// }else{
|
||||
// this.warningMessage=" 1 No valid project id";
|
||||
// }
|
||||
}
|
||||
ngOnInit() {
|
||||
// this.sub = this.route.params.subscribe(params => {
|
||||
|
|
@ -21,6 +27,27 @@ export class ProjectComponent {
|
|||
// console.info('project init');
|
||||
// this.getProjectInfo(this.projectId);
|
||||
// });
|
||||
//PArameter with format ;id=
|
||||
//corda_______::2c37878a0cede85dbbd1081bb9b4a2f8
|
||||
// this.projectId = 'corda_______::2c37878a0cede85dbbd1081bb9b4a2f8';
|
||||
// console.info("1 Id is :"+this.projectId);
|
||||
// if(this.projectId){
|
||||
// this.getProjectInfo(this.projectId);
|
||||
// }else{
|
||||
// this.warningMessage=" 1 No valid project id";
|
||||
// }
|
||||
// this.route.params.forEach((params: Params) => {
|
||||
// console.info("this.route.params.forEach");
|
||||
// let id = +params['id'];
|
||||
// this.projectId = params['id'];
|
||||
// console.info("1 Id is :"+this.projectId);
|
||||
// if(this.projectId){
|
||||
// this.getProjectInfo(this.projectId);
|
||||
// }else{
|
||||
// this.warningMessage=" 1 No valid project id";
|
||||
// }
|
||||
//
|
||||
// });
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
this.projectId = params['projectId'];
|
||||
console.info("Id is :"+this.projectId);
|
||||
|
|
|
|||
|
|
@ -4,9 +4,40 @@ import {Component, ElementRef} from '@angular/core';
|
|||
@Component({
|
||||
selector: 'test',
|
||||
template: `
|
||||
|
||||
|
||||
`
|
||||
<!--i-frame url="https://google.com" width="30%" height="250"></i-frame-->
|
||||
<div style ="width:30%; height:250px;" >
|
||||
<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete>
|
||||
<div>
|
||||
Selected::
|
||||
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
|
||||
<span >{{item.label}} </span>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
export class TestComponent {
|
||||
private filtered = [];
|
||||
private selected = [];
|
||||
keywordChanged($event) {
|
||||
console.log("keyword Changed");
|
||||
var keyword = $event.value;
|
||||
this.filtered = this.countries.filter(function(el){
|
||||
return el.label.toLowerCase().indexOf(keyword.toLowerCase()) > -1;
|
||||
}.bind(this));
|
||||
|
||||
}
|
||||
public countries = [
|
||||
{id: '0', label: "Albania"},{id: '1', label: "Andorra"},{id: '2', label: "Armenia"},
|
||||
{id: '3', label: "Austria"},{id: '4', label: "Azerbaijan"},{id: '5', label: "Belarus"},{id: '6', label: "Belgium"},
|
||||
{id: '7', label: "Bosnia & Herzegovina"},{id: '8', label: "Bulgaria"},{id: '9', label: "Croatia"},
|
||||
{id: '10', label: "Cyprus"},{id: '11', label: "Czech Republic"},{id: '12', label: "Denmark"},{id: '13', label: "Estonia"},
|
||||
{id: '14', label: "Finland"},{id: '15', label: "France"},{id: '16', label: "Georgia"},
|
||||
{id: '17', label: "Germany"},{id: '18', label: "Greece"},{id: '19', label: "Hungary"},{id: '20', label: "Iceland"},
|
||||
{id: '21', label: "Ireland"},{id: '22', label: "Italy"},{id: '23', label: "Kosovo"},
|
||||
{id: '24', label: "Latvia"},{id: '25', label: "Liechtenstein"},{id: '26', label: "Lithuania"},{id: '27', label: "Luxembourg"}];
|
||||
|
||||
|
||||
// "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
|
||||
// "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
|
||||
// "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
|
||||
// "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,91 +1,137 @@
|
|||
import {Component, ElementRef} from '@angular/core';
|
||||
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
|
||||
|
||||
//Usage example
|
||||
//<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete>
|
||||
|
||||
@Component({
|
||||
selector: 'autocomplete',
|
||||
styles: [`
|
||||
.auto-complete-box{ }
|
||||
.auto-complete-choice .remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
.auto-complete-choice{
|
||||
background: grey none repeat scroll 0 0;
|
||||
border-color: grey;
|
||||
border-radius: 5px;
|
||||
border-style: solid;
|
||||
color: white;
|
||||
margin: 3px;
|
||||
padding: 1px;
|
||||
}
|
||||
.auto-complete-input { border-radius:0; border-color: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset; }
|
||||
.form-control. auto-complete-input {box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset;}
|
||||
.auto-complete-box .suggestions.list-group-item {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
`],
|
||||
template: `
|
||||
<div class="container" >
|
||||
<div class="input-field col s12">
|
||||
<div class="bs-docs-grid">
|
||||
<div class = "row-fluid form-inline auto-complete-box panel panel-default">
|
||||
<div class="panel-heading">{{title}}</div>
|
||||
<div class="panel-body">
|
||||
|
||||
</div>
|
||||
<label for="country">Country</label>
|
||||
<input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() >
|
||||
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
|
||||
<span >{{item.label}} </span>
|
||||
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span>
|
||||
|
||||
|
||||
|
||||
<div class="suggestions" *ngIf="filteredList.length > 0">
|
||||
<ul class="list-group" *ngFor=" let item of filteredList" >
|
||||
<li class="list-group-item" >
|
||||
<a (click)="select(item)">{{item}}</a>
|
||||
</span>
|
||||
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
|
||||
<div class="suggestions" *ngIf="filtered.length > 0">
|
||||
<ul class="list-group" >
|
||||
<li class="list-group-item" *ngFor=" let item of filtered">
|
||||
<a (click)="select(item)">{{item.label}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="selections" *ngIf="selectedList.length > 0">
|
||||
<label for="selecteditems">Selected: </label>
|
||||
<ul id ="selecteditems" class="nav nav-pills" *ngFor="let item of selectedList" >
|
||||
<li role="presentation" (click)="remove(item)">{{item}} <span class="badge">X</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
|
||||
<div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`
|
||||
})
|
||||
export class AutocompleteComponent {
|
||||
public query = '';
|
||||
public countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
|
||||
"Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
|
||||
"Czech Republic","Denmark","Estonia","Finland","France","Georgia",
|
||||
"Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
|
||||
"Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
|
||||
"Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
|
||||
"Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
|
||||
"Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
|
||||
public filteredList = [];
|
||||
public selectedList = [];
|
||||
public elementRef;
|
||||
@Input() placeHolderMessage = "Search for entries";
|
||||
@Input() title = "Autocomplete";
|
||||
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called
|
||||
@Input() public filtered = []; // the entries resulted after filtering function
|
||||
@Input() public selected = []; // the entries selected from user
|
||||
@Input() public keywordlimit = 3; // the minimum length of keyword
|
||||
|
||||
public keyword = '';
|
||||
private warningMessage = "";
|
||||
private infoMessage = "";
|
||||
|
||||
private tries = 0;
|
||||
constructor () {
|
||||
console.info('project constructor');
|
||||
|
||||
constructor(myElement: ElementRef) {
|
||||
this.elementRef = myElement;
|
||||
}
|
||||
|
||||
filter() {
|
||||
if (this.query !== ""){
|
||||
this.filteredList = this.countries.filter(function(el){
|
||||
return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
|
||||
}.bind(this));
|
||||
this.infoMessage = "";
|
||||
this.filtered = [];
|
||||
if(this.keyword == ""){
|
||||
this.tries = 0;
|
||||
this.warningMessage = "";
|
||||
} else if(this.keyword && this.keyword.length < this.keywordlimit){
|
||||
this.tries++;
|
||||
if(this.tries == this.keywordlimit -1 ){
|
||||
this.warningMessage = "Type at least " + this.keywordlimit + " characters";
|
||||
this.tries = 0;
|
||||
}
|
||||
}else{
|
||||
this.filteredList = [];
|
||||
this.tries = 0;
|
||||
this.warningMessage = "";
|
||||
|
||||
// this.filtered = this.concepts.filter(function(el){
|
||||
// return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
|
||||
// }.bind(this));
|
||||
this.keywordChange.emit({
|
||||
value: this.keyword
|
||||
});
|
||||
// this.filtered = this.countries.filter(function(el){
|
||||
// return el.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
|
||||
// }.bind(this));
|
||||
// if(this.filtered.length == 0 ){
|
||||
// this.infoMessage = "No results found";
|
||||
// }
|
||||
}
|
||||
}
|
||||
remove(item:any){
|
||||
var index:number =this.selected.indexOf(item);
|
||||
if (index > -1) {
|
||||
this.selected.splice(index, 1);
|
||||
}
|
||||
|
||||
}
|
||||
select(item:any){
|
||||
var index:number =this.selected.indexOf(item);
|
||||
if (index > -1) {
|
||||
// this.warningMessage = "Already selected";
|
||||
this.keyword = "";
|
||||
this.filtered.splice(0, this.filtered.length);
|
||||
}else{
|
||||
this.selected.push(item);
|
||||
this.keyword = "";
|
||||
this.filtered.splice(0, this.filtered.length);
|
||||
}
|
||||
}
|
||||
|
||||
select(item){
|
||||
this.query = "";
|
||||
this.filteredList = [];
|
||||
this.selectedList.push(item);
|
||||
console.info("Select:"+this.selectedList);
|
||||
for (var i = 0; i < this.selectedList.length; i++) {
|
||||
console.log(this.selectedList[i]);
|
||||
}
|
||||
}
|
||||
remove(item){
|
||||
var index:number =this.selectedList.indexOf(item);
|
||||
console.info("Try to remove item from :"+this.selectedList.indexOf(item));
|
||||
if (index > -1) {
|
||||
this.selectedList.splice(index, 1);
|
||||
}
|
||||
console.info("Item removed "+this.selectedList.indexOf(item));
|
||||
}
|
||||
handleClick(event){
|
||||
var clickedComponent = event.target;
|
||||
var inside = false;
|
||||
do {
|
||||
if (clickedComponent === this.elementRef.nativeElement) {
|
||||
inside = true;
|
||||
}
|
||||
clickedComponent = clickedComponent.parentNode;
|
||||
} while (clickedComponent);
|
||||
if(!inside){
|
||||
this.filteredList = [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// handleClick(event){
|
||||
// var clickedComponent = event.target;
|
||||
// var inside = false;
|
||||
// do {
|
||||
// if (clickedComponent === this.elementRef.nativeElement) {
|
||||
// inside = true;
|
||||
// }
|
||||
// clickedComponent = clickedComponent.parentNode;
|
||||
// } while (clickedComponent);
|
||||
// if(!inside){
|
||||
// this.filtered = [];
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import {Component, ElementRef, Input} from '@angular/core';
|
||||
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
|
||||
//Usage :: <i-frame [url]="url" width="30%" height="250"></i-frame>`
|
||||
@Component({
|
||||
selector: 'i-frame',
|
||||
template: `
|
||||
<iframe [width]="width" [height]="height" [src]="safeUrl"></iframe>
|
||||
`
|
||||
})
|
||||
export class IFrameComponent {
|
||||
private safeUrl: SafeResourceUrl;
|
||||
@Input() url ;
|
||||
@Input() width = '100%';
|
||||
@Input() height = '300';
|
||||
constructor(private sanitizer: DomSanitizer) {
|
||||
}
|
||||
ngOnInit() {
|
||||
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
|
||||
console.info("URL:" + this.safeUrl);
|
||||
}
|
||||
}
|
||||
|
|
@ -9,11 +9,10 @@ import {ProjectTitleFormatter} from './projectTitleFormatter.component';
|
|||
import {PublicationTitleFormatter} from './publicationTitleFormatter.component';
|
||||
import {PagingFormatter} from './pagingFormatter.component';
|
||||
import {AutocompleteComponent} from './autoComplete.component';
|
||||
import {AutocompleteCountriesComponent} from './autoCompleteCountries.component';
|
||||
|
||||
import {ShowDataProvidersComponent} from './showDataProviders.component';
|
||||
import {ExportCSVComponent} from './exportCSV.component.ts';
|
||||
|
||||
import {IFrameComponent} from './iframe.component';
|
||||
|
||||
import {AlertModal} from './modal/alert';
|
||||
import {ModalLoading} from './modal/loading.component';
|
||||
|
|
@ -30,7 +29,8 @@ import {ModalLoading} from './modal/loading.component';
|
|||
AutocompleteComponent,
|
||||
ShowDataProvidersComponent,
|
||||
ExportCSVComponent,
|
||||
AutocompleteComponent, AutocompleteCountriesComponent
|
||||
IFrameComponent,
|
||||
AutocompleteComponent
|
||||
|
||||
],
|
||||
exports: [
|
||||
|
|
@ -42,7 +42,8 @@ import {ModalLoading} from './modal/loading.component';
|
|||
AutocompleteComponent,
|
||||
ShowDataProvidersComponent,
|
||||
ExportCSVComponent,
|
||||
AutocompleteComponent, AutocompleteCountriesComponent
|
||||
IFrameComponent,
|
||||
AutocompleteComponent
|
||||
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {SearchModule} from './app/searchPages/search.module';
|
|||
import {DepoditModule} from './app/deposit/deposit.module';
|
||||
import {LandingModule} from './app/landingPages/landing.module';
|
||||
import {SharedComponentsModule} from './app/sharedComponents/sharedComponents.module'; //navbar
|
||||
import {UtilsModule} from './app/utils/utils.module';
|
||||
|
||||
import {ServicesModule} from './app/services/services.module';
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ import {TestComponent} from './app/test/test.component';
|
|||
DepoditModule,
|
||||
LandingModule,
|
||||
SharedComponentsModule,
|
||||
UtilsModule,
|
||||
ServicesModule,
|
||||
routing
|
||||
],
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {SearchModule} from './app/searchPages/search.module';
|
|||
import {DepoditModule} from './app/deposit/deposit.module';
|
||||
import {LandingModule} from './app/landingPages/landing.module';
|
||||
import {SharedComponentsModule} from './app/sharedComponents/sharedComponents.module'; //navbar
|
||||
import {UtilsModule} from './app/utils/utils.module';
|
||||
|
||||
import {ServicesModule} from './app/services/services.module';
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ import {TestComponent} from './app/test/test.component';
|
|||
DepoditModule,
|
||||
LandingModule,
|
||||
SharedComponentsModule,
|
||||
UtilsModule,
|
||||
ServicesModule,
|
||||
routing
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue