Work on pagination: item_detail + keep active list when navigating pagination on collection_home #39
--- a/src/iconolab/templates/iconolab/collection_home.html Thu Oct 06 15:09:18 2016 +0200
+++ b/src/iconolab/templates/iconolab/collection_home.html Thu Oct 06 16:48:36 2016 +0200
@@ -29,15 +29,15 @@
<div id="collection-tabs" class="row tab-selector">
<div class="col-md-12">
<ul class="nav nav-tabs">
- <li id="tab-items" role="presentation" class="active"><a class="collection-home-tab" id="show-items" @click="switchTab('items')">Objets du fonds {{collection.verbose_name}}</a></li>
- <li id="tab-contribution" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
- <li id="tab-revised" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-revised" @click="switchTab('revised')">Annotations les plus révisées</a></li>
- <li id="tab-recent" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
+ <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}"><a class="collection-home-tab" id="show-items" @click="switchTab('items')">Objets du fonds {{collection.verbose_name}}</a></li>
+ <li id="tab-contribution" role="presentation" class="pull-right {% if active_list == 'contributions' %}active{% endif %}"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
+ <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}"><a class="collection-home-tab" id="show-revised" @click="switchTab('revised')">Annotations les plus révisées</a></li>
+ <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
</ul>
</div>
</div>
<div class="row">
- <div id="list-recent" class="recent-ann-wrapper collection-home-block col-md-12">
+ <div id="list-recent" class="recent-ann-wrapper collection-home-block col-md-12 {% if active_list == 'recent' %}selected{% endif %}">
{% include "partials/image_annotations_list.html" with annotation_list=recent_list %}
{% if recent_list %}
<ul class="pagination pull-right recent-perpage" style="margin-left: 15px;">
@@ -59,21 +59,21 @@
<ul class="pagination pull-right recent-pagination">
{% if recent_list.has_previous %}
<li>
- <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.previous_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Précédent">
+ <a href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.previous_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Précédent">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{% for page in recent_list.paginator.page_range %}
- <li id="page-link-{{page}}" class="pagination-link {% if page == revised_list.number %}active{% endif %}">
- <a {% if page != revised_list.number %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{page}}&recent_perpage={{recent_list.paginator.per_page}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>{{page}}</a>
+ <li id="page-link-{{page}}" class="pagination-link {% if page == recent_list.number %}active{% endif %}">
+ <a {% if page != revised_list.number %}href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{page}}&recent_perpage={{recent_list.paginator.per_page}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>{{page}}</a>
</li>
{% endfor %}
{% if recent_list.has_next %}
<li>
- <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.next_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Suivant">
+ <a href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.next_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Suivant">
<span aria-hidden="true">»</span>
</a>
</li>
@@ -84,10 +84,9 @@
</div>
</div>
<div class="row">
- <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12">
+ <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12 {% if active_list == 'revised' %}selected{% endif %}">
{% include "partials/image_annotations_list.html" with annotation_list=revised_list %}
{% if revised_list %}
- {{revised_list.paginator.per_page}}
<ul class="pagination pull-right revised-perpage" style="margin-left: 15px;">
<li class="active pagination-label"><a>Annotations par page : </a></li>
<li class="{% if revised_list.paginator.per_page == 5 %}active{% endif %}">
@@ -132,7 +131,7 @@
</div>
</div>
<div class="row">
- <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12">
+ <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12 {% if active_list == 'contributions' %}selected{% endif %}">
{% include "partials/image_annotations_list.html" with annotation_list=contributions_list %}
{% if contributions_list %}
<ul class="pagination pull-right contributions-perpage" style="margin-left: 15px;">
@@ -179,7 +178,7 @@
</div>
</div>
<div class="row">
- <div id="list-items" class="collection-home-block selected col-md-12 text-center">
+ <div id="list-items" class="collection-home-block col-md-12 text-center {% if active_list == 'items' %}selected{% endif %}">
<ul class="image-list-wrapper list-inline">
{% for item in items_list %}
<li class="image-list-li small-image-wrapper panel panel-default">
--- a/src/iconolab/templates/iconolab/detail_item.html Thu Oct 06 15:09:18 2016 +0200
+++ b/src/iconolab/templates/iconolab/detail_item.html Thu Oct 06 16:48:36 2016 +0200
@@ -9,13 +9,13 @@
{% block content %}
<div id="item-detail" class="row">
<div class="col-md-6">
- {% for image in item.images.all|dictsort:"pk" %}
- <div id="img-{{image.image_guid}}" class="item-detail-image-block {% if forloop.first %}selected{% endif %}">
- {% thumbnail image.media "500x500" crop=False as im %}
+ {% for image in images|dictsort:"obj.pk" %}
+ <div id="img-{{image.obj.image_guid}}" class="item-detail-image-block {% if image.obj.image_guid == display_image %}selected{% endif %}">
+ {% thumbnail image.obj.media "500x500" crop=False as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
<br>
- <br><a class="btn btn-default btn-sm" href="{% url 'annotation_create' collection_name image.image_guid %}"><i class="fa fa-plus"></i> Annoter cette image</a>
+ <br><a class="btn btn-default btn-sm" href="{% url 'annotation_create' collection_name image.obj.image_guid %}"><i class="fa fa-plus"></i> Annoter cette image</a>
<br><br>
</div>
{% endfor %}
@@ -33,27 +33,70 @@
{% if item.metadatas.inventory_number %}<h5>Numéro d'inventaire : <small>{{item.metadatas.inventory_number}}</small></h5>{% endif %}
{% if item.metadatas.joconde_ref %}<h5><a href="{{item.metadatas.get_joconde_url}}" target="_blank">Cet objet dans Joconde</a></h5>{% endif %}
<br>
- {% if item.images.all.count > 1 %}
+ {% if images|length > 1 %}
<h4>Autres images pour cet objet: </h4>
- {% for image in item.images.all %}
- {% thumbnail image.media "150x150" crop=False as im_small %}
- <img class="item-image-thumbnail" id="thumb-{{image.image_guid}}" src="{{ im_small.url }}" width="{{ im_small.width }}" height="{{ im_small.height }}">
+ {% for image in images %}
+ {% thumbnail image.obj.media "150x150" crop=False as im_small %}
+ <img class="item-image-thumbnail" id="thumb-{{image.obj.image_guid}}" src="{{ im_small.url }}" width="{{ im_small.width }}" height="{{ im_small.height }}">
{% endthumbnail %}
{% endfor %}
<br><br>
{% endif %}
- {% for image in item.images.all %}
- <div class="item-stats-container" id="stats-{{image.image_guid}}">
- {% include "partials/image_stats_panel.html" with image=image label="Statistiques sur cette image :" %}
+ {% for image in images %}
+ <div class="item-stats-container" id="stats-{{image.obj.image_guid}}">
+ {% include "partials/image_stats_panel.html" with image=image.obj label="Statistiques sur cette image :" %}
</div>
{% endfor %}
<a class="btn btn-default btn-sm" href="{% url 'collection_home' collection_name %}"><i class="fa fa-list"></i> Retour à la liste d'objets</a>
</div>
- {% for image in item.images.all %}
- <div id="annotations-{{image.image_guid}}" class="col-md-12 image-annotations-list">
- {% include "partials/image_annotations_list.html" with annotation_list=image.annotations.all header="Annotation de l'image" %}
+ {{display_image}}
+ {% for image in images %}
+ <div id="annotations-{{image.obj.image_guid}}" class="col-md-12 image-annotations-list">
+ {% include "partials/image_annotations_list.html" with annotation_list=image.annotations header="Annotation de l'image" %}
+ {% if image.annotations %}
+ <ul class="pagination pull-right img-ann-{{image.obj.guid}}-perpage" style="margin-left: 15px;">
+ <li class="active pagination-label"><a>Annotations par page : </a></li>
+ <li class="{% if image.annotations.paginator.per_page == 5 %}active{% endif %}">
+ <a {% if image.annotations.paginator.per_page != 5 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=5"{% endif %}>5</a>
+ </li>
+ <li class="{% if image.annotations.paginator.per_page == 10 %}active{% endif %}">
+ <a {% if image.annotations.paginator.per_page != 10 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=10"{% endif %}>10</a>
+ </li>
+ <li class="{% if image.annotations.paginator.per_page == 25 %}active{% endif %}">
+ <a {% if image.annotations.paginator.per_page != 25 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=25"{% endif %}>25</a>
+ </li>
+ <li class="{% if image.annotations.paginator.per_page == 100 %}active{% endif %}">
+ <a {% if image.annotations.paginator.per_page != 100 %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page=1&perpage=100"{% endif %}>100</a>
+ </li>
+ </ul>
+ {% if image.annotations.has_previous or image.annotations.has_next %}
+ <ul class="pagination pull-right img-ann-{{image.obj.guid}}-pagination">
+ {% if image.annotations.has_previous %}
+ <li>
+ <a href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{image.annotations.previous_page_number}}&perpage={{image.annotations.paginator.per_page}}" aria-label="Précédent">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ {% endif %}
+
+ {% for page in image.annotations.paginator.page_range %}
+ <li id="page-link-{{page}}" class="pagination-link {% if page == image.annotations.number %}active{% endif %}">
+ <a {% if page != image.annotations.number %}href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{page}}&perpage={{image.annotations.paginator.per_page}}"{% endif %}>{{page}}</a>
+ </li>
+ {% endfor %}
+
+ {% if image.annotations.has_next %}
+ <li>
+ <a href="{% url 'item_detail' collection.name item.item_guid %}?show={{image.obj.image_guid}}&page={{image.annotations.next_page_number}}&perpage={{image.annotations.paginator.per_page}}" aria-label="Suivant">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ {% endif %}
+ </ul>
+ {% endif %}
+ {% endif %}
</div>
{% endfor %}
</div>
--- a/src/iconolab/views/iconolab_objects.py Thu Oct 06 15:09:18 2016 +0200
+++ b/src/iconolab/views/iconolab_objects.py Thu Oct 06 16:48:36 2016 +0200
@@ -250,12 +250,44 @@
(collection, item) = result
else:
return result(request)
+
context = super(ShowItemView, self).get_context_data(**kwargs)
+ image_guid_to_display = request.GET.get("show-image", str(item.images.first().image_guid))
+ if image_guid_to_display not in [str(guid) for guid in item.images.all().values_list("image_guid", flat=True)]:
+ image_guid_to_display = str(item.images.first().image_guid)
+ context['display_image'] = image_guid_to_display
+ try:
+ displayed_annotations_page = int(request.GET.get('page', '1'))
+ except ValueError:
+ displayed_annotations_page = 1
+ try:
+ displayed_annotations_per_page = int(request.GET.get('perpage', '10'))
+ except ValueError:
+ displayed_annotations_per_page = 10
+
context['collection_name'] = self.kwargs.get('collection_name', '')
context['item_guid'] = self.kwargs.get('image_guid', '')
context['collection'] = collection
context['item'] = item
+ context['images'] = []
for image in item.images.all():
+ if str(image.image_guid) == image_guid_to_display:
+ page = displayed_annotations_page
+ per_page = displayed_annotations_per_page
+ else:
+ page = 1
+ per_page = 10
+ annotations_paginator = Paginator(image.annotations.all(), per_page)
+ try:
+ annotations = annotations_paginator.page(page)
+ except PageNotAnInteger:
+ annotations = annotations_paginator.page(1)
+ except EmptyPage:
+ annotations = annotations_paginator.page(recent_paginator.num_pages)
+ context['images'].append({
+ 'obj' : image,
+ 'annotations': annotations
+ })
image.stats.views_count += 1
image.stats.save()
return render(request, 'iconolab/detail_item.html', context);