claimsByToken.component: min-height added in data tables | searchFilterModal.component: component added to show all values of a filter in search pages - modal closes when a checkbox is clicked | in search pages and browse results modal added to show all values of a filter with more than 5 values

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47255 d315682c-612b-4755-9ff5-7f18f6832af3

portal-2/src/app/claims/claimsByToken/claimsByToken.component.ts

@@ -49,7 +49,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
           <div class = "uk-alert uk-alert-primary " >No pending claims found.</div>
         </div>
 
-        <div class="uk-overflow-container">
+        <div class="uk-overflow-container custom-dataTable-content">
         <!--table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped">
           <thead>
              <tr>
@@ -78,7 +78,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
           </tbody>
         </table-->
 
-        <table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped custom-dataTable-content"
+        <table *ngIf="pending_claims && pending_claims.length > 0" class="uk-table uk-table-striped"
                 [mfData]="pending_claims" #mf1="mfDataTable" [mfRowsOnPage]="rowsOnPage" [mfActivePage]="1">
                 <!--[(mfSortBy)]="sortByClaimDate1" (mfSortOrder)="sortOrder"-->
           <thead>
@@ -107,18 +107,12 @@ import {RouterHelper} from '../../utils/routerHelper.class';
               </tr>
           </tbody>
           <tfoot>
-            <tr>
+           <div>
-              <td>
-              </td>
-              <td></td>
-              <td></td>
-              <td>
                 <paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf1, $event)"></paging-no-load>
-              </td>
+            </div>
-            </tr>
           </tfoot>
         </table>
-        </div>
+         </div>
 
         <h2> Already Curated Claims</h2>
 
@@ -126,7 +120,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
           <div class = "uk-alert uk-alert-primary " >No curated claims found.</div>
         </div>
 
-        <div class="uk-overflow-container">
+        <div class="uk-overflow-container  custom-dataTable-content">
         <!--table *ngIf="curated_claims && curated_claims.length > 0" class="uk-table uk-table-striped">
           <thead>
              <tr>

portal-2/src/app/searchPages/searchUtils/browseStatistic.component.ts

@@ -15,27 +15,35 @@ import {RouterHelper} from '../../utils/routerHelper.class';
     template: `
 
 
-       <h4 class="tm-article-subtitle">{{filter.title}}</h4>
+      <h4 class="tm-article-subtitle">{{filter.title}}</h4>
       <div *ngIf="filter.values.length == 0" class="uk-alert uk-alert-primary" role="alert">No {{filter.title}} statistics found</div>
-      <ul *ngIf="filter.values.length > 0 && !viewAll" class="uk-list uk-list-line  browseFilters">
+      <ul *ngIf="filter.values.length > 0 " class="uk-list uk-list-line  browseFilters">
         <li *ngFor= "let value of filter.values.slice(0,5)"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
           <a class = " filterItem"  [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
           <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
         </li>
-        <li *ngIf= " filter.values.length > 5 && !viewAll " (click)="viewAll=true;">
+        <li *ngIf= " filter.values.length > 5  ">
-          <span  ><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
+          <span  uk-toggle="target: #modal"><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
-        </li>
-      </ul>
-      <ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-line   browseFilters">
-        <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
-        <a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
-          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
-        </li>
-        <li *ngIf= " filter.values.length > 5 && viewAll " (click)="viewAll=false;">
-          <span  ><span class="uk-text-muted clickable">View less </span><a><span uk-icon="icon: triangle-up"></span></a></span>
         </li>
       </ul>
 
+
+      <!-- This is the modal -->
+      <div id="modal" uk-modal>
+        <div class="uk-modal-dialog uk-modal-body">
+          <button class="uk-modal-close-default" type="button" uk-close></button>
+
+          <h4 class="tm-article-subtitle">{{filter.title}}</h4>
+          <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line   browseFilters">
+            <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
+            <a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
+              <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span><span class="filterNumber" > ({{value.number}})</span></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+
     `
 
 })

portal-2/src/app/searchPages/searchUtils/searchFilter.component.ts

@@ -2,11 +2,11 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {Observable}       from 'rxjs/Observable';
 
 import { Filter, Value} from './searchHelperClasses.class';
