Modifier la disposition tableau (design et dashboard) : suite et fin?

Sur que c’est en cliquant, pas avant ? Je regarderai, j’ai pas mis à jour ma version bêta depuis un moment et j’ai aussi pas mal d’erreurs JS

Pour le drag&drop, ça n’a été implémenté par Phpvarious que pour les lignes. Je ne sais pas bien s’il serait possible d’arriver à savoir si on veut déplacer une ligne ou une colonne :thinking:

C’est bien en cliquant sur les boutons et surtout c’est un ancien tableau ou un tableau créé depuis le dashboard que je modifie.
Dés que le tableau a été sauvé, ca semble fonctionner.

Merci pour ce développement essentiel.
Je l’ai testé dans un virtuel.

  • En 4.5, la première ligne avec les - et les plus est déplaçable vers le bas comme une autre ligne. Ce n’est pas gênant mais ça serait plus esthétique de ne pas pouvoir le faire.
  • Idéalement faire bouger une colonne serait vraiment pas mal … j’ai tendance à en oublier quand je fais un virtuel et c’est galère d’ajouter une colonne et de tout décaler à la main.

Encore merci

Hello

@jpty,
tu peux fournir plus d’infos stp, combien de lignes / colonnes au départ ? je vais essayer de reproduire, car actuellement j’ai une erreur que si je tente de supp la 1ère colonne. une capture d’écran ce serait top.

@Franck_jeedom

Ce sera good, déja ok sur mon dev de test.

Mais la modif de @Bison permet justement de rajouter une colonne ou tu le souhaite !
De toute façon coté code c’est pas possible de jouer avec les colonnes.

Hello :slight_smile:

J’ai essayé de voir comment faire pour que la 1ere ligne ne soit pas prise en compte dans le drag&drop mais j’ai réussi pour le moment. Tu n’aurais pas une idée ?

Oui j’ai déja fait la modif dans mon env de dev, il y a une autre soucis mais moins grave, qui ne génère pas d’erreur.
La fonction new Sortable que je t’ai demandé d’ajouter, na pas été ajouté au bon endroit :grin:, elle ne devrait pas être dans dans le containers.forEach

Voici la correction :

      setTableLayoutSortable: function() {
        // sortable cmds
        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,
          })
        })
        // sortable rows
	    new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
          delay: 50,
          delayOnTouchOnly: true,
          draggable: 'tr:not(:first-child)', //exclude the first row (row for column manage)
          filter: 'input, a',
          preventOnFilter: false,
          direction: 'vertical',
          chosenClass: 'dragSelected',
          onUpdate: function(evt) {
            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
            let row = 1
            tableLayout.querySelectorAll('tr:not(:first-child)').forEach(_cLay => { //exclude the first row (row for column manage)
              let col = 1
              _cLay.querySelectorAll('td').forEach(_td => {
                _td.setAttribute('data-line', row)
                if (is_object(_td.querySelector('.counterReorder'))) {
                  _td.querySelector('span').innerHTML = row
                } else {
                  _td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + row + '::' + col)
                  _td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + row + '::' + col)
                  col++
                }
              })
              row++
            })
          }        
        })
      },

Fallait demander hier :rofl:. Aujourd’hui à part l’erreur JS de suppression de la 1ère colonne, je ne reproduis plus rien.

TypeError: can't access property "appendChild", newTd.querySelector(...) is null

Le week-end était dur (plutôt liquide) , autant dire qu’il ne fallait mieux pas que je mette le nez dans du code :rofl:

2 « J'aime »

Oups !! :neutral_face:

J’ai mis à jour avec ton code, c’est nickel pour les drag&drop, merci :slight_smile:

J’ai aussi, en effet le même soucis en supprimant la 1ere ligne ou 1ere colonne

VM105:226 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at <anonymous>:226:57
    at NodeList.forEach (<anonymous>)
    at Object.applyTableLayout (<anonymous>:202:54)
    at handleDynamicLineColumn (<anonymous>:544:41)
    at HTMLDivElement.<anonymous> (<anonymous>:555:13)

Je cherche le soucis

@Bison ,

pour les erreurs js de suppression 1ère ligne ou 1ère colonne :

dans applyTableLayout

//distribute back cmds into new table

            } else if (_action == 'remove') {
            	if (row >= _row && _row != 0) {         
                  row--
                }
                if (col >= _col && _col != 0) {
                  col--
                }
            }
            newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')

            if (newTd) {
              newTd.querySelector('.cmdLayoutContainer').appendChild(_cLay)
            } else {
              firstTdLayout.appendChild(_cLay)
            }

exemple pour suppression de la 1ère colonne :

                if (col >= _col && _col != 0) {
                  col--
                }

col = 1 donc col-- = 0, dans le DOM la colonne 0 correspond a la partie qui permet d’ajouter/supp des lignes.

J’ai retraivaillé la fin du code comme ceci :

            //newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
            if (is_object(newTd = newTableLayout.querySelector('td[data-line="' + Math.max(row, 1) + '"][data-column="' + Math.max(col, 1) + '"] .cmdLayoutContainer'))) {
              newTd.appendChild(_cLay)
            } else {
              firstTdLayout.appendChild(_cLay)
            }

Edit 1 :

En plus, firstTdLayout, ne doit pas fonctionner non plus depuis que tu as ajouté le td de gestion des colonnes, même si je sais pas comment tomber dans la condition d’ailleur :thinking:

Edit 2 :

Pour résoudre le Edit 1 :

var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')

a remplacer par

var firstTdLayout = newTableLayout.querySelector('tr td > .cmdLayoutContainer')
1 « J'aime »

Merci @Phpvarious, ça fonctionne bien !

1 « J'aime »

si besoin de faire un compare ou copier / coller, j’ai monter une branche avec les modif :

Salut,

J’ai mis à jour le 1er post avec :

  • Les corrections apportées lors des échanges pour les tableaux dans les design
  • Le fichier permettant la même chose pour les tableaux modifiables dans le dashboard
2 « J'aime »

Encore merci, c’est une grosse évolution !

Ça sera intégré à la 4.5 à ça sortie ?

1 « J'aime »

Normalement non, j’ai compris que la 4.5 était figée en terme d’évolution donc ça sera bien plus tard si le PR est accepté. Faudra encore que je l’update mais je me presse pas du coup

1 « J'aime »

Merci de la réponse.
C’est bien dommage car la 4.5 manque d’évolution visible et celle-ci est une vraie avancée.

Arff ! J’avais installé les corrections sur mon install, mais j’ai mis à jour ensuite jeedom vers la version 4.4.20, et les corrections ont été écrasées.
Comme la MaJ a été faite il y a une dizaine de jours, je n’ai plus de sauvegardes pour comparer.

Je crois me rappeler que ca concerne les fichiers eqLogic.configure.php et eqLogic.dashboard.edit.php , dans html/desktop/modal/

Avez-vous une version de ces fichiers compatibles avec la 4.4.20 ?

Désolé, je n’ai pas été prudent ; je ferais attention la prochaine fois, je serais capable d’appliquer moi-même les modifs.

Merci

Les infos sont dans le 1er post

1 « J'aime »

Merci.
J’ai mis en place, c’est tout bon.
Je sauvegarde ces fichiers en dehors du backup, pour éviter une mauvaise surprise lors de la prochaine MaJ de jeedom

Bonsoir

Encore merci pour ce développement essentiel quand on est en pleine évolution de sa domotique.
Question : le Dev est-il compatible 4.5 ?
Peut-on l’intégrer en l’état ?

Merci par avance