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

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);

portal-2/src/app/test/test.component.ts

@@ -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"];
 }

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
+//<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="bs-docs-grid">
-            <div class="input-field col s12">
+    <div class = "row-fluid  form-inline auto-complete-box panel panel-default">
+      <div class="panel-heading">{{title}}</div>
+      <div class="panel-body">
 
-          </div>
+       <span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
-          <label for="country">Country</label>
+        <span >{{item.label}} </span>
-              <input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter()   >
+        <span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span>
 
-
+       </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="filteredList.length > 0">
+        <div class="suggestions" *ngIf="filtered.length > 0">
-                <ul class="list-group"  *ngFor=" let item of filteredList" >
+              <ul class="list-group" >
-                    <li  class="list-group-item" >
+                  <li  class="list-group-item"   *ngFor=" let item of filtered">
-                        <a (click)="select(item)">{{item}}</a>
+                      <a (click)="select(item)">{{item.label}}</a>
                   </li>
               </ul>
         </div>
-            <div class="selections"  *ngIf="selectedList.length > 0">
+        <div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>
-              <label for="selecteditems">Selected: </label>
+        <div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div>
-                <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>
     </div>
+  </div>
+
         `
 })
 export class AutocompleteComponent {
-    public query = '';
+    @Input() placeHolderMessage = "Search for entries";
-    public countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
+    @Input() title = "Autocomplete";
-                        "Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
+    @Output() keywordChange = new EventEmitter(); // when changed  a method for filtering will be called
-                        "Czech Republic","Denmark","Estonia","Finland","France","Georgia",
+    @Input() public filtered = []; // the entries resulted after filtering function
-                        "Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
+    @Input() public selected = []; // the entries selected from user
-                        "Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
+    @Input() public keywordlimit = 3; // the minimum length of keyword
-                        "Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
+
-                        "Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
+    public keyword = '';
-                        "Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
+    private warningMessage = "";
-    public filteredList = [];
+    private infoMessage = "";
-    public selectedList = [];
+
-    public elementRef;
+    private tries = 0;
+    constructor () {
+      console.info('project constructor');
 
-    constructor(myElement: ElementRef) {
-        this.elementRef = myElement;
     }
-
     filter() {
-      if (this.query !== ""){
+      this.infoMessage = "";
-          this.filteredList = this.countries.filter(function(el){
+      this.filtered = [];
-              return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
+      if(this.keyword == ""){
-          }.bind(this));
+        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 = [];
+  // handleClick(event){
-        this.selectedList.push(item);
+  //    var clickedComponent = event.target;
-          console.info("Select:"+this.selectedList);
+  //    var inside = false;
-          for (var i = 0; i < this.selectedList.length; i++) {
+  //    do {
-              console.log(this.selectedList[i]);
+  //        if (clickedComponent === this.elementRef.nativeElement) {
-          }
+  //            inside = true;
-    }
+  //        }
-    remove(item){
+  //       clickedComponent = clickedComponent.parentNode;
-      var index:number =this.selectedList.indexOf(item);
+  //    } while (clickedComponent);
-      console.info("Try to remove item from  :"+this.selectedList.indexOf(item));
+  //     if(!inside){
-      if (index > -1) {
+  //         this.filtered = [];
-          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 = [];
-      }
-  }
 }

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 :: <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);
+  }
+}

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
 
     ]
 })

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
   ],

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
   ],