Adds support for displaying issues grouped by decade

docs/source/published/issues.rst

@@ -19,7 +19,7 @@ Janeway comes with two issue types built in: Issue and Collection. Collections d
 
 Display Settings
 ----------------
-In the top right of the Issue Management page there is the Edit Display Settings button. This allows you to configure how issue titles are displayed.
+In the top right of the Issue Management page there is the Edit Display Settings button. This allows you to configure how issue titles and the issue page are displayed.
 
 You can turn these elements on or off:
 
@@ -29,6 +29,8 @@ You can turn these elements on or off:
 - Issue title
 - Article number
 - Article page numbers
+- Issue DOI
+- Group issues by decade
 
 Here are a few example issue displays:
 
@@ -42,6 +44,9 @@ Here are a few example issue displays:
 .. tip::
     You can use the article number field to set an arbitrary number for each article, whether to distinguish articles within each volume or issue or to number articles across volumes and issues. Article number is an optional field separate from article ID and can be set in Edit Metadata.
 
+.. tip::
+    If your journal has a lot of issues you can enable the "Group issues by decade" feature to allow readers to jump to a specific decade on the issues interface.
+
 Creating and Editing Issue Details
 ----------------------------------
 You can create new issues from this page using the Create Issue button and you view and edit the detail of individual issues by selecting them.

src/journal/forms.py

@@ -134,4 +134,5 @@ class Meta:
             'display_article_number',
             'display_article_page_numbers',
             'display_issue_doi',
+            'display_issues_grouped_by_decade',
         )

src/journal/migrations/0062_journal_display_issues_grouped_by_decade.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.20 on 2024-02-29 15:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('journal', '0061_auto_20230816_1122'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='journal',
+            name='display_issues_grouped_by_decade',
+            field=models.BooleanField(default=False, help_text='When enabled the issue page will group and display issues by decade.'),
+        ),
+    ]

src/journal/models.py

@@ -228,6 +228,11 @@ class Journal(AbstractSiteModel):
     )
     display_article_page_numbers = models.BooleanField(default=True)
     display_issue_doi = models.BooleanField(default=True)
+    display_issues_grouped_by_decade = models.BooleanField(
+        default=False,
+        help_text='When enabled the issue page will group and display issues '
+                  'by decade.',
+    )
 
     disable_front_end = models.BooleanField(default=False)
 
@@ -374,6 +379,24 @@ def published_issues(self):
             date__lte=timezone.now(),
         )
 
