From 0a31379c59daa90ee3e3e614a865d2af58976dee Mon Sep 17 00:00:00 2001
From: ffont <frederic.font@upf.edu>
Date: Mon, 30 Oct 2023 15:00:01 +0100
Subject: [PATCH] Fixes in assigned sounds page

---
 .../src/components/collapsableBlock.js        |  2 ++
 .../bw-frontend/src/pages/moderation.js       | 27 ++++++++++++++++++-
 templates_bw/sounds/display_sound.html        |  4 +--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/freesound/static/bw-frontend/src/components/collapsableBlock.js b/freesound/static/bw-frontend/src/components/collapsableBlock.js
index 8d8ab2a0b..f38e7f685 100644
--- a/freesound/static/bw-frontend/src/components/collapsableBlock.js
+++ b/freesound/static/bw-frontend/src/components/collapsableBlock.js
@@ -45,4 +45,6 @@ collapsableToggles.forEach(element => {
   element.addEventListener('click', handleCollapsable);
 });
 
+export {toggleCollapse};
+
 
diff --git a/freesound/static/bw-frontend/src/pages/moderation.js b/freesound/static/bw-frontend/src/pages/moderation.js
index ca10355cb..077b375be 100644
--- a/freesound/static/bw-frontend/src/pages/moderation.js
+++ b/freesound/static/bw-frontend/src/pages/moderation.js
@@ -1,4 +1,5 @@
 import { stopAllPlayers } from '../components/player/utils'
+import { toggleCollapse } from '../components/collapsableBlock'
 import { getCookie, setCookie } from "../utils/cookies";
 
 const selectAllButton = document.getElementById('select-all');
@@ -20,6 +21,23 @@ const soundInfoElementsPool = document.getElementById('sound-info-elements');
 const selectedSoundsInfoPanel = document.getElementById('selected-sounds-info');
 
 
+const closeCollapsableBlocks = (soundElement) => {
+    const collapsableToggleElement = soundElement.getElementsByClassName('collapsable-toggle')[0];
+    const collapsableContainer = document.getElementById(collapsableToggleElement.dataset.target)
+    if (collapsableContainer.className.indexOf('-close') === -1) {
+        toggleCollapse(collapsableToggleElement);
+    }
+}
+
+const openCollapsableBlocks = (soundElement) => {
+    const collapsableToggleElement = soundElement.getElementsByClassName('collapsable-toggle')[0];
+    const collapsableContainer = document.getElementById(collapsableToggleElement.dataset.target)
+    if (collapsableContainer.className.indexOf('-close') !== -1) {
+        toggleCollapse(collapsableToggleElement);
+    }
+}
+
+
 const postTicketsSelected = () => {
     // Do things that need to be done after some tickets have been selected such as
     // showing sound information, etc.
@@ -58,13 +76,20 @@ const postTicketsSelected = () => {
 
     // Show information about the selected sounds
     // First move all selected sound info elements to the main pool
+    // Also "hide" the "show more info" collapsable block (if any)
     while (selectedSoundsInfoPanel.childNodes.length > 0) {
-        soundInfoElementsPool.appendChild(selectedSoundsInfoPanel.childNodes[0]);
+        const selectedSoundElement = selectedSoundsInfoPanel.childNodes[0];
+        closeCollapsableBlocks(selectedSoundElement);
+        soundInfoElementsPool.appendChild(selectedSoundElement);
     }
 
     // Then move the selected ones to the selected panel
+    // If only one sound is selected, then open the "show more info" collapsable block
     selectedTicketsData.forEach(ticketData => {
         const soundInfoElement = document.querySelector(`.sound-info-element[data-sound-id="${ticketData['soundId']}"]`);
+        if (selectedTicketsData.length === 1) { 
+            openCollapsableBlocks(soundInfoElement);
+        }
         selectedSoundsInfoPanel.appendChild(soundInfoElement);
     });
 
diff --git a/templates_bw/sounds/display_sound.html b/templates_bw/sounds/display_sound.html
index feb1119ec..feda1f670 100644
--- a/templates_bw/sounds/display_sound.html
+++ b/templates_bw/sounds/display_sound.html
@@ -165,9 +165,9 @@ <h5 class="ellipsis">
             </div>
         </div>
         <div class="text-center v-spacing-top-1 v-spacing-2">
-            <span data-target="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" data-show-text="Show more info" data-hide-text="Show less info" data-max-height-when-closed="150" data-hide-on-load class="collapsable-toggle"></span>
+            <span data-target="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" data-show-text="Show more info" data-hide-text="Show less info" data-max-height-when-closed="150" {% if show_less_info_on_load %} data-hide-on-load{% endif %} class="collapsable-toggle"></span>
         </div>
-        {% if not is_explicit %}
+        {% if is_explicit %}
         <div class="v-spacing-top-1">
             <div class="text-grey">
                 {% bw_icon "notification" %} Marked as explicit