Commit 98bb3ddd authored by Xiaowu Zhang's avatar Xiaowu Zhang Committed by Klaus Wölfel

erp5_production_planning: improve matrixbox

1. add copy&paste excel
2. show message when copy
3. update total when value change
parent 1d9c63b0
...@@ -14,9 +14,8 @@ ...@@ -14,9 +14,8 @@
.matrixbox_production_planning table tbody td span:last-child input ~ span{ .matrixbox_production_planning table tbody td span:last-child input ~ span{
left: 100px; left: auto;
} }
/* /*
.matrixbox_production_planning table tbody td span:last-child:focus span, .matrixbox_production_planning table tbody td span:last-child:focus span,
.matrixbox_production_planning table tbody td span:last-child:hover span { .matrixbox_production_planning table tbody td span:last-child:hover span {
...@@ -28,6 +27,54 @@ ...@@ -28,6 +27,54 @@
display: inline; display: inline;
} }
.content .field .warning { .content .field .warning,
.content .field .change{
color: #f40; color: #f40;
} }
\ No newline at end of file
.matrixbox_production_planning table tbody td.select span:last-child input{
background-color: #E3EAFA;
}
.matrixbox_production_planning table tbody td.select{
background-color: #aec2f1;
}
.matrixbox_production_planning table .copy{
width: 100%;
}
.matrixbox_production_planning div.notification {
position: fixed;
left:50%;
opacity:0;
top:50%;
text-align: left;
padding: 12pt;
color: #f8fff3;
border-radius: 0.325em;
transform: translate(-50%, -50%);
animation: notification 4s ease-out;
}
.matrixbox_production_planning div.successfully{
background: #37A419;
}
.matrixbox_production_planning div.failed{
background-color: #FF6600;
}
@keyframes notification {
0% {
opacity: 0
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
var matrixbox; var matrixbox;
var sRegExp = new RegExp('(-?[0-9]+)([0-9]{3})');
function format(num) {
// format a number to string, only 1 234 format is supported.
num = num.toString();
while(sRegExp.test(num)) {
num = num.replace(sRegExp, '$1 $2');
}
return num;
}
function parse(str) { function parse(str) {
// parse a string to a number // parse a string to a number
// \s is for opera, others are for chrome / firefox // \s is for opera, others are for chrome / firefox
...@@ -58,7 +50,7 @@ function recalculateSumLine(idx, element) { ...@@ -58,7 +50,7 @@ function recalculateSumLine(idx, element) {
} }
if (v) { sum += v; } if (v) { sum += v; }
} }
jQuery(element).text(format(sum)); jQuery(element).text(sum);
}); });
} }
...@@ -79,7 +71,7 @@ function recalculateSumColumn(idx, element) { ...@@ -79,7 +71,7 @@ function recalculateSumColumn(idx, element) {
} }
if (v) { sum += v; } if (v) { sum += v; }
} }
me.text(format(sum)); me.text(sum);
} }
function addTotalColumnToMatrixBox() { function addTotalColumnToMatrixBox() {
...@@ -96,8 +88,7 @@ function addTotalColumnToMatrixBox() { ...@@ -96,8 +88,7 @@ function addTotalColumnToMatrixBox() {
function addTotalLineColumnToMatrixBox(matrixbox_container) { function addTotalLineColumnToMatrixBox() {
matrixbox = $(matrixbox_container.querySelector('.MatrixContent'));
addTotalLineToMatrixBox(); addTotalLineToMatrixBox();
//addTotalColumnToMatrixBox(); //addTotalColumnToMatrixBox();
//matrixbox.find('.MatrixBoxSumColumn').each(recalculateSumColumn); //matrixbox.find('.MatrixBoxSumColumn').each(recalculateSumColumn);
...@@ -105,6 +96,213 @@ function addTotalLineColumnToMatrixBox(matrixbox_container) { ...@@ -105,6 +96,213 @@ function addTotalLineColumnToMatrixBox(matrixbox_container) {
} }
function listenToInputChange(matrixbox_container) {
var sum_line = $(matrixbox_container.querySelector('.MatrixBoxSumLine')),
td_index,
sum_span,
sum,
previous_value,
actual_value;
$('div.matrixbox_production_planning td input').bind('input', null, function (e) {
var input = $(this);
if (input[0].getAttribute('value') != input[0].value) {
input.addClass('change');
} else {
input.removeClass('change');
}
td_index = $(e.target.parentElement.parentElement).index();
sum_span = sum_line.find('td:eq(' + (td_index) + ') span');
sum = parseInt(sum_span.text());
previous_value = input[0].getAttribute('data-previous-value') || input[0].getAttribute('value');
actual_value = parseInt(input[0].value) || 0;
sum = sum + (actual_value - parseInt(previous_value));
input[0].setAttribute('data-previous-value', actual_value);
sum_span.text(sum);
});
}
function listenToInputPaste(matrixbox_container) {
$('div.matrixbox_production_planning td input').bind('paste', null, function (e) {
var i, j,
input,
td_index = $(e.target.parentElement.parentElement).index(),
tr_index = $(e.target.parentElement.parentElement.parentElement).index();
pasted_value = e.originalEvent.clipboardData.getData('text');
e.stopPropagation();
e.preventDefault();
pasted_value = pasted_value.split('\n');
for (i = 0; i < pasted_value.length; i += 1) {
value_list = pasted_value[i].split(/\s+/);
tr = matrixbox.find('tr:eq(' + (tr_index + i) + ')');
for (j = 0; j < value_list.length; j += 1) {
var input = tr.find('td:eq(' + (td_index+j) + ') input');
if (input[0]){
input[0].value = value_list[j];
input[0].dispatchEvent(new Event('input'));
}
}
}
});
}
function listenToInputCopy(matrixbox_container) {
var initial_td_index = undefined,
initial_tr_index,
tmp_td,
tmp_tr,
tr,
td,
current_td_index,
current_tr_index;
matrixbox.bind('copy', null, function (e) {
var copy_data = "",
separator,
value,
tmp,
line;
e.preventDefault();
e.stopPropagation();
matrixbox.find('tr td.select').each(function( index, element) {
index = $(element.parentElement).index();
// not space, tabulation
separator = '\t';
if (line === undefined) {
line = index;
}
if (line != index) {
separator = '\n';
line = index;
}
tmp = element.querySelector('input');
if (tmp) {
value = tmp.value;
} else {
value = element.innerText.split('\n')[0];
}
if (copy_data) {
copy_data = copy_data + separator + value;
} else {
copy_data = value;
}
});
e.originalEvent.clipboardData.setData('text/plain', copy_data);
notify('Copy Successfully','successfully');
});
$('html').bind('mousedown', null, function (e) {
if (e.buttons == 1) {
matrixbox.find('tr td.select').removeClass('select');
initial_td_index = undefined;
initial_tr_index = undefined;
}
});
$('div.matrixbox_production_planning td').bind('mousedown mouseover', null, function (e) {
if (e.buttons == 1 || e.buttons == 3) {
tmp = e.target;
while(tmp.nodeName !== "TD") {
tmp = tmp.parentElement;
if (tmp.nodeName == 'DIV') {
return;
}
}
current_td_index = $(tmp).index();
current_tr_index = $(tmp.parentElement).index();
matrixbox.find('tr td.select').removeClass('select');
if (initial_td_index === undefined) {
initial_td_index = current_td_index;
initial_tr_index = current_tr_index;
e.stopPropagation();
// for click twice problem
//if (e.target.nodeName !== "INPUT") {
// e.preventDefault();
// }
} else {
var min_tr = initial_tr_index,
max_tr = current_tr_index,
min_td = initial_td_index,
max_td = current_td_index;
if (initial_tr_index > current_tr_index) {
min_tr = current_tr_index;
max_tr = initial_tr_index;
}
if (initial_td_index > current_td_index) {
min_td = current_td_index;
max_td = initial_td_index;
}
for (tmp_tr = min_tr; tmp_tr <= max_tr; tmp_tr += 1) {
tr = matrixbox.find('tr:eq(' + tmp_tr + ')');
for (tmp_td = min_td; tmp_td <= max_td; tmp_td += 1) {
input = tr.find('td:eq(' + tmp_td + ')');
input.addClass('select');
}
}
}
}
});
}
function notify(message, css_class) {
var tmp;
tmp = matrixbox[0].querySelector('div.notification');
if (tmp) {
matrixbox[0].removeChild(tmp);
}
tmp = document.createElement('div');
matrixbox[0].appendChild(tmp);
tmp.className = 'notification ' + css_class;
tmp.innerHTML = message;
}
function addCopyButton(matrixbox_container) {
var td = matrixbox.find("tr:first td:first"),
copy = document.createElement('button');
copy.innerHTML = "Copy Production Planning";
copy.className = 'copy';
td.append(copy);
$(copy).bind('click', null, function (e) {
var element_list,
copy_data = "",
separator,
value,
tmp,
index,
line = undefined;
e.stopPropagation();
e.preventDefault();
matrixbox.find('tr td').each(function( index, element) {
index = $(element.parentElement).index();
// not space, tabulation
separator = '\t';
if (line === undefined) {
line = index;
}
if (line != index) {
separator = '\n';
line = index;
}
tmp = element.querySelector('input');
if (tmp) {
value = tmp.value;
} else {
value = element.innerText.split('\n')[0];
}
if (copy_data) {
copy_data = copy_data + separator + value;
} else {
copy_data = document.querySelector('input[name="field_my_title"]').value;
}
});
navigator.clipboard.writeText(copy_data).then(
function () {
notify('Copy Successfully','successfully');
},
function () {
notify('Copy Failed', 'failed');
});
});
}
var config = { var config = {
childList: true, childList: true,
...@@ -122,8 +320,13 @@ function observe(mutationsList) { ...@@ -122,8 +320,13 @@ function observe(mutationsList) {
if (node.nodeType === Node.ELEMENT_NODE) { if (node.nodeType === Node.ELEMENT_NODE) {
// Make sure matrixbox is fully displayed // Make sure matrixbox is fully displayed
if (node.getAttribute('class') == 'Data footer') { if (node.getAttribute('class') == 'Data footer') {
var matrixbox = document.querySelector('.matrixbox_production_planning'); var matrixbox_container = document.querySelector('.matrixbox_production_planning');
addTotalLineColumnToMatrixBox(matrixbox); matrixbox = $(matrixbox_container.querySelector('.MatrixContent'));
addTotalLineColumnToMatrixBox(matrixbox_container);
listenToInputPaste(matrixbox_container);
listenToInputChange(matrixbox_container);
listenToInputCopy(matrixbox_container);
addCopyButton(matrixbox_container);
observer.disconnect(); observer.disconnect();
} }
} }
......
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