+    def issues_by_decade(self, issues_to_sort=None):
+        issue_decade_dict = {}
+
+        if not issues_to_sort:
+            issues_to_sort = Issue.objects.filter(
+                journal=self,
+                date__lte=timezone.now(),
+                issue_type__code='issue',
+            )
+        for issue in issues_to_sort:
+            issue_year = issue.date_published.year
+            decade = issue_year - (issue_year % 10)
+            if issue_decade_dict.get(decade):
+                issue_decade_dict[decade].append(issue)
+            else:
+                issue_decade_dict[decade] = [issue]
+        return issue_decade_dict
+
     def editors(self):
         """ Returns all users enrolled as editors for the journal
         :return: A queryset of core.models.Account

src/journal/views.py

@@ -255,6 +255,10 @@ def issues(request):
         'issues': issue_objects,
         'issue_type': issue_type,
     }
+    if request.journal.display_issues_grouped_by_decade:
+        context['issues_by_decade'] = request.journal.issues_by_decade(
+            issues_to_sort=issue_objects,
+        )
     return render(request, template, context)
 
 

src/themes/OLH/assets/scss/app.scss

@@ -1313,3 +1313,12 @@ button.list-group-item-danger.active:focus {
 .table-wrap {
   overflow-x: scroll;
 }
+
+.no-margin-left {
+  margin-left: 0;
+}
+
+.decade_list_item:hover {
+  text-decoration: underline;
+}
+

src/themes/OLH/templates/elements/journal/issue_list.html

@@ -0,0 +1,26 @@
+{% load svg_or_image from press_url %}
+{% load static %}
+{% for issue in issues %}
+    <div class="medium-3 columns {% if forloop.last %}end{% endif %}">
+        <div class="box issue">
+            <a href="{% url 'journal_issue' issue.id %}" class="box-link"></a>
+            {% if issue.cover_image %}
+                {% svg_or_image issue.cover_image alt_text=issue.title %}
+            {% elif journal.default_cover_image %}
+                {% svg_or_image journal.default_cover_image alt_text=issue.title %}
+            {% else %}
+                {% static "common/img/sample/issue_cover.png" %}
+            {% endif %}
+
+            <div class="info-bar">
+                <p>{{ issue.display_title }}<br/>{{ issue.get_sorted_articles.count }} {% trans "items" %}
+                </p>
+            </div>
+        </div>
+    </div>
+    {% cycle '' '' '' '</div><div class="row">' %}
+    {% empty %}
+    <div class="large-12 columns">
+        <h3>{% trans "There are no issues published in this journal yet." %}</h3>
+    </div>
+{% endfor %}

src/themes/OLH/templates/elements/journal/issue_list_by_decade.html

@@ -0,0 +1,24 @@
+<div class="large-12 columns">
+    <p>
+        {% blocktrans %}
+            Issues are grouped by decade. Select a decade to view the issues
+            published in during that decade.
+        {% endblocktrans %}
+    </p>
+    <ul class="inline-list no-margin-left">
+        {% for decade, issues in issues_by_decade.items %}
+            <li class="decade_list_item">
+                <a href="#decade-{{ decade }}">{{ decade }}s</a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+
+{% for decade, issues in issues_by_decade.items %}
+    <div class="large-12 columns">
+        <h2 id="decade-{{ decade }}">{{ decade }}s</h2>
+    </div>
+    {% include "elements/journal/issue_list.html" with issues=issues %}
+
+{% endfor %}
+

src/themes/OLH/templates/journal/issues.html

@@ -1,7 +1,5 @@
 {% extends "core/base.html" %}
-{% load static %}
-{% load svg_or_image from press_url %}
-{% load hooks %}
+
 {% load i18n %}
 
 {% block page_title %}{% trans "Issues" %}{% endblock %}
@@ -15,30 +13,11 @@
             <div class="large-12 columns">
                 <h1>{% trans issue_type.plural_name %}</h1>
             </div>
-            {% for issue in issues %}
-                <div class="medium-3 columns {% if forloop.last %}end{% endif %}">
-                    <div class="box issue">
-                        <a href="{% url 'journal_issue' issue.id %}" class="box-link"></a>
-                        {% if issue.cover_image %}
-                            {% svg_or_image issue.cover_image alt_text=issue.title %}
-                        {% elif journal.default_cover_image %}
-                            {% svg_or_image journal.default_cover_image alt_text=issue.title %}
-                        {% else %}
-                            {% static "common/img/sample/issue_cover.png" %}
-                        {% endif %}
-
-                        <div class="info-bar">
-                            <p>{{ issue.display_title }}<br />{{ issue.get_sorted_articles.count }} {% trans "items" %}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                {% cycle '' '' '' '</div><div class="row">' %}
-                {% empty %}
-                <div class="large-12 columns">
-                    <h3>{% trans "There are no issues published in this journal yet." %}</h3>
-                </div>
-            {% endfor %}
+            {% if request.journal.display_issues_grouped_by_decade %}
+                {% include "elements/journal/issue_list_by_decade.html" %}
+            {% else %}
+                {% include "elements/journal/issue_list.html" %}
+            {% endif %}
         </div>
     </section>
 {% endblock %}

src/themes/clean/templates/elements/journal/issue_list.html

@@ -0,0 +1,10 @@
+<ul>
+    {% for issue in issues %}
+        <li>
+            <a href="{% url 'journal_issue' issue.id %}">{{ issue.display_title }}
+                &bull; {{ issue.articles.all.count }} {% trans "items" %}</a>
+        </li>
+        {% empty %}
+        <li>{% trans 'This journal has no issues' %}.</li>
+    {% endfor %}
+</ul>

src/themes/clean/templates/elements/journal/issue_list_by_decade.html

@@ -0,0 +1,17 @@
+<p>
+    {% blocktrans %}
+        Issues are grouped by decade. Select a decade to view the issues
+        published in during that decade.
+    {% endblocktrans %}
+<ul class="list-inline">
+    {% for decade, issues in issues_by_decade.items %}
+        <li class="list-inline-item">
+            <a href="#decade-{{ decade }}">{{ decade }}s</a>
+        </li>
+    {% endfor %}
+</ul>
+
+{% for decade, issues in issues_by_decade.items %}
+    <h2 id="decade-{{ decade }}">{{ decade }}s</h2>
+    {% include "elements/journal/issue_list.html" with issues=issues %}
+{% endfor %}

src/themes/clean/templates/journal/issues.html

@@ -10,27 +10,15 @@
     <div class="row">
         <div class="col-md-12">
             <h1>{% trans issue_type.plural_name %}</h1>
-
-
             {% if request.journal.current_issue %}
-                <p>{% trans 'The current issue is' %}: </p>
-                <ul>
-                    <li>
-                        <a href="{% url 'journal_issue' request.journal.current_issue.id %}">{{ request.journal.current_issue.display_title }}&bull; {{ request.journal.current_issue.articles.all.count }} {% trans "items" %}</a>
-                    </li>
-                </ul>
+                <p>{% trans 'The current issue is' %}: <a href="{% url 'journal_issue' request.journal.current_issue.id %}">{{ request.journal.current_issue.display_title }}&bull; {{ request.journal.current_issue.articles.all.count }} {% trans "items" %}</a></p>
             {% endif %}
 
-            <p>Issue Archive: </p>
-            <ul>
-                {% for issue in issues %}
-                    <li><a href="{% url 'journal_issue' issue.id %}">{{ issue.display_title }}
-                        &bull; {{ issue.articles.all.count }} {% trans "items" %}</a></li>
-                    {% empty %}
-                    <li>{% trans 'This journal has no issues' %}.</li>
-                {% endfor %}
-            </ul>
-
+            {% if request.journal.display_issues_grouped_by_decade %}
+                {% include "elements/journal/issue_list_by_decade.html" %}
+            {% else %}
+                {% include "elements/journal/issue_list.html" %}
+            {% endif %}
         </div>
     </div>
 {% endblock %}

src/themes/material/assets/mat.css

@@ -712,3 +712,20 @@ body {
 main {
     flex: 1 0 auto;
 }
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline-item {
+  display: inline-block;
+}
+
+.list-inline-item:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.decade-list-item:hover {
+    text-decoration: underline;
+}

src/themes/material/templates/elements/journal/issue_list.html

@@ -0,0 +1,41 @@
+{% load static %}
+{% for issue in issues %}
+    <div class="col m12 l6 xl4">
+        <div class="card horizontal">
+            <div class="card-image">
+                <a href="{% url 'journal_issue' issue.id %}"><img
+                        class="issue_image" src="
+                        {% if issue.cover_image %}{{ issue.cover_image.url }}{% elif journal.default_cover_image %}{{ journal.default_cover_image.url }}{% else %}{% static "common/img/sample/issue_cover.png" %}{% endif %}"
+                        alt="{{ issue.title }}"
+                        class="img-fluid"></a>
+            </div>
+            <div class="card-stacked card">
+                <div class="card-content">
+                    {% if issue.pretty_issue_identifier and issue.issue_title and journal.display_issue_title %}
+                        <p>{{ issue.pretty_issue_identifier }}
+                            <br/> {{ issue.get_sorted_articles.count }} {% trans "items" %}
+                        </p>
+                    {% else %}
+                        <p>{{ issue.display_title }}
+                            <br/> {{ issue.get_sorted_articles.count }} {% trans "items" %}
+                        </p>
+                    {% endif %}
+                </div>
+                <div class="card-reveal">
+                    <span class="card-title grey-text text-darken-4"><i
+                            class="material-icons right">{% trans "close" %}</i></span>
+                    <span class="grey-text text-darken-4">{{ issue.issue_title }}</span>
+                </div>
+                <div class="card-action">
+                    <a href="{% url 'journal_issue' issue.id %}">{% trans "View Issue" %}</a>
+                    {% if request.user and request.user.is_staff or user_is_editor %}
+                        <a href="{% url 'manage_issues_id' issue.pk %}"><i
+                                class="fa fa-edit">&nbsp;</i></a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    {% empty %}
+
+{% endfor %}

src/themes/material/templates/elements/journal/issue_list_by_decade.html

@@ -0,0 +1,29 @@
+<div class="large-12 columns">
+    <p>
+        {% blocktrans %}
+            Issues are grouped by decade. Select a decade to view the issues
+            published in during that decade.
+        {% endblocktrans %}
+    </p>
+    <ul class="list-inline">
+        {% for decade, issues in issues_by_decade.items %}
+            <li class="list-inline-item decade-list-item">
+                <a href="#decade-{{ decade }}">{{ decade }}s</a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+
+{% for decade, issues in issues_by_decade.items %}
+    <div class="large-12 columns">
+        <h2 id="decade-{{ decade }}">{{ decade }}s</h2>
+    </div>
+    <div class="row">
+        <div class="large-12 columns">
+            {% include "elements/journal/issue_list.html" with issues=issues %}
+        </div>
+    </div>
+
+
+{% endfor %}
+