Merge pull request #2782 from jeedom/patch-allow-resizable-table

fix #2499
jeedom · Aug 1, 2024 · 6ff5e7e · 6ff5e7e
2 parents 61c8e5c + af24348
commit 6ff5e7e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/desktop/common/js/utils.js b/desktop/common/js/utils.js
@@ -1149,6 +1149,75 @@ jeedomUtils.initDataTables = function(_selector, _paging, _searching,_init) {
   })
 }
 
+jeedomUtils.resizableTable = function(table) {
+  var row = table.getElementsByTagName('tr')[0],
+  cols = row ? row.children : undefined;
+  if (!cols) return;
+  table.style.overflow = 'hidden';
+  var tableHeight = table.offsetHeight;
+  for (var i=0;i<cols.length;i++){
+   var div = createDiv(tableHeight);
+   cols[i].appendChild(div);
+   cols[i].style.position = 'relative';
+   setListeners(div);
+  }
+  function setListeners(div){
+   var pageX,curCol,nxtCol,curColWidth,nxtColWidth;
+   div.addEventListener('mousedown', function (e) {
+    curCol = e.target.parentElement;
+    nxtCol = curCol.nextElementSibling;
+    pageX = e.pageX; 
+    var padding = paddingDiff(curCol);
+    curColWidth = curCol.offsetWidth - padding;
+    if (nxtCol)
+     nxtColWidth = nxtCol.offsetWidth - padding;
+   });
+   div.addEventListener('mouseover', function (e) {
+    e.target.style.borderRight = '2px solid var(--logo-primary-color)';
+   })
+   div.addEventListener('mouseout', function (e) {
+    e.target.style.borderRight = '';
+   })
+   document.addEventListener('mousemove', function (e) {
+    if (curCol) {
+     var diffX = e.pageX - pageX;
+     if (nxtCol)
+      nxtCol.style.width = (nxtColWidth - (diffX))+'px';
+     curCol.style.width = (curColWidth + diffX)+'px';
+    }
+   });
+   document.addEventListener('mouseup', function (e) { 
+    curCol = undefined;
+    nxtCol = undefined;
+    pageX = undefined;
+    nxtColWidth = undefined;
+    curColWidth = undefined
+   });
+  }
+  function createDiv(height){
+   var div = document.createElement('div');
+   div.style.top = 0;
+   div.style.right = 0;
+   div.style.width = '5px';
+   div.style.position = 'absolute';
+   div.style.cursor = 'col-resize';
+   div.style.userSelect = 'none';
+   div.style.height = height + 'px';
+   return div;
+  }
+  function paddingDiff(col){
+   if (getStyleVal(col,'box-sizing') == 'border-box'){
+    return 0;
+   }
+   var padLeft = getStyleVal(col,'padding-left');
+   var padRight = getStyleVal(col,'padding-right');
+   return (parseInt(padLeft) + parseInt(padRight));
+  }
+  function getStyleVal(elm,css){
+   return (window.getComputedStyle(elm, null).getPropertyValue(css))
+  }
+};
+
 
 jeedomUtils.initHelp = function() {
   document.querySelectorAll('.help').forEach(element => {

diff --git a/desktop/modal/dataStore.management.php b/desktop/modal/dataStore.management.php
@@ -131,6 +131,7 @@
             paging: false,
             searchable: true,
           })
+          jeedomUtils.resizableTable(document.getElementById('table_dataStore'));
         }
       })
     },

diff --git a/docs/fr_FR/changelog.md b/docs/fr_FR/changelog.md
@@ -24,6 +24,8 @@
 - Amélioration des sous types de commandes supportées sur les génériques type [LIEN](https://github.com/jeedom/core/pull/2797)
 - Correction d'un bug sur l'affichage des scénario et les commentaires lorsqu'on veut les masquer [LIEN](https://github.com/jeedom/core/pull/2790)
 
+- Possibilité de rendre les colonnes des tableaux redimmensionnable (seulement la liste des variables pour le moment ca sera étendu à d'autre table si besoin) [text](https://github.com/jeedom/core/issues/2499)
+
 >**IMPORTANT**
 >
 > Tout changement de moteur de cache entraine une remise a zéro de celui-ci il faut donc attendre ensuite que les modules renvoient les informations pour tout retrouver