Modifier la disposition tableau (suite)

Phpvarious · Juin 18, 2025, 8:52

Bonsoir,

Pour faire suite a ce thread :

@Bison ,
J’avoue que je n’ai pas encore eu le temps de tester ta modif , mais c’est vrai qu’il y a quelques temps, j’avais déja réfléchi a apporter une solution pour améliorer l’UI de cette partie du core. Mais le Nemo que je suis, a faire 3 tours de son bocal et …

J’ai quand même quelques chose de très simple, mais qui améliorerai considérablement l’UI : le drag en drop direct d’une ligne.

Je pense que cela peut être complémentaire a ta modif., ce que je te propose si tu veut bien, c’est que tu test les 2 modifs réunis, et si concluant je te laisserai le merge dans ton PR existant.

Voici la très grosse modif a apporter

github.com

jeedom/core/blob/alpha/desktop/modal/eqLogic.configure.php#L662-L672


      
          let containers = document.querySelectorAll('#md_eqLogicConfigure #tableCmdLayoutConfiguration tbody td .cmdLayoutContainer')
          containers.forEach(_container => {
            new Sortable(_container, {
              delay: 100,
              delayOnTouchOnly: true,
              group: 'cmdLayoutContainer',
              draggable: '.cmdLayout',
              filter: 'a, input, textarea',
              preventOnFilter: false,
            })
          })

Après la ligne 672 ajout de :

        new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
          delay: 50,
          delayOnTouchOnly: true,
          draggable: 'tr',
          filter: 'input',
          preventOnFilter: false,
          direction: 'vertical',
          chosenClass: 'dragSelected',
          onUpdate: function(evt) {
            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
            var i_tr = 1
            tableLayout.querySelectorAll('tr').forEach(_cLay => {
              var i_td = 1
              _cLay.querySelectorAll('td').forEach(_td => {
                _td.setAttribute('data-line', i_tr)
                _td.querySelectorAll('input')[0].setAttribute('data-l3key', 'text::td::' + i_tr + '::' + i_td)
                _td.querySelectorAll('input')[1].setAttribute('data-l3key', 'style::td::' + i_tr + '::' + i_td)
                i_td++
              })
              i_tr++
            })
          }
        })

Et… c’est tout

Résultat :
eqLogic.configure

testé en 4.4 et 4.5

EDIT :

Ce même code peut aussi être inséré dans l’autre modal qui gère aussi la disposition tableau :

github.com

jeedom/core/blob/alpha/desktop/modal/eqLogic.dashboard.edit.php#L521-L530


      
          Sortable.create(document.getElementById('div_eqLogicCmds'), {
            delay: 100,
            delayOnTouchOnly: true,
            draggable: 'div.cmdConfig',
            filter: 'a, input, textarea, table',
            preventOnFilter: false,
            direction: 'vertical',
            removeCloneOnHide: true,
            chosenClass: 'dragSelected',
          })

Après la ligne 530.

Bison · Juin 18, 2025, 8:59

Hello @Phpvarious,

Ah, sympa en effet.

J’ai modifié le code depuis le post afin de rendre les choses encore plus facile avec des boutons plutôt que des inputs mais tu as du voir ça.

Je rajoute ton code demain matin sur ma version de test pour valider que l’ensemble marche bien et je te dis ça.

Je ne sais pas si je pourrais modifier pour refaire un commit à ce stade mais j’essaierai.

Merci

rom.jou · Juin 18, 2025, 10:14

Salut à tous les deux.
Question bête que j’ai peut être ratée : pourquoi ne traiter que les lignes et pas les colonnes ?

Phpvarious · Juin 19, 2025, 5:16

Hello,

Parce qu’il faut trouver le code pour faire ca

Phpvarious · Juin 19, 2025, 5:18

J’ai jeté un œil ce matin, il faut modifier mon code, car dans ta modif. tu as ajouté un td, donc mon code modifié :

        new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
          delay: 50,
          delayOnTouchOnly: true,
          draggable: 'tr',
          filter: 'input',
          preventOnFilter: false,
          direction: 'vertical',
          chosenClass: 'dragSelected',
          onUpdate: function(evt) {
            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
            var i_tr = 1
            tableLayout.querySelectorAll('tr').forEach(_cLay => {
              var i_td = 1
              _cLay.querySelectorAll('td').forEach(_td => {
                _td.setAttribute('data-line', i_tr)
                if (is_object(_td.querySelector('span'))) {
                  _td.querySelector('span').innerHTML = i_tr
                } else {
                  _td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + i_tr + '::' + i_td)
                  _td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + i_tr + '::' + i_td)
                  i_td++
                }
              })
              i_tr++
            })
          }
        })

Edit :

J’ai aussi remarqué une erreur qui apparait sur ton code lorsque tu as une seul ligne et que tu tente de la supprimer.

Bison · Juin 19, 2025, 5:37

Hello,

Alors je viens de tester mais ça fonctionne pas bien, ça détruit des valeurs (le nom des commandes) au moment de relâcher le clic souris mais je n’ai pas encore pris le temps de savoir quoi/comment/pourquoi

Ah … mince possible j’ai pas pensé à ce cas

Bison · Juin 19, 2025, 5:48

Je suis souvent tombé dans des cas ou je devais modifier mes lignes mais pas les colonnes personnellement. Et le cas soulevé par vmath54 il y a quelques jours étaient aussi celui-ci du coup je n’ai regardé que pour traiter ce cas de figure.

