Commit c93654e4 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Relation Input: remove handlebars dependency

parent d08deb0e
......@@ -3,6 +3,8 @@
<head>
<!--
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 name="viewport" content="width=device-width" />
......@@ -13,38 +15,8 @@
<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 src="gadget_global.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>
<body>
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>970.21341.63203.43332</string> </value>
<value> <string>971.20733.1333.20838</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1537194159.68</float>
<float>1541150851.14</float>
<string>UTC</string>
</tuple>
</state>
......
/*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*/
(function (window, rJS, RSVP, URI, document,
SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars) {
SimpleQuery, ComplexQuery, Query, QueryFactory) {
"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) {
return gadget.getUrlFor({
command: 'index',
......@@ -32,11 +13,20 @@
}
})
.push(function (href) {
// <div>
// <a href={{href}}>{{value}}</a>
// </div>
// XXX Use html5 element gadget
gadget.element.innerHTML = relation_link_template({
value: gadget.state.value_text,
href: href
});
var div_element = document.createElement('div'),
a_element = document.createElement('a');
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 @@
}
function buildEditableInputHTML(gadget) {
gadget.element.innerHTML = relation_input_template({
value: gadget.state.value_text,
title: gadget.state.title,
name: gadget.state.key
});
// <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>
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) {
......@@ -108,7 +120,7 @@
});
}
gadget_klass
rJS(window)
/////////////////////////////////////////////////////////////////
// acquired methods
/////////////////////////////////////////////////////////////////
......@@ -118,7 +130,7 @@
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("getFormContent", "getFormContent")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("getTranslationList", "getTranslationList")
// .declareAcquiredMethod("addRelationInput", "addRelationInput")
/////////////////////////////////////////////////////////////////
......@@ -295,7 +307,8 @@
return RSVP.delay(200);
})
.push(function () {
return gadget.jio_allDocs({
return RSVP.all([
gadget.jio_allDocs({
query: Query.objectToSearchText(new ComplexQuery({
operator: "AND",
query_list: [
......@@ -311,41 +324,75 @@
limit: [0, 10],
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) {
var list = [],
i,
type = [],
portal_types,
translated_portal_types;
.push(function (result_list) {
var i,
row,
portal_type_list,
translated_portal_type_list,
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) {
portal_types = JSON.parse(gadget.state.portal_types);
translated_portal_types =
portal_type_list = JSON.parse(gadget.state.portal_types);
translated_portal_type_list =
JSON.parse(gadget.state.translated_portal_types);
for (i = 0; i < portal_types.length; i += 1) {
type.push({
name: translated_portal_types[i],
value: portal_types[i]
});
}
}
for (i = 0; i < result.data.rows.length; i += 1) {
list.push({
id: result.data.rows[i].id,
value: result.data.rows[i].value[gadget.state.catalog_index],
uid: result.data.rows[i].value.uid
});
}
plane.className = JUMP_UNKNOWN_CLASS_STR;
return gadget.translateHtml(relation_listview_template({
list: list,
type: type,
value: value_text
}));
})
.push(function (html) {
ul.innerHTML = html;
for (i = 0; i < portal_type_list.length; i += 1) {
li_element = document.createElement('li');
li_element.setAttribute('class',
'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);
}
}
// Explore
// <li class="ui-icon-search ui-btn-icon-right" data-explore=true
// data-i18n="Explore the Search Result List" ></li>
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);
}
ul.appendChild(fragment_element);
});
});
......@@ -489,4 +536,4 @@
}, true, false);
}(window, rJS, RSVP, URI, document,
SimpleQuery, ComplexQuery, Query, QueryFactory, Handlebars));
SimpleQuery, ComplexQuery, Query, QueryFactory));
......@@ -236,7 +236,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>971.1889.61176.26572</string> </value>
<value> <string>971.23288.3697.17425</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -254,7 +254,7 @@
</tuple>
<state>
<tuple>
<float>1539874767.77</float>
<float>1541156739.42</float>
<string>UTC</string>
</tuple>
</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