Merge pull request #1801 from MTG/issue1577

Follow-up fixes for #1799 PR

DEVELOPERS.md

@@ -127,10 +127,14 @@ in the `accounts.Profile.delete_user` method (which anonymizes a user account).
 
 ### Adding new fields to the user Sound model
 
-When adding new fields to the `sounds.Sound` mode, we should make sure that we handle this fields correctly when 
+When adding new fields to the `sounds.Sound` model, we should make sure that we handle this fields correctly when 
 creating `DeletedSound` objects in the `sounds-models.on_delete_sound` function triggered by the `pre_delete` 
 signal of the `Sound` model.
 
+### Working with new modals for UX
+
+Upon creating a new modal for any UX, please consider using `handleGenericModal` or `handleGenericModalWithForm` in `modal.js`.
+These functions ease the logic behind modals: initialization, error handling, toast messages, and URL handles.
 
 ### Adding new search options in the search page
 

bookmarks/forms.py

@@ -36,7 +36,7 @@ def clean(self):
         name = self.cleaned_data.get("name", )
 
         if BookmarkCategory.objects.filter(user=self.instance.user, name=name).exists():
-            raise forms.ValidationError("This name already exists for a bookmark category")
+            raise forms.ValidationError("You have already created a Bookmark Category with this name")
 
         return cleaned_data
 

bookmarks/views.py

@@ -92,20 +92,19 @@ def edit_bookmark_category(request, category_id):
         return HttpResponseRedirect(reverse("bookmarks-for-user", args=[request.user.username]))
 
     category = get_object_or_404(BookmarkCategory, id=category_id, user=request.user)
-
+    
     if request.method == "POST":
         edit_form = BookmarkCategoryForm(request.POST, instance=category)
-        print(edit_form.is_bound)
+
         if edit_form.is_valid():      
             category.name = edit_form.cleaned_data["name"]
             category.save()
             return JsonResponse({"success":True})
-        if not edit_form.is_valid():
-            print(edit_form.errors.as_json())
+
     else:
         initial = {"name":category.name}
         edit_form = BookmarkCategoryForm(initial=initial)
-    
+
     tvars = {"category": category,
             "form": edit_form}
     return render(request, 'bookmarks/modal_edit_bookmark_category.html', tvars)

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

@@ -12,7 +12,7 @@ const bindModalActivationElements = (querySelectorStr, handleModalFunction, cont
     element.dataset.alreadyBinded = true;
     element.addEventListener('click', (evt) => {
       evt.preventDefault();
-      handleModalFunction(element.dataset.modalContentUrl, element.dataset.modalActivationParam);
+      handleModalFunction(element.dataset.modalContentUrl, element.dataset.modalActivationParam, element);
     });
   });
 }
@@ -85,12 +85,12 @@ const bindConfirmationModalElements = (container) => {
 
 // Logic to bind default modals
 
-const handleDefaultModal = (modalUrl, modalActivationParam) => {
+const handleDefaultModal = (modalUrl, modalActivationParam, element) => {
   handleGenericModal(modalUrl, undefined, undefined, true, true, modalActivationParam);
 }
 
-const handleDefaultModalWithForm = (modalUrl, modalActivationParam) => {
-  handleGenericModalWithForm(modalUrl, undefined, undefined, (req) => {showToast('Form submitted succesfully!')}, undefined, true, true, modalActivationParam, true);
+const handleDefaultModalWithForm = (modalUrl, modalActivationParam, element) => {
+  handleGenericModalWithForm(modalUrl, undefined, undefined, (req) => {showToast(element.dataset.successMessage || 'Form submitted succesfully!')}, (req) => {showToast(element.dataset.errorMessage || "There were errors processing the form...")}, true, true, modalActivationParam, element.dataset.reloadOnSuccess==="true");
 }
 
 const bindDefaultModals = (container) => {
@@ -198,7 +198,7 @@ const handleGenericModal = (fetchContentUrl, onLoadedCallback, onClosedCallback,
 };
 
 
-const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedCallback, onFormSubmissionSucceeded, onFormSubmissionError, doRequestAsync, showLoadingToast, modalActivationParam, dataReloadOnSuccess) => {
+const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedCallback, onFormSubmissionSucceeded, onFormSubmissionError, doRequestAsync, showLoadingToast, modalActivationParam, triggerPageReloadOnSuccess) => {
   // This version of the generic modal is useful for modal contents that contain forms which, upon submission, will return HTML content if there were form errors
   // which should be used to replace the current contents of the form, and will return a JSON response if the form validated correctly in the backend. That JSON
   // response could include some relevant data or no data at all, but is used to differentiate from the HTML response
@@ -221,7 +221,7 @@ const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedC
           if (onFormSubmissionSucceeded !== undefined){
             onFormSubmissionSucceeded(req);
           }
-          if(dataReloadOnSuccess == true){
+          if(triggerPageReloadOnSuccess){
             location.reload()
           }
         }  else {

templates/bookmarks/bookmarks.html

@@ -20,7 +20,7 @@ <h4>Bookmark categories</h4>
                             <li><a href="{% url "bookmarks-for-user-for-category" user.username cat.id %}" {% if category.id == cat.id %}style="font-weight:bold"{% endif %} aria-label="Category: {{cat.name}}">{{cat.name}}</a> <span class="text-grey"> · {{cat.num_bookmarks|bw_intcomma}} bookmark{{ cat.num_bookmarks|pluralize }}</span>
                             {% if is_owner %}
                             <a class="cursor-pointer h-spacing-left-1" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to remove this bookmark category?" data-modal-confirmation-help-text="Note that all the bookmarks inside this category will also be removed" data-modal-confirmation-url="{% url "delete-bookmark-category" cat.id %}{% if cat.id != category.id %}?next={{request.path}}&page={{current_page}}{% endif %}" title="Remove bookmark category" aria-label="Remove bookmark category">{% bw_icon 'trash' %}</a>
-                            <a class="cursor-pointer h-spacing-left-1" data-toggle="modal-default-with-form" data-modal-content-url="{% url 'edit-bookmark-category' cat.id %}?ajax=1" title="Edit bookmark category" aria-label="Edit bookmark category">{% bw_icon 'edit' %}</a>
+                            <a class="cursor-pointer h-spacing-left-1" data-toggle="modal-default-with-form" data-modal-content-url="{% url 'edit-bookmark-category' cat.id %}?ajax=1" data-reload-on-success= "true" title="Edit bookmark category" aria-label="Edit bookmark category">{% bw_icon 'edit' %}</a>
                             {% endif %}</li>
                         {% endfor %}
                     </ul>