From 6ac246c863e218f9f715f8369b10d4062c1051dc Mon Sep 17 00:00:00 2001
From: Mikko Nieminen <mikko.nieminen@bih-charite.de>
Date: Wed, 18 Oct 2023 16:18:29 +0200
Subject: [PATCH] add common project badge (#1299, #1300)

---
 CHANGELOG.rst                                 |  21 +++
 appalerts/templates/appalerts/alert_list.html |  30 +---
 docs/source/dev_resource.rst                  | 156 ++++++++++--------
 docs/source/major_changes.rst                 |   1 +
 .../static/projectroles/css/projectroles.css  |  12 ++
 .../projectroles/_project_badge.html          |  19 +++
 timeline/templates/timeline/_list_item.html   |   3 +-
 timeline/templates/timeline/_list_tour.html   |   4 +-
 .../templates/timeline/_project_badge.html    |  11 --
 timeline/templates/timeline/_search_item.html |   2 +-
 10 files changed, 151 insertions(+), 108 deletions(-)
 create mode 100644 projectroles/templates/projectroles/_project_badge.html
 delete mode 100644 timeline/templates/timeline/_project_badge.html

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index b6018fe4..f378dd90 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -8,6 +8,21 @@ Changelog for the **SODAR Core** Django app package. Loosely follows the
 Unreleased
 ==========
 
+Added
+-----
+
+- **Projectroles**
+    - ``_project_badge.html`` template (#1300)
+
+Changed
+-------
+
+- **Appalerts**
+    - Use projectroles project badge templage (#1300)
+- **Timeline**
+    - Truncate long project titles in badge (#1299)
+    - Use projectroles project badge templage (#1300)
+
 Fixed
 -----
 
@@ -17,6 +32,12 @@ Fixed
 - **Timeline**
     - ``get_timestamp()`` template tag crash from missing ``ProjectEventStatus`` (#1297)
 
+Removed
+-------
+
+- **Timeline**
+    - ``_project_badge.html`` template (#1300)
+
 
 v0.13.2 (2023-09-21)
 ====================
diff --git a/appalerts/templates/appalerts/alert_list.html b/appalerts/templates/appalerts/alert_list.html
index 2b040fc4..10cd9bee 100644
--- a/appalerts/templates/appalerts/alert_list.html
+++ b/appalerts/templates/appalerts/alert_list.html
@@ -9,16 +9,6 @@
 {% block css %}
   {{ block.super }}
   <style type="text/css">
-    .sodar-app-alert-project-badge {
-        vertical-align: top;
-        margin-top: 2px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 300px;
-    }
-    .sodar-app-alert-project-badge a {
-        color: inherit;
-    }
     .sodar-app-alert-row div:nth-child(1) {
         max-width: 40px;
     }
@@ -95,21 +85,7 @@ <h2>
         </div>
         <div class="col pl-0">
           {% if a.project %}
-            <span class="badge sodar-app-alert-project-badge mr-1
-                         badge-{% if not a.project or can_view_project %}{{ a.level | lower }}{% else %}secondary{% endif %}"
-                  title="{% get_display_name a.project.type title=True %}: {{ a.project.title }}"
-                  data-toggle="tooltip" data-placement="top">
-              <i class="iconify"
-                 data-icon="{% if a.project.type == 'PROJECT' %}mdi:cube{% else %}mdi:rhombus-split{% endif %}">
-              </i>
-              {% if can_view_project %}
-                <a href="{% url 'projectroles:detail' project=a.project.sodar_uuid %}">
-                  {{ a.project.title }}
-                </a>
-              {% else %}
-                 {{ a.project.title }}
-              {% endif %}
-            </span>
+            {% include 'projectroles/_project_badge.html' with project=a.project color=a.level can_view=can_view_project %}
           {% endif %}
           {{ a.message | safe }}
         </div>
@@ -217,7 +193,7 @@ <h2>
               showCancelLink: true
           });
       }
-      if ($('.sodar-app-alert-project-badge').length) {
+      if ($('.sodar-project-badge').length) {
           tour.addStep('alert', {
               title: 'Alert {% get_display_name 'PROJECT' title=True %} or ' +
                      '{% get_display_name 'CATEGORY' title=True %}',
@@ -225,7 +201,7 @@ <h2>
                     '{% get_display_name 'PROJECT' %} or ' +
                     '{% get_display_name 'CATEGORY' %} to which the alerted ' +
                     'activity is related.',
-              attachTo: '.sodar-app-alert-project-badge top',
+              attachTo: '.sodar-project-badge top',
               advanceOn: '.docs-link click',
               showCancelLink: true
           });
diff --git a/docs/source/dev_resource.rst b/docs/source/dev_resource.rst
index b750bc4b..7cf2f79c 100644
--- a/docs/source/dev_resource.rst
+++ b/docs/source/dev_resource.rst
@@ -151,6 +151,97 @@ will disable the button after the initial click while the form is submitted.
 This is especially recommended for forms responsible for creating objects.
 
 
+Template Includes and Helpers
+=============================
+
+This section details general template includes and helpers provided by SODAR
+Core. Unless otherwise mentioned, these can be imported from the projectroles
+app.
+
+For common template tags, see :ref:`app_projectroles_api_django_tags`.
+
+Pagination Template
+-------------------
+
+A common template for adding navigation for list pagination can be found in
+``projectroles/_pagination.html``. This can be included to any Django
+``ListView`` template which provides the ``paginate_by`` definition, enabling
+pagination. If a smaller layout is desired, the ``pg_small`` argument can be
+used. An example can be seen below:
+
+.. code-block:: django
+
+    {% include 'projectroles/_pagination.html' with pg_small=True %}
+
+Project Badge
+-------------
+
+Projectroles provides a project badge which can be used to display a fixed-size
+link to a category or a project among text. It can be included in your template
+as follows:
+
+.. code-block:: django
+
+    {% include 'projectroles/_project_badge.html' with project=project color='info' can_view=True %}
+
+The following arguments are expected:
+
+``project``
+    Project object for the related project or category.
+``color``
+    String for the badge color (must correspond to bootstrap classes, e.g.
+    "info" or "success").
+``can_view``
+    Boolean for whether the current user should have access to view the project.
+
+Tour Help
+---------
+
+SODAR Core uses `Shepherd <https://shipshapecode.github.io/shepherd/docs/welcome/>`_
+to present an optional interactive tour for a rendered page. To enable the tour
+in your template, set it up inside the ``javascript`` template block. Within an
+inline javascript structure, set the ``tourEnabled`` variable to ``true`` and
+add steps according to the
+`Shepherd documentation <https://shipshapecode.github.io/shepherd>`_.
+
+Example:
+
+.. code-block:: django
+
+    {% block javascript %}
+      {{ block.super }}
+      {# Tour content #}
+      <script type="text/javascript">
+        tourEnabled = true;
+        /* Normal step */
+        tour.addStep('id_of_step', {
+            title: 'Step Title',
+            text: 'Description of the step',
+            attachTo: '#some-element top',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+        /* Conditional step */
+        if ($('.potentially-existing-element').length) {
+            tour.addStep('id_of_another_step', {
+                title: 'Another Title',
+                text: 'Another description here',
+                attachTo: '.potentially-existing-element right',
+                advanceOn: '.docs-link click',
+                showCancelLink: true
+            });
+        }
+      </script>
+    {% endblock javascript %}
+
+
+.. warning::
+
+    Make sure you call ``{{ block.super }}`` at the start of the declared
+    ``javascript`` block or you will overwrite the site's default Javascript
+    setup!
+
+
 App Settings
 ============
 
@@ -251,71 +342,6 @@ the Django database:
     $ ./manage.py cleanappsettings
 
 
-Pagination Template
-===================
-
-A common template for adding navigation for list pagination can be found in
-``projectroles/_pagination.html``. This can be included to any Django
-``ListView`` template which provides the ``paginate_by`` definition, enabling
-pagination. If a smaller layout is desired, the ``pg_small`` argument can be
-used. An example can be seen below:
-
-.. code-block:: django
-
-    {% include 'projectroles/_pagination.html' with pg_small=True %}
-
-
-Tour Help
-=========
-
-SODAR Core uses `Shepherd <https://shipshapecode.github.io/shepherd/docs/welcome/>`_
-to present an optional interactive tour for a rendered page. To enable the tour
-in your template, set it up inside the ``javascript`` template block. Within an
-inline javascript structure, set the ``tourEnabled`` variable to ``true`` and add
-steps according to the `Shepherd documentation <https://shipshapecode.github.io/shepherd>`_.
-
-Example:
-
-.. code-block:: django
-
-    {% block javascript %}
-      {{ block.super }}
-
-      {# Tour content #}
-      <script type="text/javascript">
-        tourEnabled = true;
-
-        /* Normal step */
-        tour.addStep('id_of_step', {
-            title: 'Step Title',
-            text: 'Description of the step',
-            attachTo: '#some-element top',
-            advanceOn: '.docs-link click',
-            showCancelLink: true
-        });
-
-        /* Conditional step */
-        if ($('.potentially-existing-element').length) {
-            tour.addStep('id_of_another_step', {
-                title: 'Another Title',
-                text: 'Another description here',
-                attachTo: '.potentially-existing-element right',
-                advanceOn: '.docs-link click',
-                showCancelLink: true
-            });
-        }
-
-      </script>
-    {% endblock javascript %}
-
-
-.. warning::
-
-    Make sure you call ``{{ block.super }}`` at the start of the declared
-    ``javascript`` block or you will overwrite the site's default Javascript
-    setup!
-
-
 Project Modifying API
 =====================
 
diff --git a/docs/source/major_changes.rst b/docs/source/major_changes.rst
index 446a19e3..f77fb620 100644
--- a/docs/source/major_changes.rst
+++ b/docs/source/major_changes.rst
@@ -13,6 +13,7 @@ releases, see the :ref:`full changelog<changelog>`.
 v0.13.3 (WIP)
 *************
 
+- Add common project badge template
 - Fix hidden JSON project setting reset on non-superuser project update
 - General bug fixes and minor updates
 
diff --git a/projectroles/static/projectroles/css/projectroles.css b/projectroles/static/projectroles/css/projectroles.css
index 7ba00062..a9431f1a 100644
--- a/projectroles/static/projectroles/css/projectroles.css
+++ b/projectroles/static/projectroles/css/projectroles.css
@@ -525,6 +525,18 @@ a.sodar-pr-btn-copy-secret i {
   margin-left: 0;
 }
 
+/* Project badge */
+span.sodar-project-badge {
+  vertical-align: top;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+span.sodar-project-badge a {
+  color: inherit;
+}
+
 /* NOTE: Notch visualizaton for sidebar moved into base.html */
 
 .sodar-pr-sidebar-nav-ul li i {
diff --git a/projectroles/templates/projectroles/_project_badge.html b/projectroles/templates/projectroles/_project_badge.html
new file mode 100644
index 00000000..aadd7f88
--- /dev/null
+++ b/projectroles/templates/projectroles/_project_badge.html
@@ -0,0 +1,19 @@
+{# Badge to display a project/category link #}
+{# Parameters: #}
+{# project (Project object) #}
+{# color (string) #}
+{# can_view (boolean) #}
+<span class="badge sodar-project-badge mr-1
+             badge-{% if not can_view %}secondary{% else %}{{ color|lower }}{% endif %}"
+      title="{{ project.full_title }}" data-toggle="tooltip" data-delay="500">
+  <i class="iconify"
+     data-icon="{% if project.type == 'PROJECT' %}mdi:cube{% else %}mdi:rhombus-split{% endif %}">
+  </i>
+  {% if can_view %}
+    <a href="{% url 'projectroles:detail' project=project.sodar_uuid %}">
+      {{ project.title }}
+    </a>
+  {% else %}
+    {{ project.title }}
+  {% endif %}
+</span>
diff --git a/timeline/templates/timeline/_list_item.html b/timeline/templates/timeline/_list_item.html
index c7b1907a..da757ecd 100644
--- a/timeline/templates/timeline/_list_item.html
+++ b/timeline/templates/timeline/_list_item.html
@@ -39,7 +39,7 @@
   </td>
   <td class="sodar-tl-item-desc">
     {% if event.project and user.is_superuser and timeline_mode == 'admin' %}
-      {% include 'timeline/_project_badge.html' %}
+      {% include 'projectroles/_project_badge.html' with project=event.project color='info' can_view=True %}
     {% endif %}
     {% get_event_description event plugin_lookup request as event_desc %}
     {{ event_desc|safe }}
@@ -73,4 +73,3 @@
     {{ event.get_status.status_type }}
   </td>
 </tr>
-
diff --git a/timeline/templates/timeline/_list_tour.html b/timeline/templates/timeline/_list_tour.html
index 658f43a7..b8e3be21 100644
--- a/timeline/templates/timeline/_list_tour.html
+++ b/timeline/templates/timeline/_list_tour.html
@@ -55,12 +55,12 @@
           showCancelLink: true
       });
   }
-  if ($('.sodar-tl-item-project-badge').length) {
+  if ($('.sodar-project-badge').length) {
       tour.addStep('event_desc', {
           title: '{% get_display_name 'PROJECT' title=True %} Badge',
           text: 'This badge links to the {% get_display_name 'PROJECT' %} to ' +
                 'which the event is related.',
-          attachTo: '.sodar-tl-item-project-badge top',
+          attachTo: '.sodar-project-badge top',
           advanceOn: '.docs-link click',
           showCancelLink: true
       });
diff --git a/timeline/templates/timeline/_project_badge.html b/timeline/templates/timeline/_project_badge.html
deleted file mode 100644
index a23bcadb..00000000
--- a/timeline/templates/timeline/_project_badge.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<span class="badge badge-info mr-1 sodar-tl-item-project-badge"
-      title="{{ event.project }}"
-      data-toggle="tooltip" data-placement="top">
-  <i class="iconify"
-     data-icon="{% if event.project.type == 'PROJECT' %}mdi:cube{% else %}mdi:rhombus-split{% endif %}">
-  </i>
-  <a href="{% url 'projectroles:detail' project=event.project.sodar_uuid %}"
-     class="text-white">
-    {{ event.project.title }}
-  </a>
-</span>
diff --git a/timeline/templates/timeline/_search_item.html b/timeline/templates/timeline/_search_item.html
index f3acd8f2..7c6d8cde 100644
--- a/timeline/templates/timeline/_search_item.html
+++ b/timeline/templates/timeline/_search_item.html
@@ -30,7 +30,7 @@
     <td>
       <div class="sodar-overflow-container">
         {% if event.project %}
-          {% include 'timeline/_project_badge.html' %}
+          {% include 'projectroles/_project_badge.html' with project=event.project color='info' can_view=True %}
         {% endif %}
         {% get_event_description t plugin_lookup request as event_desc %}
           {{ event_desc|safe }}