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