From a3a3566dc3eeb929890d66a26edacb935caf95ff Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Thu, 29 Sep 2016 12:54:35 +0000 Subject: [PATCH] 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 --- .../landingPages/project/project.component.ts | 35 +++- portal-2/src/app/test/test.component.ts | 37 +++- .../src/app/utils/autoComplete.component.ts | 190 +++++++++++------- portal-2/src/app/utils/iframe.component.ts | 21 ++ portal-2/src/app/utils/utils.module.ts | 9 +- portal-2/src/main.browser.ts | 2 + portal-2/src/main.node.ts | 2 + 7 files changed, 213 insertions(+), 83 deletions(-) create mode 100644 portal-2/src/app/utils/iframe.component.ts diff --git a/portal-2/src/app/landingPages/project/project.component.ts b/portal-2/src/app/landingPages/project/project.component.ts index 69c7b1b5..2da53ee0 100644 --- a/portal-2/src/app/landingPages/project/project.component.ts +++ b/portal-2/src/app/landingPages/project/project.component.ts @@ -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); diff --git a/portal-2/src/app/test/test.component.ts b/portal-2/src/app/test/test.component.ts index dc2fdfe2..e3f06da9 100644 --- a/portal-2/src/app/test/test.component.ts +++ b/portal-2/src/app/test/test.component.ts @@ -4,9 +4,40 @@ import {Component, ElementRef} from '@angular/core'; @Component({ selector: 'test', template: ` - - - ` + +
+ +
+Selected:: + + {{item.label}} + +` }) 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"]; } diff --git a/portal-2/src/app/utils/autoComplete.component.ts b/portal-2/src/app/utils/autoComplete.component.ts index f7190ea9..43872092 100644 --- a/portal-2/src/app/utils/autoComplete.component.ts +++ b/portal-2/src/app/utils/autoComplete.component.ts @@ -1,91 +1,137 @@ -import {Component, ElementRef} from '@angular/core'; +import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core'; +//Usage example +// @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: ` -
-
+
+
+
{{title}}
+
-
- - + + {{item.label}} + - - -
- -
-
- - -
+ + +
+
+ + +
+
+
+ ` }) 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 = []; + // } + // } } diff --git a/portal-2/src/app/utils/iframe.component.ts b/portal-2/src/app/utils/iframe.component.ts new file mode 100644 index 00000000..cbc76267 --- /dev/null +++ b/portal-2/src/app/utils/iframe.component.ts @@ -0,0 +1,21 @@ +import {Component, ElementRef, Input} from '@angular/core'; +import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; +//Usage :: ` +@Component({ + selector: 'i-frame', + template: ` + + ` +}) +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); + } +} diff --git a/portal-2/src/app/utils/utils.module.ts b/portal-2/src/app/utils/utils.module.ts index d294f4a2..4c6c1006 100644 --- a/portal-2/src/app/utils/utils.module.ts +++ b/portal-2/src/app/utils/utils.module.ts @@ -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 ] }) diff --git a/portal-2/src/main.browser.ts b/portal-2/src/main.browser.ts index 3b9ed3fd..8d70e811 100644 --- a/portal-2/src/main.browser.ts +++ b/portal-2/src/main.browser.ts @@ -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 ], diff --git a/portal-2/src/main.node.ts b/portal-2/src/main.node.ts index 3b9ed3fd..8d70e811 100644 --- a/portal-2/src/main.node.ts +++ b/portal-2/src/main.node.ts @@ -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 ],