AjaxMultiSelect widget generico.

Widget puleta para crear una lista de objetitos para agregar a nuestros objetos.

El widget funciona como un MultipleSelectField con algunos agregados ajaxosos que funcionan out-of-the-box.
Pasa usar el widget el unico requisito es pasar el parametro on_add, que debe ser el nombre de una funcion
javascript que se crea junto con el form (externa al widget y que tiene la logica de validacion prellamada
AJAXosa y la llamada en si).

Ejemplo : en Curso queremos poder agregar la lista de miembros del widget, entonces agregarmos al form lo siguiente :
  alumnos = AjaxMultiSelect(name='alumnos', label=_(u'Integrantes'), validator=V.Int(), on_add="alumnos_agregar_a_la_lista")
  javascript = [W.JSSource(ajax)]

Definiendo en ajax nuestra funcion como sigue :
function alumnos_agregar_a_la_lista(texto, lista, loading)
{
}

texto contiene el ID (como string) de donde leer el valor a agregar. Lista corresponde al ID de la lista en si y
loading del icono que muestra que se esta haciendo algo.

Para mas detalles como lanzar el JSON y eso ver el ejemplo en Curso.

TODO : hacer que este metodo sea mas facil de implementar :)

diff --git a/sercom/subcontrollers/grupo/__init__.py b/sercom/subcontrollers/grupo/__init__.py
index 6e2899498a2d8da579cb055a78e4e2391f952400..46422c72e582e65cb6a36e85c87d0d544db28b05 100644 (file)
--- a/sercom/subcontrollers/grupo/__init__.py
+++ b/sercom/subcontrollers/grupo/__init__.py
@@ -62,6 +62,31 @@ def get_cursos():
     return [(0, u'---')] + [(fk1.id, fk1.shortrepr()) for fk1 in Curso.select()]
 
 ajax = u"""
     return [(0, u'---')] + [(fk1.id, fk1.shortrepr()) for fk1 in Curso.select()]
 
 ajax = u"""

+    function alumnos_agregar_a_la_lista(texto, lista, loading)
+    {
+        t = MochiKit.DOM.getElement(texto);
+
+        /* Como no se si se puede hacer de otra manera, asumo que tengo en
+         * el form un Combo que se llama curso en el codigo, y tiro error si
+         * no existe
+         */
+        curso = MochiKit.DOM.getElement('form_cursoID');
+        if (!curso) {
+            alert("No deberias ver esto, y quiere decir que tu form esta roto.\\nTe falta un combo de curso");
+            return;
+        }
+        if (curso.options[curso.selectedIndex].value <= 0) {
+            alert('Debes seleccionar un curso primero');
+            return;
+        }
+        load = MochiKit.DOM.getElement(loading);
+        load.style.visibility = 'visible';
+        url = "/grupo/get_inscripto?cursoid="+curso.options[curso.selectedIndex].value+"&padron="+t.value;
+        var d = loadJSONDoc(url);
+        d.addCallbacks(partial(_on_alumno_get_result, lista, loading), partial(_on_alumno_get_error, loading));
+        t.value = "";
+    }
+

     function err (err)
     {
         alert("The metadata for MochiKit.Async could not be fetched :(");
     function err (err)
     {
         alert("The metadata for MochiKit.Async could not be fetched :(");


@@ -112,7 +137,7 @@ class GrupoForm(W.TableForm):
         validator = V.Int(not_empty=True))
         nombre = W.TextField(label=_(u'Nombre'), validator=V.UnicodeString(not_empty=True,strip=True))
         responsable = CustomTextField(label=_(u'Responsable'), validator=V.UnicodeString(not_empty=True), attrs=dict(size='8'))
         validator = V.Int(not_empty=True))
         nombre = W.TextField(label=_(u'Nombre'), validator=V.UnicodeString(not_empty=True,strip=True))
         responsable = CustomTextField(label=_(u'Responsable'), validator=V.UnicodeString(not_empty=True), attrs=dict(size='8'))

-        alumnos = AlumnoMultiSelect(name='alumnos', label=_(u'Integrantes'), validator=V.Int())
+        alumnos = AjaxMultiSelect(name='alumnos', label=_(u'Integrantes'), validator=V.Int(), on_add="alumnos_agregar_a_la_lista")

 
     fields = Fields()
     javascript = [W.JSSource("MochiKit.DOM.focusOnLoad('curso');"), W.JSSource(ajax)]
 
     fields = Fields()
     javascript = [W.JSSource("MochiKit.DOM.focusOnLoad('curso');"), W.JSSource(ajax)]

