Skip to content

erp5-Boxiang
erp5-Boxiang
Commit 5065c94d authored by Ivan Tyagov's avatar Ivan Tyagov
Browse files
Options

Use ERP5Form rather than more generic Form as it represents an ERP5 form gadget renderer.

parent 17604a77
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 295 deletions
bt5/erp5_xhtml_gadget_style/SkinTemplateItem/portal_skins/erp5_xhtml_gadget_style/erp5_form.js.xml
View file @ 5065c94d
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>_EtagSupport__etag</string> </key> <key> <string>_EtagSupport__etag</string> </key>
<value> <string>ts37251959.68</string> </value> <value> <string>ts37256095.54</string> </value>
</item> </item>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
...@@ -26,299 +26,297 @@ ...@@ -26,299 +26,297 @@
Form field renderer.\n Form field renderer.\n
Note: This is an ERP5 form implementation for the moment.\n Note: This is an ERP5 form implementation for the moment.\n
*/\n */\n
var Form = {\n
\n \n
// elements marked with this class can be serizlized to server\n var ERP5Form = function () {\n
SERIALIZE_ABLE_CLASS_NAME: "serialize-able",\n \n
var CURRENT_FORM_ID = "";\n
\n
return {\n
\n \n
CURRENT_FORM_ID: "",\n // elements marked with this class can be serialized to server\n
SERIALIZE_ABLE_CLASS_NAME: "serialize-able",\n
\n \n
getCurrentFormId: function () {\n getCurrentFormId: function () {\n
/* Get current form ID (return hard coded one for now) */\n /* Get current form ID (return hard coded one for now) */\n
return this.CURRENT_FORM_ID;\n return CURRENT_FORM_ID;\n
},\n },\n
\n \n
setCurrentFormId: function (form_id) {\n setCurrentFormId: function (form_id) {\n
/* Set current form ID (return hard coded one for now) */\n /* Set current form ID (return hard coded one for now) */\n
this.CURRENT_FORM_ID = form_id;\n CURRENT_FORM_ID = form_id;\n
},\n },\n
\n \n
getFieldId: function(field_id) {\n getFieldId: function(field_id) {\n
/* Generate local form field id */\n /* Generate local form field id */\n
return "field_" + field_id;\n return "field_" + field_id;\n
},\n },\n
\n \n
updateField: function (dom, field_dict) {\n updateField: function (dom, field_dict) {\n
/* General purpose field updater */\n /* General purpose field updater */\n
var editable;\n var editable;\n
editable = Boolean(field_dict.editable);\n editable = Boolean(field_dict.editable);\n
if (editable){\n if (editable){\n
dom.val(field_dict.value);}\n dom.val(field_dict.value);}\n
else{\n else{\n
// if field is not editable just show its value\n // if field is not editable just show its value\n
dom.replaceWith(field_dict.value);\n dom.replaceWith(field_dict.value);\n
}\n }\n
},\n },\n
\n \n
addOptionTagList: function (select_dom, item_list, field_value) {\n addOptionTagList: function (select_dom, item_list, field_value) {\n
/*\n /*\n
* Update select like dom element\n * Update select like dom element\n
*/\n */\n
$.each(item_list, function (index, value){\n $.each(item_list, function (index, value){\n
if(value[1]===field_value) {\n if(value[1]===field_value) {\n
select_dom.append(\'<option selected value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n select_dom.append(\'<option selected value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n
}\n }\n
else {\n else {\n
select_dom.append(\'<option value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n select_dom.append(\'<option value="\' + value[1] + \'">\' + value[0] + \'</option>\');\n
}\n }\n
});\n });\n
},\n },\n
\n \n
BaseInputField: function (field_id, field_dict) {\n BaseInputField: function (field_id, field_dict) {\n
/* HTML based input field */\n /* HTML based input field */\n
var dom, display_width;\n var dom, display_width;\n
dom = $("[name=" + this.getFieldId(field_id) + "]");\n dom = $("[name=" + this.getFieldId(field_id) + "]");\n
this.updateField(dom, field_dict);\n this.updateField(dom, field_dict);\n
display_width = field_dict.display_width;\n display_width = field_dict.display_width;\n
if (display_width){\n if (display_width){\n
dom.attr("size", display_width);}\n dom.attr("size", display_width);}\n
return dom;\n return dom;\n
},\n },\n
\n \n
EditorField: function (field_id, field_dict) {\n EditorField: function (field_id, field_dict) {\n
/* HTML based input field */\n /* HTML based input field */\n
var dom;\n var dom;\n
dom = $("#" + this.getFieldId(field_id));\n dom = $("#" + this.getFieldId(field_id));\n
this.updateField(dom, field_dict);\n this.updateField(dom, field_dict);\n
return dom;\n return dom;\n
},\n },\n
\n \n
ListField: function (field_id, field_dict) {\n ListField: function (field_id, field_dict) {\n
/* Select field */\n /* Select field */\n
var field_value, select_dom;\n var field_value, select_dom;\n
field_value = field_dict.value;\n field_value = field_dict.value;\n
select_dom = $("select[name=" + this.getFieldId(field_id) + "]");\n select_dom = $("select[name=" + this.getFieldId(field_id) + "]");\n
this.addOptionTagList(select_dom, field_dict.items, field_value);\n this.addOptionTagList(select_dom, field_dict.items, field_value);\n
return select_dom; \n return select_dom;\n
},\n },\n
\n \n
ParallelListField: function (field_id, field_dict) {\n ParallelListField: function (field_id, field_dict) {\n
/* mutiple select fields */\n /* mutiple select fields */\n
var field_value, select_dom; \n var field_value, select_dom;\n
// XXX: we render only first value but it can be many how to get them ?\n // XXX: we render only first value but it can be many how to get them ?\n
field_value = field_dict.value[0];\n field_value = field_dict.value[0];\n
select_dom = $("select[name=subfield_field_" + field_id + "]");\n select_dom = $("select[name=subfield_field_" + field_id + "]");\n
this.addOptionTagList(select_dom, field_dict.items, field_value);\n this.addOptionTagList(select_dom, field_dict.items, field_value);\n
return select_dom;\n return select_dom;\n
},\n },\n
\n \n
CheckBoxField: function (field_id, field_dict) {\n CheckBoxField: function (field_id, field_dict) {\n
/* CheckBoxField field */\n /* CheckBoxField field */\n
var checked, checkbox_dom;\n var checked, checkbox_dom;\n
checked = Boolean(field_dict.value);\n checked = Boolean(field_dict.value);\n
checkbox_dom = $("input[name=" + this.getFieldId(field_id) + "]");\n checkbox_dom = $("input[name=" + this.getFieldId(field_id) + "]");\n
if (checked) {\n if (checked) {\n
checkbox_dom.attr(\'checked\', true);\n checkbox_dom.attr(\'checked\', true);\n
}\n }\n
return checkbox_dom;\n return checkbox_dom;\n
},\n },\n
\n \n
TextAreaField: function (field_id, field_dict) {\n TextAreaField: function (field_id, field_dict) {\n
/* TextArea field */\n /* TextArea field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
StringField: function (field_id, field_dict) {\n StringField: function (field_id, field_dict) {\n
/* String field */\n /* String field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
IntegerField: function (field_id, field_dict) {\n IntegerField: function (field_id, field_dict) {\n
/* Int field */\n /* Int field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
PasswordField: function (field_id, field_dict) {\n PasswordField: function (field_id, field_dict) {\n
/* PasswordField field */\n /* PasswordField field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
DateTimeField: function (field_id, field_dict) {\n DateTimeField: function (field_id, field_dict) {\n
/* DateTimeField field */\n /* DateTimeField field */\n
var date, dom;\n var date, dom;\n
dom = $("[name=" + this.getFieldId(field_id) + "]");\n dom = $("[name=" + this.getFieldId(field_id) + "]");\n
date = field_dict.value;\n date = field_dict.value;\n
date = new Date(date);\n date = new Date(date);\n
dom.datepicker({ dateFormat: \'dd/mm/yy\' }); // XXX: get format from server!\n dom.datepicker({ dateFormat: \'dd/mm/yy\' }); // XXX: get format from server!\n
dom.datepicker(\'setDate\', date);\n dom.datepicker(\'setDate\', date);\n
return dom;\n return dom;\n
},\n },\n
\n \n
EmailField: function (field_id, field_dict) {\n EmailField: function (field_id, field_dict) {\n
/* Email field */\n /* Email field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
FormBox: function (field_id, field_dict) {\n FormBox: function (field_id, field_dict) {\n
/* Email field */\n /* Email field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
RelationStringField: function (field_id, field_dict) {\n RelationStringField: function (field_id, field_dict) {\n
/* Relation field */\n /* Relation field */\n
return this.BaseInputField(field_id, field_dict);\n return this.BaseInputField(field_id, field_dict);\n
},\n },\n
\n \n
ImageField: function (field_id, field_dict) {\n ImageField: function (field_id, field_dict) {\n
/* Image field */\n /* Image field */\n
var dom;\n var dom;\n
dom = $("img[name=" + this.getFieldId(field_id) + "]");\n dom = $("img[name=" + this.getFieldId(field_id) + "]");\n
// XXX: image field should return details like quality, etc ...\n // XXX: image field should return details like quality, etc ...\n
dom.attr("src", field_dict.value + "?quality=75.0&display=thumbnail&format=png");\n dom.attr("src", field_dict.value + "?quality=75.0&display=thumbnail&format=png");\n
},\n },\n
\n \n
ListBox: function (field_id, field_dict) {\n ListBox: function (field_id, field_dict) {\n
/* Listbox field */\n /* Listbox field */\n
var listbox_id, navigation_id, listbox_table, current_form_id, listbox_dict, listbox_data_url, colModel, column_title_list;\n var listbox_id, navigation_id, listbox_table, current_form_id, listbox_dict, listbox_data_url, colModel, column_title_list;\n
listbox_id = "field_" + field_id;\n listbox_id = "field_" + field_id;\n
navigation_id = listbox_id + "_pager"; \n navigation_id = listbox_id + "_pager";\n
listbox_table = $("#"+listbox_id);\n listbox_table = $("#"+listbox_id);\n
current_form_id = this.getCurrentFormId();\n current_form_id = this.getCurrentFormId();\n
\n \n
listbox_dict = field_dict.listbox;\n listbox_dict = field_dict.listbox;\n
listbox_data_url = listbox_dict.listbox_data_url;\n listbox_data_url = listbox_dict.listbox_data_url;\n
colModel = [];\n colModel = [];\n
column_title_list = [];\n column_title_list = [];\n
$.each(listbox_dict.columns,\n $.each(listbox_dict.columns,\n
function(i, value){\n function(i, value){\n
var index, title, column;\n var index, title, column;\n
index = value[0];\n index = value[0];\n
title = value[1];\n title = value[1];\n
column_title_list.push(title);\n column_title_list.push(title);\n
column = {\'name\': index,\n column = {\'name\': index,\n
\'index\': index,\n \'index\': index,\n
\'width\': 185,\n \'width\': 185,\n
\'align\': \'left\'};\n \'align\': \'left\'};\n
colModel.push(column);\n colModel.push(column);\n
});\n
\n
listbox_table.jqGrid({url:listbox_data_url + \'?form_id=\' + current_form_id + \'&amps;listbox_id=\' + field_id,\n
datatype: "json",\n
colNames: column_title_list,\n
colModel: colModel,\n
rowNum: listbox_dict.lines,\n
pager: \'#\'+navigation_id,\n
sortname: \'id\',\n
viewrecords: true,\n
sortorder: "desc",\n
loadError : function(xhr, textStatus, errorThrown) {\n
// XXX: handle better than just alert.\n
alert("Error occurred during getting data from server.");\n
},\n
cmTemplate: {sortable:false}, // XXX: until we get list of sortable columns from server\n
caption: field_dict.title});\n
listbox_table.jqGrid(\'navGrid\', \'#\'+navigation_id, {edit:false,add:false,del:false});\n
return listbox_table;\n
}\n
\n
};\n
\n
/* Generic form updater */\n
var FormUpdater = {\n
\n
\n
update: function(data) {\n
/* Update form values */\n
$.each(data.form_data,\n
function(field_id, field_dict){\n
var type, dom;\n
type = field_dict.type;\n
dom = undefined;\n
if(Form.hasOwnProperty(type)){\n
dom = Form[type](field_id, field_dict);\n
}\n
\n
// add a class that these fields are editable so asJSON\n
// can serialize for for sending to server\n
if (dom!==undefined && dom!==null && field_dict.editable){\n
dom.addClass(Form.SERIALIZE_ABLE_CLASS_NAME);\n
}\n
\n
// mark required fields visually\n
if (field_dict.required){\n
dom.parent().parent().children("label").css("font-weight", "bold");}\n
\n
});\n });\n
},\n \n
\n listbox_table.jqGrid({url:listbox_data_url + \'?form_id=\' + current_form_id + \'&amps;listbox_id=\' + field_id,\n
save: function(){\n datatype: "json",\n
/* save form to server*/\n colNames: column_title_list,\n
var form_value_dict, converted_value;\n colModel: colModel,\n
form_value_dict = {};\n rowNum: listbox_dict.lines,\n
$("." + Form.SERIALIZE_ABLE_CLASS_NAME).each(function(index){\n pager: \'#\'+navigation_id,\n
// DOM can change values, i.e. alter checkbox (on / off)\n sortname: \'id\',\n
var element,name, value, type; \n viewrecords: true,\n
element = $(this); \n sortorder: "desc",\n
name = element.attr("name");\n loadError : function(xhr, textStatus, errorThrown) {\n
value = element.val();\n // XXX: handle better than just alert.\n
type = element.attr("type");\n alert("Error occurred during getting data from server.");\n
if (type==="checkbox") {\n },\n
value = element.is(":checked");\n cmTemplate: {sortable:false}, // XXX: until we get list of sortable columns from server\n
if (value===true) {\n caption: field_dict.title});\n
converted_value=1;\n listbox_table.jqGrid(\'navGrid\', \'#\'+navigation_id, {edit:false,add:false,del:false});\n
}\n return listbox_table;\n
if(value===false) {\n },\n
converted_value=0;\n \n
}\n update: function(data) {\n
value = converted_value; \n /* Update form values */\n
}\n $.each(data.form_data,\n
// XXX: how to handle file uploads ?\n function(field_id, field_dict){\n
form_value_dict[name] = value;\n var type, dom;\n
});\n type = field_dict.type;\n
//console.log(form_value_dict);\n dom = undefined;\n
\n if(ERP5Form.hasOwnProperty(type)){\n
// add form_id as we need to know structure we\'re saving at server side\n dom = ERP5Form[type](field_id, field_dict);\n
form_value_dict.form_id = Form.getCurrentFormId();\n }\n
\n \n
// validation happens at server side\n // add a class that these fields are editable so asJSON\n
$.ajax({url:\'Form_save\',\n // can serialize for for sending to server\n
data: form_value_dict,\n if (dom!==undefined && dom!==null && field_dict.editable){\n
dataType: "json",\n dom.addClass(ERP5Form.SERIALIZE_ABLE_CLASS_NAME);\n
success: function (data) {\n }\n
var field_errors;\n \n
field_errors = data.field_errors;\n // mark required fields visually\n
if (field_errors!==undefined){\n if (field_dict.required){\n
//console.log(field_errors);\n dom.parent().parent().children("label").css("font-weight", "bold");}\n
$.each(field_errors, function(index, value){\n \n
var dom, field;\n });\n
dom = $("[name=" + Form.getFieldId(index) + "]");\n },\n
dom.css("border", "1px solid red"); // XXX: use class / css\n \n
field = dom.parent().parent();\n save: function(){\n
if (field.children("span.error").length > 0){\n /* save form to server*/\n
// just update message\n var form_value_dict, converted_value;\n
field.children("span.error").html(value);}\n form_value_dict = {};\n
else{\n $("." + ERP5Form.SERIALIZE_ABLE_CLASS_NAME).each(function(index){\n
// no validation error message exists\n // DOM can change values, i.e. alter checkbox (on / off)\n
field.append(\'<span class="error">\' + value + \'</span>\');}\n var element,name, value, type;\n
}\n element = $(this);\n
);}\n name = element.attr("name");\n
else{\n value = element.val();\n
// validation OK at server side\n type = element.attr("type");\n
$("span.error").each(function(index) {\n if (type==="checkbox") {\n
// delete validation messages\n value = element.is(":checked");\n
var element;\n if (value===true) {\n
element = $(this);\n converted_value=1;\n
element.parent().children("div.input").children("." +Form.SERIALIZE_ABLE_CLASS_NAME).css("border", "none");\n }\n
element.remove();\n if(value===false) {\n
});\n converted_value=0;\n
// show a fading portal_status_message\n }\n
$("#portal_status_message").toggle();\n value = converted_value;\n
$("#portal_status_message p").html("Saved");\n }\n
window.setTimeout( \'$("#portal_status_message").toggle()\', 4000);\n // XXX: how to handle file uploads ?\n
}\n form_value_dict[name] = value;\n
}});\n });\n
}\n //console.log(form_value_dict);\n
};\n \n
// add form_id as we need to know structure we\'re saving at server side\n
form_value_dict.form_id = ERP5Form.getCurrentFormId();\n
\n
// validation happens at server side\n
$.ajax({url:\'Form_save\',\n
data: form_value_dict,\n
dataType: "json",\n
success: function (data) {\n
var field_errors;\n
field_errors = data.field_errors;\n
if (field_errors!==undefined){\n
//console.log(field_errors);\n
$.each(field_errors, function(index, value){\n
var dom, field;\n
dom = $("[name=" + ERP5Form.getFieldId(index) + "]");\n
dom.css("border", "1px solid red"); // XXX: use class / css\n
field = dom.parent().parent();\n
if (field.children("span.error").length > 0){\n
// just update message\n
field.children("span.error").html(value);}\n
else{\n
// no validation error message exists\n
field.append(\'<span class="error">\' + value + \'</span>\');}\n
}\n
);}\n
else{\n
// validation OK at server side\n
$("span.error").each(function(index) {\n
// delete validation messages\n
var element;\n
element = $(this);\n
element.parent().children("div.input").children("." +ERP5Form.SERIALIZE_ABLE_CLASS_NAME).css("border", "none");\n
element.remove();\n
});\n
// show a fading portal_status_message\n
$("#portal_status_message").toggle();\n
$("#portal_status_message p").html("Saved");\n
window.setTimeout( \'$("#portal_status_message").toggle()\', 4000);\n
}\n
}});\n
}\n
\n
}} ();\n
]]></string> </value> ]]></string> </value>
...@@ -329,7 +327,7 @@ var FormUpdater = {\n ...@@ -329,7 +327,7 @@ var FormUpdater = {\n
</item> </item>
<item> <item>
<key> <string>size</string> </key> <key> <string>size</string> </key>
<value> <int>12313</int> </value> <value> <int>14114</int> </value>
</item> </item>
<item> <item>
<key> <string>title</string> </key> <key> <string>title</string> </key>
......
bt5/erp5_xhtml_gadget_style/SkinTemplateItem/portal_skins/erp5_xhtml_gadget_style/gadgets/tabular_gadget/gadget.xml
View file @ 5065c94d
...@@ -56,14 +56,14 @@ ...@@ -56,14 +56,14 @@
<div class="document">\n <div class="document">\n
\n \n
<div class="actions">\n <div class="actions">\n
<button onclick="javascript:FormUpdater.save(); return false;"\n <button onclick="javascript:ERP5Form.save(); return false;"\n
title="Save" class="save" type="submit">\n title="Save" class="save" type="submit">\n
<span class="image"></span>\n <span class="image"></span>\n
<span class="description">Save</span>\n <span class="description">Save</span>\n
</button>\n </button>\n
\n \n
<script type="text/javascript"\n <script type="text/javascript"\n
tal:content="python: \'\'\'Form.setCurrentFormId(\'%s\');;\'\'\' %current_form_id">\n tal:content="python: \'\'\'ERP5Form.setCurrentFormId(\'%s\');;\'\'\' %current_form_id">\n
</script>\n </script>\n
\n \n
<!-- get all tabs from server -->\n <!-- get all tabs from server -->\n
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
tal:attributes="id action_form;\n tal:attributes="id action_form;\n
class python: action == current_action and \'selected\' or \'not_selected\'">\n class python: action == current_action and \'selected\' or \'not_selected\'">\n
\n \n
<a tal:attributes="onclick python: \'\'\'javascript: TabbularGadget.addNewTabGadget(\'form_gadget\', \'%s/Form_asRenderJSGadget\', \'FormUpdater.update\', \'Form_asJSON?form_id=%s\');; TabbularGadget.toggleVisibility($(\'#%s\'));; Form.setCurrentFormId(\'%s\');;return false ;;\'\'\' %(action_form, action_form, action_form, action_form)">\n <a tal:attributes="onclick python: \'\'\'javascript: TabbularGadget.addNewTabGadget(\'form_gadget\', \'%s/Form_asRenderJSGadget\', \'ERP5Form.update\', \'Form_asJSON?form_id=%s\');; TabbularGadget.toggleVisibility($(\'#%s\'));; ERP5Form.setCurrentFormId(\'%s\');;return false ;;\'\'\' %(action_form, action_form, action_form, action_form)">\n
<span i18n:translate=""\n <span i18n:translate=""\n
i18n:domain="ui"\n i18n:domain="ui"\n
tal:content="action/name">action_name</span>\n tal:content="action/name">action_name</span>\n
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<div id="form_gadget"\n <div id="form_gadget"\n
tal:attributes="gadget string:${current_form_id}/Form_asRenderJSGadget;\n tal:attributes="gadget string:${current_form_id}/Form_asRenderJSGadget;\n
gadget:data-source string:Form_asJSON?form_id=${current_form_id};\n gadget:data-source string:Form_asJSON?form_id=${current_form_id};\n
gadget:data-handler string:FormUpdater.update;\n gadget:data-handler string:ERP5Form.update;\n
gadget:property string: {&quot;cacheable&quot;: &quot;1&quot;, &quot;cache_id&quot;: &quot;${current_form_id}&quot;}">\n gadget:property string: {&quot;cacheable&quot;: &quot;1&quot;, &quot;cache_id&quot;: &quot;${current_form_id}&quot;}">\n
</div>\n </div>\n
\n \n
......
bt5/erp5_xhtml_gadget_style/bt/revision
View file @ 5065c94d
5 6
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7