Collections

accounts/templatetags/display_user.py

@@ -93,3 +93,12 @@ def display_user_top_donor(context, user, donated_amount):
 @register.inclusion_tag('accounts/display_user.html', takes_context=True)
 def display_user_comment(context, user, comment_created):
     return display_user(context, user, size='comment', comment_created=comment_created)
+
+@register.inclusion_tag('accounts/display_user_selectable.html', takes_context=True)
+def display_user_small_selectable(context, user, selected=False):
+    context = context.get('original_context', context)  # This is to allow passing context in nested inclusion tags
+    tvars = display_user(context, user, size='basic')
+    tvars.update({
+        'selected': selected,
+    })
+    return tvars

accounts/templatetags/users_selector.py

@@ -0,0 +1,27 @@
+# Authors:
+#     See AUTHORS file.
+#
+
+
+from django import template
+from django.conf import settings
+
+from accounts.models import User
+
+register = template.Library()
+
+
+@register.inclusion_tag('molecules/object_selector.html', takes_context=True)
+def users_selector(context, users, selected_user_ids=[], show_select_all_buttons=False):
+    if users:
+        if not isinstance(users[0], User):
+            # users are passed as a list of user ids, retrieve the User objects from DB
+            users = User.objects.ordered_ids(users)
+        for user in users:
+            user.selected = user.id in selected_user_ids
+    return {
+        'objects': users,
+        'type': 'users',
+        'show_select_all_buttons': show_select_all_buttons,
+        'original_context': context  # This will be used so a nested inclusion tag can get the original context
+    }

freesound/context_processor.py

@@ -76,7 +76,9 @@ def context_extra(request):
             'next_path': request.GET.get('next', request.get_full_path()),
             'login_form': FsAuthenticationForm(),
             'problems_logging_in_form': ProblemsLoggingInForm(),
-            'system_prefers_dark_theme': request.COOKIES.get('systemPrefersDarkTheme', 'no') == 'yes'  # Determine the user's system preference for dark/light theme (for non authenticated users, always use light theme)
+            'system_prefers_dark_theme': request.COOKIES.get('systemPrefersDarkTheme', 'no') == 'yes',  # Determine the user's system preference for dark/light theme (for non authenticated users, always use light theme)
+            'enable_collections': settings.ENABLE_COLLECTIONS,
+            'max_sounds_per_collection': settings.MAX_SOUNDS_PER_COLLECTION,
         })
 
     return tvars

freesound/settings.py

@@ -76,6 +76,7 @@
     'silk',
     'django_recaptcha',
     'adminsortable',
+    'fscollections'
 ]
 
 # Silk is the Request/SQL logging platform. We install it but leave it disabled
@@ -937,6 +938,9 @@
 # -------------------------------------------------------------------------------
 # Extra Freesound settings
 
+ENABLE_COLLECTIONS = True
+MAX_SOUNDS_PER_COLLECTION = 250
+
 # Paths (depend on DATA_PATH potentially re-defined in local_settings.py)
 # If new paths are added here, remember to add a line for them at general.apps.GeneralConfig. This will ensure
 # directories are created if not existing

freesound/static/bw-frontend/src/components/addSoundsModal.js