C’est surement possible (quoi que je vois au moins un problème avec ce que j’avais fais). Du coup on garde ça en tête. On va déjà tenter de voir pour faire en sorte que mon code + celui de Phpvarious fonctionne parce que en l’état ça casse tout

Faut que je file donc pas le temps de m’y remettre avant ce soir

Phpvarious · Juin 19, 2025, 6:03

J’ai ciblé le problème, je regarde en fin de journée.

rennais35000 · Juin 19, 2025, 6:50

Bonjour,
Moi je n’ai rien à rajouter au code mais juste un petit mot pour dire à Bison et Phpvarious que bien entendu j’admire vos compétences et que vos interventions sont toujours humble et cordiale, tout à fait dans le style des gens que j’apprécie.
C’est avec des personnes comme vous que j’aimerai prendre l’apéro un jour.

Phpvarious · Juin 19, 2025, 8:51

On aurait presque pu le WE dernier, j’étais au parc expo de rennes pour une compétition de mon fils

rennais35000 · Juin 19, 2025, 9:05

Ah Jeedom, une sacré « Gymnastique »
Tu aurais poussé 20 kms de plus au sud et c’était chez moi.
Pendant que vous faisiez de la gym, nous c’était le Super Motard.

Phpvarious · Juin 19, 2025, 1:31

Bon je pense que c’est bon,

En partant de ta PR :

github.com

jeedom/core/blob/2f84d296543404f1b8229b1553ed9ae341edd2f6/desktop/modal/eqLogic.configure.php#L441


      
          }
                            
          
          $getDisplayDasboardNbLine = $eqLogic->getDisplay('layout::dashboard::table::nbLine', 1);
          $getDisplayDasboardNbColumn = $eqLogic->getDisplay('layout::dashboard::table::nbColumn', 1);
          
          for ($i = 1; $i <= $getDisplayDasboardNbLine; $i++) {
            $tr = '<tr>';
            $tr .= '<td data-line="' . $i . '" data-column="0" style="text-align: center; width: 70px;">';
            $tr .= '<a class="bt_removeRow"  style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>';
            $tr .= $i;
            $tr .= '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>';
            $tr .= '</td>';
            for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
              $tr .= '<td data-line="' . $i . '" data-column="' . $j . '">';
              $string_cmd = '<div class="cmdLayoutContainer text-center" style="min-height:30px;">';
              if (isset($table[$i][$j]) && count($table[$i][$j]) > 0) {
                foreach ($table[$i][$j] as $cmd) {
                  $string_cmd .= '<span class="label label-default cmdLayout cursor" data-cmd_id="' . $cmd->getId() . '" style="margin:2px;">' . $cmd->getName() . '</span>';
                }
              }

L441 à remplacer par

                    $tr .= '<span class="counterReorder">' . $i . '</span>';

Puis :

github.com

jeedom/core/blob/2f84d296543404f1b8229b1553ed9ae341edd2f6/desktop/modal/eqLogic.configure.php#L708


      
          //build new table:
          var newTableLayout = document.createElement('table')
          newTableLayout.addClass('table table-condensed')
          newTableLayout.setAttribute('id', 'tableCmdLayoutConfiguration')
          newTableLayout.appendChild(document.createElement('tbody'))
          
          for (i = 1; i <= nbRow; i++) {
            var newTr = document.createElement('tr')
            let newFirstCol = '<td data-line="' + i + '" data-column="0" style="text-align: center; width: 75px;">'
            newFirstCol += '<a class="bt_removeRow" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'
            newFirstCol += i
            newFirstCol += '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>'
            newFirstCol += '</td>'
            newTr.insertAdjacentHTML('beforeend', newFirstCol)
                        
            for (j = 1; j <= nbColumn; j++) {
              newTd = jeeFrontEnd.md_eqLogicConfigure.getNewLayoutTd(i, j)
              newTr.insertAdjacentHTML('beforeend', newTd)
            }
            newTableLayout.tBodies[0].appendChild(newTr)

L708 à remplacer par

            newFirstCol += '<span class="counterReorder">' + i + '</span>'

Ensuite mon code a inserer après la ligne 679 :

        new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
          delay: 50,
          delayOnTouchOnly: true,
          draggable: 'tr',
          filter: 'input, a',
          preventOnFilter: false,
          direction: 'vertical',
          chosenClass: 'dragSelected',
          onUpdate: function(evt) {
            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
            var i_tr = 1
            tableLayout.querySelectorAll('tr').forEach(_cLay => {
              var i_td = 1
              _cLay.querySelectorAll('td').forEach(_td => {
                _td.setAttribute('data-line', i_tr)
                if (is_object(_td.querySelector('.counterReorder'))) {
                  _td.querySelector('span').innerHTML = i_tr
                } else {
                  _td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + i_tr + '::' + i_td)
                  _td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + i_tr + '::' + i_td)
                  i_td++
                }
              })
              i_tr++
            })
          }
        })

vmath54 · Juin 19, 2025, 1:55

Bravo à vous deux, et merci.

J’ai pas mal utilisé la proposition de Bison, qui ne date pourtant que d’une semaine. J’hésitais auparavant à utiliser le mode tableau, car c’était trop compliqué ensuite à modifier.

Avec vos nouvelles modifs, ca va être un vrai jeu d’enfant