From 4603c2309a46b6d217efeda77011bf1fda886685 Mon Sep 17 00:00:00 2001
From: Madison Swain-Bowden <bowdenm@spu.edu>
Date: Sun, 9 Jan 2022 18:05:03 -0800
Subject: [PATCH] Improve cutoff for incident descriptions (#110)

---
 OpenOversight/app/static/js/incidentDescription.js  | 13 +++++++++++--
 .../app/templates/partials/incident_fields.html     |  4 ----
 .../app/templates/partials/officer_incidents.html   |  3 +++
 OpenOversight/tests/test_functional.py              |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/OpenOversight/app/static/js/incidentDescription.js b/OpenOversight/app/static/js/incidentDescription.js
index dfce6dc83..70c8b39bc 100644
--- a/OpenOversight/app/static/js/incidentDescription.js
+++ b/OpenOversight/app/static/js/incidentDescription.js
@@ -1,5 +1,5 @@
 $(document).ready(function() {
-    let overflow_length = 500;
+    let overflow_length = 700;
     $(".incident-description").each(function () {
         let description = this;
         let incidentId = $( this ).data("incident");
@@ -8,7 +8,16 @@ $(document).ready(function() {
         }
         if(description.innerHTML.length > overflow_length) {
             let originalDescription = description.innerHTML;
-            description.innerHTML = description.innerHTML.substring(0, overflow_length) + "…";
+            // Convert the innerHTML into a string, and truncate it to overflow length
+            const sub = description.innerHTML.substring(0, overflow_length)
+            // In order to make the cutoff clean, we will want to truncate *after*
+            // the end of the last HTML tag. So first we need to find the last tag.
+            const cutoff = sub.lastIndexOf("</")
+            // Tags could be variable length, so next find the index of the first
+            // ">" after the start of the closing bracket.
+            const lastTag = sub.substring(cutoff).indexOf(">")
+            // Lastly, trim the HTML to the end of the closing tag
+            description.innerHTML = sub.substring(0, cutoff + lastTag + 1) + "…";
             $(`#description-overflow-button_${incidentId}`).on('click', function(event) {
                 event.stopImmediatePropagation();
                 description.innerHTML = originalDescription;
diff --git a/OpenOversight/app/templates/partials/incident_fields.html b/OpenOversight/app/templates/partials/incident_fields.html
index 1d12067a5..d6f4f2189 100644
--- a/OpenOversight/app/templates/partials/incident_fields.html
+++ b/OpenOversight/app/templates/partials/incident_fields.html
@@ -90,7 +90,3 @@
   {% endif %}
   </tbody>
 </table>
-
-{% block js_footer %}
-  <script src="{{ url_for('static', filename='js/incidentDescription.js') }}"></script>
-{% endblock %}
diff --git a/OpenOversight/app/templates/partials/officer_incidents.html b/OpenOversight/app/templates/partials/officer_incidents.html
index 3b52df770..195fb1ff7 100644
--- a/OpenOversight/app/templates/partials/officer_incidents.html
+++ b/OpenOversight/app/templates/partials/officer_incidents.html
@@ -17,6 +17,9 @@ <h4>
         </li>
     {% endfor %}
     </ul>
+  {% block js_footer %}
+    <script src="{{ url_for('static', filename='js/incidentDescription.js') }}"></script>
+  {% endblock %}
 {% endif %}
 {% if is_admin_or_coordinator %}
     <a href="{{ url_for('main.incident_api') + 'new?officer_id={}'.format(officer.id) }}" class='btn btn-primary'>New Incident</a>
diff --git a/OpenOversight/tests/test_functional.py b/OpenOversight/tests/test_functional.py
index 80c85eeaf..3404c6d8a 100644
--- a/OpenOversight/tests/test_functional.py
+++ b/OpenOversight/tests/test_functional.py
@@ -14,7 +14,7 @@
 from OpenOversight.app.models import Department, Incident, Officer, Unit, db
 
 
-DESCRIPTION_CUTOFF = 500
+DESCRIPTION_CUTOFF = 700
 
 
 @contextmanager