Skip to content

E
erp5
Commit 18415f4d authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Listbox: remove handlebars dependency

parent c93654e4
Hide whitespace changes
Inline Side-by-side
Showing with 476 additions and 292 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html
View file @ 18415f4d
...@@ -5,9 +5,16 @@ ...@@ -5,9 +5,16 @@
data-i18n=No records data-i18n=No records
data-i18n=Records data-i18n=Records
data-i18n=Select data-i18n=Select
data-i18n=Configure
data-i18n=Sort
data-i18n=Include data-i18n=Include
data-i18n=Exclude data-i18n=Exclude
data-i18n=sample of data-i18n=sample of
data-i18n=Jump
data-i18n=Invalid Search Criteria
data-i18n=Reset
data-i18n=Previous
data-i18n=Next
--> -->
<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" />
...@@ -20,165 +27,10 @@ ...@@ -20,165 +27,10 @@
<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>
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_field_listbox.js" type="text/javascript"></script> <script src="gadget_erp5_field_listbox.js" type="text/javascript"></script>
<script id="listbox-thead-template" type="text/x-handlebars-template">
<table>
<thead>
<tr>
{{#if show_anchor}}
<th data-i18n="Jump">Jump</th>
{{/if}}
{{#each head_value}}
{{#if ../show_line_selector}}
<th class="{{class_value}}">{{text}}</th>
{{else}}
{{#if sort_link}}
<th class="{{class_value}}"><a href="{{sort_link}}">{{text}}</a></th>
{{else}}
<th class="{{class_value}}">{{text}}</th>
{{/if}}
{{/if}}
{{/each}}
{{#if line_icon}}
<th></th>
{{/if}}
</tr>
</thead>
</table>
</script>
<script id="listbox-tbody-template" type="text/x-handlebars-template">
<table>
<tbody>
{{#each row_list}}
<tr>
{{#if ../show_anchor}}
<th>
<a class="ui-icon-carat-r ui-btn-icon-notext" href="{{jump}}"> </a>
</th>
{{/if}}
{{#each cell_list}}
<td>
{{#if ../../show_line_selector}}
{{#if @first}}
<input data-uid="{{../uid}}" type="checkbox" class="hide_element" id="listbox_line_{{../uid}}">
{{/if}}
{{#if type}}
<label for="listbox_line_{{../uid}}" class="editable_div" data-column="{{column}}" data-line="{{line}}"></label>
{{else}}
<label for="listbox_line_{{../uid}}">{{default}}</label>
{{/if}}
{{else}}
{{#if type}}
{{#if editable}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{else}}
{{#if href}}
<a href="{{href}}">
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
</a>
{{else}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{/if}}
{{/if}}
{{else}}
{{#if href}}
<a href="{{href}}">{{default}}</a>
{{else}}
<p>{{default}}</p>
{{/if}}
{{/if}}
{{/if}}
</td>
{{/each}}
{{#if line_icon}}
<th>
<a href ="{{jump}}" class="ui-btn-icon-right ui-icon-sign-in"></a>
</th>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
</script>
<script id="listbox-tfoot-template" type="text/x-handlebars-template">
<table>
<tfoot>
{{#each row_list}}
<tr>
{{#if ../show_anchor}}
<td>Total</td>
{{/if}}
{{#each cell_list}}
<td>
{{#if type}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{else}}
{{#if default}}
{{default}}
{{else}}
{{#unless ../../show_anchor }}
{{#if @first}}
Total
{{/if}}
{{/unless}}
{{/if}}
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tfoot>
</table>
</script>
<script id="listbox-nav-template" type="text/x-handlebars-template">
<a class="{{previous_classname}}" data-i18n="Previous" href="{{previous_url}}">Previous</a>
<a class="{{next_classname}}" data-i18n="Next" href="{{next_url}}">Next</a>
<span class="ui-disabled">{{record}}</span>
</script>
<script id="listbox-template" type="text/x-handlebars-template">
<div class="ui-table-header ui-header">
<h1 data-i18n="{{title}}">{{title}}<span> <span class="listboxloader ui-icon-spinner ui-btn-icon-left"></span></span></h1>
{{#if show_line_selector}}
<button data-rel="hide" data-i18n="Include" name="IncludeRows" type="button" class="ui-icon-eye ui-btn-icon-left {{hide_class}}">Include</button>
<button data-rel="hide" data-i18n="Exclude" name="ExcludeRows" type="button" class="ui-icon-low-vision ui-btn-icon-left {{hide_class}}">Exclude</button>
{{else}}
<button {{disabled}} data-rel="hide" data-i18n="Select" name="Hide" type="button" class="ui-icon-check-square-o ui-btn-icon-left {{hide_class}}">Select</button>
<button {{disabled}} data-rel="configure_columns" data-i18n="Configure" name="Configure" type="button" class="ui-icon-wrench ui-btn-icon-left {{configure_class}}">Configure</button>
<button {{disabled}} data-rel="Sort" data-i18n="Sort" name="Sort" type="button" class="ui-icon-sort-amount-desc ui-btn-icon-left {{sort_class}}">Sort</button>
{{/if}}
</div>
<table>
<thead class="thead"></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
<nav></nav>
</div>
</script>
<script id="error-message-template" type="text/x-handlebars-template">
<div>
<a href="{{reset_url}}">
<span class='ui-info-error' data-i18n="Invalid Search Criteria">Invalid Search Criteria</span>
<span>-</span>
<span data-i18n="Reset">Reset</span>
</a>
</div>
</script>
</head> </head>
<body> <body>
<div class="document_table"> <div class="document_table">
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml
View file @ 18415f4d
...@@ -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.21374.32646.29798</string> </value> <value> <string>971.30644.20500.27374</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>1537196481.87</float> <float>1541598213.45</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js
View file @ 18415f4d
/*jslint indent: 2, maxerr: 3, nomen: true */ /*jslint indent: 2, maxerr: 3, nomen: true */
/*global window, document, rJS, URI, RSVP, /*global window, document, rJS, URI, RSVP,
SimpleQuery, ComplexQuery, Query, Handlebars, console, QueryFactory*/ SimpleQuery, ComplexQuery, Query, console, QueryFactory*/
(function (window, document, rJS, URI, RSVP, (function (window, document, rJS, URI, RSVP,
SimpleQuery, ComplexQuery, Query, Handlebars, console, QueryFactory) { SimpleQuery, ComplexQuery, Query, console, QueryFactory) {
"use strict"; "use strict";
var gadget_klass = rJS(window),
listbox_thead_source = gadget_klass.__template_element var variable = {},
.getElementById("listbox-thead-template")
.innerHTML,
listbox_thead_template = Handlebars.compile(listbox_thead_source),
listbox_tbody_source = gadget_klass.__template_element
.getElementById("listbox-tbody-template")
.innerHTML,
listbox_tbody_template = Handlebars.compile(listbox_tbody_source),
listbox_tfoot_source = gadget_klass.__template_element
.getElementById("listbox-tfoot-template")
.innerHTML,
listbox_tfoot_template = Handlebars.compile(listbox_tfoot_source),
listbox_nav_source = gadget_klass.__template_element
.getElementById("listbox-nav-template")
.innerHTML,
listbox_nav_template = Handlebars.compile(listbox_nav_source),
listbox_source = gadget_klass.__template_element
.getElementById("listbox-template")
.innerHTML,
listbox_template = Handlebars.compile(listbox_source),
error_message_source = gadget_klass.__template_element
.getElementById("error-message-template")
.innerHTML,
error_message_template = Handlebars.compile(error_message_source),
variable = {},
loading_class_list = ['ui-icon-spinner', 'ui-btn-icon-left'], loading_class_list = ['ui-icon-spinner', 'ui-btn-icon-left'],
disabled_class = 'ui-disabled'; disabled_class = 'ui-disabled';
function listbox_tbody_template(options) {
/*
<tbody>
{{#each row_list}}
<tr>
{{#if ../show_anchor}}
<th>
<a class="ui-icon-carat-r ui-btn-icon-notext" href="{{jump}}"> </a>
</th>
{{/if}}
{{#each cell_list}}
<td>
{{#if ../../show_line_selector}}
{{#if @first}}
<input data-uid="{{../uid}}" type="checkbox" class="hide_element" id="listbox_line_{{../uid}}">
{{/if}}
{{#if type}}
<label for="listbox_line_{{../uid}}" class="editable_div" data-column="{{column}}" data-line="{{line}}"></label>
{{else}}
<label for="listbox_line_{{../uid}}">{{default}}</label>
{{/if}}
{{else}}
{{#if type}}
{{#if editable}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{else}}
{{#if href}}
<a href="{{href}}">
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
</a>
{{else}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{/if}}
{{/if}}
{{else}}
{{#if href}}
<a href="{{href}}">{{default}}</a>
{{else}}
<p>{{default}}</p>
{{/if}}
{{/if}}
{{/if}}
</td>
{{/each}}
{{#if line_icon}}
<th>
<a href ="{{jump}}" class="ui-btn-icon-right ui-icon-sign-in"></a>
</th>
{{/if}}
</tr>
{{/each}}
</tbody>
*/
var tbody_element = document.createElement('tbody'),
i,
j,
row,
cell,
tr_element,
td_element,
sub_element,
a_element;
for (i = 0; i < options.row_list.length; i += 1) {
tr_element = document.createElement('tr');
row = options.row_list[i];
if (options.show_anchor) {
td_element = document.createElement('td');
sub_element = document.createElement('a');
sub_element.setAttribute('class', 'ui-icon-carat-r ui-btn-icon-notext');
sub_element.href = row.jump;
sub_element.textContent = ' ';
tr_element.appendChild(td_element);
}
for (j = 0; j < row.cell_list.length; j += 1) {
cell = row.cell_list[j];
td_element = document.createElement('td');
if (options.show_line_selector) {
if (j === 0) {
// If first cell, show a checkbox to select the line
sub_element = document.createElement('input');
sub_element.setAttribute('data-uid', row.uid);
sub_element.setAttribute('type', 'checkbox');
sub_element.setAttribute('class', 'hide_element');
sub_element.setAttribute('id', 'listbox_line_' + row.uid);
td_element.appendChild(sub_element);
}
// Create a label, to update the checkbox when clicking the text
sub_element = document.createElement('label');
sub_element.setAttribute('for', 'listbox_line_' + row.uid);
if (cell.type) {
sub_element.setAttribute('class', 'editable_div');
sub_element.setAttribute('data-column', cell.column);
sub_element.setAttribute('data-line', cell.line);
} else {
sub_element.textContent = cell.default;
}
td_element.appendChild(sub_element);
} else {
if (cell.type) {
sub_element = document.createElement('div');
sub_element.setAttribute('class', 'editable_div');
sub_element.setAttribute('data-column', cell.column);
sub_element.setAttribute('data-line', cell.line);
if (cell.editable || !cell.href) {
td_element.appendChild(sub_element);
} else {
a_element = document.createElement('a');
a_element.href = cell.href;
a_element.appendChild(sub_element);
td_element.appendChild(a_element);
}
} else {
if (cell.href) {
sub_element = document.createElement('a');
sub_element.href = cell.href;
} else {
sub_element = document.createElement('p');
}
sub_element.textContent = cell.default;
td_element.appendChild(sub_element);
}
}
tr_element.appendChild(td_element);
}
if (options.line_icon) {
td_element = document.createElement('td');
sub_element = document.createElement('a');
sub_element.setAttribute('class', 'ui-btn-icon-right ui-icon-sign-in');
sub_element.href = row.jump;
tr_element.appendChild(td_element);
}
tbody_element.appendChild(tr_element);
}
return tbody_element;
}
function listbox_tfoot_template(options) {
/*
<tfoot>
{{#each row_list}}
<tr>
{{#if ../show_anchor}}
<td>Total</td>
{{/if}}
{{#each cell_list}}
<td>
{{#if type}}
<div class="editable_div" data-column="{{column}}" data-line="{{line}}"></div>
{{else}}
{{#if default}}
{{default}}
{{else}}
{{#unless ../../show_anchor }}
{{#if @first}}
Total
{{/if}}
{{/unless}}
{{/if}}
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tfoot>
*/
var tfoot_element = document.createElement('tfoot'),
i,
j,
row,
cell,
tr_element,
td_element,
div_element;
for (i = 0; i < options.row_list.length; i += 1) {
tr_element = document.createElement('tr');
if (options.show_anchor) {
td_element = document.createElement('td');
td_element.textContent = 'Total';
tr_element.appendChild(td_element);
}
row = options.row_list[i];
for (j = 0; j < row.cell_list.length; j += 1) {
cell = row.cell_list[j];
td_element = document.createElement('td');
if (cell.type) {
div_element = document.createElement('div');
div_element.setAttribute('class', 'editable_div');
div_element.setAttribute('data-column', cell.column);
div_element.setAttribute('data-line', cell.line);
td_element.appendChild(div_element);
} else {
if (cell.default) {
td_element.textContent = cell.default;
} else if ((!options.show_anchor) && (j === 0)) {
td_element.textContent = 'Total';
}
}
tr_element.appendChild(td_element);
}
tfoot_element.appendChild(tr_element);
}
return tfoot_element;
}
function renderSubField(gadget, element, sub_field_json) { function renderSubField(gadget, element, sub_field_json) {
sub_field_json.editable = sub_field_json.editable && gadget.state.editable; sub_field_json.editable = sub_field_json.editable && gadget.state.editable;
return gadget.declareGadget( return gadget.declareGadget(
...@@ -88,8 +276,7 @@ ...@@ -88,8 +276,7 @@
var container, var container,
column_list = JSON.parse(gadget.state.column_list_json); column_list = JSON.parse(gadget.state.column_list_json);
container = document.createElement(container_name); container = template({
container.innerHTML = template({
"row_list": row_list, "row_list": row_list,
"show_anchor": gadget.state.show_anchor, "show_anchor": gadget.state.show_anchor,
"column_list": column_list, "column_list": column_list,
...@@ -138,13 +325,12 @@ ...@@ -138,13 +325,12 @@
// acquired method // acquired method
////////////////////////////////////////////// //////////////////////////////////////////////
.declareAcquiredMethod("jio_allDocs", "jio_allDocs") .declareAcquiredMethod("jio_allDocs", "jio_allDocs")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("getUrlFor", "getUrlFor") .declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("getUrlForList", "getUrlForList") .declareAcquiredMethod("getUrlForList", "getUrlForList")
.declareAcquiredMethod("getUrlParameter", "getUrlParameter") .declareAcquiredMethod("getUrlParameter", "getUrlParameter")
.declareAcquiredMethod("renderEditorPanel", "renderEditorPanel") .declareAcquiredMethod("renderEditorPanel", "renderEditorPanel")
.declareAcquiredMethod("redirect", "redirect") .declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("translate", "translate") .declareAcquiredMethod("getTranslationList", "getTranslationList")
////////////////////////////////////////////// //////////////////////////////////////////////
// initialize the gadget content // initialize the gadget content
...@@ -196,14 +382,11 @@ ...@@ -196,14 +382,11 @@
if (!variable.translated_records) { if (!variable.translated_records) {
queue queue
.push(function () { .push(function () {
return RSVP.all([ return gadget.getTranslationList(['Records', 'No records']);
gadget.translate('Records'),
gadget.translate('No records')
]);
}) })
.push(function (results) { .push(function (result_list) {
variable.translated_records = results[0]; variable.translated_records = result_list[0];
variable.translated_no_record = results[1]; variable.translated_no_record = result_list[1];
}); });
} }
queue queue
...@@ -307,7 +490,7 @@ ...@@ -307,7 +490,7 @@
sort_key = gadget.state.key + "_sort_list:json", sort_key = gadget.state.key + "_sort_list:json",
sort_list, sort_list,
column_list, column_list,
sort_column_list, sortable_column_list,
i, i,
j, j,
result_queue = new RSVP.Queue(), result_queue = new RSVP.Queue(),
...@@ -331,18 +514,48 @@ ...@@ -331,18 +514,48 @@
.push(function () { .push(function () {
var options = {extended_search: undefined}; var options = {extended_search: undefined};
options[sort_key] = undefined; options[sort_key] = undefined;
return gadget.getUrlFor({ return RSVP.all([
command: 'store_and_change', gadget.getUrlFor({
options: options command: 'store_and_change',
}); options: options
}) }),
.push(function (url) { gadget.getTranslationList(['Invalid Search Criteria', 'Reset'])
return gadget.translateHtml(error_message_template({ ]);
reset_url: url
}));
}) })
.push(function (html) { .push(function (result_list) {
gadget.element.querySelector(".document_table").innerHTML = html; /*
<div>
<a href="{{reset_url}}">
<span class='ui-info-error' data-i18n="Invalid Search Criteria">Invalid Search Criteria</span>
<span>-</span>
<span data-i18n="Reset">Reset</span>
</a>
</div>
*/
var container = gadget.element.querySelector(".document_table"),
div_element = document.createElement('div'),
a_element = document.createElement('a'),
span_element;
a_element.href = result_list[0];
span_element = document.createElement('span');
span_element.setAttribute('class', 'ui-info-error');
span_element.textContent = result_list[1][0];
a_element.appendChild(span_element);
span_element = document.createElement('span');
span_element.textContent = '-';
a_element.appendChild(span_element);
span_element = document.createElement('span');
span_element.textContent = result_list[1][1];
a_element.appendChild(span_element);
div_element.appendChild(a_element);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(div_element);
}); });
} }
...@@ -370,81 +583,183 @@ ...@@ -370,81 +583,183 @@
// display sorting arrow inside correct columns // display sorting arrow inside correct columns
sort_list = JSON.parse(gadget.state.sort_list_json); // current sort sort_list = JSON.parse(gadget.state.sort_list_json); // current sort
column_list = JSON.parse(gadget.state.column_list_json); // shown columns column_list = JSON.parse(gadget.state.column_list_json); // shown columns
sort_column_list = JSON.parse(gadget.state.sort_column_list_json); // sortable columns sortable_column_list = JSON.parse(gadget.state.sort_column_list_json); // sortable columns
result_queue result_queue
.push(function () { .push(function () {
// construct array of links for sortable columns, undefined otherwise var k,
return RSVP.all(column_list.map(function (column) { column,
is_sortable,
var is_sortable = sort_column_list.find(hasSameFirstItem(column)) !== undefined, current_sort,
current_sort = sort_list.find(hasSameFirstItem(column)), options,
options = {}; url_for_option_list = [],
is_sortable_list = [];
for (k = 0; k < column_list.length; k += 1) {
column = column_list[k];
is_sortable = sortable_column_list.find(hasSameFirstItem(column)) !== undefined;
current_sort = sort_list.find(hasSameFirstItem(column));
is_sortable_list.push(is_sortable);
if (is_sortable) { if (is_sortable) {
options = {};
options[sort_key] = [[column[0], 'descending']]; // make it the only new sort (replace array instead of push) options[sort_key] = [[column[0], 'descending']]; // make it the only new sort (replace array instead of push)
if (current_sort !== undefined && current_sort[1] === 'descending') { if (current_sort !== undefined && current_sort[1] === 'descending') {
options[sort_key] = [[column[0], 'ascending']]; options[sort_key] = [[column[0], 'ascending']];
} }
return gadget.getUrlFor({"command": 'store_and_change', "options": options}); url_for_option_list.push({"command": 'store_and_change', "options": options});
} }
return undefined;
}));
})
.push(function (column_sort_link_list) {
// here we obtain links for sorting by columns
// so we can construct array of header objects to be rendered in the header template
var hide_button_text,
hide_button_name,
head_value_list = column_list.map(function (column, index) {
var current_sort = sort_list.find(hasSameFirstItem(column)),
class_value = "";
if (current_sort !== undefined) {
if (current_sort[1] === 'ascending') {
class_value = "ui-icon ui-icon-sort-amount-asc";
}
if (current_sort[1] === 'descending') {
class_value = "ui-icon ui-icon-sort-amount-desc";
}
}
return {
"class_value": class_value,
"sort_link": column_sort_link_list[index],
"text": column[1]
};
});
if (gadget.state.show_line_selector) {
hide_button_text = 'Submit';
hide_button_name = 'SelectRows';
} else {
hide_button_text = 'Select';
hide_button_name = 'Hide';
} }
return RSVP.all([ return RSVP.all([
gadget.translateHtml(listbox_template({ gadget.getUrlForList(url_for_option_list),
hide_class: gadget.state.hide_class, is_sortable_list,
sort_class: gadget.state.sort_class, gadget.getTranslationList(['Jump', 'Include', 'Exclude',
configure_class: gadget.state.configure_class, 'Select', 'Configure', 'Sort'])
title: gadget.state.title,
hide_button_text: hide_button_text,
hide_button_name: hide_button_name,
disabled: gadget.state.disabled ? 'disabled' : '',
show_line_selector: gadget.state.show_line_selector
})),
gadget.translateHtml(listbox_thead_template({
head_value: head_value_list,
show_anchor: gadget.state.show_anchor,
line_icon: gadget.state.line_icon,
show_line_selector: gadget.state.show_line_selector
}))
]); ]);
}) })
.push(function (result_list) { .push(function (result_list) {
gadget.element.querySelector(".document_table").innerHTML = result_list[0]; var container = gadget.element.querySelector(".document_table"),
gadget.element.querySelector(".thead").innerHTML = result_list[1]; url_for_list = result_list[0],
translation_list = result_list[2],
is_sortable_list = result_list[1],
k,
url_for_index = 0,
column,
current_sort,
fragment = document.createDocumentFragment(),
div_element = document.createElement('div'),
table_element = document.createElement('table'),
button_element,
h1_element = document.createElement('h1'),
span_element = document.createElement('span'),
tr_element,
th_element,
a_element;
div_element.setAttribute('class', 'ui-table-header ui-header');
// For an unknown reason, the title used to be translated previously,
// which is unexpected, as the value can't be hardcoded in the gadget
// <h1>{{title}} <span class="listboxloader ui-icon-spinner ui-btn-icon-left"></span></h1>
h1_element.textContent = gadget.state.title + ' ';
span_element.setAttribute('class', 'listboxloader ui-icon-spinner ui-btn-icon-left');
h1_element.appendChild(span_element);
div_element.appendChild(h1_element);
if (gadget.state.show_line_selector) {
// Add include button
// <button data-rel="hide" data-i18n="Include" name="IncludeRows" type="button" class="ui-icon-eye ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'IncludeRows');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-eye ui-btn-icon-left ' + gadget.state.hide_class);
button_element.textContent = translation_list[1];
div_element.appendChild(button_element);
// Add exclude button
// <button data-rel="hide" data-i18n="Exclude" name="ExcludeRows" type="button" class="ui-icon-low-vision ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'ExcludeRows');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-low-vision ui-btn-icon-left ' + gadget.state.hide_class);
button_element.textContent = translation_list[2];
div_element.appendChild(button_element);
} else {
// Add Select button
// <button {{disabled}} data-rel="hide" data-i18n="Select" name="Hide" type="button" class="ui-icon-check-square-o ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'Hide');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-check-square-o ui-btn-icon-left ' + gadget.state.hide_class);
button_element.textContent = translation_list[3];
div_element.appendChild(button_element);
// Add Configure button
// <button {{disabled}} data-rel="configure_columns" data-i18n="Configure" name="Configure" type="button" class="ui-icon-wrench ui-btn-icon-left {{configure_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'configure_columns');
button_element.setAttribute('name', 'Configure');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-wrench ui-btn-icon-left ' + gadget.state.configure_class);
button_element.textContent = translation_list[4];
div_element.appendChild(button_element);
// Add Sort button
// <button {{disabled}} data-rel="Sort" data-i18n="Sort" name="Sort" type="button" class="ui-icon-sort-amount-desc ui-btn-icon-left {{sort_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'Sort');
button_element.setAttribute('name', 'Sort');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-sort-amount-desc ui-btn-icon-left ' + gadget.state.sort_class);
button_element.textContent = translation_list[5];
div_element.appendChild(button_element);
}
fragment.appendChild(div_element);
table_element.innerHTML = '<thead class="thead"><tr></tr></thead><tbody></tbody><tfoot></tfoot>';
tr_element = table_element.querySelector('tr');
if (gadget.state.show_anchor) {
th_element = document.createElement('th');
th_element.textContent = translation_list[0];
tr_element.appendChild(th_element);
}
for (k = 0; k < column_list.length; k += 1) {
column = column_list[k];
th_element = document.createElement('th');
current_sort = sort_list.find(hasSameFirstItem(column));
if (current_sort !== undefined) {
if (current_sort[1] === 'ascending') {
th_element.setAttribute('class', "ui-icon ui-icon-sort-amount-asc");
} else if (current_sort[1] === 'descending') {
th_element.setAttribute('class', "ui-icon ui-icon-sort-amount-desc");
}
}
if (gadget.state.show_line_selector) {
// <th class="{{class_value}}">{{text}}</th>
th_element.textContent = column[1];
} else {
if (is_sortable_list[k]) {
// <th class="{{class_value}}"><a href="{{sort_link}}">{{text}}</a></th>
a_element = document.createElement('a');
a_element.textContent = column[1];
a_element.href = url_for_list[url_for_index];
th_element.appendChild(a_element);
url_for_index += 1;
} else {
// <th class="{{class_value}}">{{text}}</th>
th_element.textContent = column[1];
}
}
tr_element.appendChild(th_element);
}
if (gadget.state.line_icon) {
th_element = document.createElement('th');
tr_element.appendChild(th_element);
}
fragment.appendChild(table_element);
fragment.appendChild(document.createElement('nav'));
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
}); });
} }
...@@ -605,7 +920,7 @@ ...@@ -605,7 +920,7 @@
setNext(); setNext();
} }
return RSVP.all([ return RSVP.all([
gadget.translate('sample of'), gadget.getTranslationList(['sample of', 'Previous', 'Next']),
gadget.getUrlForList([ gadget.getUrlForList([
{command: 'change', options: prev_param}, {command: 'change', options: prev_param},
{command: 'change', options: next_param} {command: 'change', options: next_param}
...@@ -613,13 +928,16 @@ ...@@ -613,13 +928,16 @@
]); ]);
}) })
.push(function (result_list) { .push(function (result_list) {
var sample_string = result_list[0], var sample_string = result_list[0][0],
url_list = result_list[1], url_list = result_list[1],
record, record,
previous_url = url_list[0], previous_url = url_list[0],
next_url = url_list[1], next_url = url_list[1],
previous_classname = "ui-btn ui-icon-carat-l ui-btn-icon-left responsive ui-first-child", previous_classname = "ui-btn ui-icon-carat-l ui-btn-icon-left responsive ui-first-child",
next_classname = "ui-btn ui-icon-carat-r ui-btn-icon-right responsive ui-last-child"; next_classname = "ui-btn ui-icon-carat-r ui-btn-icon-right responsive ui-last-child",
fragment = document.createDocumentFragment(),
sub_element,
nav_element = gadget.element.querySelector('nav');
if ((gadget.state.begin_from === 0) && (counter === 0)) { if ((gadget.state.begin_from === 0) && (counter === 0)) {
record = variable.translated_no_record; record = variable.translated_no_record;
...@@ -645,19 +963,33 @@ ...@@ -645,19 +963,33 @@
if (allDocs_result.data.rows.length <= lines) { if (allDocs_result.data.rows.length <= lines) {
next_classname += " ui-disabled"; next_classname += " ui-disabled";
} }
return gadget.translateHtml(
listbox_nav_template({
"previous_classname": previous_classname,
"previous_url": previous_url,
"record": record,
"next_classname": next_classname,
"next_url": next_url
})
);
})
.push(function (listbox_nav_html) {
gadget.element.querySelector('nav').innerHTML = listbox_nav_html;
// <a class="{{previous_classname}}" data-i18n="Previous" href="{{previous_url}}">Previous</a>
// <a class="{{next_classname}}" data-i18n="Next" href="{{next_url}}">Next</a>
// <span class="ui-disabled">{{record}}</span>
sub_element = document.createElement('a');
sub_element.setAttribute('class', previous_classname);
sub_element.href = previous_url;
sub_element.textContent = result_list[0][1];
fragment.appendChild(sub_element);
sub_element = document.createElement('a');
sub_element.setAttribute('class', next_classname);
sub_element.href = next_url;
sub_element.textContent = result_list[0][2];
fragment.appendChild(sub_element);
sub_element = document.createElement('span');
sub_element.setAttribute('class', 'ui-disabled');
sub_element.textContent = record;
fragment.appendChild(sub_element);
while (nav_element.firstChild) {
nav_element.removeChild(nav_element.firstChild);
}
nav_element.appendChild(fragment);
})
.push(function () {
var result_sum = (gadget.state.allDocs_result.sum || {}).rows || [], // render summary footer if available var result_sum = (gadget.state.allDocs_result.sum || {}).rows || [], // render summary footer if available
summary = result_sum.map(function (row, row_index) { summary = result_sum.map(function (row, row_index) {
var row_editability = row['listbox_uid:list'] !== undefined; var row_editability = row['listbox_uid:list'] !== undefined;
...@@ -991,4 +1323,4 @@ ...@@ -991,4 +1323,4 @@
}); });
}(window, document, rJS, URI, RSVP, }(window, document, rJS, URI, RSVP,
SimpleQuery, ComplexQuery, Query, Handlebars, console, QueryFactory)); SimpleQuery, ComplexQuery, Query, console, QueryFactory));
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml
View file @ 18415f4d
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>969.37531.32072.23688</string> </value> <value> <string>971.30696.34005.13721</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>1536324257.52</float> <float>1541601271.99</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