Skip to content

erp5
erp5
Commit c93654e4 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Relation Input: remove handlebars dependency

parent d08deb0e
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 112 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.html
View file @ c93654e4
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<head> <head>
<!-- <!--
data-i18n=No such document was found data-i18n=No such document was found
data-i18n=Create New
data-i18n=Explore the Search Result List
--> -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
...@@ -13,38 +15,8 @@ ...@@ -13,38 +15,8 @@
<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 src="gadget_global.js" type="text/javascript"></script> <script src="gadget_global.js" type="text/javascript"></script>
<script src="gadget_erp5_relation_input.js" type="text/javascript"></script> <script src="gadget_erp5_relation_input.js" type="text/javascript"></script>
<script id="relation-link-template" type="text/x-handlebars-template">
<div>
<a href={{href}} class="{{class_name}}" >{{value}}</a>
</div>
</script>
<script id="relation-input-template" type="text/x-handlebars-template">
<div class="relation-input ui-input-text">
<div>
<input type='search' title="{{title}}" name="{{name}}" id="{{name}}" autocomplete="off" value="{{value}}" >
<ul class="search_ul"></ul>
</div>
</div>
</script>
<script id="relation-listview-template" type="text/x-handlebars-template">
{{#if list.length}}
{{#each list}}
<li class="ui-icon-sign-in ui-btn-icon-right" data-relative-url="{{id}}" data-uid="{{uid}}">{{value}}</li>
{{/each}}
{{/if}}
{{#each type}}
<li class="ui-icon-plus ui-btn-icon-right" data-i18n="Create New" data-create-object="{{value}}" name="{{name}}">Create New
<span> {{name}}: {{../value}}</span></li>
{{/each}}
<li class="ui-icon-search ui-btn-icon-right" data-explore=true data-i18n="Explore the Search Result List" >Explore the Search Result List</li>
</script>
</head> </head>
<body> <body>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.xml
View file @ c93654e4
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>970.21341.63203.43332</string> </value> <value> <string>971.20733.1333.20838</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>1537194159.68</float> <float>1541150851.14</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.js
View file @ c93654e4
/*jslint indent: 2, maxerr: 3, nomen: true, maxlen: 80 */ /*jslint indent: 2, maxerr: 3, nomen: true, maxlen: 80 */
/*global window, rJS, RSVP, URI, Handlebars, /*global window, rJS, RSVP, URI,
SimpleQuery, ComplexQuery, Query, QueryFactory, document*/ SimpleQuery, ComplexQuery, Query, QueryFactory, document*/
(function (window, rJS, RSVP, URI, document, (function (window, rJS, RSVP, URI, document,
SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars) { SimpleQuery, ComplexQuery, Query, QueryFactory) {
"use strict"; "use strict";
var gadget_klass = rJS(window),
relation_link_source = gadget_klass.__template_element
.getElementById("relation-link-template")
.innerHTML,
relation_link_template = Handlebars.compile(relation_link_source),
relation_input_source = gadget_klass.__template_element
.getElementById("relation-input-template")
.innerHTML,
relation_input_template = Handlebars.compile(relation_input_source),
relation_listview_source = gadget_klass.__template_element
.getElementById("relation-listview-template")
.innerHTML,
relation_listview_template = Handlebars.compile(relation_listview_source);
function displayNonEditableLink(gadget) { function displayNonEditableLink(gadget) {
return gadget.getUrlFor({ return gadget.getUrlFor({
command: 'index', command: 'index',
...@@ -32,11 +13,20 @@ ...@@ -32,11 +13,20 @@
} }
}) })
.push(function (href) { .push(function (href) {
// <div>
// <a href={{href}}>{{value}}</a>
// </div>
// XXX Use html5 element gadget // XXX Use html5 element gadget
gadget.element.innerHTML = relation_link_template({ var div_element = document.createElement('div'),
value: gadget.state.value_text, a_element = document.createElement('a');
href: href a_element.textContent = gadget.state.value_text;
}); a_element.href = href;
while (gadget.element.firstChild) {
gadget.element.removeChild(gadget.element.firstChild);
}
div_element.appendChild(a_element);
gadget.element.appendChild(a_element);
}); });
} }
...@@ -45,11 +35,33 @@ ...@@ -45,11 +35,33 @@
} }
function buildEditableInputHTML(gadget) { function buildEditableInputHTML(gadget) {
gadget.element.innerHTML = relation_input_template({ // <div class="relation-input ui-input-text">
value: gadget.state.value_text, // <div>
title: gadget.state.title, // <input type='search' title="{{title}}" name="{{name}}"
name: gadget.state.key // id="{{name}}" autocomplete="off" value="{{value}}" >
}); // <ul class="search_ul"></ul>
// </div>
// </div>
var div_element = document.createElement('div'),
sub_div_element = document.createElement('div'),
input_element = document.createElement('input'),
ul_element = document.createElement('ul');
div_element.setAttribute('class', 'relation-input ui-input-text');
input_element.setAttribute('type', 'search');
input_element.setAttribute('title', gadget.state.title);
input_element.setAttribute('name', gadget.state.key);
input_element.setAttribute('id', gadget.state.key);
input_element.setAttribute('autocomplete', 'off');
input_element.setAttribute('value', gadget.state.value_text);
ul_element.setAttribute('class', 'search_ul');
while (gadget.element.firstChild) {
gadget.element.removeChild(gadget.element.firstChild);
}
div_element.appendChild(sub_div_element);
sub_div_element.appendChild(input_element);
sub_div_element.appendChild(ul_element);
gadget.element.appendChild(div_element);
} }
function createEditableLink(gadget, class_name) { function createEditableLink(gadget, class_name) {
...@@ -108,7 +120,7 @@ ...@@ -108,7 +120,7 @@
}); });
} }
gadget_klass rJS(window)
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// acquired methods // acquired methods
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
...@@ -118,7 +130,7 @@ ...@@ -118,7 +130,7 @@
.declareAcquiredMethod("getUrlFor", "getUrlFor") .declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("redirect", "redirect") .declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("getFormContent", "getFormContent") .declareAcquiredMethod("getFormContent", "getFormContent")
.declareAcquiredMethod("translateHtml", "translateHtml") .declareAcquiredMethod("getTranslationList", "getTranslationList")
// .declareAcquiredMethod("addRelationInput", "addRelationInput") // .declareAcquiredMethod("addRelationInput", "addRelationInput")
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
...@@ -295,57 +307,92 @@ ...@@ -295,57 +307,92 @@
return RSVP.delay(200); return RSVP.delay(200);
}) })
.push(function () { .push(function () {
return gadget.jio_allDocs({ return RSVP.all([
query: Query.objectToSearchText(new ComplexQuery({ gadget.jio_allDocs({
operator: "AND", query: Query.objectToSearchText(new ComplexQuery({
query_list: [ operator: "AND",
QueryFactory.create( query_list: [
new URI(gadget.state.query).query(true).query QueryFactory.create(
), new URI(gadget.state.query).query(true).query
new SimpleQuery({ ),
key: gadget.state.catalog_index, new SimpleQuery({
value: value_text key: gadget.state.catalog_index,
}) value: value_text
] })
})), ]
limit: [0, 10], })),
select_list: [gadget.state.catalog_index, "uid"], limit: [0, 10],
sort_on: JSON.parse(gadget.state.sort_list_json) select_list: [gadget.state.catalog_index, "uid"],
}); sort_on: JSON.parse(gadget.state.sort_list_json)
}),
gadget.getTranslationList([
'Create New',
'Explore the Search Result List'
])
]);
}) })
.push(function (result) { .push(function (result_list) {
var list = [], var i,
i, row,
type = [], portal_type_list,
portal_types, translated_portal_type_list,
translated_portal_types; fragment_element = document.createDocumentFragment(),
li_element;
plane.className = JUMP_UNKNOWN_CLASS_STR;
// Documents
// <li class="ui-icon-sign-in ui-btn-icon-right" data-relative-url="{{id}}"
// data-uid="{{uid}}">{{value}}</li>
for (i = 0; i < result_list[0].data.rows.length; i += 1) {
row = result_list[0].data.rows[i];
li_element = document.createElement('li');
li_element.setAttribute('class',
'ui-icon-sign-in ui-btn-icon-right');
li_element.setAttribute('data-relative-url', row.id);
li_element.setAttribute('data-uid', row.value.uid);
li_element.textContent = row.value[gadget.state.catalog_index];
fragment_element.appendChild(li_element);
}
// New documents
// <li class="ui-icon-plus ui-btn-icon-right" data-i18n="Create New"
// data-create-object="{{value}}" name="{{name}}">Create New
// <span> {{name}}: {{../value}}</span></li>
if (gadget.state.allow_creation) { if (gadget.state.allow_creation) {
portal_types = JSON.parse(gadget.state.portal_types); portal_type_list = JSON.parse(gadget.state.portal_types);
translated_portal_types = translated_portal_type_list =
JSON.parse(gadget.state.translated_portal_types); JSON.parse(gadget.state.translated_portal_types);
for (i = 0; i < portal_types.length; i += 1) { for (i = 0; i < portal_type_list.length; i += 1) {
type.push({ li_element = document.createElement('li');
name: translated_portal_types[i], li_element.setAttribute('class',
value: portal_types[i] 'ui-icon-plus ui-btn-icon-right');
}); li_element.setAttribute('data-create-object',
portal_type_list[i]);
li_element.setAttribute('name',
translated_portal_type_list[i]);
li_element.textContent =
result_list[1][0] + ' ' + translated_portal_type_list[i] +
': ' + value_text;
fragment_element.appendChild(li_element);
} }
} }
for (i = 0; i < result.data.rows.length; i += 1) {
list.push({ // Explore
id: result.data.rows[i].id, // <li class="ui-icon-search ui-btn-icon-right" data-explore=true
value: result.data.rows[i].value[gadget.state.catalog_index], // data-i18n="Explore the Search Result List" ></li>
uid: result.data.rows[i].value.uid li_element = document.createElement('li');
}); li_element.setAttribute('class',
'ui-icon-search ui-btn-icon-right');
li_element.setAttribute('data-explore',
true);
li_element.textContent = result_list[1][1];
fragment_element.appendChild(li_element);
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
} }
plane.className = JUMP_UNKNOWN_CLASS_STR; ul.appendChild(fragment_element);
return gadget.translateHtml(relation_listview_template({
list: list,
type: type,
value: value_text
}));
})
.push(function (html) {
ul.innerHTML = html;
}); });
}); });
...@@ -489,4 +536,4 @@ ...@@ -489,4 +536,4 @@
}, true, false); }, true, false);
}(window, rJS, RSVP, URI, document, }(window, rJS, RSVP, URI, document,
SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars)); SimpleQuery, ComplexQuery, Query, QueryFactory));
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.xml
View file @ c93654e4
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>971.1889.61176.26572</string> </value> <value> <string>971.23288.3697.17425</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1539874767.77</float> <float>1541156739.42</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7