Simplify /lignes row indicators: drop redundant link button and écart outline
- Remove the left-side link button (actions-col) -- the link status badge already does the same thing (view linked entrées, or open the link form when unlinked), so the button was pure duplication. - Remove the red row outline on écart lines -- the Écart column itself (bold red text) already flags it, no need for a second row-level cue. - Hide the link status badge specifically on "Hébergement" lines (both the main table and the drill-down modal) -- reconciliation math is untouched (hébergement sorties still count toward other rows' totals), this only suppresses the badge on hébergement's own row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -267,29 +267,14 @@ html.gin--dark-mode #figli-home-app {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Error rows: a thin red outline around the row, not a background fill --
|
/* Écart is called out by the Écart column itself (bold red, see
|
||||||
easier to read, doesn't fight with dark mode. */
|
.figli-ecart below) -- no separate row-level treatment needed. */
|
||||||
#figli-home-app tr.figli-error-row td {
|
|
||||||
border-top: 1px solid var(--figli-error);
|
|
||||||
border-bottom: 1px solid var(--figli-error);
|
|
||||||
}
|
|
||||||
#figli-home-app tr.figli-error-row td:first-child {
|
|
||||||
border-left: 1px solid var(--figli-error);
|
|
||||||
}
|
|
||||||
#figli-home-app tr.figli-error-row td:last-child {
|
|
||||||
border-right: 1px solid var(--figli-error);
|
|
||||||
}
|
|
||||||
|
|
||||||
#figli-home-app td.figli-ecart {
|
#figli-home-app td.figli-ecart {
|
||||||
color: var(--figli-error);
|
color: var(--figli-error);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Signalé rows: a thick amber accent bar on the left edge, deliberately
|
/* Signalé rows: a thick amber accent bar on the left edge. */
|
||||||
a different technique from the error row's thin all-around border
|
|
||||||
above (box-shadow, not border) -- so a row that's both in écart *and*
|
|
||||||
signalée shows both indicators at once instead of one overwriting the
|
|
||||||
other's border-left. */
|
|
||||||
#figli-home-app tr.figli-flag-row td:first-child {
|
#figli-home-app tr.figli-flag-row td:first-child {
|
||||||
box-shadow: inset 4px 0 0 var(--figli-warning);
|
box-shadow: inset 4px 0 0 var(--figli-warning);
|
||||||
}
|
}
|
||||||
@@ -403,8 +388,7 @@ html.gin--dark-mode #figli-home-app {
|
|||||||
table cell breaks the table's own column-width calculation (observed:
|
table cell breaks the table's own column-width calculation (observed:
|
||||||
a ~55px gap opening up between this column and the next, and the
|
a ~55px gap opening up between this column and the next, and the
|
||||||
buttons rendering outside their cell's actual boundary). */
|
buttons rendering outside their cell's actual boundary). */
|
||||||
#figli-home-app .figli-edit-btn,
|
#figli-home-app .figli-edit-btn {
|
||||||
#figli-home-app .figli-link-btn {
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -419,17 +403,12 @@ html.gin--dark-mode #figli-home-app {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
#figli-home-app .figli-edit-btn:hover,
|
#figli-home-app .figli-edit-btn:hover {
|
||||||
#figli-home-app .figli-link-btn:hover {
|
|
||||||
background: var(--figli-bg-alt);
|
background: var(--figli-bg-alt);
|
||||||
border-color: var(--figli-border);
|
border-color: var(--figli-border);
|
||||||
color: var(--figli-text);
|
color: var(--figli-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
#figli-home-app .figli-link-btn.is-linked {
|
|
||||||
color: #3b6fe0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Reconciliation badge on entrée rows: répartition (money owed) vs the
|
/* Reconciliation badge on entrée rows: répartition (money owed) vs the
|
||||||
combined répartition of every linked sortie (money actually paid out). */
|
combined répartition of every linked sortie (money actually paid out). */
|
||||||
#figli-home-app .figli-recon-badge {
|
#figli-home-app .figli-recon-badge {
|
||||||
|
|||||||
@@ -106,7 +106,6 @@
|
|||||||
<table ref="tableEl" @mouseover="onCellHover" @mouseleave="clearColHover">
|
<table ref="tableEl" @mouseover="onCellHover" @mouseleave="clearColHover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="actions-col"></th>
|
|
||||||
<th class="actions-col"></th>
|
<th class="actions-col"></th>
|
||||||
<th>Date</th>
|
<th>Date</th>
|
||||||
<th>Client</th>
|
<th>Client</th>
|
||||||
@@ -122,30 +121,15 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr ref="topSentinel" class="figli-sentinel-row">
|
<tr ref="topSentinel" class="figli-sentinel-row">
|
||||||
<td :colspan="8 + allComptes.length + 3">
|
<td :colspan="7 + allComptes.length + 3">
|
||||||
<span v-if="loadingOlder">Chargement des mois précédents…</span>
|
<span v-if="loadingOlder">Chargement des mois précédents…</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<template v-for="item in groupedRows" :key="item.key">
|
<template v-for="item in groupedRows" :key="item.key">
|
||||||
<tr v-if="item.isGroup" class="figli-group-row" :data-year="item.year">
|
<tr v-if="item.isGroup" class="figli-group-row" :data-year="item.year">
|
||||||
<td :colspan="8 + allComptes.length + 3">{{ item.label }} <span class="figli-note">({{ item.count }} lignes)</span></td>
|
<td :colspan="7 + allComptes.length + 3">{{ item.label }} <span class="figli-note">({{ item.count }} lignes)</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-else :class="{'figli-error-row': item.hasError, 'figli-flag-row': item.hasFlag}" :data-year="item.date ? item.date.slice(0, 4) : null">
|
<tr v-else :class="{'figli-flag-row': item.hasFlag}" :data-year="item.date ? item.date.slice(0, 4) : null">
|
||||||
<td class="actions-col">
|
|
||||||
<button
|
|
||||||
v-if="item.linkable"
|
|
||||||
type="button"
|
|
||||||
class="figli-link-btn"
|
|
||||||
:class="{'is-linked': item.entreeLieeIds.length}"
|
|
||||||
:title="item.entreeLieeIds.length ? 'Lié à : ' + item.entreeLieeLabels.join(', ') : 'Lier à une entrée client'"
|
|
||||||
@click="openLinkForm(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="M8 12a3 3 0 0 0 4.24 0l2-2a3 3 0 0 0-4.24-4.24l-1 1" />
|
|
||||||
<path d="M12 8a3 3 0 0 0-4.24 0l-2 2a3 3 0 0 0 4.24 4.24l1-1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td class="actions-col">
|
<td class="actions-col">
|
||||||
<button type="button" class="figli-edit-btn" title="Modifier" @click="openEditForm(item.nid)">
|
<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">
|
<svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@@ -226,7 +210,7 @@
|
|||||||
:title="'Écart avec la clôture calculée de ' + (item.date.slice(0, 4) - 1) + ' : ' + ouvertureEcart(item).detail"
|
:title="'Écart avec la clôture calculée de ' + (item.date.slice(0, 4) - 1) + ' : ' + ouvertureEcart(item).detail"
|
||||||
>⚠ écart clôture {{ item.date.slice(0, 4) - 1 }} ({{ ouvertureEcart(item).comptes }} compte{{ ouvertureEcart(item).comptes > 1 ? 's' : '' }})</span>
|
>⚠ écart clôture {{ item.date.slice(0, 4) - 1 }} ({{ ouvertureEcart(item).comptes }} compte{{ ouvertureEcart(item).comptes > 1 ? 's' : '' }})</span>
|
||||||
<span
|
<span
|
||||||
v-if="linkStatus(item)"
|
v-if="linkStatus(item) && item.type !== 'hebergement'"
|
||||||
class="figli-recon-badge is-clickable"
|
class="figli-recon-badge is-clickable"
|
||||||
:class="linkStatusClasses(linkStatus(item).kind)"
|
:class="linkStatusClasses(linkStatus(item).kind)"
|
||||||
:title="item.entreeLieeIds.length ? linkStatus(item).detail + ' -- cliquer pour voir la ou les entrées liées' : linkStatus(item).detail + ' -- cliquer pour lier une entrée client'"
|
:title="item.entreeLieeIds.length ? linkStatus(item).detail + ' -- cliquer pour voir la ou les entrées liées' : linkStatus(item).detail + ' -- cliquer pour lier une entrée client'"
|
||||||
@@ -258,7 +242,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<tr ref="bottomSentinel" class="figli-sentinel-row">
|
<tr ref="bottomSentinel" class="figli-sentinel-row">
|
||||||
<td :colspan="8 + allComptes.length + 3">
|
<td :colspan="7 + allComptes.length + 3">
|
||||||
<span v-if="loadingNewer">Chargement des mois suivants…</span>
|
<span v-if="loadingNewer">Chargement des mois suivants…</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -267,7 +251,7 @@
|
|||||||
<tr class="figli-totals-row">
|
<tr class="figli-totals-row">
|
||||||
<td class="actions-col"></td>
|
<td class="actions-col"></td>
|
||||||
<td class="actions-col"></td>
|
<td class="actions-col"></td>
|
||||||
<td colspan="6">
|
<td colspan="5">
|
||||||
Solde {{ currentYear || '…' }} (créditeur / débiteur)
|
Solde {{ currentYear || '…' }} (créditeur / débiteur)
|
||||||
<span v-if="currentYearLoading" class="figli-note">chargement…</span>
|
<span v-if="currentYearLoading" class="figli-note">chargement…</span>
|
||||||
</td>
|
</td>
|
||||||
@@ -303,7 +287,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="item in filterEntreeGroup" :key="item.id" :class="{'figli-error-row': item.hasError}">
|
<tr v-for="item in filterEntreeGroup" :key="item.id">
|
||||||
<td class="actions-col">
|
<td class="actions-col">
|
||||||
<button type="button" class="figli-edit-btn" title="Modifier" @click="openEditForm(item.nid)">
|
<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">
|
<svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@@ -323,7 +307,7 @@
|
|||||||
:class="{'is-anomalie': reconciliationByEntree.get(item.id).surVerse > 0, 'is-reste': reconciliationByEntree.get(item.id).resteAVerser > 0}"
|
:class="{'is-anomalie': reconciliationByEntree.get(item.id).surVerse > 0, 'is-reste': reconciliationByEntree.get(item.id).resteAVerser > 0}"
|
||||||
>{{ reconciliationByEntree.get(item.id).count }} sortie{{ reconciliationByEntree.get(item.id).count > 1 ? 's' : '' }} liée{{ reconciliationByEntree.get(item.id).count > 1 ? 's' : '' }}<template v-if="reconciliationByEntree.get(item.id).resteAVerser > 0"> · reste {{ formatEur(reconciliationByEntree.get(item.id).resteAVerser) }}</template><template v-if="reconciliationByEntree.get(item.id).surVerse > 0"> · sur-versé {{ formatEur(reconciliationByEntree.get(item.id).surVerse) }}</template></span>
|
>{{ reconciliationByEntree.get(item.id).count }} sortie{{ reconciliationByEntree.get(item.id).count > 1 ? 's' : '' }} liée{{ reconciliationByEntree.get(item.id).count > 1 ? 's' : '' }}<template v-if="reconciliationByEntree.get(item.id).resteAVerser > 0"> · reste {{ formatEur(reconciliationByEntree.get(item.id).resteAVerser) }}</template><template v-if="reconciliationByEntree.get(item.id).surVerse > 0"> · sur-versé {{ formatEur(reconciliationByEntree.get(item.id).surVerse) }}</template></span>
|
||||||
<span
|
<span
|
||||||
v-if="linkStatus(item)"
|
v-if="linkStatus(item) && item.type !== 'hebergement'"
|
||||||
class="figli-recon-badge"
|
class="figli-recon-badge"
|
||||||
:class="linkStatusClasses(linkStatus(item).kind)"
|
:class="linkStatusClasses(linkStatus(item).kind)"
|
||||||
>{{ linkStatus(item).kind === 'ok' ? '' : '⚠ ' }}{{ linkStatusLabel(linkStatus(item)) }}</span>
|
>{{ linkStatus(item).kind === 'ok' ? '' : '⚠ ' }}{{ linkStatusLabel(linkStatus(item)) }}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user