diff --git a/sercom/widgets.py b/sercom/widgets.py
index 5a06ea71c92d41cabd58b913ef87167cd16e6414..419fa63adc2816bbfe57de6a0d92e746dd580751 100644 (file)
--- a/sercom/widgets.py
+++ b/sercom/widgets.py
@@ -19,7 +19,7 @@ class CustomTextField(widgets.TextField):
         </span>
 '''
 
         </span>
 '''
 

-AlumnoMultiSelectAjax = '''
+MultiSelectAjax = '''

 
     function _on_alumno_get_result(lista, loading, results)
     {
 
     function _on_alumno_get_result(lista, loading, results)
     {


@@ -43,31 +43,6 @@ AlumnoMultiSelectAjax = '''
         load.style.visibility = 'hidden';
     }
 
         load.style.visibility = 'hidden';
     }
 

-    function agregar_a_la_lista(texto, lista, loading)
-    {
-        t = MochiKit.DOM.getElement(texto);
-
-        /* Como no se si se puede hacer de otra manera, asumo que tengo en
-         * el form un Combo que se llama curso en el codigo, y tiro error si
-         * no existe
-         */
-        curso = MochiKit.DOM.getElement('form_cursoID');
-        if (!curso) {
-            alert("No deberias ver esto, y quiere decir que tu form esta roto.\\nTe falta un combo de curso");
-            return;
-        }
-        if (curso.options[curso.selectedIndex].value <= 0) {
-            alert('Debes seleccionar un curso primero');
-            return;
-        }
-        load = MochiKit.DOM.getElement(loading);
-        load.style.visibility = 'visible';
-        url = "/grupo/get_inscripto?cursoid="+curso.options[curso.selectedIndex].value+"&padron="+t.value;
-        var d = loadJSONDoc(url);
-        d.addCallbacks(partial(_on_alumno_get_result, lista, loading), partial(_on_alumno_get_error, loading));
-        t.value = "";
-    }
-

     function sacar_de_la_lista(lista)
     {
         l = MochiKit.DOM.getElement(lista);
     function sacar_de_la_lista(lista)
     {
         l = MochiKit.DOM.getElement(lista);


@@ -84,14 +59,14 @@ AlumnoMultiSelectAjax = '''
     }
 '''
 
     }
 '''
 

-class AlumnoMultiSelect(widgets.MultipleSelectField):
+class AjaxMultiSelect(widgets.MultipleSelectField):

     template = '''
     <div style="width:250px" xmlns:py="http://purl.org/kid/ns#">  
     <div>
     <input type="text" id="${field_id}_nuevo" size="10" />
     <img src="/static/images/loading.gif" align="baseline" style="visibility:hidden;" id="${name}_loading" width="16px" height="16px" />
     <input type="button" id="_agregar" value="Agregar"
     template = '''
     <div style="width:250px" xmlns:py="http://purl.org/kid/ns#">  
     <div>
     <input type="text" id="${field_id}_nuevo" size="10" />
     <img src="/static/images/loading.gif" align="baseline" style="visibility:hidden;" id="${name}_loading" width="16px" height="16px" />
     <input type="button" id="_agregar" value="Agregar"

-        onClick=" agregar_a_la_lista('${field_id}_nuevo', '${field_id}', '${name}_loading'); " />
+        onClick=" ${on_add}('${field_id}_nuevo', '${field_id}', '${name}_loading'); " />

     </div>
     <div>
     <select  
     </div>
     <div>
     <select  


@@ -121,5 +96,10 @@ class AlumnoMultiSelect(widgets.MultipleSelectField):
     </div>
     </div>
     '''
     </div>
     </div>
     '''

-    javascript = [widgets.JSSource(AlumnoMultiSelectAjax)]
+    javascript = [widgets.JSSource(MultiSelectAjax)]
+    on_add = "alert('Not defined action');"

 
 

+    def __init__(self, **kw):
+        self.params.append('on_add')
+        self.on_add = "alert('Not defined action');"
+        widgets.MultipleSelectField.__init__(self, **kw)