Commit fba02e96 authored by Roque's avatar Roque Committed by Roque

erp5_officejs: new approach for officejs apps

- improve OfficeJS applications by reducing the quantity of code to be written and reuse the ERP5 configuration (portal_type, actions, forms, etc.) instead to generate the app
parent 9207f4cd
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ActionInformation" module="Products.CMFCore.ActionInformation"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>action</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>action_type/object_view</string>
</tuple>
</value>
</item>
<item>
<key> <string>category</string> </key>
<value> <string>object_view</string> </value>
</item>
<item>
<key> <string>condition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>icon</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>definition_view</string> </value>
</item>
<item>
<key> <string>permissions</string> </key>
<value>
<tuple>
<string>View</string>
</tuple>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Action Information</string> </value>
</item>
<item>
<key> <string>priority</string> </key>
<value> <float>1.0</float> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>View</string> </value>
</item>
<item>
<key> <string>visible</string> </key>
<value> <int>1</int> </value>
</item>
</dictionary>
</pickle>
</record>
<record id="2" aka="AAAAAAAAAAI=">
<pickle>
<global name="Expression" module="Products.CMFCore.Expression"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>text</string> </key>
<value> <string>string:${object_url}/ActionInformation_view</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
  • @rporchetto , we have also a definition for:

    product/ERP5/bootstrap/erp5_core/ActionTemplateItem/portal_types/Base%20Type/view.xml

    (sorry I do not link, GitLab does not open correctly if there is '%' in the path)

    I think they are the same, so we get two tabs like below:

    type_view_xhtlm

    and in new UI:

    type_view_new_ui

    So I wonder, is this definition here needed?

  • @georgios.dagkakis this is needed as part of the mechanism to get the json raw definitions of the forms. I'll check how to avoid this tab duplication (probably changing the permission or category of the portal action).

  • @rporchetto , I see, thanks for the info.

    It would be good to avoid duplication, unfortunately I am not too familiar myself with how the mechanism works to propose some solution.

  • I see the only difference between the action in erp5_officejs and the action in erp5_core is the id of the action, both action show the same form. I don't know this mechanism either so I cannot suggest anything either, but I would also like we don't have duplicate actions here.

  • Dear @georgios.dagkakis and @jerome , this was fixed here: rporchetto/erp5@56c4f0d5

    I'll merge it to master soon, upgrade the corresponding apps and an ERP5 upgrade will be done soon (I'm working on that with Xiaowu).

    Thanks!

  • Thanks @rporchetto ! with object_jio_view it seems fine

  • thanks @rporchetto for fixing and also @jerome for confirming

