sao2.0/AG_GRID_PROGRESS.md

Avancement du projet AG Grid / SAO

Contexte

Objectif: rendre le client web SAO compatible avec une grille open source gratuite, en commencant par AG Grid Community en JavaScript pur, sans React.

Depot analyse: Sao

Date de cet etat: 2026-03-28

Documents deja crees

• AG_GRID_COMPATIBILITY_ANALYSIS.md
• AG_GRID_PROGRESS.md

Ce qui a ete decouvert dans le projet

Fichiers principaux

• tryton-sao.js: coeur applicatif monolithique, inclut les vues tree
• tryton-sao.css: styles globaux SAO
• index.html: charge les dependances et les fichiers dist en production

Point d'entree des vues

La creation des vues se fait dans:

• tryton-sao.js autour de Sao.View.parse

Le type tree etait instancie directement par:

• new Sao.View.Tree(view_id, screen, xml, children_field)

Cela a ete modifie pour permettre un branchement conditionnel vers une vue AG Grid.

Architecture tree actuelle dans SAO

Les vues tree sont fortement couplees au DOM.

Points importants:

• Sao.View.TreeXMLViewParser parse le XML Tryton et construit les colonnes
• Sao.View.Tree construit directement la table HTML et orchestre le comportement
• Sao.View.Tree.Row construit les <tr> et les <td>
• les Column gerent le rendu des cellules
• EditableTree reutilise les widgets de formulaire pour l'edition inline

Conclusion utile:

• le parsing XML et la logique metier de colonnes sont reutilisables
• le rendu tabulaire natif ne l'est pas tel quel pour une integration propre AG Grid

Comportements SAO importants a ne pas perdre

• screen.current_record
• screen.row_activate()
• screen.order
• screen.search_filter(...)
• selected_records
• get_selected_paths()
• get_expanded_paths()
• colonnes optionnelles
• widgets de colonne speciaux

Ce qui a ete implemente

1. Feature flag

Ajout de:

• Sao.config.use_ag_grid = true

But:

• pouvoir desactiver facilement le POC si besoin

2. Selection conditionnelle du renderer tree

Ajout d'un branchement dans:

• Sao.View.parse

Via:

• Sao.View.get_tree_view(...)

Cette fonction choisit:

• Sao.View.AGGridTree si le contexte est supporte
• sinon retour a Sao.View.Tree

3. Nouvelle vue POC

Ajout de:

• Sao.View.AGGridTree

Etat actuel:

• vise uniquement les vues tree plates
• pas de support children_field
• pas de support edition inline
• pas de drag-and-drop

4. Conditions de support actuelles

Le POC AG Grid ne s'active que si:

• Sao.config.use_ag_grid est actif
• children_field est absent
• la vue n'est pas editable
• AG Grid est charge dans la page

Sinon:

• fallback automatique sur la vue SAO historique

5. Integration HTML/CSS

Dans index.html:

• ajout du script AG Grid Community via CDN
• ajout des feuilles de style AG Grid via CDN
• conservation des chemins de production:
  • dist/tryton-sao.js
  • dist/tryton-sao.css

Dans tryton-sao.css:

• ajout d'un style minimal pour accueillir la grille

6. Fonctions reliees dans le POC

Deja branche:

• affichage d'une grille AG Grid
• mapping basique des colonnes SAO
• mapping des lignes SAO vers rowData
• double clic ligne -> screen.row_activate()
• synchronisation partielle de la selection
• copie des lignes selectionnees
• lecture partielle du tri depuis AG Grid vers screen.order

Ce qui a ete observe lors du premier essai

D'apres le retour utilisateur et la capture:

Fonctionne deja

• affichage general de la grille
• resize des colonnes
• rendu global suffisamment bon pour un premier POC

Probleme observes

1. Les delimitations visuelles entre colonnes ne sont pas visibles

Interpretation:

• surtout un probleme de style / theme

2. La selection de ligne ne fonctionne pas correctement

Observation:

• une petite image etrange apparait a la place de la checkbox

Interpretation probable:

• conflit CSS entre le theme AG Grid et les styles globaux SAO
• ou mauvaise utilisation du checkboxSelection sur la premiere colonne

