Changeset 77 for unicoders

Timestamp:

06/30/07 19:36:35 (19 months ago)

Author:

steadicat

Message:

Added support for boolean fields.
Various fixes and refactoring.

Location:

unicoders/trunk/unicoders

Files:

• adminedit/media/scripts/adminedit.js (modified) (4 diffs)
• adminedit/templates/adminedit/field_view.html (modified) (1 diff)
• adminedit/urls.py (modified) (1 diff)
• adminedit/views.py (modified) (2 diffs)
• media/scripts/adminedit.js (modified) (4 diffs)

unicoders/trunk/unicoders/adminedit/media/scripts/adminedit.js

@@ +1 @@
+var ADMIN_URL = '/admin/';
+var ADMINEDIT_URL = '/adminedit/';
+var THROBBER ='<img src="/media/images/throbber.gif" class="throbber"/>';
+var MESSAGE = '<ul class="messagelist"><li>Click any field to edit it in place</li></ul>';
+
+function stopPropagation(event) { event.stopPropagation(); }
+
 function getFieldId(cell) {
     var cell = $(cell);
@@ -19 +26 @@
 }
 
-function getTypeName() {
-    return document.location.href.split('/').slice(-2, -1)[0];
-}
-function getObjectId(cell) {
-    var id = $(cell).parent().find('a').attr('href');
-    return id.substring(0, id.length-1);
-}
-
 function getUrl(cell) {
-    // build the url
-    var type = getTypeName();
-    var id = getObjectId(cell);
-    var field = getFieldId(cell);
-    return '/adminedit/edit/'+type+'/'+id+'/'+field;
+    return $(cell).parent().find('a').attr('href') + getFieldId(cell);
 }
 
@@ -38 +33 @@
     return $(cell).parent().find('th input')[0].checked;
 }
