From e12d5d0c14c758d533a09180ed263426d58624d5 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 14 Jul 2016 09:47:28 +0000
Subject: [PATCH] First mock-search-page for publications

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43229 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/app.component.ts                      |  14 +-
 .../common/pagingFormatterNoLoad.component.ts |  39 +---
 src/app/searchPages/common/search.class.ts    |  14 ++
 .../common/searchFilter.component.ts          |  57 ++++++
 .../common/searchPage.component.ts            | 170 ++++++++++++++++++
 .../common/searchResult.component.ts          |  42 +++++
 .../search.component.ts                       |   0
 .../searchPublications.component.ts           |  99 ++++++++++
 src/server.ts                                 |   6 +-
 9 files changed, 400 insertions(+), 41 deletions(-)
 create mode 100644 src/app/searchPages/common/search.class.ts
 create mode 100644 src/app/searchPages/common/searchFilter.component.ts
 create mode 100644 src/app/searchPages/common/searchPage.component.ts
 create mode 100644 src/app/searchPages/common/searchResult.component.ts
 rename src/app/{search => searchPages}/search.component.ts (100%)
 create mode 100644 src/app/searchPages/searchPublications.component.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d7ab681f..fd6cd192 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import {Component, Directive, ElementRef, Renderer} from '@angular/core';
 import {RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
 import {Http} from '@angular/http';
-import {SearchComponent} from './search/search.component';
+import {SearchComponent} from './searchPages/search.component';
 import {ClaimComponent} from './claimPages/claim/claim.component';
 import {ClaimsAdminComponent} from './claimPages/claims/claimsAdmin.component';
 import {HomeComponent} from './home/home.component';
@@ -11,6 +11,7 @@ import {MyClaimsComponent} from './claimPages/myClaims/myClaims.component';
 import {ProjectComponent} from './landingPages/project/project.component';
 import {PublicationComponent} from './landingPages/publication/publication.component';
 import {MyClaimsDemoComponent} from './claimPages/myClaimsDemo.component';
+import {SearchPublicationsComponent} from './searchPages/searchPublications.component';
 import 'rxjs/Rx';
 
 
@@ -18,7 +19,7 @@ import 'rxjs/Rx';
 @Component({
   selector: 'app',
   directives: [
-    ...ROUTER_DIRECTIVES
+    ...ROUTER_DIRECTIVES, SearchPublicationsComponent
   ],
   styles: [`
     .router-link-active {
@@ -27,7 +28,7 @@ import 'rxjs/Rx';
   `],
   template: `
   <div>
-  <nav class="navbar navbar-default">
+  <nav class="navbar navbar-default" id="top">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
@@ -46,7 +47,7 @@ import 'rxjs/Rx';
       <!--  <li class="active"><a  [routerLink]=" ['/Search']" >Search <span class="sr-only">(current)</span></a></li>-->
       <li><a  [routerLink]=" ['/Linking']">Linking</a></li>
       <li><a  [routerLink]=" ['/Claims']">Claims Admin</a></li>
-
+      <li><a  [routerLink]=" ['/SearchPublications']" >Search Publications </a></li>
       <!--  <li><a  [routerLink]=" ['/Home']">Home</a></li>-->
         <li><a  [routerLink]=" ['/MyClaims']">My claims</a></li>
 
@@ -73,7 +74,8 @@ import 'rxjs/Rx';
   { path: '/my-claims', component: MyClaimsComponent, name: 'MyClaims' },
   { path: '/demo', component: MyClaimsDemoComponent, name: 'MyClaimsDemo' },
   { path: '/project', component: ProjectComponent, name: 'Project' },
-  { path: '/publication', component: PublicationComponent, name: 'Publication' }
+  { path: '/publication', component: PublicationComponent, name: 'Publication' },
+  { path: '/search-publications', component: SearchPublicationsComponent, name: 'SearchPublications' }
 
 ])
 export class App {
@@ -82,13 +84,11 @@ export class App {
   server;
 
   constructor(public http: Http ) {
-    console.info('App constructor');
 
   }
 
 
   ngOnInit() {
-    console.info('App init');
     setTimeout(() => {
       this.server = 'Rendered on the Server';
     }, 10);
diff --git a/src/app/common/pagingFormatterNoLoad.component.ts b/src/app/common/pagingFormatterNoLoad.component.ts
index 7e85f80f..626109ab 100644
--- a/src/app/common/pagingFormatterNoLoad.component.ts
+++ b/src/app/common/pagingFormatterNoLoad.component.ts
@@ -9,10 +9,8 @@ import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
   <div *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " >
   <ul class="pagination pagination-sm">
 
-  <li *ngIf=" currentPage  > 1" ><a (click)="onPage((1))" aria-label="Previous">
+   <li *ngIf=" currentPage  > 1" ><a (click)="onPage((1))" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span></a></li>
-  <!--<li *ngIf=" currentPage  > 1"><a (click)="onPage((currentPage -1))">\<</a></li>-->
-
    <li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
    <li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
    <li class="active"><a >{{currentPage}}</a></li>
@@ -20,11 +18,10 @@ import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
    <li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
    <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
    <li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{currentPage +4}}</a></li>
-
-   <!--<li *ngIf=" getTotalPages()  > currentPage "><a (click)="onPage((currentPage+1))">\></a></li>-->
    <li *ngIf="getTotalPages()  > currentPage"><a (click)="onPage((getTotalPages()))" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
-      </a></li>
+      </a>
+  </li>
 
 
  </ul>
@@ -57,42 +54,22 @@ export class pagingFormatterNoLoad {
     return parseInt(''+((i==integerI)?i:i+1));
   }
   onPrev(){
-    this.currentPage=-1;
+    this.currentPage=this.currentPage-1;
     this.pageChange.emit({
      value: this.currentPage
    });
-    // if(this.params){
-    //   let pageparams= this.params;
-    //   pageparams.page=this.currentPage -1
-    //   this._router.navigate( [this.navigateTo, pageparams] );
-    // }else{
-    //   this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage -1) }] );
-    // }
+
   }
 
   onNext(){
-    // if(this.params){
-    //   let pageparams= this.params;
-    //   pageparams.page=this.currentPage +1;
-    //   this._router.navigate( [this.navigateTo, pageparams] );
-    // }else{
-    //   this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage +1) }] );
-    // }
-    this.currentPage=+1;
+
+    this.currentPage=this.currentPage+1;
     this.pageChange.emit({
      value: this.currentPage
    });
   }
   onPage(pageNum: number){
-    // if(this.params){
-    //   let pageparams= this.params;
-    //   pageparams.page=pageNum;
-    //   this._router.navigate( [this.navigateTo, pageparams] );
-    // }else if(this.term!=''){
-    //    this._router.navigate( [this.navigateTo, { keyword: this.term, page: pageNum, size: this.size }] );
-    //  }else{
-    //    this._router.navigate( [this.navigateTo, { page: pageNum, size: this.size }] );
-    //  }
+
      this.currentPage=pageNum;
      this.pageChange.emit({
       value: this.currentPage
diff --git a/src/app/searchPages/common/search.class.ts b/src/app/searchPages/common/search.class.ts
new file mode 100644
index 00000000..95094d78
--- /dev/null
+++ b/src/app/searchPages/common/search.class.ts
@@ -0,0 +1,14 @@
+export class Filter{
+    public title: string;
+    public filterId: string;
+    public countSelectedValues: number;
+    public values: Value[];
+
+}
+export class Value{
+    public name: string;
+    public id: string;
+    public selected: boolean;
+    public number: number;
+
+}
diff --git a/src/app/searchPages/common/searchFilter.component.ts b/src/app/searchPages/common/searchFilter.component.ts
new file mode 100644
index 00000000..20d1072c
--- /dev/null
+++ b/src/app/searchPages/common/searchFilter.component.ts
@@ -0,0 +1,57 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
+import {Observable}       from 'rxjs/Observable';
+import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
+import { Filter, Value} from './search.class';
+
+@Component({
+    selector: 'search-filter',
+    template: `
+    <p>{{filter.title}}   </p>
+    <p *ngFor = "let value of filter.values.slice(0,5)" >
+      <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />  <span> {{value.name}} ({{value.number}}) </span>
+
+    </p>
+    <a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a>
+    <span *ngIf = "filter.values.length > 5 && showAll" >
+      <p *ngFor = "let value of filter.values.slice(5)" >
+         <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)"  />  <span> {{value.name}} ({{value.number}}) </span>
+      </p>
+      <a (click)="toggleShowAll()" > Less</a>
+    </span>
+
+    `
+})
+export class SearchFilterComponent {
+  @Input() title;
+  @Input() filterId;
+  @Input() values; //array[] " name, id, number, selected"
+  @Input() countSelectedValues:number = 0; //array[] " name, id, number, selected"
+  @Output() change  = new EventEmitter();
+  @Input() test:{value:number} ;
+  @Input() filter:Filter;
+  private showAll:boolean = false;
+  constructor () {
+
+  }
+  ngOnInit() {
+
+  }
+
+  toggleShowAll(){
+    this.showAll = !this.showAll;
+  }
+
+  filterChange(selected:boolean){
+     if(selected){
+      this.filter.countSelectedValues++;
+    }else{
+      this.filter.countSelectedValues--;
+    }
+    this.change.emit({
+     value: true
+   });
+  }
+
+
+}
diff --git a/src/app/searchPages/common/searchPage.component.ts b/src/app/searchPages/common/searchPage.component.ts
new file mode 100644
index 00000000..2ae05616
--- /dev/null
+++ b/src/app/searchPages/common/searchPage.component.ts
@@ -0,0 +1,170 @@
+import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
+import {Observable}       from 'rxjs/Observable';
+import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
+import {Location} from '@angular/common';
+import {SearchResultComponent} from './searchResult.component';
+import {SearchFilterComponent} from './searchFilter.component';
+import {pagingFormatterNoLoad} from '../../common/pagingFormatterNoLoad.component';
+import { Filter, Value} from './search.class';
+
+@Component({
+    selector: 'search-page',
+    template: `
+
+    <div class="container">
+      <div class="page-header">
+          <h1>{{pageTitle}}</h1>
+      </div>
+      <div>
+        <div class="row row-offcanvas row-offcanvas-right">
+          <div class="col-xs-12 col-sm-3">
+            <a *ngIf="isFiltered()" (click)="clearFilters()" > Clear Filters</a>
+            <p *ngFor="let filter of filters " >
+              <search-filter [filter]="filter"   (change)="filterChanged($event)" >
+
+              </search-filter>
+             </p>
+
+          </div>
+          <div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
+            <form>
+             <div class="input-group">
+               <span class="input-group-addon" id="sizing-addon2">Filter</span>
+               <input type="text" class="form-control" placeholder="Type keywords..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword" >
+               <span class="input-group-btn">
+                 <button (click)="goTo(1)"  type="submit" class="btn btn-default">Search</button>
+               </span>
+             </div>
+            </form>
+            <div class="text-right" *ngIf="results  && results.length>= size">
+                <paging-no-load [(currentPage)]="page" [totalResults]="totalResults" [size]="size"  (pageChange)="pageChanged($event)" > </paging-no-load>
+            </div>
+            <div>
+            <p *ngFor="let result of results " >
+              <search-result [id]="result.id" [title]="result.title"  >
+
+              </search-result>
+             </p>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    `,
+    directives:[SearchResultComponent, SearchFilterComponent, pagingFormatterNoLoad]
+})
+export class SearchPageComponent {
+  @Input() pageTitle = "";
+  @Input() results = [];
+  @Input() filters = [];
+  @Input() type;
+  @Input() page:number = 1;
+  @Input() size: number = 10;
+  @Input() totalResults: number = 0;
+  @Input() keyword:string = '';
+
+  test= { value: 0};
+
+  @Output() queryChange  = new EventEmitter();
+  constructor (private location: Location) {
+
+  }
+  ngOnInit() {
+    console.info("  page  - value: "+this.page);
+
+  }
+
+  changekeyword(){
+
+  }
+
+  private createUrlParameters(){
+    var allLimits="";
+    for (let filter of this.filters){
+      var filterLimits="";
+      if(filter.countSelectedValues > 0){
+        for (let value of filter.values){
+          if(value.selected == true){
+            filterLimits+=((filterLimits.length == 0)?'':',') + value.id;
+           }
+        }
+        allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':'&') +filter.filterId + '='+ filterLimits) ;
+      }
+    }
+    if(this.keyword.length > 0 ){
+       allLimits+=((allLimits.length == 0)?'':'&') + 'keyword=' + this.keyword;
+    }
+    if(this.page != 1 ){
+       allLimits+=((allLimits.length == 0)?'':'&') + 'page=' + this.page;
+    }
+    return allLimits;
+  }
+  private createQueryParameters(){
+    var allLimits="";
+    for (let filter of this.filters){
+      if(filter.countSelectedValues > 0){
+        var filterLimits="";
+        for (let value of filter.values){
+          if(value.selected == true){
+            filterLimits+=((filterLimits.length == 0)?'':' or ') + filter.filterId + '='+ value.id;
+           }
+        }
+        allLimits+=((filterLimits.length == 0 )?'':((allLimits.length == 0)?'':' and ')+'('+filterLimits +')') ;
+      }
+    }
+    if(this.keyword.length > 0 ){
+       allLimits+=((allLimits.length == 0)?'':' and ') + ' keyword=' + this.keyword;
+    }
+    return allLimits;
+  }
+  private isFiltered(){
+    var filtered=false;
+    for (let filter of this.filters){
+       if(filter.countSelectedValues > 0){
+           filtered = true;
+           break;
+       }
+     }
+    if(this.keyword.length > 0 ){
+      filtered = true;
+    }
+    return filtered;
+  }
+  clearFilters(){
+    for (let filter of this.filters){
+      if(filter.countSelectedValues > 0){
+         for (let value of filter.values){
+          if(value.selected == true){
+            value.selected = false;
+           }
+        }
+        filter.countSelectedValues = 0;
+      }
+    }
+    if(this.keyword.length > 0 ){
+      this.keyword ='';
+    }
+  }
+
+  goTo(page:number = 1){
+    this.page = page;
+    var urlParameters = this.createUrlParameters();
+    var queryParameters = this.createQueryParameters();
+    this.location.go(location.pathname,urlParameters);
+    this.queryChange.emit({
+     value: queryParameters
+   });
+
+  }
+  filterChanged($event){
+    this.goTo(1);
+  }
+  pageChanged($event) {
+    this.page = +$event.value
+    this.goTo(this.page);
+  }
+
+}
diff --git a/src/app/searchPages/common/searchResult.component.ts b/src/app/searchPages/common/searchResult.component.ts
new file mode 100644
index 00000000..cd766828
--- /dev/null
+++ b/src/app/searchPages/common/searchResult.component.ts
@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
+import {Observable}       from 'rxjs/Observable';
+import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
+
+@Component({
+    selector: 'search-result',
+    template: `
+    <h3>{{title}}</h3>
+
+    `
+})
+export class SearchResultComponent {
+  @Input() title;
+  @Input() id;
+  //publications & organizations:
+  @Input() projects;
+  //datasets & publications
+  @Input() description;
+  @Input() year;
+  @Input() authors;
+  //datasets:
+  @Input() publisher;
+  //dataproviders & projects:
+  @Input() organizations;
+  //projects:
+  @Input() funders;
+  //organizations:
+  @Input() country;
+  //dataproviders:
+  @Input() type;
+  @Input() websiteURL;
+  @Input() OAIPMHURL;
+
+  constructor () {
+
+  }
+  ngOnInit() {
+
+  }
+
+}
diff --git a/src/app/search/search.component.ts b/src/app/searchPages/search.component.ts
similarity index 100%
rename from src/app/search/search.component.ts
rename to src/app/searchPages/search.component.ts
diff --git a/src/app/searchPages/searchPublications.component.ts b/src/app/searchPages/searchPublications.component.ts
new file mode 100644
index 00000000..16888c87
--- /dev/null
+++ b/src/app/searchPages/searchPublications.component.ts
@@ -0,0 +1,99 @@
+import {Component, Input, ViewChild} from '@angular/core';
+import {JSONP_PROVIDERS}  from '@angular/http';
+import {Observable}       from 'rxjs/Observable';
+import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
+import {SearchPageComponent} from './common/searchPage.component';
+import { Filter, Value} from './common/search.class';
+
+@Component({
+    selector: 'search-publications',
+    template: `
+    <search-page pageTitle="Search Publications" type="publication" [(filters)] = "filters" [(results)] = "results" [(totalResults)] = "totalResults" [(keyword)] = "keyword" [(page)] = "page"  (queryChange)="queryChanged($event)"  >
+    </search-page>
+
+    `,
+    directives:[SearchPageComponent]
+})
+export class SearchPublicationsComponent {
+  results =[];
+  filters =[];
+  totalResults:number  = 0 ;
+  keyword = '';
+  page :number = 1;
+  constructor (private _routeParams: RouteParams) {
+    this.results =[];
+    this.filters =[];
+    this.totalResults = 123;
+    for(var i=0; i<10 ; i++){
+        var result = {title: "title"+i, id: "id"+i}
+        this.results.push(result);
+    }
+
+    for(var i=0; i<5 ; i++){
+         var  values = [];
+         for(var j=0; j<10 ; j++){
+           var value:Value = {name: "name"+j, id: "filter_"+i+ "_id_"+j, number:j, selected:false}
+           values.push(value);
+         }
+         values.sort((n2,n1) => {
+            if (n1.number > n2.number) {
+                return 1;
+            }
+
+            if (n1.number < n2.number) {
+                return -1;
+            }
+
+            return 0;
+        });
+        var filter:Filter = {title: "title"+i, filterId: "filter_"+i, values : values, countSelectedValues:0}
+        this.filters.push(filter);
+    }
+
+
+  }
+  ngOnInit() {
+
+    let page = +this._routeParams.get('page');
+    let size = +this._routeParams.get('size');
+    this.page= (page?page:1);
+    this.keyword = (this._routeParams.get('keyword')?this._routeParams.get('keyword'):'');
+    //TODO get the rest parameters to create query
+
+
+  }
+
+  getResults(parameters:string){
+    //http://rudie.di.uoa.gr:8080/dnet-functionality-services-1.2.0-SNAPSHOT/search?action=searchNrefine&sTransformer=results_openaire&rTransformer=results_openaire_browse&query=%28oaftype+exact+result%29+and+%28resulttypeid+exact+publication%29&page=5&size=10&fields=instancetypenameid&fields=resultlanguageid&fields=relfunderid&fields=relprojectid&fields=resultacceptanceyear&fields=resultbestlicense&fields=resulthostingdatasourceid&fields=communityid&locale=en_GB
+    console.info("Execute search query "+parameters);
+    // this.results =[];
+    // this.filters =[];
+    // for(var i=0; i<30 ; i++){
+    //     var result = {title: "title"+i, id: "id"+i}
+    //     this.results.push(result);
+    // }
+    //
+    // for(var i=0; i<5 ; i++){
+    //      var  values = [];
+    //      for(var j=0; j<10 ; j++){
+    //        var value = {name: "name"+j, id: "id"+j, number:j, selected:false}
+    //        values.push(value);
+    //      }
+    //     var filter = {title: "title"+i, filterId: "id"+i, values : values}
+    //     this.filters.push(filter);
+    // }
+
+  }
+  private setFilters(){
+    //TODO set filters from
+  }
+
+  private queryChanged($event) {
+    var parameters = $event.value
+    this.getResults(parameters)
+    console.info("Execute search query "+parameters);
+
+  }
+
+
+}
diff --git a/src/server.ts b/src/server.ts
index 04154c9f..e20cfcc7 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -40,7 +40,7 @@ function ngApp(req, res) {
   let config: ExpressEngineConfig = {
     directives: [ App ],
     platformProviders: [
-      provide(ORIGIN_URL, {useValue: 'http://localhost:5000'}),
+      provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}),
       provide(BASE_URL, {useValue: baseUrl}),
     ],
     providers: [
@@ -74,6 +74,6 @@ app.use('/', ngApp);
 app.use('/home', ngApp);
 app.use('/search', ngApp);
 // Server
-app.listen(5000, () => {
-  console.log('Listening on: http://localhost:5000');
+app.listen(3000, () => {
+  console.log('Listening on: http://localhost:3000');
 });