3. Le tri par colonne est absent ou incomplet

Interpretation probable:

• certaines colonnes ne sont pas effectivement triables dans le columnDef
• ou l'etat de tri est perdu a cause du cycle display()

4. L'ordre manuel des colonnes ne persiste pas

Observation:

• les colonnes peuvent etre inversees
• mais reviennent a l'ordre initial apres un tri / refresh

Interpretation:

• la vue reconstruit les columnDefs a chaque display()
• l'etat local AG Grid n'est pas encore sauvegarde/restaure

Ce qui est normal a ce stade

Pour la phase 1 / POC:

• pas de support arbre
• pas d'edition inline
• pas de drag-and-drop
• style encore tres basique
• persistance de l'etat de colonnes non faite

Ce qui n'est pas considere comme "normal final"

Ces points doivent etre corriges rapidement:

• la fausse checkbox / icone etrange
• le tri incomplet
• la perte d'ordre des colonnes apres refresh

Hypotheses techniques importantes pour la suite

Sur la selection

Le plus probable est qu'il faut:

• utiliser une vraie colonne dediee a la selection
• ou desactiver certains styles globaux SAO qui polluent les controles AG Grid

Sur la persistance des colonnes

Il faudra stocker et restaurer:

• columnState
• ordre des colonnes
• largeur des colonnes
• tri actif

Soit:

• dans l'instance de vue elle-meme
• soit dans un cache SAO proche de tree_states

Sur le tri

Le tri ne doit pas seulement etre visuel.

Il faut conserver la logique metier SAO:

• mettre a jour screen.order
• relancer screen.search_filter(...)
• puis restaurer l'etat de la grille sans perdre l'ordre utilisateur

Plan conseille pour la prochaine session

Passe 2 prioritaire

1. Corriger la colonne de selection AG Grid
2. Ajouter une vraie persistance de columnState
3. Corriger le tri par colonne
4. Ajouter un style leger:
   • separateurs verticaux
   • header plus lisible
   • checkbox visible

Passe 3 ensuite

1. Filtres de colonne
2. Support de plus de types de colonnes speciaux
3. Sommes / footer
4. Eventuelle persistance serveur ou locale des preferences de colonnes

Session du 2026-03-30

Objectif de la session

Faire passer le POC d'un renderer AG Grid "utilisable" a une vraie vue de travail avec:

• persistance de configuration utilisateur
• panneau de colonnes exploitable
• grouping multi-level avec agregations et sous-totaux
• correction des bugs de state qui bloquaient le debug

Ce qui a ete ajoute

1. Persistance de l'etat de grille par user/vue

Le POC memorise maintenant dans localStorage, par base/utilisateur/modele/vue:

• ordre des colonnes
• largeur des colonnes
• visibilite des colonnes
• tri actif
• configuration de grouping

La persistance est reappliquee a l'ouverture de la vue et a chaque display() pour eviter la perte d'etat quand SAO reconstruit la vue.

2. Panneau Columns custom

Le panneau Columns a ete implemente comme un panneau custom, attache au body, et non plus comme un dropdown Bootstrap.

But:

• eliminer les interferences de layout/overflow du socle legacy
• garder un comportement previsible
• permettre un vrai controle de largeur/scroll

Le panneau permet:

• masquer/afficher les colonnes
• synchroniser l'etat avec la logique SAO des colonnes optionnelles quand c'est applicable

3. Harmonisation visuelle

Ajouts/corrections de session:

• harmonisation de la couleur des checkboxes avec accent-color: #145369
• remplacement des icones toolbar Columns et Grouping par des SVG inline plus sobres
• retrait du bouton COPY SELECTED ROWS de la toolbar

4. Grouping V1 cote client

Ajout d'un panneau Grouping avec:

• grouping multi-level
• reordonnancement des niveaux
• suppression d'un niveau
• agregations client-side:
  • sum
  • avg
  • count
  • min
  • max
• affichage optionnel des sous-totaux
• affichage optionnel du grand total
• persistance de l'etat de grouping

Implementation retenue:

• generation de lignes synthetiques group et total dans rowData
• pas de dependance au grouping Enterprise
• comportement borne aux lignes effectivement chargees dans la vue

5. Corrections de bugs importantes pendant l'integration

