wcs: add pagination for list of cards (#68037)
This commit is contained in:
parent
c96fb54b04
commit
9d4ae7974c
|
@ -86,6 +86,7 @@ class WcsCardInfoCellForm(forms.ModelForm):
|
||||||
'carddef_reference',
|
'carddef_reference',
|
||||||
'related_card_path',
|
'related_card_path',
|
||||||
'card_ids',
|
'card_ids',
|
||||||
|
'limit',
|
||||||
'only_for_user',
|
'only_for_user',
|
||||||
'custom_schema',
|
'custom_schema',
|
||||||
)
|
)
|
||||||
|
|
|
@ -1384,7 +1384,7 @@ class WcsCardInfosCell(CardMixin, CellBase):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def css_class_names(self):
|
def css_class_names(self):
|
||||||
return '%s card' % super().css_class_names
|
return '%s card %s' % (super().css_class_names, self.get_reference())
|
||||||
|
|
||||||
def get_cell_extra_context(self, context):
|
def get_cell_extra_context(self, context):
|
||||||
extra_context = super().get_cell_extra_context(context)
|
extra_context = super().get_cell_extra_context(context)
|
||||||
|
|
|
@ -355,48 +355,71 @@ $(function() {
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
// pagination in cells with list of items
|
function pagination_update_page(items, max_page_index, step, paginate_by, $pagination, focus_first_item) {
|
||||||
$(document).on('combo:cell-loaded', function(ev, cell) {
|
var page_index = $pagination.data('page_index') + step;
|
||||||
var $pagination = $(cell).find('.cell-items-pagination');
|
if (page_index == 0) {
|
||||||
if ($pagination.length == 0) return;
|
$pagination.find('.cell-items-pagination-prev').prop('disabled', true);
|
||||||
var page_index = 0;
|
} else {
|
||||||
|
$pagination.find('.cell-items-pagination-prev').prop('disabled', null);
|
||||||
|
}
|
||||||
|
if (page_index == max_page_index - 1) {
|
||||||
|
$pagination.find('.cell-items-pagination-next').prop('disabled', true);
|
||||||
|
} else {
|
||||||
|
$pagination.find('.cell-items-pagination-next').prop('disabled', null);
|
||||||
|
}
|
||||||
|
start_item = paginate_by * page_index;
|
||||||
|
items.hide();
|
||||||
|
items.slice(start_item, start_item + paginate_by).show();
|
||||||
|
$pagination.data('page_index', page_index);
|
||||||
|
if (focus_first_item) {
|
||||||
|
$pagination.parent().focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function paginate($pagination, items, must_focus) {
|
||||||
|
$pagination.data('page_index', 0);
|
||||||
var paginate_by = parseInt($pagination.data('paginate-by'));
|
var paginate_by = parseInt($pagination.data('paginate-by'));
|
||||||
// Get all <li> inside the same div as us, ignoring whether they are part of
|
|
||||||
// different <ul>
|
|
||||||
var wrapper = $pagination.parent();
|
|
||||||
wrapper.attr('tabindex', -1)
|
|
||||||
var items = $pagination.parent().find('li');
|
|
||||||
var max_page_index = Math.ceil(items.length / paginate_by);
|
var max_page_index = Math.ceil(items.length / paginate_by);
|
||||||
if (items.length <= paginate_by) {
|
if (items.length <= paginate_by) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_page(step, focus_first_item) {
|
function update_page(step, focus_first_item) {
|
||||||
page_index = page_index + step;
|
if (! must_focus) {
|
||||||
if (page_index == 0) {
|
focus_first_item = false;
|
||||||
$pagination.find('.cell-items-pagination-prev').prop('disabled', true);
|
|
||||||
} else {
|
|
||||||
$pagination.find('.cell-items-pagination-prev').prop('disabled', null);
|
|
||||||
}
|
}
|
||||||
if (page_index == max_page_index - 1) {
|
pagination_update_page(items, max_page_index, step, paginate_by, $pagination, focus_first_item);
|
||||||
$pagination.find('.cell-items-pagination-next').prop('disabled', true);
|
}
|
||||||
} else {
|
|
||||||
$pagination.find('.cell-items-pagination-next').prop('disabled', null);
|
|
||||||
}
|
|
||||||
start_item = paginate_by * page_index;
|
|
||||||
items.hide();
|
|
||||||
items.slice(start_item, start_item + paginate_by).show();
|
|
||||||
if (focus_first_item) {
|
|
||||||
wrapper.focus()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$pagination.find('.cell-items-pagination-prev').click(function() { update_page(-1, true); });
|
$pagination.find('.cell-items-pagination-prev').click(function() { update_page(-1, true); });
|
||||||
$pagination.find('.cell-items-pagination-next').click(function() { update_page(1, true); });
|
$pagination.find('.cell-items-pagination-next').click(function() { update_page(1, true); });
|
||||||
update_page(0, false);
|
update_page(0, false);
|
||||||
$pagination.prop('hidden', null);
|
$pagination.prop('hidden', null);
|
||||||
|
};
|
||||||
|
|
||||||
|
function paginate_cards($pagination) {
|
||||||
|
var items = $pagination.parent().find('.card.' + $pagination.data('cell-reference'));
|
||||||
|
paginate($pagination, items, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// pagination for cells with list of items or for card cells
|
||||||
|
$(document).on('combo:cell-loaded', function(ev, cell) {
|
||||||
|
var $pagination = $(cell).find('.cell-items-pagination');
|
||||||
|
if ($pagination.length == 0) return;
|
||||||
|
// Get all <li> inside the same div as us, ignoring whether they are part of
|
||||||
|
// different <ul>
|
||||||
|
var wrapper = $pagination.parent();
|
||||||
|
wrapper.attr('tabindex', -1)
|
||||||
|
var items = $pagination.parent().find('li');
|
||||||
|
paginate($pagination, items, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.cell-items-pagination').each(function(idx, elem) {
|
$('.cell-items-pagination').each(function(idx, elem) {
|
||||||
$(document).trigger('combo:cell-loaded', $(elem).parents('.cell').first());
|
var $cells = $(elem).parents('.cell');
|
||||||
|
if ($cells.length) {
|
||||||
|
$(document).trigger('combo:cell-loaded', $cells.first());
|
||||||
|
} else if ($(elem).data('cell-reference')) {
|
||||||
|
paginate_cards($(elem));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
{% load static %}
|
<div class="cell-items-pagination"{% if data_cell_reference %} data-cell-reference="{{ data_cell_reference }}"{% endif %} data-paginate-by="{{ paginate_by|default:10 }}" hidden>
|
||||||
<div class="cell-items-pagination" data-paginate-by="{{ paginate_by|default:10 }}" hidden>
|
|
||||||
<button class="cell-items-pagination-prev" disabled>←</a>
|
<button class="cell-items-pagination-prev" disabled>←</a>
|
||||||
<button class="cell-items-pagination-next" disabled>→</a>
|
<button class="cell-items-pagination-next" disabled>→</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,6 +16,9 @@
|
||||||
{% if extra_context %}data-extra-context="{{ extra_context|signed|urlencode }}"{% endif %}
|
{% if extra_context %}data-extra-context="{{ extra_context|signed|urlencode }}"{% endif %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
><div>{% render_cell cell %}</div></div>
|
><div>{% render_cell cell %}</div></div>
|
||||||
|
{% if cell.include_pagination %}
|
||||||
|
{% include "combo/pagination.html" with paginate_by=cell.limit data_cell_reference=cell.get_reference %}
|
||||||
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if placeholder_options.fx_grid_layout %}</div>{% endif %}
|
{% if placeholder_options.fx_grid_layout %}</div>{% endif %}
|
||||||
{% if outer_tag %}</{{outer_tag|default:"div"}}>{% endif %}
|
{% if outer_tag %}</{{outer_tag|default:"div"}}>{% endif %}
|
||||||
|
|
|
@ -127,6 +127,7 @@ def placeholder(context, placeholder_name, **options):
|
||||||
for i in range(repeat):
|
for i in range(repeat):
|
||||||
new_cell = copy.copy(cell)
|
new_cell = copy.copy(cell)
|
||||||
new_cell.repeat_index = i
|
new_cell.repeat_index = i
|
||||||
|
new_cell.include_pagination = bool(i + 1 == repeat)
|
||||||
repeated_cells.append(new_cell)
|
repeated_cells.append(new_cell)
|
||||||
context['cells'][cell_idx:cell_idx] = repeated_cells
|
context['cells'][cell_idx:cell_idx] = repeated_cells
|
||||||
|
|
||||||
|
|
|
@ -2696,6 +2696,15 @@ def test_card_cell_render(mock_send, context, app):
|
||||||
assert len(resp.context['cells']) == 3
|
assert len(resp.context['cells']) == 3
|
||||||
for i in range(0, 3):
|
for i in range(0, 3):
|
||||||
assert '<h2>Foo bar X%sY</h2>' % i in resp
|
assert '<h2>Foo bar X%sY</h2>' % i in resp
|
||||||
|
assert 'data-paginate-by="10"' in resp
|
||||||
|
|
||||||
|
cell.limit = 42
|
||||||
|
cell.save()
|
||||||
|
resp = app.get(page.get_online_url())
|
||||||
|
assert len(resp.context['cells']) == 3
|
||||||
|
for i in range(0, 3):
|
||||||
|
assert '<h2>Foo bar X%sY</h2>' % i in resp
|
||||||
|
assert 'data-paginate-by="42"' in resp
|
||||||
|
|
||||||
# using custom view
|
# using custom view
|
||||||
cell.carddef_reference = 'default:card_model_1:foo'
|
cell.carddef_reference = 'default:card_model_1:foo'
|
||||||
|
|
Loading…
Reference in New Issue