Work on pagination: item_detail + keep active list when navigating pagination on collection_home #39
authordurandn
Thu, 06 Oct 2016 16:48:36 +0200
changeset 214 5f16c5f1efff
parent 213 43aa7c589048
child 215 a88647fcdbef
Work on pagination: item_detail + keep active list when navigating pagination on collection_home #39
src/iconolab/templates/iconolab/collection_home.html
src/iconolab/templates/iconolab/detail_item.html
src/iconolab/views/iconolab_objects.py
--- 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">&laquo;</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">&raquo;</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">&laquo;</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">&raquo;</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);