-function editField() {
+
+function focusForm(cell) {
+    var form = $(cell).find('input, textarea, select');
+    if (form.length > 0) form[0].focus();
+}
+
+
+function edit() {
+    var cell = this;
+    var bool = null;
+
+    function editOne(c, b) {
+        if (b != null) {
+            editBooleanField(c, !b);
+        } else {
+            editField(c);
+        }
+    }
+
+    // special case for bool fields
+    if ($(cell).find('img').length > 0) bool = ($(cell).find('img').attr('alt') == 'True');
+
     // if the row we are editing is selected
-    if (isRowSelected(this)) {
+    if (isRowSelected(cell)) {
         // do the same edit on all the other rows that are selected
-        getCellsInColumn(this).each(function() {
-            if (isRowSelected(this)) editSingleField.call(this, false);
+        getCellsInColumn(cell).each(function() {
+            if (isRowSelected(this)) editOne(this, bool);
         });
     } else {
-        editSingleField.call(this, true);
-    }
-}
-
-function setupForm(target, single) {
-    var form = $(target).find('input, textarea, select');
+        editOne(cell, bool);
+        focusForm(cell);
+    }
+}
+
+function save() {
+    var form = this;
+    var cell = $(form).parent();
+    // if the row we are editing is selected
+    if (isRowSelected(cell)) {
+        // save all the other rows that are selected
+        getCellsInColumn(cell).each(function() {
+            if (isRowSelected(this)) saveField($(this).find('input, textarea, select'));
+        });
+    } else {
+        saveField(form);
+        focusForm(cell);
+    }
+}
+
+function editBooleanField(cell, value) {
+    var args = {};
+    args['toggle'] = value;
+
+    // throbber
+    $(cell).append(THROBBER);
+
+    $.post(getUrl(cell), args, function(data) {
+        var img = $($(cell).find('img')[0]);
+
+        data = data.split('\n')[0];
+
+        if ((data == 'True') || (data == 'False')) {
+            img.attr('alt', data);
+            // remove the throbber
+            $(cell).find('img.throbber').remove();
+        }
+
+        if (data == 'True') {
+            img.attr('src', img.attr('src').replace('-no', '-yes'));
+        } else if (data == 'False') {
+            img.attr('src', img.attr('src').replace('-yes', '-no'));
+        }
+    });
+}
+
+function editField(cell) {
+    // throbber
+    $(cell).append(THROBBER);
+
+    // ajax request for the form widget
+    $.get(getUrl(cell), function(data) {
+        // insert the ajax response in the page
+        $(cell).html(data);
+        setupForm(cell);
+    });
+}
+
+function saveField(form) {
+    var cell = $(form).parent();
+
+    // throbber
+    cell.append(THROBBER);
+
+    // just one argument to the post: the field we are editing with its new value
+    var args = {};
+    if ($(form).attr('value')) {
+        args[$(form).attr('name')] = $(form).attr('value');
+    } else {
+        args[$(form).attr('name')] = '';
+    }
+
+    // ajax post to edit the object
+    $.post(getUrl(cell), args, function(data) {
+        // display the new value in the page
+        $(cell).html(data);
+
+        // in case of validation error
+        setupForm(cell);
+    });
+}
+
+function setupForm(cell) {
+    var form = $(cell).find('input, textarea, select');
     if (form.length == 0) return;
 
     // do not start the edit again if we click on a form element
-    form.click(function(event) { event.stopPropagation(); event.preventDefault(); });
+    form.click(stopPropagation);
     // on blur: save
-    form.blur(function() { saveField.call(this, single); });
+    form.blur(save);
     // on enter: save
     form.keypress(function(event) {
-        if (event.keyCode == 13) saveField.call(this, single);
-    });
-
-
+        if (event.keyCode == 13) save.call(this);
+    });
+
+    // edit all selected fields simultaneously
     function changeField() {
         function innerChangeField() {
-            var cell = $(target);
-            if (target.tagName == 'A') cell = $(target).parent();
             getCellsInColumn(cell).each(function() {
                 if (isRowSelected(this)) {
@@ -75 +167 @@
             });
         };
-        setTimeout(innerChangeField, 10);
+        // let the current element edit before updating the other ones
+        setTimeout(innerChangeField, 1);
     }
     form.change(changeField);
     form.keypress(changeField);
-
-    // focus on the new form widget
-    if (single) form[0].focus();
-}
-
-function editSingleField(single) {
-    var target = this;
-    // keep the link if present
-    if ($(target).find('a').length > 0) {
-        target = $(this).find('a')[0];
-    }
-
-    // throbber
-    $(target).append('<img src="/media/images/throbber.gif"/>');
-
-    // ajax request for the form widget
-    $.get(getUrl(this), function(data) {
-        // insert the ajax response in the page
-        $(target).html(data);
-
-        setupForm(target, single);
-    });
-}
-
-function saveField(single) {
-    var cell = $(this).parent();
-//    var target = cell;
-//    if (cell[0].tagName == 'SPAN') cell = cell.parent();
-
-    if (!single) {
-        var column = getCellsInColumn(cell);
-        var form = this;
-        column.each(function() {
-            if (isRowSelected(this)) saveField.call($(this).find('input, textarea, select'), true);
-        });
-    } else {
-
-        // throbber
-        cell.append('<img src="/media/images/throbber.gif"/>');
-
-        // just one argument to the post: the field we are editing with its new value
-        var args = {};
-        if ($(this).attr('value')) {
-            args[$(this).attr('name')] = $(this).attr('value');
-        } else {
-            args[$(this).attr('name')] = '';
-        }
-
-        // ajax post to edit the object
-        $.post(getUrl(cell), args, function(data) {
-            // display the new value in the page
-            $(cell).html(data);
-
-            // in case of validation error
-            setupForm(cell, single);
-        });
-    }
-}
+}
+
 
 $(document).ready(function() {
+    // activate only on change-list pages
     if ($('body').attr('class') != 'change-list') return;
 
-    $('#content h1').append('<ul class="messagelist"><li>Click any field to edit it in place</li></ul>');
-
-    // on click: edit
-    $('td, th').click(editField);
+    // show help message
+    $('#content h1').append(MESSAGE);
+
+    // on click on a table cell: edit
+    $('tbody td, tbody th').click(edit);
     // when clicking on a link, do not edit
-    $('td a, th a').click(function(event) { event.stopPropagation(); });
-
-    // add checkboxes to each row
-    $('tr').prepend($('<th><input type="checkbox"/></th>'));
+    $('tbody td a, tbody th a').click(stopPropagation);
+
+    // add checkboxes to each row and save the links
+    $('tr').each(function() {
+        var url = window.location.href + $(this).find('a').attr('href');
+        url = url.replace(ADMIN_URL, ADMINEDIT_URL);
+
+        $(this).prepend($('<th><a class="adminedit_link" href="'+url+'"></a><input type="checkbox"/></th>'));
+    });
 
     // select/deselect all

unicoders/trunk/unicoders/adminedit/templates/adminedit/field_view.html

@@ -1 @@
-{{ field }}
+{% ifequal field None %}(None){% else %}{{ field }}{% endifequal %}

unicoders/trunk/unicoders/adminedit/urls.py

@@ -2 +2 @@
 
 urlpatterns = patterns('unicoders.adminedit.views',
-    (r'^edit/(?P<type>.+)/(?P<id>[0-9]+)/(?P<field>.+)$', 'field_edit'),
+    (r'^(?P<app>.+)/(?P<model>.+)/(?P<id>[0-9]+)/(?P<field>.+)$', 'field_edit'),
 )

unicoders/trunk/unicoders/adminedit/views.py

@@ -4 +4 @@
 from django.contrib import admin
 
-def field_edit(request, type, id, field):
-    c = ContentType.objects.get(name__exact=type).model_class()
+def field_edit(request, app, model, id, field):
+    c = ContentType.objects.get(app_label=app, model=model).model_class()
     Form = forms.form_for_instance(c.objects.get(id=id))
 
@@ -17 +17 @@
         form = Form(request.POST)
         o = c.objects.get(id=id)
+
+        # special case for boolean fields
+        if 'toggle' in request.POST:
+            setattr(o, field, request.POST['toggle'] == 'true')
+            o.save()
+            return field_view(o, field)
+
         try:
             setattr(o, field, form[field].field.clean(request.POST.get(field, None)))

unicoders/trunk/unicoders/media/scripts/adminedit.js

@@ +1 @@
+var ADMIN_URL = '/admin/';
+var ADMINEDIT_URL = '/adminedit/';
+var THROBBER ='<img src="/media/images/throbber.gif" class="throbber"/>';
+var MESSAGE = '<ul class="messagelist"><li>Click any field to edit it in place</li></ul>';
+
+function stopPropagation(event) { event.stopPropagation(); }
+
 function getFieldId(cell) {
     var cell = $(cell);
@@ -19 +26 @@
 }
 
-function getTypeName() {
-    return document.location.href.split('/').slice(-2, -1)[0];
-}
-function getObjectId(cell) {
-    var id = $(cell).parent().find('a').attr('href');
-    return id.substring(0, id.length-1);
-}
-
 function getUrl(cell) {
-    // build the url
-    var type = getTypeName();
-    var id = getObjectId(cell);
-    var field = getFieldId(cell);
-    return '/adminedit/edit/'+type+'/'+id+'/'+field;
+    return $(cell).parent().find('a').attr('href') + getFieldId(cell);
 }
 
@@ -38 +33 @@
     return $(cell).parent().find('th input')[0].checked;
 }
-function editField() {
+
+function focusForm(cell) {
+    var form = $(cell).find('input, textarea, select');
+    if (form.length > 0) form[0].focus();
+}
+
+
+function edit() {
+    var cell = this;
+    var bool = null;
+
+    function editOne(c, b) {
+        if (b != null) {
+            editBooleanField(c, !b);
+        } else {
+            editField(c);
+        }
+    }
+
+    // special case for bool fields
+    if ($(cell).find('img').length > 0) bool = ($(cell).find('img').attr('alt') == 'True');
+
     // if the row we are editing is selected
-    if (isRowSelected(this)) {
+    if (isRowSelected(cell)) {
         // do the same edit on all the other rows that are selected
-        getCellsInColumn(this).each(function() {
-            if (isRowSelected(this)) editSingleField.call(this, false);
+        getCellsInColumn(cell).each(function() {
+            if (isRowSelected(this)) editOne(this, bool);
         });
     } else {
-        editSingleField.call(this, true);
-    }
-}
-
-function setupForm(target, single) {
-    var form = $(target).find('input, textarea, select');
+        editOne(cell, bool);
+        focusForm(cell);
+    }
+}
+
+function save() {
+    var form = this;
+    var cell = $(form).parent();
+    // if the row we are editing is selected
+    if (isRowSelected(cell)) {
+        // save all the other rows that are selected
+        getCellsInColumn(cell).each(function() {
+            if (isRowSelected(this)) saveField($(this).find('input, textarea, select'));
+        });
+    } else {
+        saveField(form);
+        focusForm(cell);
+    }
+}
+
+function editBooleanField(cell, value) {
+    var args = {};
+    args['toggle'] = value;
+
+    // throbber
+    $(cell).append(THROBBER);
+
+    $.post(getUrl(cell), args, function(data) {
+        var img = $($(cell).find('img')[0]);
+
+        data = data.split('\n')[0];
+
+        if ((data == 'True') || (data == 'False')) {
+            img.attr('alt', data);
+            // remove the throbber
+            $(cell).find('img.throbber').remove();
+        }
+
+        if (data == 'True') {
+            img.attr('src', img.attr('src').replace('-no', '-yes'));
+        } else if (data == 'False') {
+            img.attr('src', img.attr('src').replace('-yes', '-no'));
+        }
+    });
+}
+
+function editField(cell) {
+    // throbber
+    $(cell).append(THROBBER);
+
+    // ajax request for the form widget
+    $.get(getUrl(cell), function(data) {
+        // insert the ajax response in the page
+        $(cell).html(data);
+        setupForm(cell);
+    });
+}
+
+function saveField(form) {
+    var cell = $(form).parent();
+
+    // throbber
+    cell.append(THROBBER);
+
+    // just one argument to the post: the field we are editing with its new value
+    var args = {};
+    if ($(form).attr('value')) {
+        args[$(form).attr('name')] = $(form).attr('value');
+    } else {
+        args[$(form).attr('name')] = '';
+    }
+
+    // ajax post to edit the object
+    $.post(getUrl(cell), args, function(data) {
+        // display the new value in the page
+        $(cell).html(data);
+
+        // in case of validation error
+        setupForm(cell);
+    });
+}
+
+function setupForm(cell) {
+    var form = $(cell).find('input, textarea, select');
     if (form.length == 0) return;
 
     // do not start the edit again if we click on a form element
-    form.click(function(event) { event.stopPropagation(); event.preventDefault(); });
+    form.click(stopPropagation);
     // on blur: save
-    form.blur(function() { saveField.call(this, single); });
+    form.blur(save);
     // on enter: save
     form.keypress(function(event) {
-        if (event.keyCode == 13) saveField.call(this, single);
-    });
-
-
+        if (event.keyCode == 13) save.call(this);
+    });
+
+    // edit all selected fields simultaneously
     function changeField() {
         function innerChangeField() {
-            var cell = $(target);
-            if (target.tagName == 'A') cell = $(target).parent();
             getCellsInColumn(cell).each(function() {
                 if (isRowSelected(this)) {
@@ -75 +167 @@
             });
         };
-        setTimeout(innerChangeField, 10);
+        // let the current element edit before updating the other ones
+        setTimeout(innerChangeField, 1);
     }
     form.change(changeField);
     form.keypress(changeField);
-
-    // focus on the new form widget
-    if (single) form[0].focus();
-}
-
-function editSingleField(single) {
-    var target = this;
-    // keep the link if present
-    if ($(target).find('a').length > 0) {
-        target = $(this).find('a')[0];
-    }
-
-    // throbber
-    $(target).append('<img src="/media/images/throbber.gif"/>');
-
-    // ajax request for the form widget
-    $.get(getUrl(this), function(data) {
-        // insert the ajax response in the page
-        $(target).html(data);
-
-        setupForm(target, single);
-    });
-}
-
-function saveField(single) {
-    var cell = $(this).parent();
-//    var target = cell;
-//    if (cell[0].tagName == 'SPAN') cell = cell.parent();
-
-    if (!single) {
-        var column = getCellsInColumn(cell);
-        var form = this;
-        column.each(function() {
-            if (isRowSelected(this)) saveField.call($(this).find('input, textarea, select'), true);
-        });
-    } else {
-
-        // throbber
-        cell.append('<img src="/media/images/throbber.gif"/>');
-
-        // just one argument to the post: the field we are editing with its new value
-        var args = {};
-        if ($(this).attr('value')) {
-            args[$(this).attr('name')] = $(this).attr('value');
-        } else {
-            args[$(this).attr('name')] = '';
-        }
-
-        // ajax post to edit the object
-        $.post(getUrl(cell), args, function(data) {
-            // display the new value in the page
-            $(cell).html(data);
-
-            // in case of validation error
-            setupForm(cell, single);
-        });
-    }
-}
+}
+
 
 $(document).ready(function() {
+    // activate only on change-list pages
     if ($('body').attr('class') != 'change-list') return;
 
-    $('#content h1').append('<ul class="messagelist"><li>Click any field to edit it in place</li></ul>');
-
-    // on click: edit
-    $('td, th').click(editField);
+    // show help message
+    $('#content h1').append(MESSAGE);
+
+    // on click on a table cell: edit
+    $('tbody td, tbody th').click(edit);
     // when clicking on a link, do not edit
-    $('td a, th a').click(function(event) { event.stopPropagation(); });
-
-    // add checkboxes to each row
-    $('tr').prepend($('<th><input type="checkbox"/></th>'));
+    $('tbody td a, tbody th a').click(stopPropagation);
+
+    // add checkboxes to each row and save the links
+    $('tr').each(function() {
+        var url = window.location.href + $(this).find('a').attr('href');
+        url = url.replace(ADMIN_URL, ADMINEDIT_URL);
+
+        $(this).prepend($('<th><a class="adminedit_link" href="'+url+'"></a><input type="checkbox"/></th>'));
+    });
 
     // select/deselect all