Ticket #326: better UX in adding shelves.

diff --git a/apps/catalogue/views.py b/apps/catalogue/views.py
index de2c17b..5be5122 100644 (file)
--- a/apps/catalogue/views.py
+++ b/apps/catalogue/views.py
@@ -500,7 +500,7 @@ def book_sets(request, slug):
 
             book.tags = new_shelves + list(book.tags.filter(~Q(category='set') | ~Q(user=request.user)))
             if request.is_ajax():
 
             book.tags = new_shelves + list(book.tags.filter(~Q(category='set') | ~Q(user=request.user)))
             if request.is_ajax():

-                return HttpResponse(_('<p>Shelves were sucessfully saved.</p>'))
+                return JSONResponse('{"msg":"'+_("<p>Shelves were sucessfully saved.</p>")+'", "after":"close"}')

             else:
                 return HttpResponseRedirect('/')
     else:
             else:
                 return HttpResponseRedirect('/')
     else:


@@ -634,7 +634,7 @@ def new_set(request):
         new_set = new_set_form.save(request.user)
 
         if request.is_ajax():
         new_set = new_set_form.save(request.user)
 
         if request.is_ajax():

-            return HttpResponse(_('<p>Shelf <strong>%s</strong> was successfully created</p>') % new_set)
+            return JSONResponse('{"id":"%d", "name":"%s", "msg":"<p>Shelf <strong>%s</strong> was successfully created</p>"}' % (new_set.id, new_set.name, new_set))

         else:
             return HttpResponseRedirect('/')
 
         else:
             return HttpResponseRedirect('/')
 

diff --git a/wolnelektury/static/js/catalogue.js b/wolnelektury/static/js/catalogue.js
index 9fd03d3..1c23be8 100644 (file)
--- a/wolnelektury/static/js/catalogue.js
+++ b/wolnelektury/static/js/catalogue.js
@@ -267,6 +267,7 @@ function serverTime() {
             return false;
         });
 
             return false;
         });
 

+        var serverResponse;

         $('#user-shelves-window').jqm({
             ajax: '@href',
             target: $('#user-shelves-window div.target')[0],
         $('#user-shelves-window').jqm({
             ajax: '@href',
             target: $('#user-shelves-window div.target')[0],


@@ -280,8 +281,12 @@ function serverTime() {
             },
             onLoad: function(hash) {
                 $('form', hash.w).ajaxForm({
             },
             onLoad: function(hash) {
                 $('form', hash.w).ajaxForm({

-                    target: $('#user-shelves-window div.target'),
-                    success: function() { setTimeout(function() { $('#user-shelves-window').jqmHide() }, 1000) }
+                    target: serverResponse,
+                    success: function(serverResponse) {
+                        var newShelf = $.parseJSON(serverResponse);
+                        $('#user-shelves-window div.target').html(newShelf.msg);
+                        setTimeout(function() { $('#user-shelves-window').jqmHide() }, 1000);
+                    }

                 });
 
                 $('input', hash.w).labelify({labelledClass: 'blur'});
                 });
 
                 $('input', hash.w).labelify({labelledClass: 'blur'});


@@ -378,19 +383,31 @@ function serverTime() {
                 target.html('<p><img src="/static/img/indicator.gif" />'+LOCALE_TEXTS[LANGUAGE_CODE]['DELETE_SHELF']+'</p>');
                 hash.w.css({position: 'absolute', left: offset.left, top: offset.top}).show() },
             onLoad: function(hash) {
                 target.html('<p><img src="/static/img/indicator.gif" />'+LOCALE_TEXTS[LANGUAGE_CODE]['DELETE_SHELF']+'</p>');
                 hash.w.css({position: 'absolute', left: offset.left, top: offset.top}).show() },
             onLoad: function(hash) {

-        try {
-            $('#createShelfTrigger').click(function(){
-                $('#createNewShelf').show();
-            });
-        } catch (e){}
-
+                try {
+                        $('#createShelfTrigger').click(function(){
+                            // who cares it's not needed, but I was looking for it
+                            // that's why I want it to stay.. :) 
+                            // var slug = $(hash.t).attr('href').split("/")[3];
+                            $('#createNewShelf').show();
+                        });
+                } catch (e){}
+                $("#putOnShelf input[type=checkbox]").attr("checked",false);
+                var serverResponse;

                 $('form', hash.w).ajaxForm({
                 $('form', hash.w).ajaxForm({

-                    target: target,
-                    success: function() {
-            setTimeout(function() {
-                    $('#set-window').jqmHide();
-                       }, 1000)}
-                });
+                    target: serverResponse,
+                    success: function(serverResponse) {
+                        var newShelf = $.parseJSON(serverResponse);
+                        // for live shelf adding
+                        if(newShelf.name){
+                            var noIds = $("#putOnShelf ol ul").children('li').length;
+                            $("#putOnShelf ol ul").prepend('<li><label for="id_set_ids_'+ noIds +'"><input name="set_ids" value="'+ newShelf.id +'" id="id_set_ids_'+ noIds +'" type="checkbox" checked="checked"> '+ newShelf.name +' (0)</label></li>');
+                            $("#createNewShelf ol input[name=name]").val("");
+                        }
+                        if(newShelf.after == "close"){
+                            setTimeout(function() {$('#set-window').jqmHide();}, 1000);
+                        }
+                    }
+                });    

             }
         });
 
             }
         });
 

diff --git a/wolnelektury/templates/catalogue/book_sets.html b/wolnelektury/templates/catalogue/book_sets.html
index 2b713b4..1eee61d 100644 (file)
--- a/wolnelektury/templates/catalogue/book_sets.html
+++ b/wolnelektury/templates/catalogue/book_sets.html
@@ -9,7 +9,7 @@
 {% if not user.tag_set.count %}
     <p>{% trans "You do not have any shelves. You can create one below, if you want to."%}</p>
 {% else %}
 {% if not user.tag_set.count %}
     <p>{% trans "You do not have any shelves. You can create one below, if you want to."%}</p>
 {% else %}

-    <form action="{% url catalogue.views.book_sets book.slug %}" method="POST" accept-charset="utf-8" class="cuteform">
+    <form action="{% url catalogue.views.book_sets book.slug %}" method="POST" id="putOnShelf" accept-charset="utf-8" class="cuteform">

     <ol>
         <li>{{ form.set_ids }}</li>
         <li><input type="submit" value="{% trans "Put on the shelf!" %}"/></li>
     <ol>
         <li>{{ form.set_ids }}</li>
         <li><input type="submit" value="{% trans "Put on the shelf!" %}"/></li>