Skip to content

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

[erp5_web_renderjs_ui] Prevent listbox flickering when updating it

parent e2feb88b
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 58 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js
View file @ a27baa7f
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
} }
function renderEditableField(gadget, element) { function renderEditableField(gadget, element, column_list) {
var i, var i,
promise_list = [], promise_list = [],
uid_value_dict = {}, uid_value_dict = {},
...@@ -85,26 +85,27 @@ ...@@ -85,26 +85,27 @@
} }
} }
promise_list.push(renderSubCell(element_list[i], promise_list.push(renderSubCell(element_list[i],
gadget.props.result.data.rows[line].value[gadget.state.column_list[column][0]] || "")); gadget.props.result.data.rows[line].value[column_list[column][0]] || ""));
} }
return RSVP.all(promise_list); return RSVP.all(promise_list);
} }
function renderListboxTbody(gadget, template) { function renderListboxTbody(gadget, template) {
var tmp; var tmp,
column_list = JSON.parse(gadget.state.column_list_json);
return gadget.translateHtml(template( return gadget.translateHtml(template(
{ {
"body_value": gadget.props.body_value, "body_value": gadget.props.body_value,
"show_anchor": gadget.state.show_anchor, "show_anchor": gadget.state.show_anchor,
"column_list": gadget.state.column_list "column_list": column_list
} }
)) ))
.push(function (my_html) { .push(function (my_html) {
tmp = document.createElement("tbody"); tmp = document.createElement("tbody");
tmp.innerHTML = my_html; tmp.innerHTML = my_html;
return renderEditableField(gadget, tmp); return renderEditableField(gadget, tmp, column_list);
}) })
.push(function () { .push(function () {
var table = gadget.element.querySelector("table"), var table = gadget.element.querySelector("table"),
...@@ -204,7 +205,7 @@ ...@@ -204,7 +205,7 @@
queue queue
.push(function () { .push(function () {
// Cancel previous line rendering to not conflict with the asynchronous render for now // Cancel previous line rendering to not conflict with the asynchronous render for now
return gadget.renderContent(true); return gadget.renderContent(true, {});
}) })
.push(function () { .push(function () {
// XXX Fix in case of multiple listboxes // XXX Fix in case of multiple listboxes
...@@ -220,7 +221,7 @@ ...@@ -220,7 +221,7 @@
editable: field_json.editable, editable: field_json.editable,
begin_from: parseInt(result_list[0] || '0', 10) || 0, begin_from: parseInt(result_list[0] || '0', 10) || 0,
sort_list: result_list[1] || [], sort_list_json: JSON.stringify(result_list[1] || []),
show_anchor: field_json.show_anchor, show_anchor: field_json.show_anchor,
line_icon: field_json.line_icon, line_icon: field_json.line_icon,
...@@ -229,9 +230,10 @@ ...@@ -229,9 +230,10 @@
list_method: field_json.list_method, list_method: field_json.list_method,
list_method_template: field_json.list_method_template, list_method_template: field_json.list_method_template,
column_list: field_json.column_list, column_list_json: JSON.stringify(field_json.column_list),
sort_column_list: sort_column_list,
search_column_list: search_column_list, sort_column_list_json: JSON.stringify(sort_column_list),
search_column_list_json: JSON.stringify(search_column_list),
hide_sort: field_json.sort_column_list.length ? "" : "ui-disabled", hide_sort: field_json.sort_column_list.length ? "" : "ui-disabled",
field_id: options.field_id, field_id: options.field_id,
...@@ -242,55 +244,72 @@ ...@@ -242,55 +244,72 @@
}) })
.push(function () { .push(function () {
// Force line calculation in any case // Force line calculation in any case
return gadget.renderContent(); return gadget.renderContent(false, {
sort_list: JSON.parse(gadget.state.sort_list_json),
column_list: field_json.column_list,
sort_column_list: sort_column_list,
search_column_list: search_column_list
});
}); });
return queue; return queue;
}) })
.onStateChange(function () { .onStateChange(function (modification_dict) {
var gadget = this, var gadget = this,
head_value = [], head_value = [],
class_value, class_value,
sort_list,
column_list,
tmp, tmp,
i, i,
j; j;
for (i = 0; i < gadget.state.column_list.length; i += 1) { if ((modification_dict.hasOwnProperty('sort_list_json')) ||
class_value = ""; (modification_dict.hasOwnProperty('column_list_json')) ||
for (j = 0; j < gadget.state.sort_list.length; j += 1) { (modification_dict.hasOwnProperty('title')) ||
tmp = gadget.state.sort_list[j]; (modification_dict.hasOwnProperty('hide_sort')) ||
if (tmp[0] === gadget.state.column_list[i][0]) { (modification_dict.hasOwnProperty('hide_class'))) {
if (tmp[1] === "ascending") {
class_value = "ui-icon ui-icon-arrow-up"; sort_list = JSON.parse(gadget.state.sort_list_json);
} else { column_list = JSON.parse(gadget.state.column_list_json);
class_value = "ui-icon ui-icon-arrow-down";
for (i = 0; i < column_list.length; i += 1) {
class_value = "";
for (j = 0; j < sort_list.length; j += 1) {
tmp = sort_list[j];
if (tmp[0] === column_list[i][0]) {
if (tmp[1] === "ascending") {
class_value = "ui-icon ui-icon-arrow-up";
} else {
class_value = "ui-icon ui-icon-arrow-down";
}
break;
} }
break;
} }
head_value.push({
"data-i18n": column_list[i][1],
"class_value": class_value,
"text": column_list[i][1]
});
} }
head_value.push({
"data-i18n": gadget.state.column_list[i][1],
"class_value": class_value,
"text": gadget.state.column_list[i][1]
});
}
gadget.props.head_value = head_value; gadget.props.head_value = head_value;
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return RSVP.all([ return RSVP.all([
gadget.translateHtml(listbox_template({ gadget.translateHtml(listbox_template({
hide_class: gadget.state.hide_class, hide_class: gadget.state.hide_class,
hide_sort: gadget.state.hide_sort, hide_sort: gadget.state.hide_sort,
title: gadget.state.title title: gadget.state.title
})), })),
renderListboxThead(gadget, listbox_hidden_thead_template) renderListboxThead(gadget, listbox_hidden_thead_template)
]); ]);
}) })
.push(function (result_list) { .push(function (result_list) {
gadget.element.querySelector(".document_table").innerHTML = result_list[0]; gadget.element.querySelector(".document_table").innerHTML = result_list[0];
gadget.element.querySelector(".thead").innerHTML = result_list[1]; gadget.element.querySelector(".thead").innerHTML = result_list[1];
}); });
}
}) })
.declareMethod('getListboxInfo', function () { .declareMethod('getListboxInfo', function () {
...@@ -298,7 +317,7 @@ ...@@ -298,7 +317,7 @@
//construct search panel //construct search panel
//hardcoded begin_from key to define search position //hardcoded begin_from key to define search position
return { return {
search_column_list: this.state.search_column_list, search_column_list: JSON.parse(this.state.search_column_list_json),
begin_from: this.state.key + "_begin_from" begin_from: this.state.key + "_begin_from"
}; };
}) })
...@@ -306,7 +325,7 @@ ...@@ -306,7 +325,7 @@
////////////////////////////////////////////// //////////////////////////////////////////////
// render the listbox in an asynchronous way // render the listbox in an asynchronous way
////////////////////////////////////////////// //////////////////////////////////////////////
.declareJob('renderContent', function (only_cancel) { .declareJob('renderContent', function (only_cancel, parsed_json_options) {
var gadget = this, var gadget = this,
// props = gadget.props, // props = gadget.props,
// field_json = props.field_json, // field_json = props.field_json,
...@@ -319,7 +338,10 @@ ...@@ -319,7 +338,10 @@
counter, counter,
limit_options, limit_options,
loading_element_classList = gadget.element.querySelector(".listboxloader").classList, loading_element_classList = gadget.element.querySelector(".listboxloader").classList,
tbody_classList = gadget.element.querySelector("table").querySelector("tbody").classList,
loading_class_list = ['ui-icon-spinner', 'ui-btn-icon-left'], loading_class_list = ['ui-icon-spinner', 'ui-btn-icon-left'],
disabled_class = 'ui-disabled',
sort_list = parsed_json_options.sort_list,
i; i;
if (only_cancel) { if (only_cancel) {
...@@ -329,6 +351,7 @@ ...@@ -329,6 +351,7 @@
if (this.state.query === undefined) { if (this.state.query === undefined) {
gadget.element.querySelector('tfoot').textContent = gadget.element.querySelector('tfoot').textContent =
"Unsupported list method: '" + this.state.list_method + "'"; "Unsupported list method: '" + this.state.list_method + "'";
loading_element_classList.remove.apply(loading_element_classList, loading_class_list);
return; return;
} }
// function buildQueryString(previous, next) { // function buildQueryString(previous, next) {
...@@ -345,8 +368,8 @@ ...@@ -345,8 +368,8 @@
} }
} }
for (i = 0; i < this.state.column_list.length; i += 1) { for (i = 0; i < parsed_json_options.column_list.length; i += 1) {
select_list.push(this.state.column_list[i][0]); select_list.push(parsed_json_options.column_list[i][0]);
} }
select_list.push("uid"); select_list.push("uid");
...@@ -356,6 +379,7 @@ ...@@ -356,6 +379,7 @@
limit_options = [begin_from, lines + 1]; limit_options = [begin_from, lines + 1];
} }
loading_element_classList.add.apply(loading_element_classList, loading_class_list); loading_element_classList.add.apply(loading_element_classList, loading_class_list);
tbody_classList.add(disabled_class);
return gadget.jio_allDocs({ return gadget.jio_allDocs({
// XXX Not jIO compatible, but until a better api is found... // XXX Not jIO compatible, but until a better api is found...
...@@ -363,7 +387,7 @@ ...@@ -363,7 +387,7 @@
"query": query_string, "query": query_string,
"limit": limit_options, "limit": limit_options,
"select_list": select_list, "select_list": select_list,
"sort_on": gadget.state.sort_list "sort_on": sort_list
}) })
.push(function (result) { .push(function (result) {
...@@ -384,7 +408,7 @@ ...@@ -384,7 +408,7 @@
selection_index: begin_from + i, selection_index: begin_from + i,
query: query_string, query: query_string,
list_method_template: gadget.state.list_method_template, list_method_template: gadget.state.list_method_template,
"sort_list:json": gadget.state.sort_list "sort_list:json": sort_list
} }
}) })
); );
...@@ -404,8 +428,8 @@ ...@@ -404,8 +428,8 @@
for (i = 0; i < counter; i += 1) { for (i = 0; i < counter; i += 1) {
tmp_url = result_list[i + 1]; tmp_url = result_list[i + 1];
tr_value = []; tr_value = [];
for (j = 0; j < gadget.state.column_list.length; j += 1) { for (j = 0; j < parsed_json_options.column_list.length; j += 1) {
value = allDocs_result.data.rows[i].value[gadget.state.column_list[j][0]] || ""; value = allDocs_result.data.rows[i].value[parsed_json_options.column_list[j][0]] || "";
tr_value.push({ tr_value.push({
"type": value.type, "type": value.type,
"editable": value.editable && gadget.state.editable, "editable": value.editable && gadget.state.editable,
...@@ -449,7 +473,7 @@ ...@@ -449,7 +473,7 @@
}) })
.push(function (url_list) { .push(function (url_list) {
var foot = {}; var foot = {};
foot.colspan = gadget.state.column_list.length + gadget.state.show_anchor + foot.colspan = parsed_json_options.column_list.length + gadget.state.show_anchor +
(gadget.state.line_icon ? 1 : 0); (gadget.state.line_icon ? 1 : 0);
foot.default_colspan = foot.colspan; foot.default_colspan = foot.colspan;
foot.previous_classname = "ui-btn ui-icon-carat-l ui-btn-icon-left responsive ui-first-child"; foot.previous_classname = "ui-btn ui-icon-carat-l ui-btn-icon-left responsive ui-first-child";
...@@ -474,7 +498,6 @@ ...@@ -474,7 +498,6 @@
return renderListboxTfoot(gadget); return renderListboxTfoot(gadget);
}) })
.push(function (my_html) { .push(function (my_html) {
loading_element_classList.remove.apply(loading_element_classList, loading_class_list);
gadget.element.querySelector(".tfoot").innerHTML = my_html; gadget.element.querySelector(".tfoot").innerHTML = my_html;
}); });
...@@ -501,6 +524,11 @@ ...@@ -501,6 +524,11 @@
.push(function (html) { .push(function (html) {
gadget.element.querySelector(".document_table").innerHTML = html; gadget.element.querySelector(".document_table").innerHTML = html;
}); });
})
.push(function (result) {
loading_element_classList.remove.apply(loading_element_classList, loading_class_list);
tbody_classList.remove(disabled_class);
return result;
}); });
}) })
...@@ -547,8 +575,8 @@ ...@@ -547,8 +575,8 @@
if (evt.target === sort_button) { if (evt.target === sort_button) {
evt.preventDefault(); evt.preventDefault();
url = "gadget_erp5_sort_editor.html"; url = "gadget_erp5_sort_editor.html";
options.sort_column_list = gadget.state.sort_column_list; options.sort_column_list = JSON.parse(gadget.state.sort_column_list_json);
options.sort_list = gadget.state.sort_list; options.sort_list = JSON.parse(gadget.state.sort_list_json);
options.key = gadget.state.key + "_sort_list:json"; options.key = gadget.state.key + "_sort_list:json";
return gadget.renderEditorPanel(url, options); return gadget.renderEditorPanel(url, options);
} }
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml
View file @ a27baa7f
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>957.57991.29866.61081</string> </value> <value> <string>957.58432.2656.37034</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>1489052755.84</float> <float>1489079675.51</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