Commit 26414999 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Support update dialog action.

Display the update button if an action is defined.
Send the 'update_method' in the query in this case.
parent bd9625c6
......@@ -975,6 +975,24 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content input[type='submit']:active {
background-color: #ffa366;
}
.gadget-content button[name='action_update'] {
padding: 6pt;
margin-top: 30pt;
margin-right: 12pt;
background-color: #777777;
color: #FFFFFF;
border-radius: 0.325em;
border-width: 1px;
border-style: solid;
min-width: 8em;
}
.gadget-content button[name='action_update']:hover,
.gadget-content button[name='action_update']:focus {
background-color: #919191;
}
.gadget-content button[name='action_update']:active {
background-color: #aaaaaa;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
margin-left: 180pt;
......
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>965.9188.33414.53213</string> </value>
<value> <string>965.9320.8079.11059</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1517236148.36</float>
<float>1517244311.54</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -17,6 +17,15 @@
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="jiodev.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script id="dialog-button-template" type="text/x-handlebars-template">
{{#if show_update_button}}
<button name="action_update" type="submit" data-i18n="Update">Update</button>
{{/if}}
<input name="action_confirm" class="dialogconfirm" data-theme="b" data-inline="true" type="submit" data-i18n="[value]Proceed" value="Proceed" data-icon="check" />
<a class="dialogcancel" data-i18n="Cancel">Cancel</a>
</script>
<!-- custom script -->
<script src="gadget_erp5_global.js" type="text/javascript"></script>
......@@ -35,8 +44,7 @@
data-gadget-scope="erp5_form"
data-gadget-sandbox="public">
</div>
<input class="dialogconfirm" data-theme="b" data-inline="true" type="submit" data-i18n="[value]Proceed" value="Proceed" data-icon="check" />
<a class="dialogcancel" data-i18n="Cancel">Cancel</a>
<div class="dialog_button_container"></div>
</form>
</body>
</html>
\ No newline at end of file
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>962.14191.38290.31931</string> </value>
<value> <string>965.10309.12229.56627</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1506093694.63</float>
<float>1517304075.06</float>
<string>UTC</string>
</tuple>
</state>
......
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO */
(function (window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO) {
/*global window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO, Handlebars */
(function (window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO, Handlebars) {
"use strict";
/* Make sure that returned object is an Array instance. */
......@@ -10,7 +10,7 @@
return [obj];
}
function submitDialog(gadget) {
function submitDialog(gadget, submit_action_id, is_update_method) {
var form_gadget = gadget,
action = form_gadget.state.erp5_document._embedded._view._actions.put,
form_id = form_gadget.state.erp5_document._embedded._view.form_id,
......@@ -30,7 +30,10 @@
data[form_id.key] = form_id['default'];
// XXX Hardcoded
data.dialog_id = form_id['default'];
data.dialog_method = action.action;
data.dialog_method = form_gadget.state.form_definition[submit_action_id];
if (is_update_method) {
data.update_method = data.dialog_method;
}
//XXX hack for redirect, difined in form
redirect_to_parent = content_dict.field_your_redirect_to_parent;
for (key in content_dict) {
......@@ -220,7 +223,13 @@
});
}
rJS(window)
var gadget_klass = rJS(window),
dialog_button_source = gadget_klass.__template_element
.getElementById("dialog-button-template")
.innerHTML,
dialog_button_template = Handlebars.compile(dialog_button_source);
gadget_klass
/////////////////////////////////////////////////////////////////
// acquisition
/////////////////////////////////////////////////////////////////
......@@ -231,6 +240,7 @@
.declareAcquiredMethod("notifySubmitting", "notifySubmitting")
.declareAcquiredMethod("notifySubmitted", "notifySubmitted")
.declareAcquiredMethod("translate", "translate")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("notifyChange", "notifyChange")
.declareAcquiredMethod("updateForm", "updateForm")
.declareAcquiredMethod("displayFormulatorValidationError", "displayFormulatorValidationError")
......@@ -265,12 +275,13 @@
// ignore options.editable because dialog is always editable
erp5_document: options.erp5_document,
form_definition: options.form_definition,
erp5_form: options.erp5_form || {}
erp5_form: options.erp5_form || {},
// ignore global editable state (be always editable)
show_update_button: Boolean(options.form_definition.update_action)
});
})
.onStateChange(function () {
.onStateChange(function (modification_dict) {
var form_gadget = this,
icon,
selector = form_gadget.element.querySelector("h3"),
......@@ -305,9 +316,21 @@
}
}
// Calculate the h3 properties
return new RSVP.Queue()
.push(function () {
// Set the dialog button
if (modification_dict.hasOwnProperty('show_update_button')) {
return form_gadget.translateHtml(dialog_button_template({
show_update_button: form_gadget.state.show_update_button
}))
.push(function (html) {
form_gadget.element.querySelector('.dialog_button_container')
.innerHTML = html;
});
}
})
.push(function () {
// Calculate the h3 properties
return RSVP.all([
form_gadget.translate(form_gadget.state.form_definition.title),
form_gadget.translate(title)
......@@ -383,8 +406,21 @@
})
.onEvent('submit', function () {
return submitDialog(this);
}, false, true);
if (this.state.has_update_action === true) {
return submitDialog(this, "update_action", true);
}
return submitDialog(this, "action");
}, false, true)
.onEvent('click', function (evt) {
if (evt.target.name === "action_confirm") {
evt.preventDefault();
return submitDialog(this, "action");
}
if (evt.target.name === "action_update") {
evt.preventDefault();
return submitDialog(this, "update_action", true);
}
}, false, false);
}(window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO));
\ No newline at end of file
}(window, rJS, RSVP, URI, calculatePageTitle, Blob, URL, document, jIO, Handlebars));
\ No newline at end of file
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>965.670.53338.41130</string> </value>
<value> <string>965.10338.33096.47104</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1516725149.52</float>
<float>1517305313.45</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -1105,33 +1105,41 @@ div[data-gadget-scope='header'] .ui-header {
/**********************************************
* Gadget: main
**********************************************/
.gadget-content {
div[data-gadget-scope='m'] {
animation: fadein @transition-timing;
}
.renderPageSubmitButton(@backgroundcolor) {
padding: @margin-size;
margin-top: @headerheight;
margin-right: @double-margin-size;
input[type='submit'] {
padding: @margin-size;
margin-top: @headerheight;
margin-right: @double-margin-size;
background-color: @backgroundcolor;
color: @white;
background-color: @coloraccent;
color: @white;
border-radius: @radius;
border-width: 1px;
border-style: solid;
border-radius: @radius;
border-width: 1px;
border-style: solid;
min-width: 8em;
min-width: 8em;
&:hover, &:focus {
background-color: lighten(@backgroundcolor, 10%);
}
&:active {
background-color: lighten(@backgroundcolor, 20%);
}
}
&:hover, &:focus {
background-color: lighten(@coloraccent, 10%);
}
&:active {
background-color: lighten(@coloraccent, 20%);
}
.gadget-content {
div[data-gadget-scope='m'] {
animation: fadein @transition-timing;
}
// Dialog page template main submit button
input[type='submit'] {
.renderPageSubmitButton(@coloraccent);
}
// Dialog page template update button
button[name='action_update'] {
.renderPageSubmitButton(@grey);
}
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
......
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