On 5/31/2011 3:38 PM, Endi Sukma Dewata wrote:
On 5/31/2011 2:18 PM, Endi Sukma Dewata wrote:
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
Attached is a new patch based on Adam's feedback.
Fixed performance issue by not requesting rights and all attributes for
associations. Postpone table.empty() invocation until the data for the
new page becomes available.
Attached is a new patch. Due to a separate issue (the show command
returns incomplete set of attributes) the 'all' option is required for
now. This option can be removed later when the issue is addressed.
--
Endi S. Dewata
From 84dbe55df16426717086f8647f51c19522068b37 Mon Sep 17 00:00:00 2001
From: Endi S. Dewata <edew...@redhat.com>
Date: Fri, 27 May 2011 16:30:41 -0500
Subject: [PATCH] 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 | 164 ++++++++++++++++++++++++++++++-----------------
install/ui/ipa.css | 19 +++++-
install/ui/sudo.js | 9 ++-
install/ui/widget.js | 131 ++++++++++++++++++++++++++------------
4 files changed, 219 insertions(+), 104 deletions(-)
diff --git a/install/ui/associate.js b/install/ui/associate.js
index 5eb84260eee57ef556db13cf4e04eeb9c430f52a..ad2da521687d5e684882aa85eab9b94226d4f7ce 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 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){
+ if (!length) return;
+
+ if (length > 100) {
length = 100;
}
- for (var i=0; i< length; i++) {
+ var batch = IPA.batch_command({
+ 'name': that.entity_name+'_'+that.name,
+ 'on_success': on_success,
+ 'on_error': on_error
+ });
+
+ 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);
- command.execute();
-
-
- };
-
- that.refresh = function() {
-
- function on_success(data, text_status, xhr) {
+ 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);
+ }
- 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);
- }
-
- } 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);
- }
+ } 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
+ });
+
+ 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.current_page = 1;
+
+ 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 826bd180b77d6444e158475bac4565fdbe375505..cc96cb801d173efde2943277dfa3b04ca1284b3c 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 89b7101bd04d10ea837752946064edb94cee2647..f5914687c4946e3422a65ce4edc7205bb381bc36 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 66dedbdfe12ea223aa42f5db8e9b35a24b7752dc..ac78de2594f760265cb66cfc61f6f431d59a3883 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() {
--
1.7.4
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
