Commit 0699b027 authored by Tomáš Peterka's avatar Tomáš Peterka

erp5_web_renderjs_ui: Add description to fields, submit field at the bottom and redirects

- description is displayed under/above field if it is longer than label
- submit button is displayed at the bottom if there are more than 4 fields
- form can redirect based on response from backend
parent 2926168c
......@@ -16,7 +16,8 @@
editable: field_json.editable,
name: field_json.key,
title: field_json.title,
hidden: field_json.hidden
hidden: field_json.hidden,
description: field_json.description
};
state_dict.text_content = state_dict.checked ? '' : '';
return this.changeState(state_dict);
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.51162.4768.35123</string> </value>
<value> <string>957.29247.62675.14796</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1482843222.46</float>
<float>1487587319.54</float>
<string>UTC</string>
</tuple>
</state>
......
<!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 Submitfield</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_submit.js" type="text/javascript"></script>
</head>
<body><div class="submitfield"></div></body>
</html>
\ No newline at end of file
/*global window, rJS */
/*jslint indent: 2, maxerr: 3 */
(function (window, rJS) {
"use strict";
rJS(window)
.setState({
tag: 'a',
type: "submit",
default: "Proceed"
})
.declareMethod('render', function (options) {
var field_json = options.field_json || {},
state_dict = {
value: field_json.value || field_json.default || "Proceed",
editable: true,
required: false,
name: field_json.key || "submit",
title: field_json.title || "Proceed",
hidden: field_json.hidden,
description: field_json.description
};
state_dict.text_content = state_dict.value;
return this.changeState(state_dict);
})
.onStateChange(function (modification_dict) {
var element = this.element,
gadget = this,
url,
result;
if (modification_dict.hasOwnProperty('editable')) {
if (gadget.state.editable) {
url = 'gadget_html5_input.html';
} else {
url = 'gadget_html5_element.html';
}
result = this.declareGadget(url, {scope: 'sub'})
.push(function (input) {
var child = element.firstChild;
// Clear first to DOM, append after to reduce flickering/manip
while (child.firstChild) {
child.removeChild(child.firstChild);
}
child.appendChild(input.element);
return input;
});
} else {
result = this.getDeclaredGadget('sub');
}
return result
.push(function (input) {
window.loopEventListener(input, "click", true, function () {gadget.notifySubmitting(); });
return input.render(gadget.state);
});
})
.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));
\ 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 === 'SubmitField') {
field_url = 'gadget_erp5_field_submit.html';
}
return field_url;
}
......@@ -60,7 +62,7 @@
renderered_field = rendered_form[field[0]],
// suboptions = options[renderered_field.key] || suboption_dict;
suboptions = {};
// XXX Hardcoded for searchfield - remove later!
if (form_definition.extended_search) {
suboptions.extended_search = form_definition.extended_search;
......@@ -183,6 +185,7 @@
.onStateChange(function (modification_dict) {
var erp5_document = this.state.erp5_document,
form_definition = this.state.form_definition,
// rendered_form keeps all field attributes obtained from ERP5 whete titles are the keys
rendered_form = erp5_document._embedded._view,
group_list = form_definition.group_list,
form_gadget = this;
......@@ -194,9 +197,23 @@
return new RSVP.Queue()
.push(function () {
var group_promise_list = [],
j;
j, k,
field_count=0,
submit_json_field = {
type: "SubmitField",
key: "submit_bottom",
value: "Procéder"
};
for (j = 0; j < group_list.length; j += 1) {
group_promise_list.push(addGroup(group_list[j], rendered_form, form_definition, form_gadget, modification_dict));
for (k = 2; k <= group_list[j].length; k += 2) {
// group_list[i] is an array of [group_name, fields, group_name, fields] where group_name can be "left", "bottom" ....
field_count += group_list[j][k-1].length;
}
}
if (group_list.length > 1 || field_count > 4) {
// if we have more groups or the form is just too long - add submit button at the end
group_promise_list.push(addField(["submit_bottom"], {"submit_bottom": submit_json_field}, form_definition, form_gadget, ["bottom"], modification_dict));
}
return RSVP.all(group_promise_list);
})
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.49459.46929.49339</string> </value>
<value> <string>957.31090.60872.23517</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1480936090.54</float>
<float>1487864517.35</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -18,7 +18,8 @@
required: field_json.required,
name: field_json.key,
title: field_json.title,
hidden: field_json.hidden
hidden: field_json.hidden,
description: field_json.description
};
state_dict.text_content = state_dict.value;
return this.changeState(state_dict);
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>956.15712.57649.37376</string> </value>
<value> <string>957.29307.25482.63573</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1482843064.62</float>
<float>1487590768.73</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -39,7 +39,7 @@
];
erp5_document = result;
view_list = erp5_document._links.action_workflow || [];
action_list = []; // erp5_document._links.action_object_action
action_list = erp5_document._links.action_object_action || [];
if (view_list.constructor !== Array) {
view_list = [view_list];
}
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.29509.41156.45721</string> </value>
<value> <string>957.20669.49979.10734</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1479825199.32</float>
<float>1487078218.85</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -97,7 +97,7 @@
.push(function () {
// Render the headers
return RSVP.all([
form_gadget.getUrlFor({command: 'change', options: {page: undefined, view: undefined}}),
form_gadget.getUrlFor({command: 'display', options: {page: 'lte_request', view: undefined}}),
calculatePageTitle(form_gadget, form_gadget.state.erp5_document)
]);
})
......@@ -134,45 +134,68 @@
data.dialog_method = action.action;
//XXX hack for redirect, difined in form
redirect_to_parent = content_dict.field_your_redirect_to_parent;
if (redirect_to_parent) {
console.log("Will redirect to parent upon submitting");
}
for (key in content_dict) {
if (content_dict.hasOwnProperty(key)) {
data[key] = content_dict[key];
}
}
console.log("Submitting form!");
return form_gadget.jio_putAttachment(
form_gadget.state.id,
action.href,
data
);
})
.push(function (evt) {
// console.log("Handling redirect after submitting of ", evt);
var location = evt.target.getResponseHeader("X-Location"),
jio_key,
list = [],
response = {},
message;
try {
message = JSON.parse(evt.target.response).portal_status_message;
} catch (ignore) {
}
response = JSON.parse(evt.target.response);
message = response.portal_status_message;
} catch (ignore) {/*in that case change in backend is necessary*/}
list.push(form_gadget.notifySubmitted(message));
// let the response decide whether it wants to control redirect
if("next" in response) {
// console.log("Will redirect to next: ", response['next']);
list.push(form_gadget.redirect({command: "raw", options: {url: response['next']}}));
return RSVP.all(list);
}
if("display" in response) {
// console.log("Will redirect using options", response['options']);
list.push(form_gadget.redirect({command: "display", options: response['display']}));
return RSVP.all(list);
}
// offer possibility to easily redirect back to parent
if (redirect_to_parent) {
// console.log("Will redirect to parent");
list.push(form_gadget.redirect({command: 'history_previous'}));
return RSVP.all(list);
}
if (location === undefined || location === null || location === "") {
// console.log("No redirection, stay on the same document");
list.push(form_gadget.redirect({
command: 'change',
options: {view: "view", page: undefined, editable: form_gadget.state.editable}}));
return RSVP.all(list);
}
// console.log("Will use location from the response");
jio_key = new URI(location).segment(2);
if (form_gadget.state.id === 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 {
if (location === undefined || location === null) {
// No redirection, stay on the same document
list.push(form_gadget.redirect({command: 'change', options: {view: "view", page: undefined, editable: form_gadget.state.editable}}));
} else {
jio_key = new URI(location).segment(2);
if (form_gadget.state.id === 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 {
list.push(form_gadget.redirect({command: 'push_history', options: {jio_key: jio_key, editable: form_gadget.state.editable}}));
}
}
list.push(form_gadget.redirect({command: 'push_history', options: {jio_key: jio_key, editable: form_gadget.state.editable}}));
}
return RSVP.all(list);
})
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>956.14161.10627.9233</string> </value>
<value> <string>957.25165.4341.6144</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1482749961.0</float>
<float>1487602264.38</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -115,6 +115,7 @@
sub_options.action_view = options.action_view;
sub_options.jio_key = options.jio_key;
sub_options.editable = options.editable;
sub_options.description = options.description;
return page_template_gadget.render(sub_options);
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.44527.39200.57275</string> </value>
<value> <string>957.29246.53501.49288</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1476793905.11</float>
<float>1487587149.16</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -17,7 +17,8 @@
name: field_json.key,
title: field_json.title,
hidden: field_json.hidden,
trim: true
trim: true,
description: field_json.description
};
state_dict.text_content = state_dict.value;
return this.changeState(state_dict);
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.60919.29957.58146</string> </value>
<value> <string>957.15164.30813.41301</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1482843372.92</float>
<float>1487591570.72</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -26,7 +26,8 @@
focus: options.focus,
step: options.step,
hidden: options.hidden,
trim: options.trim || false
trim: options.trim || false,
description: options.description || ""
};
return this.changeState(state_dict);
})
......@@ -73,6 +74,25 @@
textarea.autofocus = true;
textarea.focus();
}
if (this.state.description !== "" && this.state.description.length > this.state.title.length + "The .".length) {
if (this.state.type === 'checkbox') {
// only checkbox put description after input as raw text
var description = window.document.createElement("span");
description.innerHTML = this.state.description;
this.element.appendChild(description);
} else {
var description = window.document.createElement("p");
description.classList.add("description");
description.innerHTML = this.state.description;
// prepend the new element `description` before actual `input`
this.element.insertBefore(
description, this.element.firstChild
);
}
textarea.classList.add("with-description");
}
})
.declareService(function () {
......@@ -114,6 +134,7 @@
}
}
}
return result;
})
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>955.60922.14888.40516</string> </value>
<value> <string>957.29368.64363.17937</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1482843242.96</float>
<float>1488212507.68</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