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 <noreply@anthropic.com>
2026-09-04 10:40:21 +02:00
parent a5af59a349
commit 8c63c19619
3 changed files with 102 additions and 2 deletions
@@ -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;
@@ -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 <td>.
+      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;
@@ -56,7 +56,7 @@
  <p v-if="loading">Chargement des données…</p>
  <p v-else-if="error" class="figli-error">Erreur de chargement : {{ error }}</p>
  <div v-else class="figli-table-wrap">
-    <table>
+    <table ref="tableEl" @mouseover="onCellHover" @mouseleave="clearColHover">
      <thead>
        <tr>
          <th>Date</th>
@@ -67,12 +67,13 @@
          <th class="amount">Montant TTC</th>
          <th v-for="c in allComptes" :key="c" class="amount compte-col">{{ c }}</th>
          <th class="amount">Écart</th>
+          <th class="actions-col"></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="item in groupedRows" :key="item.key">
          <tr v-if="item.isGroup" class="figli-group-row">
-            <td :colspan="6 + allComptes.length + 1">{{ item.label }} <span class="figli-note">({{ item.count }} lignes)</span></td>
+            <td :colspan="6 + allComptes.length + 2">{{ item.label }} <span class="figli-note">({{ item.count }} lignes)</span></td>
          </tr>
          <tr v-else :class="{'figli-error-row': item.hasError}">
            <td>{{ item.date }}</td>
@@ -83,6 +84,13 @@
            <td class="amount">{{ formatEur(item.montant_ttc) }}</td>
            <td v-for="c in allComptes" :key="c" class="amount compte-col">{{ item.parCompte[c] !== undefined ? formatEur(item.parCompte[c]) : '' }}</td>
            <td class="amount" :class="{'figli-ecart': item.hasError}">{{ item.hasError ? formatEur(item.ecart) : '' }}</td>
+            <td class="actions-col">
+              <button type="button" class="figli-edit-btn" title="Modifier" @click="openEditForm(item.nid)">
+                <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M13.5 3.5l3 3L6 17l-3.5.5.5-3.5L13.5 3.5z" />
+                </svg>
+              </button>
+            </td>
          </tr>
        </template>
      </tbody>
@@ -93,6 +101,7 @@
          <td class="amount">{{ formatEur(footerTotals.montant_ttc) }}</td>
          <td v-for="c in allComptes" :key="c" class="amount compte-col" :class="soldeClass(footerTotals.parCompte[c])">{{ formatEur(footerTotals.parCompte[c]) }}</td>
          <td class="amount" :class="soldeClass(footerTotals.ecart)">{{ formatEur(footerTotals.ecart) }}</td>
+          <td class="actions-col"></td>
        </tr>
      </tfoot>
    </table>