Commit 72dd857a authored by Roque's avatar Roque Committed by Matevz Golob

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 17a7d335
<?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>
<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
/////////////////////////////////////////////////////////////////
.declareMethod("render", function (options) {
var gadget = this,
portal_type,
document_title;
return gadget.jio_get(options.jio_key)
.push(function (document) {
document_title = document.title;
return document.portal_type;
}, function () {
document_title = options.portal_type;
return options.portal_type;
})
.push(function (result) {
portal_type = result;
return gadget.declareGadget("gadget_officejs_common_util.html");
})
.push(function (gadget_utils) {
// TODO views are also listed here
// should views be handled in another gadget like "..tab_office.js" ?
return gadget_utils.getViewAndActionDict(portal_type,
options.jio_key);
})
.push(function (action_info_dict) {
return RSVP.all([
getHTMLElementList(gadget, action_info_dict.view_list),
getHTMLElementList(gadget, action_info_dict.action_list)
]);
})
.push(function (all_html_elements) {
return RSVP.all([
renderLinkList(gadget, "Views", "eye", all_html_elements[0]),
renderLinkList(gadget, "Actions", "gear", all_html_elements[1])
]);
})
.push(function (translated_html_link_list) {
gadget.element.innerHTML = translated_html_link_list.join("\n");
return gadget.getUrlFor({command: 'change',
options: {page: undefined}});
})
.push(function (back_url) {
return gadget.updateHeader({
page_title: document_title,
back_url: back_url
});
});
})
.declareMethod("triggerSubmit", function () {
return;
});
}(window, rJS, RSVP, Handlebars));
\ 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_create_document.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS Handle Action</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget_erp5_page_handle_action.js"></script>
</head>
<body>
</body>
</html>
<registered_skin_selection> <registered_skin_selection>
<skin_folder_selection>
<skin_folder>erp5_hal_json_style</skin_folder>
<skin_selection>AppCache</skin_selection>
</skin_folder_selection>
<skin_folder_selection>
<skin_folder>erp5_text_editor</skin_folder>
<skin_selection>AppCache,Hal,RJS,RedirectAssist,View</skin_selection>
</skin_folder_selection>
<skin_folder_selection> <skin_folder_selection>
<skin_folder>erp5_web_officejs_ui</skin_folder> <skin_folder>erp5_web_officejs_ui</skin_folder>
<skin_selection>RJS,View</skin_selection> <skin_selection>RJS,View</skin_selection>
</skin_folder_selection> </skin_folder_selection>
<skin_folder_selection>
<skin_folder>erp5_web_redirect_assist</skin_folder>
<skin_selection>AppCache</skin_selection>
</skin_folder_selection>
<skin_folder_selection>
<skin_folder>erp5_xhtml_style</skin_folder>
<skin_selection>AppCache</skin_selection>
</skin_folder_selection>
</registered_skin_selection> </registered_skin_selection>
\ No newline at end of file
erp5_web_renderjs_ui erp5_web_renderjs_ui
erp5_code_mirror erp5_code_mirror
erp5_multimedia erp5_multimedia
erp5_notebook
erp5_smart_assistant erp5_smart_assistant
\ No newline at end of file
Action Information | definition_view
Base Type | definition_view
ERP5 Form | definition_view
\ No newline at end of file
erp5_hal_json_style | AppCache
erp5_text_editor | AppCache
erp5_text_editor | Hal
erp5_text_editor | RJS
erp5_text_editor | RedirectAssist
erp5_text_editor | View
erp5_web_officejs_ui | RJS erp5_web_officejs_ui | RJS
erp5_web_officejs_ui | View erp5_web_officejs_ui | View
erp5_web_redirect_assist | AppCache
erp5_xhtml_style | AppCache
\ No newline at end of file
This diff is collapsed.
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