diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-04-17 14:20:59 +0200 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2014-06-10 10:23:27 +0200 |
commit | 21651d9d3f463f5c07355d0f4e52a8d3867d88cc (patch) | |
tree | b0a8d14c27fa9a06eb3e3d77c95cf4566b362db5 /install | |
parent | f631b07507d12d2ab5c1b535a987f09cb07a5565 (diff) | |
download | freeipa-21651d9d3f463f5c07355d0f4e52a8d3867d88cc.tar.gz freeipa-21651d9d3f463f5c07355d0f4e52a8d3867d88cc.tar.xz freeipa-21651d9d3f463f5c07355d0f4e52a8d3867d88cc.zip |
webui: improve pagination
pagination now support:
- styles updated to PatternFly + DataTables
- added 'First' and 'Last' button
Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
Diffstat (limited to 'install')
-rw-r--r-- | install/ui/less/forms-override.less | 12 | ||||
-rw-r--r-- | install/ui/src/freeipa/facet.js | 5 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 125 | ||||
-rw-r--r-- | install/ui/test/data/ipa_init.json | 2 |
4 files changed, 108 insertions, 36 deletions
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", |