Skip to content

E
ecommerce-ui
Commit 5cc16464 authored by Sven Franck's avatar Sven Franck
Browse files
Options

added single/all visible/all row selecting

parent d6fa3a1d
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 81 deletions
js/erp5_loader.js
View file @ 5cc16464
...@@ -143,44 +143,54 @@ ...@@ -143,44 +143,54 @@
/** /**
* selecting single checkbox * selecting single checkbox
* @method sort * @method check
* @param {object} e Event * @param {object} e Event
*/ */
check: function (e) { check: function (e) {
init.check(e, undefined);
},
/**
* select all visible rows (default)
* @method check_all_visible
* @param {object} e Event
*/
check_all_visible: function (e) {
init.check(e, false);
}, },
/** /**
* select all rows * select ALL rows (visible and not visible)
* @method sort * @method check_all
* @param {object} e Event * @param {object} e Event
*/ */
// NOTE: checkbox has 3 states (this hijacks indeterminate state!!!)
check_all: function (e) { check_all: function (e) {
// // check all 3-state (none|all visible|all) var checkbox = e.target,
// if (config.checkbox.show) { label = checkbox.previousSibling;
// $parent.on("change", ".tick_all", function (e) {
// var checkbox = e.target, if (checkbox.checked) {
// label = checkbox.previousSibling; if (checkbox.indeterminate === false) {
// checkbox.setAttribute("flag", true);
// if (checkbox.checked) { }
// if (checkbox.indeterminate === false) { } else {
// checkbox.setAttribute("flag", true); if (checkbox.getAttribute("flag")) {
// } checkbox.removeAttribute("flag");
// } else { checkbox.indeterminate = true;
// if (checkbox.getAttribute("flag")) { checkbox.checked = true;
// checkbox.removeAttribute("flag");
// checkbox.indeterminate = true; label.className = label.className.replace(
// checkbox.checked = true; util.filterForClass("ui-checkbox-on"), " ui-icon-globe"
// label.className = label.className.replace(priv.filterForClass("ui-icon-checkbox-on"), ' ui-icon-globe'); );
// e.preventDefault(); } else {
// return false; checkbox.indeterminate = false;
// } else { label.className = label.className.replace(
// checkbox.indeterminate = false; util.filterForClass("ui-icon-globe") , ""
// label.className = label.className.replace(priv.filterForClass("ui-icon-globe") , ''); );
// } }
// } }
// }); // create visual and state
// } init.check(e, true);
} }
}; };
...@@ -417,6 +427,7 @@ ...@@ -417,6 +427,7 @@
title, title,
set, set,
text, text,
action,
temp = {}, temp = {},
link = undefined, link = undefined,
check = settings.configuration.table.checkbox_rows, check = settings.configuration.table.checkbox_rows,
...@@ -427,6 +438,10 @@ ...@@ -427,6 +438,10 @@
// tickbox - all // tickbox - all
if (check) { if (check) {
// allow to select all records (not only visible)
action = settings.configuration.table.select_all ?
"check_all" : "check_all_visible";
cell = factory.generateElement("th",{},{},{}); cell = factory.generateElement("th",{},{},{});
config = { config = {
"type":"input", "type":"input",
...@@ -439,7 +454,7 @@ ...@@ -439,7 +454,7 @@
"value": "Select All/Unselect All", "value": "Select All/Unselect All",
"data-iconpos":"notext", "data-iconpos":"notext",
"data-reference": settings.base_element.direct.id, "data-reference": settings.base_element.direct.id,
"data-action":"check_all" "data-action": action
}, },
"logic": {} "logic": {}
} }
...@@ -2078,6 +2093,72 @@ ...@@ -2078,6 +2093,72 @@
// always return shortcut to cache of active page // always return shortcut to cache of active page
return ram_cache[active][type]; return ram_cache[active][type];
}; };
/**
* Generate an action object (vs duplicate in every action call
* @method generateActionObject
* @param {object} e Event triggering an action
* @return {object} action object
*/
init.generateActionObject = function (e) {
var element, id;
element = e.target
id = element.getAttribute("data-reference");
return {
"element": element,
"id": id,
"gadget": document.getElementById(id),
"state": ram_cache[init.getActivePageId()].gadgets[id]
};
};
/**
* Highlight checkboxes and set a state on items selected
* @method check
* @param {object} e Event triggering the check action
* @param {boolean} all Boolean determining whether to check all records
*/
init.check = function (e, all) {
var i, j, config, rows, checks, check, checked;
// need to update info_field and status
// all can be true/false or undefined
// TODO: how to get the number of records selected?
// should we check a status of selected records, which must be
// updated whenever a checkbox is clicked, for selected, this would
// be good, but for accessing elements this would be bad...
// when storing in ram_cache is good, because no need to pass around
// during pagechange, however we can't store on the gadget, because
// that would make sense, but would be difficult to handle?
// console.log(ram_cache);
config = init.generateActionObject(e);
rows = config.gadget.getElementsByTagName("TBODY")[0].getElementsByTagName("TR");
checked = config.element.checked;
if (all !== undefined) {
for (i = 0; i < rows.length; i += 1) {
// assume there is only one checkbox in a first cell
checks = rows[i].childNodes[0].getElementsByTagName("INPUT");
if (checks.length > 0) {
check = checks[0];
if (check.type === "checkbox") {
// status is communicated via e
check.checked = checked;
// need to JQM refresh...
$(check).checkboxradio("refresh");
}
}
}
} else {
// single checkbox
}
};
/** /**
* Sort a selection of elements * Sort a selection of elements
* @sort * @sort
...@@ -2087,18 +2168,15 @@ ...@@ -2087,18 +2168,15 @@
* @param {string} next Next icon * @param {string} next Next icon
*/ */
init.sort = function (e, direction, prev, next) { init.sort = function (e, direction, prev, next) {
var element, gadget, state, id, column, i, in_array; var config, column, i, in_array;
element = e.target; config = init.generateActionObject(e);
id = element.getAttribute("data-reference"); column = config.element.getAttribute("data-column-title");
gadget = document.getElementById(id);
state = ram_cache[init.getActivePageId()].gadgets[id];
column = e.target.getAttribute("data-column-title");
// change button right away // change button right away
element.setAttribute("data-direction", direction); config.element.setAttribute("data-direction", direction);
element.setAttribute("data-icon", next); config.element.setAttribute("data-icon", next);
element.className = element.className.replace( config.element.className = config.element.className.replace(
util.filterForClass("ui-icon-" + prev), " ui-icon-" + next util.filterForClass("ui-icon-" + prev), " ui-icon-" + next
); );
...@@ -2108,9 +2186,10 @@ ...@@ -2108,9 +2186,10 @@
init.timer = 0; init.timer = 0;
} }
for (i = 0; i < state.query.sort_on.length; i += 1) { for (i = 0; i < config.state.query.sort_on.length; i += 1) {
if (state.query.sort_on[i][0] === column) { if (config.state.query.sort_on[i][0] === column) {
in_array = true; in_array = true;
current = config.state.query.sort_on[i][1];
break; break;
} }
} }
...@@ -2120,30 +2199,40 @@ ...@@ -2120,30 +2199,40 @@
switch (direction) { switch (direction) {
case "desc_123": case "desc_123":
case "desc_abc": case "desc_abc":
if (column && in_array === undefined) { if (column) {
state.query.sort_on.push([column, "descending"]); if (in_array === undefined) {
config.state.query.sort_on.push([column, "descending"]);
} else {
config.state.query.sort_on.splice(i, 1)
.push([column, "descending"]);
}
} }
break; break;
case "asc_123": case "asc_123":
case "asc_abc": case "asc_abc":
if (column && in_array === undefined) { if (column) {
state.query.sort_on.push([column, "ascending"]); if(in_array === undefined) {
config.state.query.sort_on.push([column, "ascending"]);
} else {
config.state.query.sort_on.splice(i, 1)
.push([column, "ascending"]);
}
} }
break; break;
default: default:
// need to remove a column from sorting when set to undefined // need to remove a column from sorting when set to undefined
if (column && in_array) { if (column && in_array) {
state.query.sort_on.splice(i, 1); config.state.query.sort_on.splice(i, 1);
} }
break; break;
} }
// give user half second to pick his state // give user half second to pick his state
init.timer = window.setTimeout(function () { init.timer = window.setTimeout(function () {
// update gadget // update gadget
init.updatePageElement(element, id, gadget, state); init.updatePageElement(
config.element, config.id, config.gadget, config.state
);
init.timer = 0; init.timer = 0;
}, 500); }, 500);
}; };
...@@ -2156,47 +2245,46 @@ ...@@ -2156,47 +2245,46 @@
* @param {string} value New limit when changing number of records * @param {string} value New limit when changing number of records
*/ */
init.paginate = function (e, type, value) { init.paginate = function (e, type, value) {
var element, gadget, state, id, start, records; var config, start, records;
element = e.target; config = init.generateActionObject(e);
id = element.getAttribute("data-reference");
gadget = document.getElementById(id);
state = ram_cache[init.getActivePageId()].gadgets[id];
if (gadget) { if (config.gadget) {
if (state) { if (config.state) {
switch (type) { switch (type) {
case "first": case "first":
start = 0; start = 0;
records = state.query.limit[1]; records = config.state.query.limit[1];
break; break;
case "next": case "next":
start = state.query.limit[0] + state.query.limit[1]; start = config.state.query.limit[0] + config.state.query.limit[1];
records = state.query.limit[1]; records = config.state.query.limit[1];
break; break;
case "prev": case "prev":
start = state.query.limit[0] - state.query.limit[1]; start = config.state.query.limit[0] - config.state.query.limit[1];
records = state.query.limit[1]; records = config.state.query.limit[1];
break; break;
case "last": case "last":
start = state.total - state.query.limit[1]; start = config.state.total - config.state.query.limit[1];
records = state.query.limit[1]; records = config.state.query.limit[1];
break; break;
case "limit": case "limit":
start = state.query.limit[0]; start = config.state.query.limit[0];
records = parseInt(value); records = parseInt(value);
break; break;
}; };
if (start > state.total || start < 0 ) { if (start > config.state.total || start < 0 ) {
return; return;
} }
// set new limits // set new limits
state.query.limit = [start, records]; config.state.query.limit = [start, records];
// update gadget // update gadget
init.updatePageElement(element, id, gadget, state); init.updatePageElement(
config.element, config.id, config.gadget, config.state
);
} else { } else {
// error // error
throw "No state information stored for this gadget"; throw "No state information stored for this gadget";
...@@ -2211,22 +2299,20 @@ ...@@ -2211,22 +2299,20 @@
* Store a gadget's state in cache * Store a gadget's state in cache
* @method cacheGadgetState * @method cacheGadgetState
* @param {string} id Gadget id * @param {string} id Gadget id
* @param {string} item ID of item currently being displayed
* @param {object} items JIO response with items being displayed
* @param {object} query JIO query parameters to get above item(s) * @param {object} query JIO query parameters to get above item(s)
* @param {string} method Method to generate gadget * @param {string} method Method to generate gadget
* @param {integer} total Total records for this query * @param {integer} total Total records for this query
* @param {array} selected Array of records currently selected
*/ */
init.cacheGadgetState = function (id, item, items, query, total, method) { init.cacheGadgetState = function (id, query, total, method, selected) {
var cache = init.cacheSetup("gadgets"); var cache = init.cacheSetup("gadgets");
// keep status of gadget in cache // keep status of gadget in cache
cache[id] = { cache[id] = {
"item": item,
"items": items,
"query": query, "query": query,
"total": total, "total": total,
"method": method "method": method,
"selected": selected
} }
}; };
...@@ -2270,19 +2356,18 @@ ...@@ -2270,19 +2356,18 @@
items = query_items; items = query_items;
init.cacheGadgetState( init.cacheGadgetState(
id, id,
undefined,
query_items,
state.query, state.query,
state.total, state.total,
state.method state.method,
state.selected
); );
}) })
.then(function () { .then(function () {
// TODO: bad, but how to get the updateable element in gadget? // TODO: bad selector, bad handler
$(gadget.querySelectorAll("[data-update]")[0]) $(factory.map_gadgets[state.method](
.replaceWith(factory.map_gadgets[state.method]( config, items, undefined, state.query, state.total, true
config, items, undefined, state.query, state.total, true ))
)) .replaceAll(gadget.querySelectorAll("[data-update]")[0])
.enhanceWithin(); .enhanceWithin();
}) })
.then(function () { .then(function () {
...@@ -2434,7 +2519,7 @@ ...@@ -2434,7 +2519,7 @@
}) })
.then(function (query_result) { .then(function (query_result) {
items = query_result; items = query_result;
init.cacheGadgetState(gadget_id, item, items, options, total, method); init.cacheGadgetState(gadget_id, options, total, method, undefined);
}) })
.then(function() { .then(function() {
// generate gadget contents // generate gadget contents
......
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