Compact date format, move action buttons to the left
Dates render as jj/mm/aa instead of the API's ISO yyyy-mm-dd -- saves width in a table already packed with 8 compte columns. Actions column (edit pencil, link icon) moves from the right end to the first column. Column-hover crosshair logic is unaffected: it walks colSpan positions dynamically rather than assuming a fixed index. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -234,6 +234,13 @@
|
|||||||
formatEur(v) {
|
formatEur(v) {
|
||||||
return v === null || v === undefined ? '' : EUR.format(v);
|
return v === null || v === undefined ? '' : EUR.format(v);
|
||||||
},
|
},
|
||||||
|
// jj/mm/aa -- shorter than the API's ISO yyyy-mm-dd, saves column
|
||||||
|
// width in a table already packed with 8 compte columns.
|
||||||
|
formatDate(iso) {
|
||||||
|
if (!iso) return '';
|
||||||
|
const [y, m, d] = iso.split('-');
|
||||||
|
return d + '/' + m + '/' + y.slice(2);
|
||||||
|
},
|
||||||
typeLabel(t) {
|
typeLabel(t) {
|
||||||
return TYPE_LABELS[t] || t;
|
return TYPE_LABELS[t] || t;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -66,6 +66,7 @@
|
|||||||
<table ref="tableEl" @mouseover="onCellHover" @mouseleave="clearColHover">
|
<table ref="tableEl" @mouseover="onCellHover" @mouseleave="clearColHover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
<th class="actions-col"></th>
|
||||||
<th>Date</th>
|
<th>Date</th>
|
||||||
<th>Client</th>
|
<th>Client</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
@@ -74,7 +75,6 @@
|
|||||||
<th class="amount">Montant TTC</th>
|
<th class="amount">Montant TTC</th>
|
||||||
<th v-for="c in allComptes" :key="c" class="amount compte-col">{{ c }}</th>
|
<th v-for="c in allComptes" :key="c" class="amount compte-col">{{ c }}</th>
|
||||||
<th class="amount">Écart</th>
|
<th class="amount">Écart</th>
|
||||||
<th class="actions-col"></th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -83,23 +83,6 @@
|
|||||||
<td :colspan="6 + allComptes.length + 2">{{ 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>
|
||||||
<tr v-else :class="{'figli-error-row': item.hasError}">
|
<tr v-else :class="{'figli-error-row': item.hasError}">
|
||||||
<td>{{ item.date }}</td>
|
|
||||||
<td>{{ item.client || '—' }}</td>
|
|
||||||
<td><span class="figli-badge" :class="'type-' + item.type">{{ typeLabel(item.type) }}</span></td>
|
|
||||||
<td class="figli-libelle">
|
|
||||||
{{ item.libelle }}
|
|
||||||
<span
|
|
||||||
v-if="item.type === 'entree' && reconciliationByEntree.get(item.id) && reconciliationByEntree.get(item.id).count > 0"
|
|
||||||
class="figli-recon-badge"
|
|
||||||
:class="{'is-anomalie': reconciliationByEntree.get(item.id).surVerse > 0, 'is-reste': reconciliationByEntree.get(item.id).resteAVerser > 0}"
|
|
||||||
:title="reconciliationByEntree.get(item.id).detail"
|
|
||||||
@click="toggleEntreeFilter(item.id)"
|
|
||||||
>{{ 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>
|
|
||||||
</td>
|
|
||||||
<td class="amount">{{ formatEur(item.montant_ht) }}</td>
|
|
||||||
<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">
|
<td class="actions-col">
|
||||||
<button
|
<button
|
||||||
v-if="item.linkable"
|
v-if="item.linkable"
|
||||||
@@ -120,17 +103,34 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
|
<td>{{ formatDate(item.date) }}</td>
|
||||||
|
<td>{{ item.client || '—' }}</td>
|
||||||
|
<td><span class="figli-badge" :class="'type-' + item.type">{{ typeLabel(item.type) }}</span></td>
|
||||||
|
<td class="figli-libelle">
|
||||||
|
{{ item.libelle }}
|
||||||
|
<span
|
||||||
|
v-if="item.type === 'entree' && reconciliationByEntree.get(item.id) && reconciliationByEntree.get(item.id).count > 0"
|
||||||
|
class="figli-recon-badge"
|
||||||
|
:class="{'is-anomalie': reconciliationByEntree.get(item.id).surVerse > 0, 'is-reste': reconciliationByEntree.get(item.id).resteAVerser > 0}"
|
||||||
|
:title="reconciliationByEntree.get(item.id).detail"
|
||||||
|
@click="toggleEntreeFilter(item.id)"
|
||||||
|
>{{ 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>
|
||||||
|
</td>
|
||||||
|
<td class="amount">{{ formatEur(item.montant_ht) }}</td>
|
||||||
|
<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>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr class="figli-totals-row">
|
<tr class="figli-totals-row">
|
||||||
|
<td class="actions-col"></td>
|
||||||
<td colspan="4">Solde (créditeur / débiteur) — {{ filteredRows.length }} lignes filtrées</td>
|
<td colspan="4">Solde (créditeur / débiteur) — {{ filteredRows.length }} lignes filtrées</td>
|
||||||
<td class="amount">{{ formatEur(footerTotals.montant_ht) }}</td>
|
<td class="amount">{{ formatEur(footerTotals.montant_ht) }}</td>
|
||||||
<td class="amount">{{ formatEur(footerTotals.montant_ttc) }}</td>
|
<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 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="amount" :class="soldeClass(footerTotals.ecart)">{{ formatEur(footerTotals.ecart) }}</td>
|
||||||
<td class="actions-col"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
Reference in New Issue
Block a user