Please register or sign in to reply
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ActionInformation" module="Products.CMFCore.ActionInformation"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>action</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>action_type/object_view</string>
</tuple>
</value>
</item>
<item>
<key> <string>category</string> </key>
<value> <string>object_view</string> </value>
</item>
<item>
<key> <string>condition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>icon</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>definition_view</string> </value>
</item>
<item>
<key> <string>permissions</string> </key>
<value>
<tuple>
<string>View</string>
</tuple>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Action Information</string> </value>
</item>
<item>
<key> <string>priority</string> </key>
<value> <float>1.0</float> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>View</string> </value>
</item>
<item>
<key> <string>visible</string> </key>
<value> <int>1</int> </value>
</item>
</dictionary>
</pickle>
</record>
<record id="2" aka="AAAAAAAAAAI=">
<pickle>
<global name="Expression" module="Products.CMFCore.Expression"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>text</string> </key>
<value> <string>string:${object_url}/BaseType_view</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ActionInformation" module="Products.CMFCore.ActionInformation"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>action</string> </key>
<value>
<persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
</value>
</item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>action_type/object_jio_view</string>
</tuple>
</value>
</item>
<item>
<key> <string>category</string> </key>
<value> <string>object_jio_view</string> </value>
</item>
<item>
<key> <string>condition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>icon</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>definition_view</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>permissions</string> </key>
<value>
<tuple>
<string>View</string>
</tuple>
</value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Action Information</string> </value>
</item>
<item>
<key> <string>priority</string> </key>
<value> <float>1.0</float> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Definition View</string> </value>
</item>
<item>
<key> <string>visible</string> </key>
<value> <int>1</int> </value>
</item>
</dictionary>
</pickle>
</record>
<record id="2" aka="AAAAAAAAAAI=">
<pickle>
<global name="Expression" module="Products.CMFCore.Expression"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>text</string> </key>
<value> <string>string:${object_url}/ERP5Form_viewAsDefinition</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS Common Utils</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget_officejs_common_util.js"></script>
</head>
<body>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ERP5 Local Controller</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="jio_appcachestorage.js"></script>
<!-- custom script -->
<script src="gadget_erp5_page_ojs_local_controller.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
/*global document, window, rJS, RSVP */
/*jslint nomen: true, indent: 2, maxerr: 10, maxlen: 80 */
(function (document, window, rJS, RSVP) {
"use strict";
rJS(window)
/////////////////////////////////////////////////////////////////
// Acquired methods
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("jio_get", "jio_get")
.declareAcquiredMethod("jio_put", "jio_put")
.declareAcquiredMethod("getSetting", "getSetting")
.declareAcquiredMethod("notifySubmitted", 'notifySubmitted')
.declareAcquiredMethod("notifySubmitting", "notifySubmitting")
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod("render", function (options) {
var gadget = this,
default_view,
app_view,
form_definition,
gadget_util,
jio_document,
portal_type,
front_page;
return RSVP.Queue()
.push(function () {
return RSVP.all([
gadget.declareGadget("gadget_officejs_common_util.html"),
gadget.getSetting('app_view_reference'),
gadget.getSetting('default_view_reference'),
gadget.getSetting('documents_editable')
]);
})
.push(function (result_list) {
gadget_util = result_list[0];
app_view = options.action || result_list[1];
default_view = result_list[2];
options.editable = ((result_list[3] == "1") ?
true : options.editable);
return gadget.jio_get(options.jio_key);
})
.push(function (result) {
jio_document = result;
if (jio_document.portal_type === undefined) {
throw new Error('Can not display document: ' + options.jio_key);
}
}, function (error) {
// instaceof error is Object, so use status_code and undefined jio_key
if (error.status_code === 400 && !options.jio_key) {
return gadget.getSetting('parent_portal_type');
}
throw error;
})
.push(function (parent_portal_type) {
if (jio_document) {
portal_type = jio_document.portal_type;
} else if (options.portal_type) {
portal_type = options.portal_type;
} else {
portal_type = parent_portal_type;
}
front_page = portal_type === parent_portal_type;
return gadget_util.getFormDefinition(portal_type, app_view);
})
.push(function (result) {
return result;
}, function (error) {
if (error.status_code === 400) {
return gadget_util.getFormDefinition(portal_type, default_view);
}
throw error;
})
.push(function (result) {
form_definition = result;
return gadget_util.getFormInfo(form_definition);
})
.push(function (form_info) {
var form_type = form_info[0],
child_gadget_url = form_info[1];
return gadget.changeState({
jio_key: options.jio_key,
doc: jio_document,
portal_type: portal_type,
child_gadget_url: child_gadget_url,
form_definition: form_definition,
form_type: form_type,
editable: options.editable,
view: options.view || default_view,
front_page: front_page
});
});
})
.onStateChange(function () {
var fragment = document.createElement('div'),
gadget = this;
while (this.element.firstChild) {
this.element.removeChild(this.element.firstChild);
}
this.element.appendChild(fragment);
return gadget.declareGadget("gadget_officejs_form_view.html",
{element: fragment, scope: 'form_view'})
.push(function (form_view_gadget) {
return form_view_gadget.render(gadget.state);
});
})
.allowPublicAcquisition('notifySubmit', function () {
return this.triggerSubmit();
})
.allowPublicAcquisition('submitContent', function (param_list) {
var gadget = this,
//target_url = options[1],
content_dict = param_list[2];
return gadget.jio_get(gadget.state.jio_key)
.push(function (doc) {
var property;
for (property in content_dict) {
if (content_dict.hasOwnProperty(property)) {
doc[property] = content_dict[property];
}
}
return gadget.jio_put(gadget.state.jio_key, doc);
})
.push(function () {
return gadget.notifySubmitting();
})
.push(function () {
return gadget.notifySubmitted({message: 'Data Updated',
status: 'success'});
});
})
.declareMethod("triggerSubmit", function () {
var argument_list = arguments;
return this.getDeclaredGadget('form_view')
.push(function (view_gadget) {
return view_gadget.triggerSubmit(argument_list);
});
});
}(document, window, rJS, RSVP));
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS Form View</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget_officejs_form_view.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Local Jio Gadget</title>
<!-- renderjs -->
<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="jio_ojs_storage.js" type="text/javascript"></script>
<script src="jio_appcachestorage.js"></script>
<!-- custom script -->
<script src="gadget_ojs_local_jio.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<!--
data-i18n=Workflows
data-i18n=Actions
data-i18n=Clone
data-i18n=Delete
-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Officejs Page Action</title>
<link rel="http://www.renderjs.org/rel/interface" href="interface_page.html">
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="jiodev.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_global.js" type="text/javascript"></script>
<script src="gadget_erp5_global.js" type="text/javascript"></script>
<script src="gadget_erp5_page_action_officejs.js" type="text/javascript"></script>
<script id="table-template" type="text/x-handlebars-template">
<section class="ui-content-header-plain">
<h3 data-i18n="[last]{{definition_i18n}}">
<span class="ui-icon ui-icon-{{definition_icon}}">&nbsp;</span>
{{definition_title}}
</h3>
</section>
<ul class="document-listview">
{{#each document_list}}
<li><a data-i18n="{{title}}" href="{{link}}">{{title}}</a></li>
{{/each}}
</ul>
</script>
</head>
<body>
</body>
</html>
\ No newline at end of file
/*global window, rJS, RSVP, Handlebars */
/*jslint nomen: true, indent: 2, maxerr: 10, maxlen: 80 */
(function (window, rJS, RSVP, Handlebars) {
"use strict";
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
table_template = Handlebars.compile(gadget_klass.__template_element
.getElementById("table-template")
.innerHTML);
/** Render translated HTML of title + links
*
* @param {string} title - H3 title of the section with the links
* @param {string} icon - alias used in font-awesome iconset
* @param {Array} command_list - array of links obtained from ERP5 HATEOAS
*/
function renderLinkList(gadget, title, icon, erp5_link_list) {
// prepare links for template (replace @href for RJS link)
return gadget.translateHtml(
table_template({
"definition_i18n": title,
"definition_title": title,
"definition_icon": icon,
"document_list": erp5_link_list.map(function (erp5_link, index) {
return {
"title": erp5_link.title,
"i18n": erp5_link.title,
"link": erp5_link_list[index].href
};
})
})
);
}
function getHTMLElementList(gadget, element_list) {
var i = 0,
element_info_list = [],
url_for_parameter_list = [],
element_info,
key;
for (key in element_list) {
if (element_list.hasOwnProperty(key)) {
element_info = element_list[key];
url_for_parameter_list.push({ command: 'change',
options: element_info });
element_info_list[i] = { reference: element_info.reference,
title: element_info.title};
i += 1;
}
}
return gadget.getUrlForList(url_for_parameter_list)
.push(function (url_list) {
var html_element_list = [], j, element;
for (j = 0; j < url_list.length; j += 1) {
element = { href: url_list[j],
icon: null,
name: element_info_list[j].reference,
title: element_info_list[j].title };
html_element_list.push(element);
}
return html_element_list;
});
}
gadget_klass
/////////////////////////////////////////////////////////////////
// Acquired methods
/////////////////////////////////////////////////////////////////
.declareAcquiredMethod("jio_get", "jio_get")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("getUrlForList", "getUrlForList")
.declareAcquiredMethod("updateHeader", "updateHeader")
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////