From 21651d9d3f463f5c07355d0f4e52a8d3867d88cc Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Thu, 17 Apr 2014 14:20:59 +0200
Subject: webui: improve pagination

pagination now support:
- styles updated to PatternFly + DataTables
- added 'First' and 'Last' button

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
---
 install/ui/less/forms-override.less |  12 ++++
 install/ui/src/freeipa/facet.js     |   5 +-
 install/ui/src/freeipa/widget.js    | 125 +++++++++++++++++++++++++++---------
 install/ui/test/data/ipa_init.json  |   2 +
 4 files changed, 108 insertions(+), 36 deletions(-)

(limited to 'install')

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index 4a0a4dbc0..8841b69ed 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -187,3 +187,15 @@ input[type="radio"]:checked + label:before {
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
     }
 }
+
+
+// tables
+.table > tfoot > tr > td.table-summary {
+    // reset padding to properly style DataTables pagination
+    padding: 0;
+
+    .summary {
+        padding: 2px 10px 3px;
+        display: inline-block;
+    }
+}
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js
index 0e2e0506f..54e86a4c8 100644
--- a/install/ui/src/freeipa/facet.js
+++ b/install/ui/src/freeipa/facet.js
@@ -1638,10 +1638,7 @@ exp.table_facet = IPA.table_facet = function(spec, no_init) {
             that.load_all(data);
         }
 
-        that.table.current_page_input.val(that.table.current_page);
-        that.table.total_pages_span.text(that.table.total_pages);
-
-        that.table.pagination_control.css('visibility', 'visible');
+        that.table.refresh_pagination();
 
         that.post_load.notify([data], that);
         that.clear_expired_flag();
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 08270e319..da82dafea 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -2533,13 +2533,14 @@ IPA.table_widget = function (spec) {
         var tr = $('<tr/>').appendTo(that.tfoot);
 
         var td = $('<td/>', {
+            'class': 'table-summary',
             colspan: that.columns.values.length + (that.selectable ? 1 : 0)
         }).appendTo(tr);
 
         that.create_error_link(td);
 
-        that.summary = $('<span/>', {
-            'name': 'summary'
+        that.summary = $('<div/>', {
+            'class': 'summary'
         }).appendTo(td);
 
         if (that.pagination) {
@@ -2547,52 +2548,112 @@ IPA.table_widget = function (spec) {
         }
     };
 
+    /**
+     * Create or recreate pagination
+     * @param  {jQuery} container parent element
+     * @protected
+     */
     that.create_pagination = function(container) {
 
-        that.pagination_control = $('<span/>', {
-            'class': 'pagination-control'
-        }).appendTo(container);
+        if (container && !that.pagination_control) {
+            that.pagination_control = $('<span/>', {
+                'class': 'dataTables_paginate pagination-control'
+            }).appendTo(container);
+        } else if (that.pagination_control) {
+            that.pagination_control.empty();
+        } else {
+            return;
+        }
 
-        $('<a/>', {
-            text: text.get('@i18n:widget.prev'),
-            name: 'prev_page',
-            click: function() {
-                that.prev_page();
-                return false;
+        if (that.total_pages <= 1) return;
+
+        function render_btn(cls, icon, title, disabled, handler) {
+            var li = $('<li/>', {
+                'class': cls,
+                title: title
+            });
+            var span = $('<span/>', {
+                'class': 'i fa ' + icon
+            }).appendTo(li);
+            if (disabled) {
+                li.addClass('disabled');
+            } else {
+                span.click(handler);
             }
-        }).appendTo(that.pagination_control);
+            return li;
+        }
 
-        that.pagination_control.append(' ');
+        var prev_ul = $('<ul/>', { 'class': 'pagination' });
+        var middle = $('<div/>', { 'class': 'pagination-input' });
+        var next_ul = $('<ul/>', { 'class': 'pagination' });
 
-        $('<a/>', {
-            text: text.get('@i18n:widget.next'),
-            name: 'next_page',
-            click: function() {
-                that.next_page();
+        var cp = that.current_page;
+        var tp = that.total_pages;
+
+        prev_ul.append(render_btn('first',
+            'fa-angle-double-left',
+            text.get('@i18n:widget.first'),
+            cp <= 1,
+            function() {
+                that.set_page(1);
                 return false;
-            }
-        }).appendTo(that.pagination_control);
+            }));
 
-        that.pagination_control.append(' ');
-        that.pagination_control.append(text.get('@i18n:widget.page'));
-        that.pagination_control.append(': ');
+        prev_ul.append(render_btn('prev',
+            'fa-angle-left',
+            text.get('@i18n:widget.prev'),
+            cp <= 1,
+            function() {
+                that.prev_page();
+                return false;
+            }));
 
-        that.current_page_input = $('<input/>', {
+        next_ul.append(render_btn('next',
+            'fa-angle-right',
+            text.get('@i18n:widget.next'),
+            cp >= tp,
+            function() {
+                that.next_page();
+                return false;
+            }));
+
+        next_ul.append(render_btn('last',
+            'fa-angle-double-right',
+            text.get('@i18n:widget.last'),
+            cp >= tp,
+            function() {
+                that.set_page(tp);
+                return false;
+            }));
+
+        var current = $('<input/>', {
             type: 'text',
-            name: 'current_page',
+            'class': 'paginate_input',
             keypress: function(e) {
                 if (e.which == 13) {
-                    var page = parseInt(that.current_page_input.val(), 10) || 1;
+                    var page = parseInt(current.val(), 10) || 1;
                     that.set_page(page);
                 }
             }
-        }).appendTo(that.pagination_control);
+        }).appendTo(middle);
+        current.val(cp);
 
-        that.pagination_control.append(' / ');
+        var of = $('<span/>', {
+            'class': 'paginate_of'
+        }).appendTo(middle);
+        of.append(' '+ text.get('@i18n:widget.of', 'of')+ ' ');
+        of.append($('<b/>', { text: tp }));
 
-        that.total_pages_span = $('<span/>', {
-            name: 'total_pages'
-        }).appendTo(that.pagination_control);
+        that.pagination_control.append(prev_ul);
+        that.pagination_control.append(middle);
+        that.pagination_control.append(next_ul);
+    };
+
+    /**
+     * Refresh pagination
+     */
+    that.refresh_pagination = function() {
+        that.create_pagination();
     };
 
     /**
@@ -2655,7 +2716,7 @@ IPA.table_widget = function (spec) {
             page = that.total_pages;
         }
         that.current_page = page;
-        that.current_page_input.val(page);
+        that.refresh_pagination();
         that.refresh();
     };
 
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index 500aead41..e3384a960 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -553,6 +553,8 @@
                     },
                     "true": "True",
                     "widget": {
+                        "first": "First",
+                        "last": "Last",
                         "next": "Next",
                         "page": "Page",
                         "prev": "Prev",
-- 
cgit