+import {Open} from '../../utils/modal/open.component';
 
 @Component({
     selector: 'search-filter',
     template: `
-
   <ul *ngIf= "filter.values.length >0" class = "uk-accordion uk-animation-fade"  uk-accordion="">
     <li class="uk-open">
         <h3  class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
@@ -19,20 +19,20 @@ import { Filter, Value} from './searchHelperClasses.class';
                <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
                {{_formatName(value)}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
             </div>
-            <div class="uk-grid-divider uk-margin-remove"></div>
+            <!--div class="uk-grid-divider uk-margin-remove"></div-->
-            <div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade filterItem">
+            <hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">
+            <div *ngFor = "let value of getNotSelectedValues(filter).slice(0,5-getSelectedValues(filter).length)" class = "uk-animation-fade filterItem">
 
                <span class="filterName"><div title = "{{value.name}}"> <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
                {{_formatName(value)}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
             </div>
 
+            <a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="toggle()">Show More</a>
        </div>
       </div>
     </li>
     </ul>
 
-
-
     `
 })
 
@@ -43,6 +43,16 @@ export class SearchFilterComponent {
     public showAll:boolean = false;
     public _maxCharacters:number =28;
 
+    @Output() toggleModal = new EventEmitter();
+
+    @Output() modalChange = new EventEmitter();
+    filterModalChange() {
+      console.info("Modal Changed");
+      this.modalChange.emit({
+        value: true
+      });
+      //this.close();
+    }
 
     constructor () {
     }
@@ -71,7 +81,6 @@ export class SearchFilterComponent {
             this.filter.countSelectedValues--;
             // this.reorderFilterValues();
         }
-
     }
     getSelectedValues(filter):any{
       var selected = [];
@@ -121,4 +130,12 @@ export class SearchFilterComponent {
 //                 this.filter.values.splice(0, 0, selectedValue);
 //             }
 //         }
+
+
+  toggle() {
+    this.toggleModal.emit({
+      value: this.filter
+    });
+  }
+
 }

portal-2/src/app/searchPages/searchUtils/searchFilterModal.component.ts

@@ -0,0 +1,101 @@
+import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmitter, Output} from '@angular/core';
+// import { DynamicComponentLoader} from '@angular/core';
+
+import {Open} from '../../utils/modal/open.component';
+import { Filter} from './searchHelperClasses.class';
+
+@Component({
+  selector: 'modal-search-filter',
+  template: `
+  <div *ngIf="filter!=undefined" [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal  [open]="!isOpen" id="modal-{{filter.filterId}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="uk-modal-dialog uk-modal-body">
+      <button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button>
+
+
+      <h3  class="uk-margin-bottom-remove uk-margin-top">
+        {{filter.title}}
+      </h3>
+
+      <div class="uk-accordion-content searchFilterBoxValues ">
+        <div *ngFor = "let value of getSelectedValues(filter)"  class = "uk-animation-fade filterItem">
+
+           <span class="filterName"><div title = "{{value.name}}">
+           <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
+           {{value.name}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
+        </div>
+        <hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove">
+        <div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade filterItem">
+           <span class="filterName"><div title = "{{value.name}}">
+           <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
+           {{value.name}} </div></span><span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number}})</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  `,
+  encapsulation: ViewEncapsulation.None,
+})
+/**
+  * API to an open search filter window.
+  */
+export class SearchFilterModalComponent{
+  @Input() filter: Filter;
+  @Output() modalChange = new EventEmitter();
+
+  public isOpen:boolean=false;
+
+  constructor( public _elementRef: ElementRef){}
+
+  filterModalChange(selected:boolean) {
+    console.info("Modal Changed");
+    this.filterChange(selected);
+    this.modalChange.emit({
+      value: selected
+    });
+    this.close();
+  }
+  filterChange(selected:boolean){
+      if(selected){
+          this.filter.countSelectedValues++;
+          // this.reorderFilterValues();
+      }else{
+          this.filter.countSelectedValues--;
+          // this.reorderFilterValues();
+      }
+  }
+  getSelectedValues(filter):any{
+    var selected = [];
+    if(filter.countSelectedValues >0){
+      for (var i=0; i < filter.values.length; i++){
+        if(filter.values[i].selected){
+          selected.push(filter.values[i]);
+        }
+      }
+    }
+    return selected;
+
+  }
+  getNotSelectedValues(filter):any{
+    var notSselected = [];
+    if(filter.countSelectedValues >0){
+      for (var i=0; i < filter.values.length; i++){
+        if(!filter.values[i].selected){
+          notSselected.push(filter.values[i]);
+        }
+      }
+    }else {
+      notSselected = filter.values;
+    }
+    return notSselected;
+  }
+
+  open() {
+    this.isOpen = true;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+}

portal-2/src/app/searchPages/searchUtils/searchPage.component.ts

@@ -8,6 +8,8 @@ import {SearchUtilsClass} from './searchUtils.class';
 import {DOI, StringUtils} from '../../utils/string-utils.class';
 import {ModalLoading} from '../../utils/modal/loading.component';
 import { Meta} from '../../../angular2-meta';
+import{SearchFilterComponent} from './searchFilter.component';
+import {SearchFilterModalComponent} from './searchFilterModal.component';
 
 @Component({
     selector: 'search-page',
@@ -37,7 +39,7 @@ import { Meta} from '../../../angular2-meta';
           </div>
           <div  class="uk-grid uk-width-1-1 uk-margin">
             <div class=" search-filters uk-width-1-4@l  uk-width-1-4@m  uk-width-1-1@s">
-               <search-filter  *ngFor="let filter of filters " [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)"></search-filter>
+               <search-filter  *ngFor="let filter of filters " [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
             </div>
 
             <div class="uk-width-3-4@m  uk-width-3-4@l  uk-width-1-1@s" >
@@ -66,6 +68,8 @@ import { Meta} from '../../../angular2-meta';
 
     <modal-loading [message]= "'Loading results...'"></modal-loading>
 
+    <modal-search-filter [filter]="currentFilter" (modalChange)="filterChanged($event)"></modal-search-filter>
+
     `
 })
 export class SearchPageComponent {
@@ -94,6 +98,11 @@ export class SearchPageComponent {
   public urlParam: string;
   public parameterNames:string[] =[];
   public parameterValues:string[] =[];
+
+  @ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ;
+  public currentFilter: Filter;
+
+
   constructor (private location: Location , private _meta: Meta) {
    }
 
@@ -107,6 +116,12 @@ export class SearchPageComponent {
   ngAfterViewChecked(){
 
   }
+
+  toggleModal($event) {
+    this.currentFilter = $event.value;
+    this.searchFilterModal.open();
+  }
+
   updateDescription(description:string){
     this._meta.updateMeta("description", description);
     this._meta.updateMeta("og:description", description);
@@ -443,6 +458,7 @@ export class SearchPageComponent {
 
   }
   filterChanged($event){
+    console.info("filter Changed");
        this.goTo(1);
   }
   keywordChanged($event) {

portal-2/src/app/searchPages/searchUtils/searchPage.module.ts

@@ -7,18 +7,22 @@ import{SearchPageComponent} from './searchPage.component';
 import{SearchFormModule} from './searchForm.module';
 import{SearchResultsModule} from './searchResults.module';
 import{SearchFilterComponent} from './searchFilter.component';
+import{SearchFilterModalComponent} from './searchFilterModal.component';
 import{LoadingModalModule} from '../../utils/modal/loadingModal.module';
 import {ReportsServiceModule} from '../../services/reportsService.module';
 import{SearchPagingModule} from './searchPaging.module';
 import {SearchDownloadModule} from './searchDownload.module';
+import {ModalModule} from '../../utils/modal/modal.module';
+
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule,RouterModule,  SearchFormModule, SearchResultsModule, LoadingModalModule, ReportsServiceModule, SearchPagingModule, SearchDownloadModule
+    CommonModule, FormsModule,RouterModule,  SearchFormModule, SearchResultsModule, LoadingModalModule, ReportsServiceModule, SearchPagingModule, SearchDownloadModule, ModalModule
   ],
   declarations: [
     SearchPageComponent,
-    SearchFilterComponent
+    SearchFilterComponent,
+    SearchFilterModalComponent
     ,
 ],
 
@@ -26,7 +30,7 @@ import {SearchDownloadModule} from './searchDownload.module';
   ],
   exports: [
     SearchPageComponent,
-SearchFilterComponent
+    SearchFilterComponent
     ]
 })
 export class SearchPageModule { }

portal-2/src/index.html

@@ -142,7 +142,7 @@
       }
 
       .custom-dataTable-content {
-          min-height: 1000px;
+          min-height: 600px;
       }
 
       .filterItem span {