@@ -46,11 +46,30 @@ const prepareAddSoundsModalAndFields = (container) => {
         const removeSoundsButton = addSoundsButton.nextElementSibling;
         removeSoundsButton.disabled = true;
 
-        const selectedSoundsDestinationElement = addSoundsButton.parentNode.parentNode.getElementsByClassName('bw-object-selector-container')[0];
+        const selectedSoundsDestinationElement = addSoundsButton.parentNode.parentNode.querySelector('.bw-object-selector-container[data-type="sounds"]');
         initializeObjectSelector(selectedSoundsDestinationElement, (element) => {
             removeSoundsButton.disabled = element.dataset.selectedIds == ""
         });
 
+        const soundsInput = selectedSoundsDestinationElement.parentNode.parentNode.getElementsByTagName('input')[0];
+        if(soundsInput.disabled){
+            addSoundsButton.disabled = true
+            const checkboxes = selectedSoundsDestinationElement.querySelectorAll('span.bw-checkbox-container');
+            checkboxes.forEach(checkbox => {
+                checkbox.remove()
+            })
+        }
+
+        const soundsLabel = selectedSoundsDestinationElement.parentNode.parentNode.getElementsByTagName('label')[0];
+        const maxSounds = selectedSoundsDestinationElement.dataset.maxElements;
+        const maxSoundsHelpText = selectedSoundsDestinationElement.parentNode.parentNode.getElementsByClassName('helptext')[0]
+        if(maxSounds !== "None"){
+            if (soundsInput.value.split(',').length >= maxSounds){
+                addSoundsButton.disabled = true
+                maxSoundsHelpText.style.display = 'block';
+            }
+        }
+
         removeSoundsButton.addEventListener('click', (evt) => {
             evt.preventDefault();
             const soundCheckboxes = selectedSoundsDestinationElement.querySelectorAll('input.bw-checkbox');
@@ -62,6 +81,12 @@ const prepareAddSoundsModalAndFields = (container) => {
             updateObjectSelectorDataProperties(selectedSoundsDestinationElement);
             const selectedSoundsHiddenInput = document.getElementById(addSoundsButton.dataset.selectedSoundsHiddenInputId);
             selectedSoundsHiddenInput.value = selectedSoundsDestinationElement.dataset.unselectedIds;
+            if(maxSounds !== "None" && selectedSoundsHiddenInput.value.split(',').length < maxSounds){
+                addSoundsButton.disabled = false;
+                maxSoundsHelpText.style.display = 'none';
+            }
+            if (soundsLabel){
+                soundsLabel.innerHTML = "Sounds in collection (" + selectedSoundsDestinationElement.children.length + ")"}
             removeSoundsButton.disabled = true;
         });
 
@@ -73,11 +98,17 @@ const prepareAddSoundsModalAndFields = (container) => {
                 const newSoundIds = serializedIdListToIntList(selectedSoundIds);
                 const combinedIds = combineIdsLists(currentSoundIds, newSoundIds);
                 selectedSoundsHiddenInput.value = combinedIds.join(',');
+                if(maxSounds !== "None" && selectedSoundsHiddenInput.value.split(',').length >= maxSounds){
+                    addSoundsButton.disabled = true;
+                    maxSoundsHelpText.style.display = 'block';
+                }
+                if (soundsLabel){
+                    soundsLabel.innerHTML = "Sounds in collection (" + selectedSoundsDestinationElement.children.length + ")"}
                 initializeObjectSelector(selectedSoundsDestinationElement, (element) => {
                     removeSoundsButton.disabled = element.dataset.selectedIds == ""
                 });
-
             });
+
         }); 
     });
 }

freesound/static/bw-frontend/src/components/collections.js

