Produits Entr'ouvert » w.c.s.

ça pourrait ressembler à ça.

Render de l'inspect de 2 versions, et comparaison des résultats avec lxml.html.diff.htmldiff.
(dep lxml ajoutée dans le setup et dans debian/control, comme vu sur d'autres modules)

Utilisation de pyquery pour parcourir le résultat des inspect et en sortir les onglets, et les panels.
(je l'ai ajouté dans le setup, ça suffit ?)

Les onglets: pour un workflow, on n'a pas toujours la même liste d'onglets présentée, ça dépend de la config du workflow. Du coup, comparaison des deux listes (v1, v2), et merge des deux (en prenant comme ordering de référence l'ordering des panels associés).

• htmldiff ajoute un "Link: <href>" au texte d'une balise a; nettoyage
• suppression des balises ins/del vides (parce que parfois htmldiff en rajoute entre 2 li, et c'est moche)
• la méthode html de pyquery a tendance à fermer les balises vides: <span/>, <ul/>, <div/>; ce qui peut péter le rendu de la page. Feinte: injecter un espace.

La section des liens directs vers les statuts est délicate en local sur certaine situations ça fait (capture attachée), je serais simplement pour ne pas l'inclure en mode diff.

Je serais presque aussi à ne pas inclure le <div> info nombre de champs, pour éviter le moment où il sera noté que le rendu <ins>2 pages, 6</ins><del>2 pages, 4</del> champs n'est pas optimal, que juste <ins>6</ins><del>4</del> serait mieux.

Pour le rendu des statuts ajoutés/supprimés, avoir juste le <ins> ou <del> marqué ça fait bizarre (et le blanc sur vert manque de contraste), c'est un peu moche parce qu'il faut "annuler" le padding latéral prévu dans un le <h3> mais dans mes tests j'ai un rendu correct avec :

.inspect-tabs h3 {
    del, ins {
        display: block;
        flex: 1;
        color: black;
        margin-left: -1rem;
        margin-right: -0.5rem;
        .inspect-status--colour {
            margin-left: 1rem;
        }
    }
}

Sur un cas où un statut a changé de nom, on a ce rendu avec ta proposition css :/

inspect-diff-status-misplaced.png (sans la modif css proposée): dans certains cas, lxml s'emmêle les pinceaux et place un div.section.status dans un autre alors qu'ils sont sensés être au même niveau dans le dom.

J'ai passé beaucoup de temps dans lxml.html.diff à essayer de comprendre ce qui se passe (un </div> qui saute), à essayer de changer le template workflow-inspect.html pour le feinter, sans résultat.

De désespoir (carrément), j'ai fini par corriger le problème à coup de pyquery:

            for elem in panel.find('div.section.status'):
                d = pq(elem)
                parents = d.parents('div.section.status')
                if parents:
                    pq(parents[0]).after(d.remove())

Et ça fait inspect-diff-result-with-status-color.png
(avec une autre proposition de modif css)

inspect-diff-result.png: la même chose, sans les carrés de couleur pour les statuts (correspond au patch attaché)

Ok go dernière version (sans les carrés et avec le texte coloré plutôt que le fond pour les titres).

commit 451b9a95b58eb8d35d546988e5796a8e962b9cc5
Author: Lauréline Guérin <zebuline@entrouvert.com>
Date:   Fri Jun 24 08:47:23 2022 +0200

    snapshot: compare inspect of 2 versions (#66565)