From b01220cc38b2bcaeb35931bda1dc9a258ff3850b Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Fri, 27 May 2011 16:30:41 -0500
Subject: Added pagination for associations.

The association facet has been modified to support pagination. The
UI will show 20 members per page. There are buttons to go to a
previous or next page. There is also an input text to jump directly
to a certain page.

Ticket #1011
---
 install/ui/associate.js | 146 +++++++++++++++++++++++++++++++-----------------
 install/ui/ipa.css      |  19 ++++++-
 install/ui/sudo.js      |   9 ++-
 install/ui/widget.js    | 131 +++++++++++++++++++++++++++++--------------
 4 files changed, 210 insertions(+), 95 deletions(-)

(limited to 'install')

diff --git a/install/ui/associate.js b/install/ui/associate.js
index 5eb84260..ad2da521 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -468,19 +468,20 @@ IPA.association_table_widget = function (spec) {
 
     that.get_records = function(on_success, on_error) {
 
-        if (!that.values.length) return;
+        var length = that.values.length;
+        if (!length) return;
+
+        if (length > 100) {
+            length = 100;
+        }
 
         var batch = IPA.batch_command({
             'name': that.entity_name+'_'+that.name,
             'on_success': on_success,
             'on_error': on_error
         });
-        var length = that.values.length;
-        if (length > 100){
-            length = 100;
-        }
 
-        for (var i=0; i< length; i++) {
+        for (var i=0; i<length; i++) {
             var value = that.values[i];
 
             var command = IPA.command({
@@ -706,6 +707,8 @@ IPA.association_facet = function (spec) {
     that.columns = $.ordered_map();
     that.adder_columns = $.ordered_map();
 
+    that.page_length = 20;
+
     that.get_column = function(name) {
         return that.columns.get(name);
     };
@@ -765,7 +768,8 @@ IPA.association_facet = function (spec) {
             name: pkey_name,
             label: label,
             entity_name: that.entity_name,
-            other_entity: that.other_entity
+            other_entity: that.other_entity,
+            page_length: that.page_length
         });
 
         var columns = that.columns.values;
@@ -810,6 +814,10 @@ IPA.association_facet = function (spec) {
             column.entity_name = that.other_entity;
         }
 
+        that.table.refresh = function() {
+            that.refresh_table();
+        };
+
         that.table.init();
     };
 
@@ -978,66 +986,103 @@ IPA.association_facet = function (spec) {
         dialog.open(that.container);
     };
 
-    that.get_records = function(pkeys, on_success, on_error) {
+    that.refresh_table = function() {
 
-        if (!pkeys.length) return;
+        that.table.current_page_input.val(that.table.current_page);
+        that.table.total_pages_span.text(that.table.total_pages);
 
+        var pkeys = that.record[that.name];
+        if (!pkeys || !pkeys.length) {
+            that.table.summary.text('No entries.');
+            return;
+        }
 
-        var options = {
-            'all': true,
-            'rights': true
-        };
+        pkeys.sort();
+        var total = pkeys.length;
 
-        var pkey = $.bbq.getState(that.entity_name+'-pkey');
-        var args =[];
-        /* TODO: make a general solution to generate this value */
-        var relationship_filter = 'in_' + that.entity_name;
-        options[relationship_filter] = pkey;
+        var start = (that.table.current_page - 1) * that.table.page_length + 1;
+        var end = that.table.current_page * that.table.page_length;
+        end = end > total ? total : end;
 
-        var command = IPA.command({
-            entity: that.other_entity,
-            method: 'find',
-            args: args,
-            options: options,
-            on_success: on_success,
-            on_error: on_error
+        var summary = 'Showing '+start+' to '+end+' of '+total+' entries.';
+        that.table.summary.text(summary);
+
+        var list = pkeys.slice(start-1, end);
+
+        var columns = that.table.columns.values;
+        if (columns.length == 1) { // show pkey only
+            var name = columns[0].name;
+            that.table.empty();
+            for (var i=0; i<list.length; i++) {
+                var entry = {};
+                entry[name] = list[i];
+                that.table.add_record(entry);
+            }
+
+        } else { // get and show additional fields
+            that.get_records(
+                list,
+                function(data, text_status, xhr) {
+                    var results = data.result.results;
+                    that.table.empty();
+                    for (var i=0; i<results.length; i++) {
+                        var record = results[i].result;
+                        that.table.add_record(record);
+                    }
+                },
+                function(xhr, text_status, error_thrown) {
+                    that.table.empty();
+                    var summary = that.table.summary.empty();
+                    summary.append('<p>Error: '+error_thrown.name+'</p>');
+                    summary.append('<p>'+error_thrown.message+'</p>');
+                }
+            );
+        }
+    };
+
+    that.get_records = function(pkeys, on_success, on_error) {
+
+        var length = pkeys.length;
+        if (!length) return;
+
+        var batch = IPA.batch_command({
+            'name': that.entity_name+'_'+that.name,
+            'on_success': on_success,
+            'on_error': on_error
         });
 
-        command.execute();
+        for (var i=0; i<length; i++) {
+            var pkey = pkeys[i];
+
+            var command = IPA.command({
+                entity: that.other_entity,
+                method: 'show',
+                args: [pkey],
+                options: { all: true }
+            });
 
+            batch.add_command(command);
+        }
 
+        batch.execute();
     };
 
     that.refresh = function() {
 
         function on_success(data, text_status, xhr) {
+            that.record = data.result.result;
 
-            that.table.empty();
-
-            var pkeys = data.result.result[that.name];
-            if (!pkeys) return;
-
-            var columns = that.table.columns.values;
-            if (columns.length == 1) { // show pkey only
-                var name = columns[0].name;
-                for (var i=0; i<pkeys.length; i++) {
-                    var record = {};
-                    record[name] = pkeys[i];
-                    that.table.add_record(record);
-                }
+            that.table.current_page = 1;
 
-            } else { // get and show additional fields
-                that.get_records(
-                    pkeys,
-                    function(data, text_status, xhr) {
-                        var results = data.result.result;
-                        for (var i=0; i<results.length; i++) {
-                            var record = results[i];
-                            that.table.add_record(record);
-                        }
-                    }
-                );
+            var pkeys = that.record[that.name];
+            if (pkeys) {
+                that.table.total_pages =
+                    Math.ceil(pkeys.length / that.table.page_length);
+            } else {
+                that.table.total_pages = 1;
             }
+
+            that.refresh_table();
         }
 
         function on_error(xhr, text_status, error_thrown) {
@@ -1052,7 +1097,6 @@ IPA.association_facet = function (spec) {
             entity: that.entity_name,
             method: 'show',
             args: pkey,
-            options: {'all': true, 'rights': true},
             on_success: on_success,
             on_error: on_error
         }).execute();
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 826bd180..cc96cb80 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -642,11 +642,26 @@ a.action-button-disabled {
     border: 1px solid #dfdfdf;
 }
 
-.search-table tfoot tr td span{
+.search-table tfoot tr td {
     border-top: 1px solid #dfdfdf;
     margin-top: 1em;
     padding: 0.9em 0 0 1em;
-    display: block;
+}
+
+.search-table span[name=summary] {
+    float: left;
+}
+
+.search-table span[name=pagination] {
+    float: right;
+}
+
+.search-table span[name=pagination] a {
+    cursor:pointer;
+}
+
+.search-table span[name=pagination] input[name=current_page] {
+    width: 22px;
 }
 
 .aci-attribute-table tbody{
diff --git a/install/ui/sudo.js b/install/ui/sudo.js
index 38075f9b..f7ccd3cf 100644
--- a/install/ui/sudo.js
+++ b/install/ui/sudo.js
@@ -160,6 +160,13 @@ IPA.sudocmd_member_sudocmdgroup_table_widget = function (spec) {
 
     that.get_records = function(on_success, on_error) {
 
+        var length = that.values.length;
+        if (!length) return;
+
+        if (length > 100) {
+            length = 100;
+        }
+
         if (!that.values.length) return;
 
         var batch = IPA.batch_command({
@@ -168,7 +175,7 @@ IPA.sudocmd_member_sudocmdgroup_table_widget = function (spec) {
             'on_error': on_error
         });
 
-        for (var i=0; i<that.values.length; i++) {
+        for (var i=0; i<length; i++) {
             var value = that.values[i];
 
             var command = IPA.command({
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 66dedbdf..ac78de25 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1055,6 +1055,10 @@ IPA.table_widget = function (spec) {
     that.scrollable = spec.scrollable;
     that.save_values = typeof spec.save_values == 'undefined' ? true : spec.save_values;
 
+    that.current_page = 1;
+    that.total_pages = 1;
+    that.page_length = spec.page_length;
+
     that.columns = $.ordered_map();
 
     that.get_columns = function() {
@@ -1098,29 +1102,39 @@ IPA.table_widget = function (spec) {
 
     that.create = function(container) {
 
-        var table = $('<table/>', {
+        that.table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(container);
-        that.table = table;
 
         if (that.scrollable) {
-            table.addClass('scrollable');
+            that.table.addClass('scrollable');
         }
 
-        var thead = $('<thead/>').appendTo(table);
-        that.thead = thead;
+        that.thead = $('<thead/>').appendTo(that.table);
 
-        var tr = $('<tr/>').appendTo(thead);
+        var tr = $('<tr/>').appendTo(that.thead);
 
         var th = $('<th/>', {
             'style': 'width: 22px;'
         }).appendTo(tr);
 
-        $('<input/>', {
-            'type': 'checkbox',
-            'name': 'select'
+        var select_all_checkbox = $('<input/>', {
+            type: 'checkbox',
+            name: 'select',
+            title: IPA.messages.search.select_all
         }).appendTo(th);
 
+        select_all_checkbox.change(function() {
+            var checked = select_all_checkbox.is(':checked');
+            select_all_checkbox.attr('title', checked ? IPA.messages.search.unselect_all : IPA.messages.search.select_all);
+            var checkboxes = $('input[name=select]', that.tbody).get();
+            for (var i=0; i<checkboxes.length; i++) {
+                checkboxes[i].checked = checked;
+            }
+            that.select_changed();
+            return false;
+        });
+
         var columns = that.columns.values;
         for (var i=0; i<columns.length; i++) {
             var column = columns[i];
@@ -1154,18 +1168,17 @@ IPA.table_widget = function (spec) {
             }
         }
 
-        var tbody = $('<tbody/>').appendTo(table);
-        that.tbody = tbody;
+        that.tbody = $('<tbody/>').appendTo(that.table);
 
         if (that.height) {
-            tbody.css('height', that.height);
+            that.tbody.css('height', that.height);
         }
 
-        tr = $('<tr/>').appendTo(tbody);
+        that.row = $('<tr/>');
 
         var td = $('<td/>', {
             'style': 'width: 22px;'
-        }).appendTo(tr);
+        }).appendTo(that.row);
 
         $('<input/>', {
             'type': 'checkbox',
@@ -1176,7 +1189,7 @@ IPA.table_widget = function (spec) {
         for (/* var */ i=0; i<columns.length; i++) {
             /* var */ column = columns[i];
 
-            td = $('<td/>').appendTo(tr);
+            td = $('<td/>').appendTo(that.row);
             if (column.width) {
                 td.css('width', column.width);
             }
@@ -1186,16 +1199,74 @@ IPA.table_widget = function (spec) {
             }).appendTo(td);
         }
 
-        var tfoot = $('<tfoot/>').appendTo(table);
-        that.tfoot = tfoot;
+        that.tfoot = $('<tfoot/>').appendTo(that.table);
 
-        tr = $('<tr/>').appendTo(tfoot);
+        tr = $('<tr/>').appendTo(that.tfoot);
 
         td = $('<td/>', { colspan: columns.length+1 }).appendTo(tr);
 
-        $('<span/>', {
+        that.summary = $('<span/>', {
             'name': 'summary'
         }).appendTo(td);
+
+        that.pagination = $('<span/>', {
+            'name': 'pagination'
+        }).appendTo(td);
+
+        if (that.page_length) {
+
+            $('<a/>', {
+                text: 'Prev',
+                name: 'prev_page',
+                click: function() {
+                    if (that.current_page > 1) {
+                        that.current_page--;
+                        that.refresh();
+                    }
+                    return false;
+                }
+            }).appendTo(that.pagination);
+
+            that.pagination.append(' ');
+
+            $('<a/>', {
+                text: 'Next',
+                name: 'next_page',
+                click: function() {
+                    if (that.current_page < that.total_pages) {
+                        that.current_page++;
+                        that.refresh();
+                    }
+                    return false;
+                }
+            }).appendTo(that.pagination);
+
+            that.pagination.append(' Page: ');
+
+            that.current_page_input = $('<input/>', {
+                type: 'text',
+                name: 'current_page',
+                keypress: function(e) {
+                    if (e.which == 13) {
+                        var page = parseInt($(this).val(), 10);
+                        if (page < 1) {
+                            page = 1;
+                        } else if (page > that.total_pages) {
+                            page = that.total_pages;
+                        }
+                        that.current_page = page;
+                        $(this).val(page);
+                        that.refresh();
+                    }
+                }
+            }).appendTo(that.pagination);
+
+            that.pagination.append(' / ');
+
+            that.total_pages_span = $('<span/>', {
+                name: 'total_pages'
+            }).appendTo(that.pagination);
+        }
     };
 
     that.select_changed = function(){
@@ -1204,28 +1275,6 @@ IPA.table_widget = function (spec) {
     that.setup = function(container) {
 
         that.widget_setup(container);
-
-//        that.table = $('table', that.container);
-//        that.thead = $('thead', that.table);
-//        that.tbody = $('tbody', that.table);
-//        that.tfoot = $('tfoot', that.table);
-
-        var select_all_checkbox = $('input[name=select]', that.thead);
-        select_all_checkbox.attr('title', IPA.messages.search.select_all);
-
-        select_all_checkbox.change(function() {
-            var checked = select_all_checkbox.is(':checked');
-            select_all_checkbox.attr('title', checked ? IPA.messages.search.unselect_all : IPA.messages.search.select_all);
-            var checkboxes = $('input[name=select]', that.tbody).get();
-            for (var i=0; i<checkboxes.length; i++) {
-                checkboxes[i].checked = checked;
-            }
-            that.select_changed();
-            return false;
-        });
-
-        that.row = that.tbody.children().first();
-        that.row.detach();
     };
 
     that.empty = function() {
-- 
cgit