Les points suivants ont bloque puis ete corriges:

• crash d'initialisation quand this.screen n'etait pas encore pret au chargement du state
• panneau Columns trop etroit tant qu'il dependait du dropdown Bootstrap
• clic sur le bouton de groupe qui ne repliait pas toujours le groupe
• erreurs de selection car les lignes synthetiques group / total n'ont pas de __record
• Remove dans le panneau Grouping qui semblait agir mais ne supprimait pas vraiment le state

Cause cle de ce dernier point:

• jQuery.extend(true, ...) preservait l'ancien contenu des tableaux de state, notamment groupBy

Correction retenue:

• construction explicite du state grouping
• remplacement complet de la propriete grouping dans le state persiste
• eviter les deep-merges pour cette partie

Traces de debug ajoutees

Cette session a confirme qu'il faut instrumenter plus tot les bugs resistants.

Traces ajoutees au fil de la session:

• COLUMNS_MENU_LAYOUT
• COLUMNS_MENU_LAYOUT_FLAT_JSON
• GROUPING_ACTION_FLAT_JSON
• GROUPING_STATE_FLAT_JSON
• GROUPING_PERSISTED_FLAT_JSON
• ROW_DATA_KIND_FLAT_JSON

Lecon importante:

• les traces doivent etre plus frequentes
• elles doivent arriver plus tot dans la boucle de debug
• pour tout partage dans le chat, il faut une variante ..._FLAT_JSON

Etat du POC apres cette session

Le POC couvre maintenant correctement:

• vues tree plates non editables
• selection de lignes
• tri
• filtres popup
• persistance locale du layout utilisateur
• panneau Columns
• grouping multi-level client-side
• agregations
• sous-totaux
• grand total

Les limitations actuelles restent:

• pas de children_field
• pas d'edition inline
• pas de drag-and-drop metier
• agregations calculees uniquement sur les lignes chargees localement

Next steps memorises

Priorite produit logique

1. Presets / bookmarks d'affichage par user/vue

Objectif:

• donner au user plusieurs configurations nommees et choisissables

Contenu d'un preset:

• ordre des colonnes
• largeur des colonnes
• visibilite des colonnes
• tri
• grouping
• agregations
• options d'affichage associees

Important:

• a ce stade, le bookmark SAO existant memorise surtout des filtres/domaines
• il faut probablement separer:
  • bookmark de recherche/metier
  • preset d'affichage grille

2. Ajouter un vrai Reset layout / Reset grouping

3. Ajouter Expand all / Collapse all explicite dans le panneau Grouping

4. Mieux cadrer le rendu des lignes de sous-total et du grand total

5. Mieux diagnostiquer les vues qui restent sur l'ancien tree

Objectif:

• rendre visible la raison du fallback:
  • children_field
  • vue editable
  • AG Grid non charge

Next steps logiques apres grouping et sous-totaux

• presets d'affichage nommes par user/vue
• integration UX plus propre entre bookmark de filtre et preset de grille
• support de plus de colonnes speciales non editables
• footer/indicateurs numeriques plus riches
• export des vues en respectant layout/grouping actif
• instrumentation de fallback plus visible
• ensuite seulement: evaluation d'un grouping/agregation cote backend pour des totaux "vrais" sur tout le dataset filtre

Plus tard

1. Edition inline
2. Tree data
3. Drag-and-drop metier

Fichiers modifies pendant ce travail

• index.html
• tryton-sao.js
• tryton-sao.css

Notes de deploiement

En production:

• index.html reste a la racine
• tryton-sao.js doit etre copie vers ./dist/tryton-sao.js
• tryton-sao.css doit etre copie vers ./dist/tryton-sao.css

Le index.html a ete remis avec les chemins dist/....

Point d'attention environnement local

Dans cette copie locale du depot:

• le dossier dist/ n'existait pas
• node n'etait pas disponible
• git status etait bloque par un probleme safe.directory

Cela n'empeche pas la continuation du travail, mais limite la verification locale automatisee.

Resume ultra court pour reprise rapide

Nous avons un premier POC AG Grid branche sur les vues tree plates non editables, avec fallback automatique vers la vue historique SAO. L'affichage de base fonctionne, mais la selection, le tri et la persistance de l'ordre des colonnes doivent etre corriges dans la prochaine passe.

