From 8c63c1961973e62def1ebac369ee3af434210695 Mon Sep 17 00:00:00 2001 From: bach Date: Fri, 4 Sep 2026 10:40:21 +0200 Subject: [PATCH] Add per-row edit button and paired column highlight to /lignes Pencil icon opens the existing node edit form in the same AJAX modal as "+ Ajouter une ligne" -- no new form logic, reuses the form_alter validation/close-on-save already in place for the add form. Column highlight pairs with the existing row hover (from Gin's global table CSS) to form a crosshair. Column position is computed logically (accounting for colspan) rather than via DOM cellIndex, since the totals row's label cell spans 4 columns and would otherwise misalign every column after it. Co-Authored-By: Claude Sonnet 5 --- .../custom/figli_compta_ledger/css/home.css | 37 +++++++++++++ .../custom/figli_compta_ledger/js/home.js | 54 +++++++++++++++++++ .../templates/figli-compta-home.html.twig | 13 ++++- 3 files changed, 102 insertions(+), 2 deletions(-) diff --git a/web/modules/custom/figli_compta_ledger/css/home.css b/web/modules/custom/figli_compta_ledger/css/home.css index 2ed5fd6..25f3107 100644 --- a/web/modules/custom/figli_compta_ledger/css/home.css +++ b/web/modules/custom/figli_compta_ledger/css/home.css @@ -9,6 +9,7 @@ --figli-border: #dcdee2; --figli-error: #c9312b; --figli-positive: #1a7f37; + --figli-col-hover: rgba(15, 23, 42, 0.05); font-family: Inter, -apple-system, sans-serif; margin: 1rem 0; @@ -23,6 +24,7 @@ html.gin--dark-mode #figli-home-app { --figli-border: #3d3e42; --figli-error: #ff6b6b; --figli-positive: #4ade80; + --figli-col-hover: rgba(255, 255, 255, 0.07); } #figli-home-app .figli-toolbar { @@ -165,6 +167,15 @@ html.gin--dark-mode #figli-home-app { font-weight: 700; } +/* Column highlight to pair with the row hover, forming a crosshair over + the hovered cell. box-shadow (not background) so it layers on top of + whatever the cell already has -- sticky header/footer backgrounds, + error-row outlines -- instead of overwriting them. */ +#figli-home-app td.figli-col-hover, +#figli-home-app th.figli-col-hover { + box-shadow: inset 0 0 0 9999px var(--figli-col-hover); +} + #figli-home-app .figli-badge { display: inline-block; padding: 0.1rem 0.45rem; @@ -187,6 +198,32 @@ html.gin--dark-mode #figli-home-app { font-size: 0.75rem; } +#figli-home-app td.actions-col, +#figli-home-app th.actions-col { + width: 1%; + text-align: center; +} + +#figli-home-app .figli-edit-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.6rem; + height: 1.6rem; + padding: 0; + background: transparent; + border: 1px solid transparent; + border-radius: 4px; + color: var(--figli-text-light); + cursor: pointer; +} + +#figli-home-app .figli-edit-btn:hover { + background: var(--figli-bg-alt); + border-color: var(--figli-border); + color: var(--figli-text); +} + #figli-home-app .figli-error { background: #fde8e8; border: 1px solid #f4a3a3; diff --git a/web/modules/custom/figli_compta_ledger/js/home.js b/web/modules/custom/figli_compta_ledger/js/home.js index cbd8567..0d08e8a 100644 --- a/web/modules/custom/figli_compta_ledger/js/home.js +++ b/web/modules/custom/figli_compta_ledger/js/home.js @@ -71,6 +71,7 @@ const ecart = montantHt !== null ? Math.round((montantHt - somme) * 100) / 100 : 0; rows.push({ id: node.id, + nid: attrs.drupal_internal__nid, date: attrs.field_date_ligne, type: attrs.field_type_ligne, client: clientTerm ? clientTerm.attributes.name : null, @@ -100,6 +101,7 @@ filterYear: '', groupBy: 'month', onlyErrors: false, + hoverCol: null, }; }, computed: { @@ -186,6 +188,58 @@ progress: { type: 'throbber' }, }).execute(); }, + openEditForm(nid) { + Drupal.ajax({ + url: '/node/' + nid + '/edit', + dialogType: 'modal', + dialog: { width: 800, title: 'Modifier la ligne comptable' }, + progress: { type: 'throbber' }, + }).execute(); + }, + onCellHover(evt) { + const cell = evt.target.closest('td, th'); + if (!cell) return; + // Logical column position, not DOM sibling index: the totals row's + // first cell has colspan="4", which shifts every cell.cellIndex + // after it out of alignment with the body rows. + const index = this.logicalColIndex(cell); + if (index === this.hoverCol) return; + this.setColHover(index); + }, + clearColHover() { + this.setColHover(null); + }, + logicalColIndex(cell) { + let index = 0; + let sib = cell.previousElementSibling; + while (sib) { + index += sib.colSpan || 1; + sib = sib.previousElementSibling; + } + return index; + }, + // Whole-column highlight (header + body + footer) to pair with the + // row hover: plain DOM class toggling rather than a Vue-bound class + // per cell, since the column count/order is fixed markup here, not + // data-driven -- no need to thread an index through every . + setColHover(index) { + const table = this.$refs.tableEl; + if (!table) return; + table.querySelectorAll('.figli-col-hover').forEach((el) => el.classList.remove('figli-col-hover')); + this.hoverCol = index; + if (index === null) return; + table.querySelectorAll('tr').forEach((tr) => { + let pos = 0; + for (const cell of tr.children) { + const span = cell.colSpan || 1; + if (index >= pos && index < pos + span) { + cell.classList.add('figli-col-hover'); + break; + } + pos += span; + } + }); + }, async load() { this.loading = true; this.error = null; diff --git a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig index f286115..f47560c 100644 --- a/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig +++ b/web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig @@ -56,7 +56,7 @@

Chargement des données…

Erreur de chargement : {{ error }}

- +
@@ -67,12 +67,13 @@ + @@ -93,6 +101,7 @@ +
DateMontant TTC {{ c }} Écart
{{ formatEur(footerTotals.montant_ttc) }} {{ formatEur(footerTotals.parCompte[c]) }} {{ formatEur(footerTotals.ecart) }}