[Library|Trunk]

Table view:
        apply changes of new search design (form, filters, mobile off-canvas view for filters)
        fix issue with search utils exception
        remove unused helper position, keep only top

Library.css: move there off-canvas-white css



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58377 d315682c-612b-4755-9ff5-7f18f6832af3

searchPages/dataProviders/compatibleDataProvidersTable.component.ts

@@ -1,23 +1,23 @@
-import {Component, Input, ViewChild} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {Location} from '@angular/common';
 import { ActivatedRoute} from '@angular/router';
 import { Filter, Value} from '../searchUtils/searchHelperClasses.class';
 import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
-import {SearchResult}     from '../../utils/entities/searchResult';
 import {ErrorCodes} from '../../utils/properties/errorCodes';
 import {ErrorMessagesComponent}    from '../../utils/errorMessages.component';
-import {SearchFields, FieldDetails} from '../../utils/properties/searchFields';
+import {SearchFields} from '../../utils/properties/searchFields';
 import {SearchPageTableViewComponent } from '../searchUtils/searchPageTableView.component';
 import {SearchUtilsClass } from '../searchUtils/searchUtils.class';
 import{EnvProperties} from '../../utils/properties/env-properties';
 
+
 @Component({
     selector: 'search-content-providers-table',
     template: `
 
     <search-page-table    pageTitle="OpenAIRE Content Providers Table"
-                          type="content providers" entityType="dataprovider" [(filters)] = "filters"
+                          type="content providers" entityType="dataprovider" [filters] = "filters"
-                          [(results)] = "results"  [(searchUtils)] = "searchUtils"
+                          [results] = "results"  [searchUtils] = "searchUtils"
                           [columnNames]="columnNames"
                           [showResultCount]=false
                           [disableForms]="disableForms"
@@ -117,7 +117,7 @@ properties:EnvProperties;
                           this.searchUtils.status = this.errorCodes.NONE;
                         } else {
                           this.searchPage.triggerInitialLoad();
-                          this.searchPage.transform(this.results);
+                          this.searchPage.transform(this.results, this.searchUtils);
                           this.disableForms = false;
                         }
                         this.enableSearchView = true;

searchPages/dataProviders/entityRegistriesTable.component.ts

@@ -107,7 +107,7 @@ properties:EnvProperties;
                           this.searchUtils.status = this.errorCodes.NONE;
                         } else {
                           this.searchPage.triggerInitialLoad();
-                          this.searchPage.transform(this.results);
+                          this.searchPage.transform(this.results, this.searchUtils);
                           this.disableForms = false;
                         }
                         this.enableSearchView = true;

searchPages/dataProviders/journalsTable.component.ts

@@ -116,7 +116,7 @@ properties:EnvProperties;
                           this.searchUtils.status = this.errorCodes.NONE;
                         } else {
                           this.searchPage.triggerInitialLoad();
-                          this.searchPage.transform(this.results);
+                          this.searchPage.transform(this.results, this.searchUtils);
                           this.disableForms = false;
                         }
                         this.enableSearchView = true;

searchPages/searchUtils/searchForm.component.ts

@@ -7,12 +7,19 @@ import {Router} from '@angular/router';
   template: `
 
         <form [class]="((isDisabled)?'uk-disabled':'')+(setFormCentered?' uk-text-center':'')">
-         <input type="text" class="uk-input  uk-width-xlarge@l uk-width-medium@m uk-width-auto" [placeholder]="placeholderText" aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >
+            <div class="uk-inline">
+                <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
+                   (click)="keyword = ''; keywordChanged()"
+                   uk-icon="icon: close"></a>
+                <input type="text" class="uk-input  uk-width-xlarge@l uk-width-large@m uk-width-medium"
+                       [placeholder]="placeholderText" aria-describedby="sizing-addon2"
+                       [(ngModel)]="keyword" name="keyword">
+            </div>
             <button *ngIf="!link" (click)="keywordChanged()"  type="submit" class=" uk-button  portal-button uk-margin-small-left">
-            <span class="uk-icon" ><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1.5"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
+                Search
           </button>
           <button *ngIf="link"   (click)="goTo()"  type="submit" class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left">
-            <span class="uk-icon" ><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1.5"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
+              Search
           </button>
         </form>
     `

searchPages/searchUtils/searchPageTableView.component.html

@@ -1,3 +1,37 @@
+<ng-template #filters_column>
+  <div *ngIf="filters.length > 0" class="  search-filters  ">
+    <div   *ngIf="countFilters()>1"  class="  uk-margin-medium-bottom">
+      <div  class="uk-grid uk-flex uk-flex-bottom">
+        <h5 class="uk-text-bold">Filters</h5>
+        <a (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
+          Clear All
+        </a>
+      </div>
+      <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
+        <ng-container *ngFor="let filter of filters " >
+          <ng-container *ngIf = "filter.countSelectedValues > 0">
+        <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
+              [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
+                        <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
+                        <span class="selectedFilterLabel ">
+                          <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
+                            <span class=" clickable" aria-hidden="true">
+                              <span class="uk-icon">
+                                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
+                              </span>
+                            </span>
+                            <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
+                          </a>
+                        </span>
+                      </span>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+
+    <search-filter  *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
+  </div>
+</ng-template>
 <div class="image-front-topbar  uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
   <div style=" min-height: 350px;"  [class]="' uk-background-norepeat uk-background-cover uk-background-bottom-center uk-section uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass">
     <div class="uk-position-cover" style="/*background-color: rgba(255, 255, 255, 0.37);*/"></div>
@@ -19,168 +53,43 @@
 <schema2jsonld   *ngIf="url"  [URL]="url" type="search" [name]=pageTitle [searchAction]=false></schema2jsonld>
 
 <div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle"   >
-  <div uk-grid uk-grid>
+  <div uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <!--div   [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle '+searchFormClass" >
-        <div   class="uk-width-1-1">
-          <div   class="uk-width-1-1">
-            <search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)"  [placeholderText]="formPlaceholderText"></search-form>
-          </div>
-          <div   class="uk-width-1-1  uk-light">
-            <div *ngIf="isFiltered()" class = "uk-container uk-text-center ">
-              <span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span>{{searchUtils.keyword}}<a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon">
-                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
-                </span></span></a></span>
-              </span>
-              <span *ngFor="let filter of filters " >
-                <span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:
-                  <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " >{{value.name}}<a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
-                    </span></span></a>
-                    <span *ngIf="!end">, </span>
-                  </span>
-                </span>
-              </span>
-
-              <a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">
-                Clear All
-              </a>
-            </div>
-          </div>
-        </div>
-      </div!-->
-
       <div  class="uk-container  uk-container-large">
-        <helper position="top"></helper>
+        <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
         <div  class="uk-width-2-3@m  uk-width-2-3@l  uk-width-1-1@s">
-
           <div *ngIf="filters.length > 0" class="uk-offcanvas-content uk-hidden@m">
-            <a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>
+            <a href="#offcanvas-usage" uk-toggle>
+                <span class="uk-icon uk-margin-small-right uk-margin-small-left">
+                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="settings">
+                    <ellipse fill="none" stroke="#000" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse>
+                    <ellipse fill="none" stroke="#000" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse>
+                    <circle fill="none" stroke="#000" cx="13.15" cy="9.55" r="2.15"></circle>
+                    <rect x="1" y="3" width="3" height="1"></rect>
+                    <rect x="10" y="3" width="8" height="1"></rect>
+                    <rect x="1" y="9" width="8" height="1"></rect>
+                    <rect x="15" y="9" width="3" height="1"></rect>
+                    <rect x="1" y="15" width="3" height="1"></rect>
+                    <rect x="10" y="15" width="8" height="1"></rect>
+                  </svg>
+                </span>
+              <span>Filters <span *ngIf="countFilters()>1">({{(countFilters())}})</span></span>
 
-            <div id="offcanvas-usage" uk-offcanvas>
+            </a>
-              <div class="uk-offcanvas-bar">
+            <div id="offcanvas-usage" uk-offcanvas  overlay style="z-index:10000;">
+              <div class="uk-offcanvas-bar offcanvas-white">
                 <button class="uk-offcanvas-close" type="button" uk-close></button>
-                <div class = " uk-margin-top ">
+                <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
-                  <span *ngIf = "searchUtils.keyword.length > 0"><span class="uk-text-bold">Keywords:</span>
-                  <a (click) = "clearKeywords() " title="Remove keywords" [class]="((disableForms)?'  uk-disabled':'  ')+' portal-color '"><span class=" clickable " aria-hidden="true"><span class="uk-icon ">
-                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                    </span></span></a>
-                  <span [innerHtml]="searchUtils.keyword"></span>
-
-                  </span>
-                  <div *ngFor="let filter of filters " >
-                    <span *ngIf = "filter.countSelectedValues > 0"> <span class="uk-text-bold">{{filter.title}}:</span>
-                      <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " >
-                        <a [title]="'Remove '+value.name"(click) = "removeFilter(value, filter) " [class]="((disableForms)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
-                          <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                          </span></span></a>
-                        <span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" [title]="value.name"></span>
-
-                        <span *ngIf="!end" class="   ">, </span>
-                      </span>
-                    </span>
-                  </div>
-                  <!-- <div class="uk-margin-small-bottom uk-margin-small-top">
-                    <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' uk-margin-small-right portal-link '">
-                   Clear All
-                  </a>
-                  <div *ngIf="searchViewLink" class="uk-width-1-1@s uk-hidden@m">
-                    <p>
-                      <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
-
-                      <a routerLinkActive="router-link-active" [class]="(disableForms && !enableSearchView)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
-                        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                      </a>
-                    </p>
-                  </div>
-                </div> -->
-                <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">
-                  <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
-                    Clear All
-                  </a>
-<!--                  <span *ngIf="searchViewLink" class="uk-width-expand">
-                    <p>
-                      <span uk-tooltip="title: Table view" class=" uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg>
-                      </span>
-                      <a uk-tooltip="title: List view" routerLinkActive="router-link-active" [class]="(disableForms && !enableSearchView)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
-                        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                        List view
-                      </a>
-
-                      <search-dataprovider-map  [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [mapUrl]="mapUrl" [mapTooltipType]="mapTooltipType"></search-dataprovider-map>
-                    </p>
-                  </span>-->
-                </div>
-
-                </div>
-                <div class="uk-text-large">Filter By:</div>
-                <search-filter  *ngFor="let filter of filters " [addShowMore]=false [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
               </div>
             </div>
-
           </div>
         </div>
 
         <div  class="uk-grid uk-width-1-1 uk-margin-top">
-          <div *ngIf="filters.length > 0" class="  uk-margin-top helper-left-right search-filters uk-visible@m">
+          <div class="uk-width-1-4@m search-filters uk-visible@m ">
-            <helper position="left" before="true"></helper>
+            <ng-container *ngTemplateOutlet="filters_column; context: {}" class=""></ng-container>
-            <div  class = "  ">
-              <span *ngIf = "searchUtils.keyword.length > 0"><span class="uk-text-bold">Keywords:</span>
-              <a (click) = "clearKeywords() " title="Remove keywords" [class]="((disableForms)?'  uk-disabled':'  ')+' portal-color '"><span class=" clickable " aria-hidden="true"><span class="uk-icon ">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                </span></span></a>
-              <span [innerHtml]="searchUtils.keyword"></span>
-
-              </span>
-              <div *ngFor="let filter of filters "  class="uk-margin-small-bottom">
-                <span *ngIf = "filter.countSelectedValues > 0"> <span class="uk-text-bold">{{filter.title}}:</span>
-                  <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " >
-                    <a [title]="'Remove '+value.name"(click) = "removeFilter(value, filter) " [class]="((disableForms)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
-                      <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                      </span></span></a>
-                    <span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" [title]="value.name"></span>
-
-                    <span *ngIf="!end" class="   ">, </span>
-                  </span>
-                </span>
-              </div>
-              <!-- <div class="uk-margin-small-bottom ">
-                <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' uk-margin-small-right portal-link '">
-               Clear All
-              </a>
-               <div *ngIf="searchViewLink" class="uk-width-1-1@s ">
-                <p>
-                  <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
-
-                  <a routerLinkActive="router-link-active" [class]="(disableForms && !enableSearchView)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
-                    <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                  </a>
-                </p>
-              </div>
-            </div> -->
-
-            <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">
-              <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
-                Clear All
-              </a>
-             <!-- <span *ngIf="searchViewLink" class="uk-width-expand">
-                <p>
-                  <span uk-tooltip="title: Table view" class="  uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
-
-                  <a uk-tooltip="title: List view" routerLinkActive="router-link-active" [class]="(disableForms && !enableSearchView)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
-                    <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-                  </a>
-                  <search-dataprovider-map class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [mapUrl]="mapUrl" [mapTooltipType]="mapTooltipType"></search-dataprovider-map>
-                </p>
-              </span>-->
-            </div>
-
-            </div>
-            <search-filter  *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
-            <helper position="left" before="false"></helper>
           </div>
-          <helper *ngIf="filters.length == 0" class="uk-margin-top helper-left-right uk-visible@m" position="left"></helper>
 
           <div class="uk-width-expand@m uk-width-1-1@s uk-first-column custom-dataTable-content" >
             <div *ngIf="openaireLink"> <a class="uk-margin-top   uk-button uk-button-text"  [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
@@ -328,24 +237,8 @@
                 [href]="properties.lastIndexInformationLink" target="_blank">
                 Last index information
             </a>
-
-            <helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>
-            <helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>
           </div>
-
-          <!-- <div *ngIf="searchViewLink" class="helper-left-right uk-visible@m">
-            <helper position="right" before="true"></helper>
-            <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
-
-            <a routerLinkActive="router-link-active" [class]="(disableForms && !enableSearchView)?'uk-disabled uk-link-muted':''" [routerLink]=searchViewLink >
-              <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
-            </a>
-            <helper position="right" before="false"></helper>
-          </div>
-          <helper *ngIf="!searchViewLink" class="helper-left-right uk-visible@m" position="right"></helper> -->
         </div>
-
-        <helper position="bottom"></helper>
       </div>
       <modal-search-filter [filter]="currentFilter" [showResultCount]=showResultCount (modalChange)="filterChanged($event)"></modal-search-filter>
     </div>

searchPages/searchUtils/searchPageTableView.component.ts

@@ -15,7 +15,7 @@ import {EnvProperties}                    from '../../utils/properties/env-prope
 import {Filter, Value}                    from './searchHelperClasses.class';
 import {SearchResult}                     from '../../utils/entities/searchResult';
 import {SearchFields, FieldDetails}       from '../../utils/properties/searchFields';
-import {SearchUtilsClass}                 from './searchUtils.class';
+import {SearchCustomFilter, SearchUtilsClass} from './searchUtils.class';
 import {DOI, StringUtils}                 from '../../utils/string-utils.class';
 import {ModalLoading}                     from '../../utils/modal/loading.component';
 import {SearchFilterComponent}            from './searchFilter.component';
@@ -24,6 +24,7 @@ import {ErrorCodes}                       from '../../utils/properties/errorCode
 import {PiwikService}                     from '../../utils/piwik/piwik.service';
 //import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
 import { SEOService } from '../../sharedComponents/SEO/SEO.service';
+import {HelperService} from "../../utils/helper/helper.service";
 
 @Component({
     selector: 'search-page-table',
@@ -80,19 +81,22 @@ export class SearchPageTableViewComponent  implements OnInit, AfterViewInit {
   dtTrigger: Subject<any> = new Subject(); //necessary
   properties:EnvProperties;
   url = null;
+  public pageContents = null;
+  @Input() customFilter: SearchCustomFilter = null;
   constructor (private route: ActivatedRoute,
                private router: Router,
                private location: Location,
                private _meta: Meta,
                private _title: Title,
                private _piwikService:PiwikService,
-             private seoService: SEOService) { }
+             private seoService: SEOService,
+               private helper: HelperService) { }
 
   ngOnInit() {
     this.route.data
       .subscribe((data: { envSpecific: EnvProperties }) => {
         this.properties = data.envSpecific;
-
+        this.getPageContents();
         this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
         if(typeof window !== 'undefined') {
           this.updateUrl(data.envSpecific.baseLink+location.pathname);
@@ -358,7 +362,10 @@ public getParametersFromUrl(params) {
 /*
 Transform initial - not filtered results to get the filtered number
 */
-    transform(results): any {
+    transform(results, searchUtils:SearchUtilsClass = null  ): any {
+      if(searchUtils!=null) {
+        this.searchUtils = searchUtils;
+      }
       if(results.length > 0) {
         var errorCodes:ErrorCodes = new ErrorCodes();
         this.searchUtils.status = errorCodes.LOADING;
@@ -568,9 +575,12 @@ Transform initial - not filtered results to get the filtered number
              filters+=filter.countSelectedValues;
          }
        }
-      if(this.searchUtils.keyword.length > 0 ){
-        filters++;
-      }
       return filters;
     }
+  private getPageContents() {
+    this.helper.getPageHelpContents(this.router.url, this.properties,  (this.customFilter) ? this.customFilter.valueId : null).subscribe(contents => {
+
+      this.pageContents = contents;
+    })
+  }
 }