Derniere session

Depuis ce premier resume, une grosse passe supplementaire a ete faite sur le POC AG Grid.

Ce qui a ete stabilise

• colonne de selection avec checkbox visibles
• tri fonctionnel sans vider la liste quand un filtre local est actif
• popup filtre repositionne sous la bonne colonne
• style du popup rapproche du rendu AG Grid standard
• icones header plus propres
• etat visuel "filtre actif" sur l'icone menu
• gros nettoyage des glyphes parasites lies au vieux CSS SAO

Ce qui a coute du temps

• conflits entre le theme AG Grid et les styles globaux SAO
• pseudo-elements ::before / ::after
• controles radio / checkbox pollues par le theme historique
• corrections visuelles faites trop tot sans dump cible du vrai noeud DOM

Lecture recommandee avant la prochaine session

1. AG_GRID_SESSION_INDEX.md
2. AG_GRID_STYLING_NOTES.md

Resume pratique

Le POC est maintenant beaucoup plus abouti visuellement et fonctionnellement. Le prochain gain de temps viendra surtout d'une meilleure isolation entre AG Grid et le vieux socle CSS SAO, plutot que de nouvelles micro-corrections ponctuelles.

Session du 2026-03-30

Ce qui a ete ajoute

• persistance locale par base/utilisateur/modele/vue de l'etat AG Grid
• panneau Columns custom attache au body
• gestion de la visibilite des colonnes
• memorisation de l'ordre, des largeurs et du tri
• harmonisation visuelle des checkboxes
• suppression du bouton Copy Selected Rows de la toolbar
• nouvelles icones toolbar plus propres pour Columns et Grouping
• panneau Grouping custom attache au body
• grouping multi-level client-side sans dependre d'AG Grid Enterprise
• aggregations client-side:
  • sum
  • avg
  • count
  • min
  • max
• sous-totaux sur lignes de groupe
• total global optionnel
• persistance de l'etat de grouping

Ce qui a demande plusieurs passes

• stabilisation du panneau Columns
• remplacement du dropdown Bootstrap par un panneau custom
• correction du clic sur le bouton expand/collapse des groupes
• correction des merges profonds sur le state grouping
• correction de la synchronisation de selection avec les lignes synthetiques group / total

Ce qu'on a appris aujourd'hui

• pour les panneaux flottants SAO/AG Grid, si le rendu est incoherent mais que les mesures sont bonnes, il faut soupconner le conteneur Bootstrap / stacking context avant le contenu lui-meme
• les tableaux dans le state ne doivent pas etre reconstruits avec jQuery.extend(true, ...) si l'on veut vraiment remplacer leur contenu
• sur ce POC, les lignes synthetiques group / total doivent etre traitees explicitement partout:
  • selection
  • row click
  • row id
  • copy
  • refresh

Discipline de debug a garder

• mettre des traces plus frequentes des qu'un bug resiste a une premiere correction
• produire une variante ..._FLAT_JSON pour toute trace destinee a etre copiee dans le chat
• preferer un log "avant/apres state" plutot qu'un seul snapshot final
• si le probleme touche le rendu, logger aussi:
  • type de lignes envoye a AG Grid
  • largeur/hauteur reelles
  • proprietaire du click

Next steps prioritaires

1. Bookmarks de configuration d'affichage

   • objectif: permettre a l'utilisateur de memoriser plusieurs setups
   • contenu typique:
     • colonnes visibles
     • ordre des colonnes
     • tailles
     • tri
     • grouping
     • aggregations
   • recommandation: ne pas melanger brutalement avec le bookmark SAO actuel qui memorise surtout un filtre
   • meilleure piste: introduire des "bookmarks de vue" ou "presets d'affichage" distincts, puis eventuellement les relier a l'UI bookmark plus tard

2. Reset / gestion des presets

   • bouton Reset Columns
   • bouton Reset Grouping
   • bouton Reset View
   • duplication / renommage / suppression d'un preset

3. Expansion globale du grouping

   • Expand all
   • Collapse all
   • meilleure iconographie de repli/depli

Next steps logiques apres grouping et sous-totaux

