# 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`
