Implement frontend for server side pagination and sorting.

Also:

- Adds page size select tag list.
- Adds clear button to search input.
- Shows search also on “my” page.

client/app/pages/queries-list/index.js

@@ -3,14 +3,23 @@ import { extend, isString } from 'lodash';
 
 import { LivePaginator } from '@/lib/pagination';
 import template from './queries-list.html';
+import './queries-list.css';
 
 class QueriesListCtrl {
   constructor($scope, $location, Events, Query, currentUser) {
     const page = parseInt($location.search().page || 1, 10);
+    const orderSeparator = '-';
+    const pageOrder = $location.search().order || 'created_at';
+    const pageOrderReverse = pageOrder.startsWith(orderSeparator);
 
     this.term = $location.search().q;
+    this.pageSize = parseInt($location.search().page_size || 20, 10);
+    this.pageSizeOptions = [5, 10, 20, 50, 100];
+
     if (isString(this.term) && this.term !== '') {
       Events.record('search', 'query', '', { term: this.term });
+    } else {
+      this.term = '';
     }
 
     this.defaultOptions = {};
@@ -32,15 +41,30 @@ class QueriesListCtrl {
       this.update();
     };
 
+    const setSearchOrClear = (name, value) => {
+      if (value) {
+        $location.search(name, value);
+      } else {
+        $location.search(name, undefined);
+      }
+    };
+
     this.isInSearchMode = () => this.term !== undefined && this.term !== null && this.term.length > 0;
 
-    const queriesFetcher = (requestedPage, itemsPerPage, paginator) => {
+    const queriesFetcher = (requestedPage, itemsPerPage, orderByField, orderByReverse, paginator) => {
       $location.search('page', requestedPage);
+      $location.search('page_size', itemsPerPage);
+
+      if (orderByReverse && !orderByField.startsWith(orderSeparator)) {
+        orderByField = orderSeparator + orderByField;
+      }
+      setSearchOrClear('order', orderByField);
 
       const request = Object.assign({}, this.defaultOptions, {
         page: requestedPage,
         page_size: itemsPerPage,
         tags: [...this.selectedTags], // convert Set to Array
+        order: orderByField,
       });
 
       if (isString(this.term) && this.term !== '') {
@@ -49,6 +73,8 @@ class QueriesListCtrl {
 
       if (this.term === '') {
         this.term = null;
+      } else {
+        this.currentPage = 'search';
       }
       $location.search('q', this.term);
 
@@ -90,11 +116,23 @@ class QueriesListCtrl {
       $location.url(url);
     };
 
-    this.paginator = new LivePaginator(queriesFetcher, { page });
+    this.paginator = new LivePaginator(queriesFetcher, {
+      page,
+      itemsPerPage: this.pageSize,
+      orderByField: pageOrder,
+      orderByReverse: pageOrderReverse,
+    });
+
+    this.pageSizeLabel = value => `${value} results`;
+
+    this.clearSearch = () => {
+      this.term = '';
+      this.update();
+    };
 
     this.update = () => {
       // `queriesFetcher` will be called by paginator
-      this.paginator.setPage(1);
+      this.paginator.setPage(page, this.pageSize);
     };
   }
 }

client/app/pages/queries-list/queries-list.css

@@ -0,0 +1,4 @@
+.search input[type="text"],
+.search button {
+  height: 35px;
+}

client/app/pages/queries-list/queries-list.html

@@ -29,6 +29,12 @@
           <tags-list tags-url="api/queries/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
         </div>
       </div>
+
+      <div class="m-b-10">
+        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
+          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
+      </div>
+
     </div>
 
     <div ng-if="!$ctrl.loaded" class="col-md-9 list-content text-center">
@@ -60,12 +66,27 @@
           <thead>
             <tr>
               <th></th>
-              <th>Name</th>
+              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('name')">
+                Name
+                <sort-icon column="'name'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
+              </th>
               <th></th>
-              <th>Created At</th>
-              <th>Runtime</th>
-              <th>Last Executed At</th>
-              <th>Update Schedule</th>
+              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('created_at')">
+                Created At
+                <sort-icon column="'created_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
+              </th>
+              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('runtime')">
+                Runtime
+                <sort-icon column="'runtime'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
+              </th>
+              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('executed_at')">
+                Last Executed At
+                <sort-icon column="'executed_at'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
+              </th>
+              <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('schedule')">
+                Update Schedule
+                <sort-icon column="'schedule'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon>
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -94,9 +115,14 @@
     </div>
 
     <div class="col-md-3 list-control-r-b">
-      <div class="m-b-5" ng-if="$ctrl.currentPage != 'my'">
+      <div class="m-b-5 input-group search">
         <input type="text" class="form-control" placeholder="Search Queries..." autofocus ng-model="$ctrl.term" ng-model-options="{ allowInvalid: true, debounce: 200 }"
           ng-change="$ctrl.update()">
+        <span class="input-group-btn">
+          <button class="btn btn-secondary" type="button" title="Clear search" ng-click="$ctrl.clearSearch()">
+            <span class="zmdi zmdi-close"></span>
+          </button>
+        </span>
       </div>
       <div class='list-group m-b-10 tags-list tiled'>
         <a href="queries" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
@@ -113,9 +139,13 @@
           /> My Queries
         </a>
       </div>
-      <div ng-if="$ctrl.currentPage != 'my'">
+      <div ng-if="$ctrl.currentPage != 'my'" class="m-b-10">
         <tags-list tags-url="api/queries/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
       </div>
+      <div class="m-b-5">
+        <select ng-change="$ctrl.update()" ng-model="$ctrl.pageSize" class="form-control"
+          ng-options="value as $ctrl.pageSizeLabel(value) for value in $ctrl.pageSizeOptions"></select>
+      </div>
     </div>
   </div>
-</div>
+</div>