display paginator and pagination info

client/components/lookup/pagination.jsx

@@ -30,11 +30,6 @@ const makeLinkProps = function(props) {
 
   let pr = props.pageReceived;
   let pf = props.pageFiltered;
-  let pn = props.pageNotExported;
-  let ne = props.loadNotExported;
-
-  // Numeric flags
-  ne = ne ? 1 : 0;
 
   // This here can be surely more elegant.
   switch(props.anchor) {
@@ -51,7 +46,7 @@ const makeLinkProps = function(props) {
 
   const query = props.routing.query.q || "";
 
-  const search = `?ne=${ne}&pr=${pr}&pf=${pf}&pn=${pn}&q=${query}`;
+  const search = `?pr=${pr}&pf=${pf}&q=${query}`;
   const hash   = `#${props.anchor}`;
   const linkTo = {
     pathname: props.routing.pathname,
@@ -215,11 +210,9 @@ class RoutesPaginatorView extends React.Component {
 
 export const RoutesPaginator = connect(
   (state) => ({
-      pageReceived:    state.routes.receivedPage,
-      pageFiltered:    state.routes.filteredPage,
-      pageNotExported: state.routes.notExportedPage,
-
-      loadNotExported: state.routes.loadNotExported,
+      pageReceived:    state.lookup.pageImported,
+      pageFiltered:    state.lookup.pageFiltered,
+      pageNotExported: 0,
 
       routing: state.routing.locationBeforeTransitions
   })

client/components/lookup/results.jsx

@@ -22,17 +22,41 @@ import ResultsTable from './table'
 
 import {loadResults, reset} from './actions'
 
+import {RoutesPaginator,
+        RoutesPaginationInfo} from './pagination'
+
+import {RoutesHeader}
+  from 'components/routeservers/routes/view'
+
+
 
 const ResultsView = function(props) {
   if(props.routes.length == 0) {
     return null;
   }
 
+  const type = props.type;
+
   return (
     <div className="card">
-      {props.header}
+      <div className="row">
+        <div className="col-md-6 routes-header-container">
+          <RoutesHeader type={type} />
+        </div>
+        <div className="col-md-6">
+          <RoutesPaginationInfo page={props.page}
+                                pageSize={props.pageSize}
+                                totalPages={props.totalPages}
+                                totalResults={props.totalResults} />
+         </div>
+      </div>
       <ResultsTable routes={props.routes}
                     displayReasons={props.displayReasons} />
+      <center>
+        <RoutesPaginator page={props.page} totalPages={props.totalPages}
+                         queryParam={props.query}
+                         anchor={type} />
+      </center>
     </div>
   );
 }
@@ -52,7 +76,7 @@ class NoResultsView extends React.Component {
 
 const NoResultsFallback = connect(
   (state) => {
-    let total = state.lookup.results;
+    let total = state.lookup.totalRoutes;
     let query = state.lookup.query;
     let isLoading = state.lookup.isLoading;
 
@@ -98,20 +122,9 @@ class LookupResults extends React.Component {
 
   render() {
     if(this.props.isLoading) {
-      return (
-				<LoadingIndicator />
-      );
+      return <LoadingIndicator />;
     }
 
-    const mkHeader = (color, action) => (
-        <p style={{"color": color, "textTransform": "uppercase"}}>
-          Routes {action}
-        </p>
-    );
-
-    const filtdHeader = mkHeader("orange", "filtered");
-    const recvdHeader = mkHeader("green",  "accepted");
-
     const filteredRoutes = this.props.routes.filtered;
     const importedRoutes = this.props.routes.imported;
 
@@ -121,11 +134,27 @@ class LookupResults extends React.Component {
 
         <NoResultsFallback />
 
-        <ResultsView header={filtdHeader}
+        <ResultsView type="filtered"
                      routes={filteredRoutes}
+
+                     page={this.props.pagination.filtered.page}
+                     pageSize={this.props.pagination.filtered.pageSize}
+                     totalPages={this.props.pagination.filtered.totalPages}
+                     totalResults={this.props.pagination.filtered.totalResults}
+
+                     query={this.props.query}
+
                      displayReasons="filtered" />
 
-        <ResultsView header={recvdHeader}
+        <ResultsView type="received"
+
+                     page={this.props.pagination.imported.page}
+                     pageSize={this.props.pagination.imported.pageSize}
+                     totalPages={this.props.pagination.imported.totalPages}
+                     totalResults={this.props.pagination.imported.totalResults}
+                     
+                     query={this.props.query}
+
                      routes={importedRoutes} />
       </div>
     )
@@ -146,11 +175,15 @@ export default connect(
       pagination: {
         filtered: {
           page: state.lookup.pageFiltered,
+          pageSize: state.lookup.pageSizeFiltered,
           totalPages: state.lookup.totalPagesFiltered,
+          totalResults: state.lookup.totalRoutesFiltered,
         },
         imported: {
           page: state.lookup.pageImported,
+          pageSize: state.lookup.pageSizeImported,
           totalPages: state.lookup.totalPagesImported,
+          totalResults: state.lookup.totalRoutesImported,
         }
       },
       isLoading: state.lookup.isLoading,