In search pages which are in table view fix how and when error messages are displayed - ChangeDetectorRef.detectChanges() used

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

portal-2/src/app/searchPages/searchUtils/searchPageTableView.component.html

@@ -1,7 +1,6 @@
 <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >
   <div uk-grid 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">
@@ -32,11 +31,9 @@
       </div>
       <div  class="uk-container">
         <helper position="top"></helper>
-        <errorMessages [status]="[searchUtils.status]" [type]="'results'"></errorMessages>
-
         <div  class="uk-width-2-3@m  uk-width-2-3@l  uk-width-1-1@s">
 
-          <div *ngIf="searchUtils.totalResults > 0" class="uk-offcanvas-content uk-hidden@m">
+          <div 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>
 
             <div id="offcanvas-usage" uk-offcanvas>
@@ -51,13 +48,13 @@
         </div>
 
         <div  class="uk-grid uk-width-1-1">
-          <div *ngIf="searchUtils.totalResults > 0" class="helper-left-right search-filters uk-width-1-6@m  uk-visible@m">
+          <div class="helper-left-right search-filters uk-width-1-6@m  uk-visible@m">
             <helper position="left"></helper>
             <search-filter  *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)"></search-filter>
           </div>
 
           <div class="uk-width-expand@m uk-width-1-1@s uk-first-column" >
-            <div class="uk-align-center uk-margin-remove-bottom">
+            <div *ngIf="searchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
               <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
                 <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
                   {{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}
@@ -78,9 +75,13 @@
               </p>
             </div>
 
+            <div *ngIf="searchUtils.totalResults <= 0" class="errors-in-searchTableView">
+              <errorMessages [status]="[searchUtils.status]" [type]="'results'"></errorMessages>
+            </div>
+
             <div class="uk-overflow-container custom-dataTable-content">
               <table  class="uk-table uk-table-striped divider-table"  #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
-                      [mfData]="results | contentProvidersDatatable : [searchUtils, filters, triggerPipe]">
+                      [mfData]="results | contentProvidersDatatable : [searchUtils, filters, triggerPipe, cd]">
 
                 <thead *ngIf="searchUtils.totalResults > 0">
                   <tr>
@@ -117,7 +118,7 @@
                     </th>
                   </tr>
                 </thead>
-                <tbody *ngIf="searchUtils.totalResults > 0">
+                <tbody>
                   <tr class="uk-table-middle" *ngFor="let dataprovider of mf.data">
                     <td  class="uk-width-1-5 uk-text-left">
                       <a [queryParams]="{datasourceId: dataprovider.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
@@ -160,7 +161,7 @@
               </table>
             </div>
 
-            <div class="uk-align-center uk-margin-remove-bottom">
+            <div *ngIf="searchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
               <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
                 <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
                   {{searchUtils.totalResults}} content providers, page {{searchUtils.page}} of {{(totalPages())}}

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

@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild, Output, EventEmitter} from '@angular/core';
+import {Component, Input, ViewChild, Output, EventEmitter, ChangeDetectorRef} from '@angular/core';
 import {Observable}       from 'rxjs/Observable';
 import {Location} from '@angular/common';
 import { Filter, Value} from './searchHelperClasses.class';
@@ -53,8 +53,8 @@ export class SearchPageTableViewComponent {
   public currentFilter: Filter;
   public errorCodes:ErrorCodes = new ErrorCodes();
   piwiksub: any;
-  constructor (private location: Location , private _meta: Meta, private _piwikService:PiwikService) {
-   }
+
+  constructor (private location: Location , private _meta: Meta, private _piwikService:PiwikService, private cd: ChangeDetectorRef) { }
 
   ngOnInit() {
         this.updateTitle(this.pageTitle);
@@ -218,7 +218,6 @@ public getParametersFromUrl(params) {
         this.filters[i].countSelectedValues = 0;
     }
     this.clearKeywords();
-
   }
 
   private removeFilter(value:Value,filter:Filter){
@@ -230,16 +229,15 @@ public getParametersFromUrl(params) {
   }
   goTo(page:number = 1, triggerPipe:boolean = true){
     this.refreshTable(page);
-    if(triggerPipe) {
-      this.triggerPipe = !this.triggerPipe;
-    }
 
     var urlParameters = this.createUrlParameters(this.filters,true);
     this.location.go(location.pathname,urlParameters);
+    if(triggerPipe) {
+      this.triggerPipe = !this.triggerPipe;
+    }
   }
 
   filterChanged($event){
-    console.info("filter Changed");
        this.goTo(1, true);
   }
   keywordChanged($event) {

portal-2/src/app/utils/pipes/contentProvidersDatatable.pipe.ts

@@ -19,6 +19,8 @@ export class ContentProvidersDatatablePipe implements PipeTransform  {
 
       var result = array.filter(row=>this.filterAll(row, searchUtils.keyword.toLowerCase(), filters));
 
+      let oldTotal = searchUtils.totalResults;
+
       searchUtils.totalResults = result.length;
 
       var errorCodes:ErrorCodes = new ErrorCodes();
@@ -26,6 +28,10 @@ export class ContentProvidersDatatablePipe implements PipeTransform  {
       if(searchUtils.totalResults == 0 ){
         searchUtils.status = errorCodes.NONE;
       }
+
+      if(oldTotal != searchUtils.totalResults) {
+        args[3].detectChanges();
+      }
       return result;
     }
     return [];

portal-2/src/assets/discover-custom.css

@@ -94,6 +94,10 @@ h2 .custom-external {
   max-width: 20%;
 }
 
+.errors-in-searchTableView{
+  margin-top: 75px;
+}
+
 @media (min-width: 960px) {
     .float-children-right-at-medium > * {
         float: right;