erp5_production_planning: improve matrixbox

1. add copy&paste excel
2. show message when copy
3. update total when value change

bt5/erp5_production_planning/SkinTemplateItem/portal_skins/erp5_production_planning/production_planning.css.css

@@ -14,9 +14,8 @@
 
 
 .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:hover span {
@@ -28,6 +27,54 @@
   display: inline;
 }
 
-.content .field .warning {
+.content .field .warning,
+.content .field .change{
   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;
+  }
+}
+

bt5/erp5_production_planning/SkinTemplateItem/portal_skins/erp5_production_planning/production_planning.js.js

 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) {
   // parse a string to a number
   // \s is for opera, others are for chrome / firefox
@@ -58,7 +50,7 @@ function recalculateSumLine(idx, element) {
       }
       if (v) { sum += v; }
     }
-    jQuery(element).text(format(sum));
+    jQuery(element).text(sum);
    });
 }
 
@@ -79,7 +71,7 @@ function recalculateSumColumn(idx, element) {
     }
     if (v) { sum += v; }
   }
-  me.text(format(sum));
+  me.text(sum);
 }
 
 function addTotalColumnToMatrixBox() {
@@ -96,8 +88,7 @@ function addTotalColumnToMatrixBox() {
 
 
 
-function addTotalLineColumnToMatrixBox(matrixbox_container) {
-  matrixbox = $(matrixbox_container.querySelector('.MatrixContent'));
+function addTotalLineColumnToMatrixBox() {
   addTotalLineToMatrixBox();
   //addTotalColumnToMatrixBox();
   //matrixbox.find('.MatrixBoxSumColumn').each(recalculateSumColumn);
@@ -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 = {
   childList: true,
@@ -122,8 +320,13 @@ function observe(mutationsList) {
         if (node.nodeType === Node.ELEMENT_NODE) {
           // Make sure matrixbox is fully displayed
           if (node.getAttribute('class') == 'Data footer') {
-             var matrixbox = document.querySelector('.matrixbox_production_planning');
-            addTotalLineColumnToMatrixBox(matrixbox);
+            var matrixbox_container = document.querySelector('.matrixbox_production_planning');
+            matrixbox = $(matrixbox_container.querySelector('.MatrixContent'));
+            addTotalLineColumnToMatrixBox(matrixbox_container);
+            listenToInputPaste(matrixbox_container);
+            listenToInputChange(matrixbox_container);
+            listenToInputCopy(matrixbox_container);
+            addCopyButton(matrixbox_container);
             observer.disconnect();
           }
         }