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
Chargement des données…
Erreur de chargement : {{ error }}
| Date | @@ -67,12 +67,13 @@Montant TTC | {{ c }} | Écart | +|
|---|---|---|---|---|
| {{ item.label }} ({{ item.count }} lignes) | +{{ item.label }} ({{ item.count }} lignes) | |||
| {{ item.date }} | @@ -83,6 +84,13 @@{{ formatEur(item.montant_ttc) }} | {{ item.parCompte[c] !== undefined ? formatEur(item.parCompte[c]) : '' }} | {{ item.hasError ? formatEur(item.ecart) : '' }} | ++ + | {{ formatEur(footerTotals.montant_ttc) }} | {{ formatEur(footerTotals.parCompte[c]) }} | {{ formatEur(footerTotals.ecart) }} | +