Commit 9818339f authored by Tomáš Peterka's avatar Tomáš Peterka

[renderjs_ui] Add implementation of FormBox field

FormBox receives form specification directly inside its field thanks to modification of hateoas script
to include result of `renderForm`.

Small changes

-  fix naming of page_form gadget
-  renderered -> rendered
-  keep name jio_key consistent everywhere
-  clean up state dictionaries passed around
parent 2c74e408
......@@ -94,6 +94,9 @@ def getFieldDefault(traversed_document, field, key, value=None):
return result
def renderField(traversed_document, field, form_relative_url, value=None, meta_type=None, key=None, key_prefix=None, selection_params=None):
"""Extract important field's attributes into `result` dictionary"""
result = {}
if meta_type is None:
meta_type = field.meta_type
if key is None:
......@@ -448,8 +451,30 @@ def renderField(traversed_document, field, form_relative_url, value=None, meta_t
list_method_query_dict, ignore_unknown_columns=True
).asSearchTextExpression(sql_catalog)})
}
elif meta_type == "FormBox":
embeded_form_id = field.get_value('formbox_target_id')
embeded_form = getattr(traversed_document, embeded_form_id) # harness acquisition
# FormBox might have own context if 'context_method_id' is defined
formbox_context = traversed_document
context_method_id = field.get_value('context_method_id') or None
if context_method_id is not None:
formbox_context = getattr(traversed_document, context_method_id)()
result = {
'type': meta_type,
'title': Base_translateString(field.get_value("title")),
'key': key,
"editable": field.get_value("editable"),
'_embedded': {
'_view': {
'_links': {},
'_actions': {},
}
}
}
# renderForm mutates `result` therefor no return/assignment
renderForm(formbox_context, embeded_form, result['_embedded']['_view'], key_prefix=key)
else:
# XXX Not implemented
# All other fields are not implemented and we'll return only basic info about them
result = {
"type": meta_type,
"_debug": "Unsupported field type",
......
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 Stringfield</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_erp5_field_formbox.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
/*global window, rJS, RSVP, URI */
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, RSVP, URI) {
"use strict";
rJS(window)
.setState({
subgadget_template: null
})
.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
.declareMethod('render', function (options) {
var element = this.element,
gadget = this,
field_json = options.field_json || {},
new_state = {
value: field_json.value || field_json.default || "",
text_content: field_json.value || field_json.default || "",
editable: field_json.editable,
required: field_json.required,
name: field_json.key,
title: field_json.title,
hidden: field_json.hidden,
view: field_json.view,
// field_json._embedded is HATEOASed subobj specs included in FormBox
erp5_form: field_json._embedded
};
if (gadget.state.subgadget_template === null || options.reset === true) {
// render subgadget only when there is none OR render is explicitely requested
return this.declareGadget('gadget_erp5_page_form.html', {scope: 'sub'})
.push(function (form_gadget) {
// Clear first to DOM, append after to reduce flickering/manip
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(form_gadget.element);
// Add newly created subgadget to the state
new_state.subgadget_template = 'gadget_erp5_page_form.html';
return gadget.changeState(new_state);
});
}
return gadget.changeState(new_state);
})
.onStateChange(function (modification_dict) {
var gadget = this,
erp5_document_uri = new URI(gadget.state.erp5_form._view._links.traversed_document.href),
form_options = {
erp5_document: {
_embedded: gadget.state.erp5_form
},
key: gadget.state.name,
view: gadget.state.view,
jio_key: erp5_document_uri.segment(2)
};
// XXX: can be uncommented - dunno if it is needed
// if `editable` changes - force reloading of the gadget
// if (modification_dict.hasOwnProperty('editable')) {
// return gadget.render({reset: true});
// }
// do not preserve objects in the state
delete gadget.state.erp5_form;
return gadget.getDeclaredGadget('sub')
.push(function (subgadget) {
subgadget.render(form_options);
});
})
.declareMethod('getContent', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.getContent();
});
}
return {};
})
.declareMethod('checkValidity', function () {
if (this.state.editable) {
return this.getDeclaredGadget('sub')
.push(function (gadget) {
return gadget.checkValidity();
});
}
return true;
});
}(window, rJS, RSVP, URI));
\ No newline at end of file
......@@ -47,6 +47,8 @@
field_url = 'gadget_erp5_field_image.html';
} else if (type === 'EmailField') {
field_url = 'gadget_erp5_field_email.html';
} else if (type === 'FormBox') {
field_url = 'gadget_erp5_field_formbox.html';
}
return field_url;
}
......@@ -57,8 +59,8 @@
// Field is enabled in this context
var sandbox = "public",
field_element = document.createElement("div"),
renderered_field = rendered_form[field[0]],
// suboptions = options[renderered_field.key] || suboption_dict;
rendered_field = rendered_form[field[0]],
// suboptions = options[rendered_field.key] || suboption_dict;
suboptions = {};
// XXX Hardcoded for searchfield - remove later!
......@@ -68,9 +70,9 @@
// XXX Hardcoded for listbox's hide functionality
suboptions.hide_enabled = form_definition.hide_enabled;
suboptions.field_url = getFieldTypeGadgetUrl(renderered_field.type);
suboptions.field_url = getFieldTypeGadgetUrl(rendered_field.type);
suboptions.label = false;
suboptions.field_json = renderered_field;
suboptions.field_json = rendered_field;
suboptions.field_json.view = form_gadget.state.view;
if (group[0] !== "bottom") {
......@@ -81,12 +83,12 @@
.push(function () {
if (modification_dict.hasOwnProperty('hash')) {
return form_gadget.declareGadget('gadget_erp5_label_field.html', {
scope: renderered_field.key,
scope: rendered_field.key,
element: field_element,
sandbox: sandbox
});
}
return form_gadget.getDeclaredGadget(renderered_field.key);
return form_gadget.getDeclaredGadget(rendered_field.key);
})
.push(function (label_gadget) {
if (modification_dict.hasOwnProperty('hash')) {
......@@ -175,6 +177,7 @@
return this.changeState({
erp5_document: options.erp5_document,
form_definition: options.form_definition,
jio_key: options.jio_key,
hash: hash,
view: options.view
});
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.49459.46929.49339</string> </value>
<value> <string>961.9083.63657.29132</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1480936090.54</float>
<float>1501749851.19</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -85,7 +85,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>rjs_gadget_erp5_pt_formpage_html</string> </value>
<value> <string>rjs_gadget_erp5_page_form_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -103,7 +103,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Gadget ERP5 Doc</string> </value>
<value> <string>Gadget ERP5 Form Page</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.64761.25287.18397</string> </value>
<value> <string>960.5523.58984.43537</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1475148161.21</float>
<float>1501681620.31</float>
<string>UTC</string>
</tuple>
</state>
......
/*global window, rJS, URI */
/*global window, rJS, URI, RSVP */
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, URI) {
(function (window, rJS, URI, RSVP) {
"use strict";
function loadFormContent(gadget, result) {
......@@ -53,10 +53,28 @@
});
})
.declareMethod("render", function (options) {
var gadget = this;
return gadget.jio_getAttachment(options.jio_key, options.view)
var gadget = this,
promise_queue = new RSVP.Queue(),
new_state = {
options: options,
erp5_document: undefined,
erp5_form: undefined,
url: undefined
};
if (options.hasOwnProperty('erp5_document')) {
// if we get erp5 document during rendering then no need to fetch it
new_state.erp5_document = options.erp5_document;
// thank you options
delete options.erp5_document;
} else {
promise_queue
.push(function () {
return gadget.jio_getAttachment(options.jio_key, options.view);
})
.push(function (result) {
var uri;
new_state.erp5_document = result;
if (!result._embedded) {
return gadget.jio_getAttachment(options.jio_key, "links")
.push(function (result2) {
......@@ -66,9 +84,14 @@
}});
});
}
});
}
uri = new URI(result._embedded._view._links.form_definition.href);
return gadget.jio_getAttachment(uri.segment(2), "view")
return promise_queue
.push(function () {
var uri = new URI(new_state.erp5_document._embedded._view._links.form_definition.href);
return gadget.jio_getAttachment(uri.segment(2), "view");
})
.push(function (erp5_form) {
var url = "gadget_erp5_pt_" + erp5_form.pt;
// XXX Hardcoded specific behaviour for form_view
......@@ -77,23 +100,24 @@
}
url += ".html";
return gadget.changeState({
jio_key: options.jio_key,
options: options,
view: options.view,
url: url,
erp5_document: JSON.stringify(result),
erp5_form: JSON.stringify(erp5_form)
});
});
new_state.url = url;
new_state.erp5_form = JSON.stringify(erp5_form);
new_state.erp5_document = JSON.stringify(new_state.erp5_document);
return gadget.changeState(new_state);
});
})
.onStateChange(function (modification_dict) {
var queue,
gadget = this,
options = this.state.options,
page_template_gadget,
clean_dom = modification_dict.hasOwnProperty('url');
// clean_dom === false only in case of displaying errors
clean_dom = modification_dict.hasOwnProperty('url'),
erp5_document = JSON.parse(gadget.state.erp5_document),
erp5_form = JSON.parse(gadget.state.erp5_form);
if (clean_dom) {
queue = gadget.declareGadget(gadget.state.url, {scope: "fg"});
} else {
......@@ -103,9 +127,7 @@
.push(function (result) {
page_template_gadget = result;
var sub_options = options.fg || {},
erp5_document = JSON.parse(gadget.state.erp5_document),
erp5_form = JSON.parse(gadget.state.erp5_form);
var sub_options = options.fg || {};
loadFormContent(gadget, erp5_document._embedded._view);
......@@ -117,7 +139,6 @@
sub_options.editable = options.editable;
return page_template_gadget.render(sub_options);
})
.push(function () {
if (clean_dom) {
......@@ -138,7 +159,7 @@
if (/^[^\/]+_module\/.+$/.test(jio_key)) {
/*jslint regexp: false*/
return gadget.updatePanel({
erp5_document: JSON.parse(gadget.state.erp5_document),
erp5_document: erp5_document,
editable: gadget.state.options.editable
});
}
......@@ -153,4 +174,4 @@
return this.changeState({erp5_document: JSON.stringify(erp5_document)});
});
}(window, rJS, URI));
\ No newline at end of file
}(window, rJS, URI, RSVP));
\ No newline at end of file
......@@ -81,7 +81,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>rjs_gadget_erp5_pt_formpage_js</string> </value>
<value> <string>rjs_gadget_erp5_page_form_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>958.28347.56387.25600</string> </value>
<value> <string>961.10640.58720.25361</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1491391860.07</float>
<float>1501767419.97</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -88,7 +88,7 @@
.declareMethod('render', function (options) {
var state_dict = {
id: options.jio_key,
jio_key: options.jio_key,
view: options.view,
editable: options.editable,
erp5_document: options.erp5_document,
......@@ -158,6 +158,8 @@
form_options.erp5_document = form_gadget.state.erp5_document;
form_options.form_definition = form_gadget.state.form_definition;
form_options.view = form_gadget.state.view;
form_options.jio_key = form_gadget.state.jio_key;
return erp5_form.render(form_options);
})
.push(function () {
......@@ -217,7 +219,7 @@
}
return form_gadget.jio_putAttachment(
form_gadget.state.id,
form_gadget.state.jio_key,
action.href,
data
);
......@@ -267,7 +269,7 @@
form_gadget.deferRevokeObjectUrlWithLink(object_url, a);
} else {
jio_key = new URI(location).segment(2);
if (form_gadget.state.id === jio_key) {
if (form_gadget.state.jio_key === jio_key) {
// Do not update navigation history if dialog redirect to the same document
list.push(form_gadget.redirect({command: 'change', options: {jio_key: jio_key, view: "view", page: undefined, editable: form_gadget.state.editable}}));
} else {
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.657.32982.5239</string> </value>
<value> <string>961.7890.60472.26811</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1501168424.28</float>
<float>1501602552.87</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -21,7 +21,7 @@
return gadget.getUrlParameter('extended_search')
.push(function (extended_search) {
var state_dict = {
id: options.jio_key,
jio_key: options.jio_key,
view: options.view,
editable: options.editable,
erp5_document: options.erp5_document,
......@@ -44,6 +44,7 @@
form_options.erp5_document = form_gadget.state.erp5_document;
form_options.form_definition = form_gadget.state.form_definition;
form_options.view = form_gadget.state.view;
form_options.jio_key = form_gadget.state.jio_key;
// XXX Hardcoded for listbox's hide functionality
form_options.form_definition.hide_enabled = true;
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.34605.28227.45721</string> </value>
<value> <string>960.5523.58984.43537</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1476198578.1</float>
<float>1501602470.2</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -25,7 +25,7 @@
.declareMethod('render', function (options) {
var state_dict = {
id: options.jio_key,
jio_key: options.jio_key,
view: options.view,
editable: options.editable,
erp5_document: options.erp5_document,
......@@ -55,6 +55,7 @@
form_options.erp5_document = form_gadget.state.erp5_document;
form_options.form_definition = form_gadget.state.form_definition;
form_options.view = form_gadget.state.view;
form_options.jio_key = form_gadget.state.jio_key
return erp5_form.render(form_options);
})
......@@ -129,7 +130,7 @@
return RSVP.all([
form_gadget.notifySubmitting(),
form_gadget.jio_putAttachment(
form_gadget.state.id,
form_gadget.state.jio_key,
action.href,
data
)
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>960.32739.63971.65297</string> </value>
<value> <string>961.7890.7169.33672</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1499430902.76</float>
<float>1501604413.95</float>
<string>UTC</string>
</tuple>
</state>
......
/*global window, rJS */
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS) {
"use strict";
rJS(window)
.declareMethod('render', function (options) {
var state_dict = {
id: options.jio_key,
view: options.view,
editable: options.editable,
erp5_document: options.erp5_document,
form_definition: options.form_definition,
erp5_form: options.erp5_form || {},
new_content_action: false,
delete_action: false,
save_action: false
};
return this.changeState(state_dict);
})
.onStateChange(function () {
var form_gadget = this;
// render the erp5 form
return form_gadget.getDeclaredGadget("erp5_form")
.push(function (erp5_form) {
var form_options = form_gadget.state.erp5_form;
form_options.erp5_document = form_gadget.state.erp5_document;
form_options.form_definition = form_gadget.state.form_definition;
form_options.view = form_gadget.state.view;
return erp5_form.render(form_options);
})
});
}(window, rJS));
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>ERP5 PT Form View</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_erp5_global.js" type="text/javascript"></script>
<script src="gadget_erp5_pt_embedded_form_render.js" type="text/javascript"></script>
</head>
<body>
<div class="ui-body-c">
<div data-gadget-url="gadget_erp5_form.html"
data-gadget-scope="erp5_form"
data-gadget-sandbox="public">
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -15,7 +15,7 @@
/////////////////////////////////////////////////////////////////
.declareMethod('render', function (options) {
var state_dict = {
id: options.jio_key,
jio_key: options.jio_key,
view: options.view,
editable: options.editable,
erp5_document: options.erp5_document,
......@@ -52,6 +52,7 @@
form_options.erp5_document = gadget.state.erp5_document;
form_options.form_definition = gadget.state.form_definition;
form_options.view = gadget.state.view;
form_options.jio_key = gadget.state.jio_key;
return erp5_form.render(form_options);
})
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.5630.32927.153</string> </value>
<value> <string>960.5523.58984.43537</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1476194151.17</float>
<float>1501602183.01</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -41,7 +41,7 @@
<!--li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">No result</li-->
{{#each type}}
<li class="ui-li-static ui-body-inherit ui-bar-inherit ui-icon-plus ui-btn-icon-right" data-i18n="Create New" data-create-object="{{value}}" name="{{name}}">Create New
<span data-create-object="{{value}}">{{name}}: {{../value}}</span></li>
<span data-create-object="{{value}}"> {{name}}: {{../value}}</span></li>
{{/each}}
{{/if}}
<li class="ui-li-static ui-body-inherit ui-last-child ui-bar-inherit ui-icon-search ui-btn-icon-right" data-explore=true data-i18n="Explore the Search Result List" >Explore the Search Result List</li>
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>956.58742.58866.48708</string> </value>
<value> <string>960.5523.58984.43537</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1490623129.84</float>
<float>1501248770.95</float>
<string>UTC</string>
</tuple>
</state>
......
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