• presets nommes de vue par utilisateur
• bookmark de tri et de config au sens "choisir une vue memorisee"
• footer de totaux plus explicite si besoin metier
• support d'autres types de colonnes dans les aggregations
• export des donnees dans la configuration active
• instrumentation claire du fallback vers l'ancien tree
• indicateur visuel de mode:
  • vue AG Grid
  • vue legacy

Point de vigilance pour la prochaine session

• penser a retirer les traces GROUPING_* et ROW_DATA_KIND_* une fois la stabilisation terminee
• conserver cependant le patron de log JSON plat pour les prochains sujets difficiles

Session du 2026-03-31

Ce qui a ete ajoute

• trace de decision renderer:
  • TREE_VIEW_DECISION_FLAT_JSON
• diagnostic de fallback plus riche:
  • useAgGrid
  • hasChildrenField
  • agGridLoaded
  • editable
  • xmlEditable
  • screenReadonly
  • excludeField
  • preValidate
  • hasParentGroup
  • childName
  • parentName
  • selectedRenderer
  • fallbackReason

Garde-fou ajoute sur le fallback

Le POC AG Grid ne doit plus seulement exclure:

• les vues avec children_field
• les vues editable

Il doit aussi exclure les sous-listes embarquees de type relationnel / one2many qui paraissent "plates" mais restent editables par contexte.

Raison de fallback ajoutee:

• embedded_relation_tree

Signaux utilises:

• screen.group.parent
• screen.group.child_name
• screen.exclude_field
• screen.pre_validate

But:

• eviter qu'une sous-liste embarquee comme purchase.line parte en AG Grid alors qu'elle vit en realite dans un contexte de saisie relationnelle

Dark mode V1 safe

Ajout d'une V1 prudente du dark mode, sans toucher aux composants legacy les plus fragiles.

Infrastructure:

• toggle global pres du logo
• persistance locale via localStorage
• attribut html[data-theme-mode="light|dark"]

Zones couvertes:

• topbar globale
• onglets principaux
• menu gauche
• shell principal
• header de filtres modernise
• toolbar de formulaire
• AG Grid
• panneaux Columns / Grouping

Zones volontairement non traitees en profondeur:

• modales complexes
• vieux dropdowns peu maitrises
• widgets speciaux rares

Logo dark

Branchement automatique selon le theme:

• light -> tradon.png
• dark -> tradon-dark.png

Le switch du theme met maintenant aussi a jour le logo sans attendre un nouveau chargement logique.

Ajustements dark mode deja stabilises

• menu gauche:
  • hover/active dark corrige
• shell formulaire:
  • bandeau clair residuel du header corrige
• grille:
  • alternance de lignes plus visible
  • hover et selection plus lisibles
  • checkbox dark custom plus coherente
• toolbar de formulaire:
  • boutons et fond passes en dark

Memo pour la prochaine session

• continuer a garder le dark mode dans un perimetre "safe" tant que les composants les plus fragiles ne sont pas inventories
• si un nouveau bloc reste clair en dark mode, le traiter par zone locale au lieu de surcharger tout le theme global
• si un fallback AG Grid semble anormal, commencer par lire TREE_VIEW_DECISION_FLAT_JSON

Session du 2026-05-04

Sauvegarde Git / repo

• migration du remote Git vers:
  • https://gitea.open-squared.tech/admin/sao2.0.git
• commit de sauvegarde global du travail AG Grid / dark mode / notes
• rappel important d'arborescence:
  • ce repo ne correspond pas exactement a l'arborescence serveur
  • index.html est gere dans le repo parent cote serveur
  • les fichiers effectivement deployes manuellement cote serveur sont surtout dans /dist
  • quand on modifie tryton-sao.js ou tryton-sao.css, penser a synchroniser aussi dist/tryton-sao.js ou dist/tryton-sao.css

Correctif Many2One / icones dans les champs

Probleme observe:

• dans les champs Many2One, le texte chevauchait l'icone primaire "ouvrir le modele lie"
• le symptome etait visible sur des champs comme Party, Payment Term, Currency, From location, To location

Cause:

• la modernisation CSS des inputs dans .screen-container avait casse le padding historique reserve aux icones input-icon-primary / input-icon-secondary
• une premiere correction CSS ne s'appliquait pas car la page a html lang="en" theme="default" mais pas dir="ltr"
• autre point important: index.html charge dist/tryton-sao.js et dist/tryton-sao.css, pas seulement les fichiers racine

Correction stabilisee:

• ajout d'une correction JS dans Sao.View.Form.Many2One
• nouvelle methode:
  • _sync_icon_padding
• appelee depuis display
• elle force le padding gauche/droite de l'input selon les icones visibles
• correction appliquee dans:
  • tryton-sao.js
  • dist/tryton-sao.js

Trace temporaire utile:

• [M2O_ICON_LAYOUT]

Note:

• la trace est volontairement limitee aux premiers champs
• elle pourra etre retiree apres stabilisation definitive de l'UI

Correctif AG Grid grouping restaure

Probleme observe:

• en groupant par un champ Many2One comme Supplier, le grouping fonctionnait pendant la session
• apres fermeture/reouverture de la forme, le panneau Grouping restaurait bien la ligne Supplier
• mais les donnees etaient regroupees comme si les valeurs etaient vides, avec principalement (Empty)

Cause probable confirmee:

• le state de grouping etait restaure avant que les valeurs texte des champs groupants soient chargees
• pour un Many2One, il faut le rec_name
• si la construction de rowData part trop tot, _get_group_key_text retombe sur une valeur vide et cree le groupe (Empty)

Correction:

• ajout de _load_grouping_values
• avant de construire rowData, display attend le chargement des champs presents dans grouping.groupBy
• ensuite seulement la grille reconstruit les lignes groupees
• correction appliquee dans:
  • tryton-sao.js
  • dist/tryton-sao.js

Traces utiles:

• [AGGRID][GROUPING_LOAD_FIELDS_FLAT_JSON]
• [AGGRID][GROUPING_KEYS_FLAT_JSON]

Favicon Trad'on

• ajout d'une icone navigateur Trad'on basee sur le style existant:
  • grand T vert
  • fond carre arrondi bleu petrole / vert
• fichier ajoute:
  • images/tradon-icon.png
• index.html reference deja:
  • images/tradon-icon.png

Point de deploiement:

• comme index.html est dans le repo parent cote serveur, verifier que le fichier images/tradon-icon.png est bien servi au bon chemin relatif
• le cache favicon navigateur peut etre tenace: refresh dur ou vidage cache si besoin

Correctif recherche Many2One / modales de selection

• probleme observe: depuis la nouvelle AG Grid, les fenetres Search ... ouvertes par la loupe des champs Many2One affichaient une grille vide
• exemple: Search Broker depuis un contrat, alors que des party.party de categorie Broker existent bien
• cause: Sao.Window.Search creait une vue tree readonly sans marqueur de contexte, donc le diagnostic AG Grid la prenait pour une liste principale plate
• correctif: les ecrans crees par Sao.Window.Search portent maintenant search_window: true
• Sao.View.AGGridTree.get_support_diagnostics exclut ce contexte avec fallbackReason: search_window
• resultat attendu: les recherches Many2One repassent sur le tree historique, avec selection simple/multiple et search_filter SAO standard

Commits importants

• fc9ab5d Save SAO AG Grid work
• d9292b8 Fix served Many2One icon padding
• d78c9e0 Fix AG Grid restored grouping values
• fb54c32 Add Tradon browser favicon

Memo pour la prochaine session

• ne pas oublier que les changements utiles au serveur doivent souvent toucher dist/
• retirer plus tard les traces temporaires:
  • [M2O_ICON_LAYOUT]
  • [AGGRID][GROUPING_LOAD_FIELDS_FLAT_JSON]
  • [AGGRID][GROUPING_KEYS_FLAT_JSON]
  • les anciennes traces GROUPING_* / ROW_DATA_KIND_* si elles ne sont plus necessaires
• si le grouping restaure retombe encore sur (Empty), lire d'abord:
  • GROUPING_LOAD_FIELDS_FLAT_JSON
  • GROUPING_KEYS_FLAT_JSON
• si une correction visuelle semble inactive, verifier d'abord quel fichier est charge par index.html et si dist/ a ete synchronise