@@ -0,0 +1,159 @@
+import {dismissModal, handleGenericModal, handleGenericModalWithForm} from "./modal";
+import {showToast} from "./toast";
+import { initializeStuffInContainer } from "../utils/initHelper";
+import {initializeObjectSelector, updateObjectSelectorDataProperties} from "./objectSelector";
+import {combineIdsLists, serializedIdListToIntList} from "../utils/data";
+
+const toggleNewCollectionNameDiv = (select, newCollectionNameDiv) => {
+    if (select.value == '0'){
+        // No category is selected, show the new category name input
+        newCollectionNameDiv.classList.remove('display-none');
+    } else {
+        newCollectionNameDiv.classList.add('display-none');
+    }
+}
+
+
+const initCollectionFormModal = () => {
+
+    // Modify the form structure to add a "Category" label inline with the select dropdown
+    const modalContainer = document.getElementById('addSoundToCollectionModal');
+    // To display the selector in case of an error in form, the following function is needed, despite it being called in
+    // handleGenericModal. 
+    initializeStuffInContainer(modalContainer, false, false);
+    const selectElement = modalContainer.getElementsByTagName('select')[0];
+    const wrapper = document.createElement('div');
+    wrapper.style = 'display:inline-block;';
+    if (selectElement === undefined){
+        // If no select element, the modal has probably loaded for an unauthenticated user
+        return;
+    }
+    selectElement.parentNode.insertBefore(wrapper, selectElement.parentNode.firstChild);
+    const label = document.createElement('div');
+    label.innerHTML = "Select a collection:"
+    label.classList.add('text-grey');
+    wrapper.appendChild(label)
+    wrapper.appendChild(selectElement)
+
+    const categorySelectElement = document.getElementById('id_collection');
+    const newCategoryNameElement = document.getElementById('id_new_collection_name');
+    toggleNewCollectionNameDiv(categorySelectElement, newCategoryNameElement);
+    categorySelectElement.addEventListener('change', (event) => {
+    toggleNewCollectionNameDiv(categorySelectElement, newCategoryNameElement);
+});}
+
+const bindCollectionModals = (container) => {
+    const collectionButtons = [...container.querySelectorAll('[data-toggle="collection-modal"]')];
+    collectionButtons.forEach(element => {
+        if (element.dataset.alreadyBinded !== undefined){
+            return;
+        }
+        element.dataset.alreadyBinded = true;
+        element.addEventListener('click', (evt) => {
+            evt.preventDefault();   
+            const modalUrlSplitted = element.dataset.modalContentUrl.split('/')
+            const soundId = parseInt(modalUrlSplitted[modalUrlSplitted.length - 3], 10)
+            if (!evt.altKey) {
+                handleGenericModalWithForm(element.dataset.modalContentUrl, () => {
+                    initCollectionFormModal(soundId, element.dataset.modalContentUrl);
+                }, undefined, (req) => {showToast(JSON.parse(req.responseText).message);}, () => {showToast('There were errors processing the form...');}, true, true, undefined, false);
+            } 
+        });
+    });
+}
+
+// TODO: the AddMaintainerModal works really similarly to the AddSoundsModal, so maybe they could share behaviour
+// However, it'd be interesting that checked users could be temporarly stored in the modal while other queries are performed
+const handleAddMaintainersModal = (modalId, modalUrl, selectedMaintainersDestinationElement, onMaintainersSelectedCallback) => {
+    handleGenericModalWithForm(modalUrl,(modalContainer) => {
+        const inputElement = modalContainer.getElementsByTagName('input')[1];
+        inputElement.addEventListener('keypress', (evt) => {
+            if (evt.key === 'Enter'){
+                evt.preventDefault();
+                const baseUrl = modalUrl.split('?')[0];
+                handleAddMaintainersModal(modalId, `${baseUrl}?q=${inputElement.value}`, selectedMaintainersDestinationElement, onMaintainersSelectedCallback);
+            }
+        });
+
+        const objectSelectorElement = modalContainer.getElementsByClassName('bw-object-selector-container')[0];
+        initializeObjectSelector(objectSelectorElement, (element) => {
+            addSelectedMaintainersButton.disabled = element.dataset.selectedIds == ""
+        });
+
+        const addSelectedMaintainersButton = modalContainer.getElementsByTagName('button')[0];
+        addSelectedMaintainersButton.disabled = true;
+        addSelectedMaintainersButton.addEventListener('click', evt => {
+            evt.preventDefault();
+            const selectableMaintainerElements = [...modalContainer.getElementsByClassName('bw-selectable-object')];
+            selectableMaintainerElements.forEach(element => {
+                const checkbox = element.querySelectorAll('input.bw-checkbox')[0];
+                if (checkbox.checked) {
+                    const clonedCheckbox = checkbox.cloneNode();
+                    delete(clonedCheckbox.dataset.initialized);
+                    clonedCheckbox.checked = false;
+                    checkbox.parentNode.replaceChild(clonedCheckbox, checkbox)
+                    element.classList.remove('selected');
+                    selectedMaintainersDestinationElement.appendChild(element.parentNode);
+                }
+            });
+            onMaintainersSelectedCallback(objectSelectorElement.dataset.selectedIds)
+            dismissModal(modalId)
+        });
+    }, undefined, showToast('Maintainers added successfully'), showToast('There were some errors handling the modal'), true, true, undefined, false);
+};
+
+const prepareAddMaintainersModalAndFields = (container) => {
+    // select all buttons with a toggle that triggers the maintainers modal
+    const addMaintainersButtons = [...container.querySelectorAll('[data-toggle="add-maintainers-modal"]')];
+    // for each button, assign the next sibling to the remove maintainer button and disable it (since nothing will be selected by default)
+    addMaintainersButtons.forEach(addMaintainersButton => {
+        const removeMaintainersButton = addMaintainersButton.nextElementSibling;
+        removeMaintainersButton.disabled = true;
+
+        const selectedMaintainersDestinationElement = addMaintainersButton.parentNode.parentNode.querySelector('.bw-object-selector-container[data-type="users"]');
+        initializeObjectSelector(selectedMaintainersDestinationElement, (element) => {
+            removeMaintainersButton.disabled = element.dataset.selectedIds == "" 
+        })
+
+
+        const maintainersInput = selectedMaintainersDestinationElement.parentNode.parentNode.getElementsByTagName('input')[0];
+        if(maintainersInput.disabled !== false){
+            addMaintainersButton.disabled = true;
+            addMaintainersButton.nextElementSibling.remove();
+            addMaintainersButton.remove();
+            const checkboxes = selectedMaintainersDestinationElement.querySelectorAll('span.bw-checkbox-container');
+            checkboxes.forEach(checkbox => {
+                checkbox.remove()
+            })
+        }
+
+        removeMaintainersButton.addEventListener('click', (evt) => {
+            evt.preventDefault();
+            const maintainerCheckboxes = selectedMaintainersDestinationElement.querySelectorAll('input.bw-checkbox');
+            maintainerCheckboxes.forEach(checkbox => {
+                if (checkbox.checked) {
+                    checkbox.closest('.bw-selectable-object').parentNode.remove();
+                }
+            });
+            updateObjectSelectorDataProperties(selectedMaintainersDestinationElement);
+            const selectedMaintainersHiddenInput = document.getElementById(addMaintainersButton.dataset.selectedMaintainersHiddenInputId);
+            selectedMaintainersHiddenInput.value = selectedMaintainersDestinationElement.dataset.unselectedIds;
+            removeMaintainersButton.disabled = true;
+        });
+
+        addMaintainersButton.addEventListener('click', (evt) => {
+            evt.preventDefault();
+            handleAddMaintainersModal('addMaintainersModal', addMaintainersButton.dataset.modalUrl, selectedMaintainersDestinationElement, (selectedMaintainersIds) => {
+                const selectedMaintainersHiddenInput = document.getElementById(addMaintainersButton.dataset.selectedMaintainersHiddenInputId);
+                const currentMaintainersIds = serializedIdListToIntList(selectedMaintainersHiddenInput.value);
+                const newMaintainersIds = serializedIdListToIntList(selectedMaintainersIds);
+                const combinedIds = combineIdsLists(currentMaintainersIds, newMaintainersIds)
+                selectedMaintainersHiddenInput.value = combinedIds.join(',')
+                initializeObjectSelector(selectedMaintainersDestinationElement, (element) => {
+                    removeMaintainersButton.disabled = element.dataset.selectedIds == ""
+                });
+            });
+        });
+    })};
+
+export { bindCollectionModals, prepareAddMaintainersModalAndFields };

freesound/static/bw-frontend/src/components/modal.js

@@ -106,7 +106,6 @@ const activateDefaultModalsIfParameters = () => {
   activateModalsIfParameters('[data-toggle="modal-default-with-form"]', handleDefaultModalWithForm);
 }
 
-
 // Generic modals logic
 const genericModalWrapper = document.getElementById('genericModalWrapper');