From b01465f3f895a395e3dfb02df8af65b2d7c3b6d6 Mon Sep 17 00:00:00 2001
From: ffont <frederic.font@upf.edu>
Date: Fri, 8 Nov 2024 14:27:51 +0100
Subject: [PATCH 1/2] WIP showing mid messages in assigned tickets page

---
 templates/moderation/assigned.html | 15 +++++++++++++++
 tickets/views.py                   |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/templates/moderation/assigned.html b/templates/moderation/assigned.html
index b9a170b20..b4992f761 100644
--- a/templates/moderation/assigned.html
+++ b/templates/moderation/assigned.html
@@ -75,6 +75,21 @@ <h5>No sound tickets in your queue... &#128522</h5>
                         <br>You can do shift+click on a row to select all the rows since the last previously selected row
                     </div>
                 </div>
+                <div id="ticket-comments-sections" style="display:none;">
+                    {% for ticket in page.object_list %}
+                    {% for message in ticket.messages.all reversed %}
+                        {% if not message.moderator_only or can_view_moderator_only_messages %}
+                        <div class="v-spacing-2">
+                            <div>
+                                {% if message.sender %} <a href="{% url "account" message.sender.username %}">{{ message.sender.username }}</a> {% else %} Anonymous {% endif %}<span class="h-spacing-left-1 h-spacing-1 text-grey">·</span><span class="text-grey">{{ message.created }}</span>
+                                {% if message.moderator_only %}<span title="This message is only visible to other moderators" class="text-blue">{% bw_icon 'notification' 'rotate180' %}</span>{% endif %}
+                            </div>
+                            <div class="{% if message.moderator_only %}text-blue{%endif%}">{{ message.text|safe|linebreaksbr }}</div>
+                        </div>
+                        {% endif %}
+                    {% endfor %}
+                    {%endfor%}
+                </div>
             {% endif %}
             </div>
         </div>
diff --git a/tickets/views.py b/tickets/views.py
index 54cf4a637..cbb1864d6 100644
--- a/tickets/views.py
+++ b/tickets/views.py
@@ -636,7 +636,8 @@ def moderation_assigned(request, user_id):
         "current_page": pagination_response['current_page'],
         "show_pagination": show_pagination,
         "mod_sound_form": mod_sound_form,
-        "msg_form": msg_form
+        "msg_form": msg_form,
+        "can_view_moderator_only_messages": _can_view_mod_msg(request)
     }
     _add_sound_objects_to_tickets(tvars['page'].object_list)
     tvars.update({'section': 'assigned'})

From a7cfd3e877fa3f2edc64abf8ece5ca5cc6124822 Mon Sep 17 00:00:00 2001
From: ffont <frederic.font@upf.edu>
Date: Fri, 15 Nov 2024 13:41:38 +0100
Subject: [PATCH 2/2] Show ticket messages in moderation

---
 .../bw-frontend/src/pages/moderation.js       | 10 +++++++
 templates/moderation/assigned.html            | 29 ++++++++++++-------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/freesound/static/bw-frontend/src/pages/moderation.js b/freesound/static/bw-frontend/src/pages/moderation.js
index 077b375be..8b9de517e 100644
--- a/freesound/static/bw-frontend/src/pages/moderation.js
+++ b/freesound/static/bw-frontend/src/pages/moderation.js
@@ -19,6 +19,7 @@ const messageTextArea = document.getElementsByName('message')[0];
 const ticketIdsInput = document.getElementsByName('ticket')[0];
 const soundInfoElementsPool = document.getElementById('sound-info-elements');
 const selectedSoundsInfoPanel = document.getElementById('selected-sounds-info');
+const ticketCommentsSection = document.getElementById('ticket-comments-section');
 
 
 const closeCollapsableBlocks = (soundElement) => {
@@ -70,6 +71,15 @@ const postTicketsSelected = () => {
         }
     }
 
+    // Make ticket comments visible if only one ticket is selected
+    ticketCommentsSection.children.forEach(commentElement => {
+        commentElement.classList.add('display-none');
+    });
+    if (selectedTicketsData.length === 1) {
+        const commentElement = ticketCommentsSection.querySelector(`.ticket-comments[data-ticket-id="${selectedTicketsData[0]['ticketId']}"]`);
+        commentElement.classList.remove('display-none');
+    } 
+
     // Set "ticket" field in moderation form with the ticket ids of the selected tickets
     const ticketIdsSerialized = selectedTicketsData.map(ticketData => ticketData['ticketId']).join('|');
     ticketIdsInput.value = ticketIdsSerialized;
diff --git a/templates/moderation/assigned.html b/templates/moderation/assigned.html
index b4992f761..a215fe4fe 100644
--- a/templates/moderation/assigned.html
+++ b/templates/moderation/assigned.html
@@ -75,19 +75,26 @@ <h5>No sound tickets in your queue... &#128522</h5>
                         <br>You can do shift+click on a row to select all the rows since the last previously selected row
                     </div>
                 </div>
-                <div id="ticket-comments-sections" style="display:none;">
+                <div id="ticket-comments-section">
                     {% for ticket in page.object_list %}
-                    {% for message in ticket.messages.all reversed %}
-                        {% if not message.moderator_only or can_view_moderator_only_messages %}
-                        <div class="v-spacing-2">
-                            <div>
-                                {% if message.sender %} <a href="{% url "account" message.sender.username %}">{{ message.sender.username }}</a> {% else %} Anonymous {% endif %}<span class="h-spacing-left-1 h-spacing-1 text-grey">·</span><span class="text-grey">{{ message.created }}</span>
-                                {% if message.moderator_only %}<span title="This message is only visible to other moderators" class="text-blue">{% bw_icon 'notification' 'rotate180' %}</span>{% endif %}
-                            </div>
-                            <div class="{% if message.moderator_only %}text-blue{%endif%}">{{ message.text|safe|linebreaksbr }}</div>
-                        </div>
+                    <div class="ticket-comments" data-ticket-id="{{ ticket.id }}" class="v-spacing-4 display-none">
+                        {% with ticket.messages.all as ticket_messages %}
+                        {% if ticket_messages.count > 0 %}
+                            <h4 class="v-spacing-2 text-grey">Messages for ticket #{{ ticket.id }}</h4>
+                            {% for message in ticket_messages reversed %}
+                                {% if not message.moderator_only or can_view_moderator_only_messages %}
+                                <div class="v-spacing-2">
+                                    <div>
+                                        {% if message.sender %} <a href="{% url "account" message.sender.username %}">{{ message.sender.username }}</a> {% else %} Anonymous {% endif %}<span class="h-spacing-left-1 h-spacing-1 text-grey">·</span><span class="text-grey">{{ message.created }}</span>
+                                        {% if message.moderator_only %}<span title="This message is only visible to other moderators" class="text-blue">{% bw_icon 'notification' 'rotate180' %}</span>{% endif %}
+                                    </div>
+                                    <div class="{% if message.moderator_only %}text-blue{%endif%} overflow-hidden">{{ message.text|safe|linebreaksbr }}</div>
+                                </div>
+                                {% endif %}
+                            {% endfor %}
                         {% endif %}
-                    {% endfor %}
+                        {% endwith %}
+                    </div>
                     {%endfor%}
                 </div>
             {% endif %}