Widgets: use a template for JQueryJqGrid. It is now far clearer... (refs #1219)

2 files changed, 134 insertions, 123 deletions

diff --git a/ishtar_common/templates/blocks/JQueryJqGrid.html b/ishtar_common/templates/blocks/JQueryJqGrid.html
new file mode 100644
index 000000000..26855f4ea
--- /dev/null
+++ b/ishtar_common/templates/blocks/JQueryJqGrid.html
@@ -0,0 +1,123 @@
+{% load i18n %}
+</table>
+
+<button id='search_{{name}}' class='submit'>{% trans "Search" %}</button>
+
+{% if url_new %}
+<p><a href="#" onclick="open_window('{{url_new}}');">{{new_message}}</a></p>
+{% endif %}
+
+<h4>{% trans "Search and select an item" %}</h4>
+
+<table id='grid_{{name}}' class='jqgrid'></table>
+<div id='pager_{{name}}'></div>
+
+<div id='foot_{{name}}' class='gridfooter'>
+{% if source_full %}
+{% trans "Export as CSV" %} ({{encoding}})
+<a href='{{source}}csv' target='_blank'>{{simple}}</a> - 
+<a href='{{source_full}}csv' target='_blank'>{{full}}</a>
+{% else %}
+<a href="{{source}}csv" target="_blank">{% trans "Export as CSV" %} ({{encoding}})</a>
+{% endif %}
+</div>
+
+{% if multiple %}
+<input type="button" id="add_button_{{name}}" value="{% trans "Add" %}"/>
+<ul id="selectmulti_{{name}}" class="selectmulti"></ul>
+{% endif %}
+
+<input type="hidden" id="hidden_{{name}}" name="{{name}}"/>
+
+<script type="text/javascript">
+var query_vars = new Array({{col_idx|safe}});
+var selItems_{{sname}} = new Array();
+jQuery(document).ready(function(){
+  jQuery("#search_{{name}}").click(function (){
+    if ($("#progress").length > 0){
+        $("#progress").show();
+    }
+    var data = "";
+    for (idx in query_vars)
+    {
+        var key = query_vars[idx];
+        var val = jQuery("#id_"+key).val();
+        if (val){
+            if (data) data += "&";
+            data += key + "=" + val;
+        }
+    }
+    var mygrid = jQuery("#grid_{{name}}");
+    var url = "{{source}}?submited=1&" + data;
+    mygrid.setGridParam({url:url});
+    mygrid.trigger("reloadGrid");
+    if ($("#progress").length > 0){
+        $("#progress").hide();
+    }
+    return false;
+  });
+
+  jQuery("#grid_{{name}}").jqGrid({
+    url:'{{source}}',
+    datatype: "json",
+    mtype: 'GET',
+    colNames:['id', '', {{col_names|safe}}],
+    colModel:[
+      {name:'id', index:'id', hidden:true},
+      {name:'link', index:'link', width:80},
+      {{extra_cols|safe}}
+    ],
+    sortname: 'value',
+    viewrecords: true,
+    sortorder: "asc",
+    emptyrecords: "{{no_result}}",
+    loadtext: "{{loading}}",
+    pager: '#pager_{{name}}',
+    width:740,
+    rowNum:20,
+    jsonReader : {repeatitems: false},
+  });
+{% if multiple %}
+  jQuery("#add_button_{{name}}").click(function (){
+    var mygrid = jQuery("#grid_{{name}}");
+    var idx = mygrid.getGridParam('selrow');
+    var lbl_cols = new Array({{multi_cols|safe}});
+    var label = "";
+    for (var id in lbl_cols){
+        if(id == 1){
+            label += " (";
+        }else if (id > 1){
+            label += " ; ";
+        }
+        label += mygrid.getCell(idx, lbl_cols[id]);
+    }
+    if (id > 0){
+        label += ")";
+    }
+    for (id in selItems_{{sname}}){
+        if(selItems_{{sname}}[id] == idx){
+            return false;
+        }
+    }
+    selItems_{{sname}}.push(idx);
+    jQuery("#selectmulti_{{name}}").append(
+               "<li id='selected_{{name}}_"+idx+"'>\
+<a href='#' class='remove' \
+  onclick=\"multiRemoveItem(selItems_{{sname}}, '{{name}}', "+ idx +");\
+  return false;\" title=\"{{remove}}\">X</a>" + label + "</li>");
+    return true;
+  });
+  jQuery("#submit_form").click(function (){
+    jQuery("#hidden_{{name}}").val(selItems_{{sname}});
+    return true;
+  });
+{% else %}
+  jQuery("#submit_form").click(function (){
+    var mygrid = jQuery("#grid_{{name}}");
+    jQuery("#hidden_{{name}}").val(mygrid.getGridParam('selrow'));
+    return true;
+  });
+{% endif %}
+});
+</script>
+
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py
index b3e366e0d..e94353ec7 100644
--- a/ishtar_common/widgets.py
+++ b/ishtar_common/widgets.py
@@ -209,15 +209,11 @@ class JQueryJqGrid(forms.RadioSelect):
         t = loader.get_template('blocks/form_snippet.html')

         form = self.form()

         rendered = t.render(Context({'form':form}))

-        rendered += u"\n</table>\n"\

-        u"<button id='search_%s' class='submit'>%s</button>" % (

-                                                name, unicode(_("Search")))

+        dct = {}

         if self.new:

             model_name = self.associated_model._meta.object_name.lower()

-            url_new = reverse('new-' + model_name, args=['0'])

-            rendered += u'<p><a href="#" onclick="open_window(\'%s\');">'\

-                        u'%s</a></p>' % (url_new, unicode(self.new_message))

-        rendered += "\n<h4>%s</h4>\n" % unicode(_("Search and select an item"))

+            dct['url_new'] = reverse('new-' + model_name, args=['0'])

+            dct['new_message'] = self.new_message

         extra_cols = []

         col_names, col_idx = [], []

         for k in form.get_input_ids():

@@ -245,27 +241,11 @@ class JQueryJqGrid(forms.RadioSelect):
         col_names = col_names and ",\n".join(col_names) or ""

         col_idx = col_idx and ",\n".join(col_idx) or ""

         extra_cols = extra_cols and ",\n".join(extra_cols) or ""

-        rendered += u"<table id='grid_%s' class='jqgrid'></table>\n"\

-                    u"<div id='pager_%s'></div>\n"% (name, name)

-        encoding = settings.ENCODING or 'utf-8'

-        rendered += u"<div id='foot_%s' class='gridfooter'>\n" % name

+        dct['encoding'] = settings.ENCODING or 'utf-8'

+        dct['source'] = unicode(self.source)

         if unicode(self.source_full) and unicode(self.source_full) != 'None':

-            rendered += u"%s (%s) <a href='%scsv' target='_blank'>%s</a> - "\

-                        u"<a href='%scsv' target='_blank'>%s</a>\n" % (

-                unicode(_("Export as CSV")), encoding, unicode(self.source),

-                unicode(_(u"simple")),  unicode(self.source_full),

-                unicode(_(u"full")),)

-        else:

-            rendered += u'<a href="%scsv" target="_blank">%s (%s)</a>\n' % (

-                  unicode(self.source), unicode(_("Export as CSV")), encoding)

-        rendered += "</div>\n"

-        if self.multiple:

-            rendered += u'<input type="button" id="add_button_%s" value="%s"/>'\

-                    u'<ul id="selectmulti_%s" class="selectmulti">\n</ul>\n' % (

-                                                  name, unicode(_("Add")), name)

-        rendered += '<input type="hidden" id="hidden_%s" name="%s"/>\n' % (name,

-                                                                           name)

-        dct = {'name':name,

+            dct['source_full'] = unicode(self.source_full)

+        dct.update({'name':name,

                'col_names':col_names,

                'extra_cols':extra_cols,

                'source':unicode(self.source),

@@ -274,102 +254,10 @@ class JQueryJqGrid(forms.RadioSelect):
                'loading':unicode(_("Loading...")),

                'remove':unicode(_(u"Remove")),

                'sname':name.replace('-', ''),

+               'multiple':self.multiple,

                'multi_cols': ",".join((u'"%d"' % col \

                                        for col in self.multiple_cols))

-              }

-        rendered += """<script type="text/javascript">

-        var query_vars = new Array(%(col_idx)s);

-        var selItems_%(sname)s = new Array();

-        jQuery(document).ready(function(){

-          jQuery("#search_%(name)s").click(function (){

-            if ($("#progress").length > 0){

-                $("#progress").show();

-            }

-            var data = "";

-            for (idx in query_vars)

-            {

-                var key = query_vars[idx];

-                var val = jQuery("#id_"+key).val();

-                if (val){

-                    if (data) data += "&";

-                    data += key + "=" + val;

-                }

-            }

-            var mygrid = jQuery("#grid_%(name)s");

-            var url = "%(source)s?submited=1&" + data;

-            mygrid.setGridParam({url:url});

-            mygrid.trigger("reloadGrid");

-            if ($("#progress").length > 0){

-                $("#progress").hide();

-            }

-            return false;

-          });

-

-          jQuery("#grid_%(name)s").jqGrid({

-            url:'%(source)s',

-            datatype: "json",

-            mtype: 'GET',

-            colNames:['id', '', %(col_names)s],

-            colModel:[

-              {name:'id', index:'id', hidden:true},

-              {name:'link', index:'link', width:80},

-              %(extra_cols)s

-            ],

-            sortname: 'value',

-            viewrecords: true,

-            sortorder: "asc",

-            emptyrecords: "%(no_result)s",

-            loadtext: "%(loading)s",

-            pager: '#pager_%(name)s',

-            width:740,

-            rowNum:20,

-            jsonReader : {repeatitems: false},

-          });

-        """ % dct

-        if self.multiple:

-            rendered += """

-          jQuery("#add_button_%(name)s").click(function (){

-            var mygrid = jQuery("#grid_%(name)s");

-            var idx = mygrid.getGridParam('selrow');

-            var lbl_cols = new Array(%(multi_cols)s);

-            var label = "";

-            for (var id in lbl_cols){

-                if(id == 1){

-                    label += " (";

-                }else if (id > 1){

-                    label += " ; ";

-                }

-                label += mygrid.getCell(idx, lbl_cols[id]);

-            }

-            if (id > 0){

-                label += ")";

-            }

-            for (id in selItems_%(sname)s){

-                if(selItems_%(sname)s[id] == idx){

-                    return false;

-                }

-            }

-            selItems_%(sname)s.push(idx);

-            jQuery("#selectmulti_%(name)s").append(

-                       "<li id='selected_%(name)s_"+idx+"'>\

-        <a href='#' class='remove' \

-          onclick=\\"multiRemoveItem(selItems_%(sname)s, '%(name)s', "+ idx +");\

-          return false;\\" title=\\"%(remove)s\\">X</a>" + label + "</li>");

-            return true;

-          });

-          jQuery("#submit_form").click(function (){

-            jQuery("#hidden_%(name)s").val(selItems_%(sname)s);

-            return true;

-          });

-        """ % dct

-        else:

-            rendered += """

-          jQuery("#submit_form").click(function (){

-            var mygrid = jQuery("#grid_%(name)s");

-            jQuery("#hidden_%(name)s").val(mygrid.getGridParam('selrow'));

-            return true;

-          });

-        """ % dct

-        rendered += "});\n</script>\n"

+              })

+        t = loader.get_template('blocks/JQueryJqGrid.html')

+        rendered += t.render(Context(dct))

         return mark_safe(rendered)

-