Files
sao2.0/AG_GRID_PROGRESS.md

705 lines
19 KiB
Markdown

# 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](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_SESSION_INDEX.md)
2. [AG_GRID_STYLING_NOTES.md](c:\DataS\OpenSquared\Tradon\Source\Sao\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`