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
--
Endi S. Dewata
From fb05d4c5f5bfbf082da8a104aa93bdbe08368577 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 | 152 ++++++++++++++++++++++++++++++-----------------
install/ui/ipa.css | 19 +++++-
install/ui/sudo.js | 9 +++-
install/ui/widget.js | 131 ++++++++++++++++++++++++++++-------------
4 files changed, 212 insertions(+), 99 deletions(-)
diff --git a/install/ui/associate.js b/install/ui/associate.js
index 5eb84260eee57ef556db13cf4e04eeb9c430f52a..cae242339d77cf8561aefaaf1af2ba52e9a26398 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,100 @@ IPA.association_facet = function (spec) {
dialog.open(that.container);
};
+ that.refresh_table = function() {
+
+ that.table.empty();
+
+ 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;
+ }
+
+ pkeys.sort();
+ var total = pkeys.length;
+
+ 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 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;
+ 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;
+ for (var i=0; i<results.length; i++) {
+ var record = results[i].result;
+ that.table.add_record(record);
+ }
+ }
+ );
+ }
+ };
+
that.get_records = function(pkeys, on_success, on_error) {
- if (!pkeys.length) return;
+ var length = pkeys.length;
+ if (!length) return;
-
- var options = {
- 'all': true,
- 'rights': true
- };
-
- 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 command = IPA.command({
- entity: that.other_entity,
- method: 'find',
- args: args,
- options: options,
- on_success: on_success,
- on_error: on_error
+ 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,
+ rights: 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();
+ that.table.current_page = 1;
- 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);
- }
- }
- );
+ 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) {
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
