1874 lines
91 KiB
JavaScript
1874 lines
91 KiB
JavaScript
/**
|
|
* @file
|
|
* Progressive decoupling: Drupal renders the page shell (nav, auth via
|
|
* session cookie, the "Ajouter une ligne" modal form); this Vue app fetches
|
|
* a spreadsheet-like table of every ligne comptable, with filters,
|
|
* month/year grouping, and per-row écart (répartition sum vs montant HT)
|
|
* highlighting -- inconsistencies are shown, not hidden.
|
|
*
|
|
* Sliding window: with 5+ years of migrated history (~1500+ lines), loading
|
|
* everything up front took ~40s and made the tab briefly unresponsive.
|
|
* Instead of one big fetch, `rows` only ever holds a date-range window
|
|
* (initially the ~18 months around today), extended by ~6 months whenever
|
|
* the user scrolls near the top or bottom edge, and trimmed from the far
|
|
* end once the window exceeds MAX_LOADED_MONTHS so it stays a genuine
|
|
* sliding buffer, not an ever-growing list. The "Année" filter and the
|
|
* totals footer can't be computed from a partial window, so they're backed
|
|
* by their own small server endpoints (LedgerStatsController) instead.
|
|
*
|
|
* Filtering: every toolbar filter (compte, client, type, signalement,
|
|
* écarts, recherche libre) is applied server-side, folded straight into
|
|
* whatever request populates the window -- see LedgerRowsController and
|
|
* fetchFilteredLignes() below. `rows` therefore only ever holds rows that
|
|
* both fall in the loaded date range AND match the active filters; there's
|
|
* no separate "load everything, filter client-side" pass. JSON:API is
|
|
* still used for a few things the filtered endpoint doesn't cover: the
|
|
* entrée/sortie group drill-down (fetchLignesByNids()) and live-update
|
|
* polling (fetchChangedSince()), both keyed on specific node ids or
|
|
* "anything that changed" rather than a date range + filter set.
|
|
*/
|
|
(function (Drupal, Vue, jQuery) {
|
|
'use strict';
|
|
|
|
const API_BASE = '/jsonapi/node/ligne_comptable';
|
|
const EUR = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
|
|
// Not style: 'percent' -- that expects a fraction (0.10) and field_tva
|
|
// stores a plain rate (10), which style: 'percent' would otherwise
|
|
// silently read as 1000%.
|
|
const PCT = new Intl.NumberFormat('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
|
|
// Mirrors the $taux_officiels select in figli_compta_ledger_form_alter()
|
|
// and the $official list in figli_compta_ledger_update_8007()/_8008() --
|
|
// same 0.05-point tolerance as those migration scripts, for the same
|
|
// "rounding through 2-decimal HT/TTC storage" reason.
|
|
const OFFICIAL_TVA_RATES = [0, 2.1, 5.5, 10, 20];
|
|
const OFFICIAL_TVA_EPSILON = 0.05;
|
|
const MONTHS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
|
|
const TYPE_LABELS = {
|
|
entree: 'Entrée client',
|
|
charge: 'Charge structurelle',
|
|
versement: 'Versement freelance',
|
|
achat: 'Achat client',
|
|
hebergement: 'Hébergement',
|
|
sous_traitant: 'Sous-traitant',
|
|
salaire_stage: 'Salaire / stage',
|
|
charges_local_pro: 'Charges local pro',
|
|
autre: 'Autre',
|
|
ouverture: 'Ouverture',
|
|
};
|
|
// Sorties that can be linked to the entrée client they pay out against
|
|
// (field_entree_liee) -- charge/autre/ouverture/salaire_stage/
|
|
// charges_local_pro aren't client-specific.
|
|
const LINKABLE_TYPES = ['versement', 'achat', 'hebergement', 'sous_traitant'];
|
|
|
|
const WINDOW_MONTHS = 9; // each side of "today", for the initial load
|
|
const EXTEND_MONTHS = 6; // increment per scroll-triggered load
|
|
const MAX_LOADED_MONTHS = 30; // trim the far end once the window exceeds this
|
|
// While a thinning filter (compte/client/type/écarts) is active, the cap
|
|
// above is actively counter-productive: extending one end and trimming
|
|
// the other nets out to roughly the same 30-month slice every round
|
|
// (see ensureScrollable()), so a filter with only a handful of matches
|
|
// per year can search almost forever without ever surfacing more of
|
|
// them. Comfortably wider than the whole migrated dataset (2021-today)
|
|
// so a filter effectively gets the entire history to search, still
|
|
// bounded (not literally unbounded memory).
|
|
const MAX_LOADED_MONTHS_FILTERED = 96;
|
|
// Hard cap on ensureScrollable()'s recursion (see below) -- comfortably
|
|
// more than enough rounds to walk the entire MIN_LOADABLE_DATE..
|
|
// MAX_LOADABLE_DATE span at EXTEND_MONTHS per round.
|
|
const MAX_ENSURE_SCROLLABLE_ROUNDS = 30;
|
|
// How often to poll for other users' changes (see pollForChanges()) --
|
|
// a plain setInterval rather than anything push-based (no Socket.io/
|
|
// websocket infra for a 6-person internal tool); this is far more
|
|
// frequent than table content actually changes, but the requests are
|
|
// cheap and it keeps everyone's view close to live.
|
|
const POLL_INTERVAL_MS = 8000;
|
|
|
|
// Absolute bounds on how far the window can extend. Without these,
|
|
// loadOlder()/loadNewer() kept pushing windowStart/windowEnd outward
|
|
// even when a fetch came back empty (e.g. extending into future dates
|
|
// with no data yet) -- since nothing about the table's height or
|
|
// scroll position changes when 0 rows come back, checkEdges() stayed
|
|
// satisfied and the next scroll/layout tick fired the exact same load
|
|
// again, drifting further out forever with no way to stop. Comfortably
|
|
// before the earliest migrated year (2021) and well past any plausible
|
|
// future-dated entry.
|
|
const MIN_LOADABLE_DATE = '2020-06-01';
|
|
const MAX_LOADABLE_DATE = addMonths(todayStr(), 24);
|
|
|
|
function todayStr() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
function addMonths(dateStr, n) {
|
|
const d = new Date(dateStr + 'T00:00:00');
|
|
d.setMonth(d.getMonth() + n);
|
|
return d.toISOString().slice(0, 10);
|
|
}
|
|
|
|
function monthsBetween(a, b) {
|
|
const da = new Date(a + 'T00:00:00');
|
|
const db = new Date(b + 'T00:00:00');
|
|
return (db.getFullYear() - da.getFullYear()) * 12 + (db.getMonth() - da.getMonth());
|
|
}
|
|
|
|
// Builds the query string for LedgerRowsController::index() (GET
|
|
// /lignes/api/lignes) -- the server-side-filtered replacement for
|
|
// "fetch a JSON:API date range, then filter client-side": every
|
|
// toolbar filter is folded straight into the same request that loads
|
|
// the window, so `rows` only ever holds what's actually meant to be
|
|
// visible right now, pre-shaped exactly like buildRows() below would
|
|
// have produced from JSON:API (no separate row-building step needed
|
|
// for this path). rangeOrAnnee is either {start, end} (the normal
|
|
// sliding window, and jumpToYear()) or {annee} (filterYear's
|
|
// enterYearMode) -- the controller accepts either.
|
|
function filteredLignesUrl(rangeOrAnnee, filters) {
|
|
const params = new URLSearchParams();
|
|
if (rangeOrAnnee.annee) {
|
|
params.set('annee', rangeOrAnnee.annee);
|
|
} else {
|
|
params.set('start', rangeOrAnnee.start);
|
|
params.set('end', rangeOrAnnee.end);
|
|
}
|
|
if (filters.compte.length) params.set('compte', filters.compte.join(','));
|
|
if (filters.client) params.set('client', filters.client);
|
|
if (filters.type.length) params.set('type', filters.type.join(','));
|
|
if (filters.flag.length) params.set('flag', filters.flag.join(','));
|
|
if (filters.q) params.set('q', filters.q);
|
|
if (filters.ecarts) params.set('ecarts', '1');
|
|
if (filters.signale) params.set('signale', '1');
|
|
return '/lignes/api/lignes?' + params.toString();
|
|
}
|
|
|
|
async function fetchFilteredLignes(rangeOrAnnee, filters) {
|
|
const res = await fetch(filteredLignesUrl(rangeOrAnnee, filters), { headers: { Accept: 'application/json' } });
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok) throw new Error(json.error || ('/lignes/api/lignes a répondu ' + res.status));
|
|
return json.rows;
|
|
}
|
|
|
|
async function fetchLignes(url) {
|
|
// sort includes drupal_internal__nid as a tie-breaker: field_date_ligne
|
|
// alone is not unique (many lines share a date), and without a unique
|
|
// secondary sort key, offset pagination can silently duplicate or skip
|
|
// rows across pages.
|
|
const allData = [];
|
|
const includedMap = new Map();
|
|
while (url) {
|
|
const res = await fetch(url, { headers: { Accept: 'application/vnd.api+json' } });
|
|
if (!res.ok) throw new Error('JSON:API a répondu ' + res.status);
|
|
const json = await res.json();
|
|
allData.push(...(json.data || []));
|
|
(json.included || []).forEach((item) => includedMap.set(item.type + ':' + item.id, item));
|
|
url = json.links && json.links.next ? json.links.next.href : null;
|
|
}
|
|
// Defensive de-dup by node id, in case pagination ever repeats a row.
|
|
const seen = new Set();
|
|
const dedup = allData.filter((n) => (seen.has(n.id) ? false : (seen.add(n.id), true)));
|
|
return { data: dedup, includedMap };
|
|
}
|
|
|
|
// GET /lignes/api/groupe/{nid} -- the full transitive closure of node
|
|
// ids connected via field_entree_liee (both directions), resolved
|
|
// server-side since the sliding window can't discover it client-side
|
|
// (see LedgerStatsController::groupeEntree()).
|
|
async function fetchGroupeIds(nid) {
|
|
const res = await fetch('/lignes/api/groupe/' + nid, { headers: { Accept: 'application/json' } });
|
|
if (!res.ok) throw new Error('/lignes/api/groupe a répondu ' + res.status);
|
|
const json = await res.json();
|
|
return json.nids || [];
|
|
}
|
|
|
|
// Fetches full ligne data (same includes as the sliding window) for a
|
|
// specific set of node ids, regardless of date -- used to fill in
|
|
// whichever entrée/sortie nodes fetchGroupeIds() found that aren't in
|
|
// the currently loaded window.
|
|
async function fetchLignesByNids(nids) {
|
|
if (!nids.length) return { data: [], includedMap: new Map() };
|
|
const params = new URLSearchParams();
|
|
params.set('include', 'field_repartition,field_repartition.field_compte,field_client,field_entree_liee,field_flag');
|
|
params.set('filter[parNid][condition][path]', 'drupal_internal__nid');
|
|
params.set('filter[parNid][condition][operator]', 'IN');
|
|
nids.forEach((nid) => params.append('filter[parNid][condition][value][]', nid));
|
|
return fetchLignes(API_BASE + '?' + params.toString());
|
|
}
|
|
|
|
// Any ligne_comptable changed after `tsSeconds` (a Unix timestamp) --
|
|
// backs the polling in pollForChanges() below, so one user's edit
|
|
// shows up in everyone else's table without a manual reload. `changed`
|
|
// is stored as a Unix timestamp internally; JSON:API exposes it as an
|
|
// ISO 8601 string in *responses* but only accepts the raw timestamp as
|
|
// a *filter value* -- confirmed live (an ISO string filter value
|
|
// silently matched everything instead of narrowing the query).
|
|
async function fetchChangedSince(tsSeconds) {
|
|
const params = new URLSearchParams();
|
|
params.set('include', 'field_repartition,field_repartition.field_compte,field_client,field_entree_liee,field_flag');
|
|
params.set('filter[changedFilter][condition][path]', 'changed');
|
|
params.set('filter[changedFilter][condition][operator]', '>');
|
|
params.set('filter[changedFilter][condition][value]', String(tsSeconds));
|
|
params.set('sort', 'changed');
|
|
return fetchLignes(API_BASE + '?' + params.toString());
|
|
}
|
|
|
|
async function fetchClientNames() {
|
|
// page[limit]=200 is silently clamped to core's hard cap of 50 by
|
|
// JSON:API (Query\OffsetPage::SIZE_MAX) -- with 106 client terms,
|
|
// that cut off everything past the 50th alphabetically (e.g. "LE
|
|
// CAMPUS") unless every page is followed, same as fetchLignes() above.
|
|
let url = '/jsonapi/taxonomy_term/client?sort=name&page[limit]=50';
|
|
const names = [];
|
|
while (url) {
|
|
const res = await fetch(url, { headers: { Accept: 'application/vnd.api+json' } });
|
|
if (!res.ok) throw new Error('JSON:API a répondu ' + res.status);
|
|
const json = await res.json();
|
|
names.push(...(json.data || []).map((t) => t.attributes.name).filter(Boolean));
|
|
url = json.links && json.links.next ? json.links.next.href : null;
|
|
}
|
|
return names.sort();
|
|
}
|
|
|
|
// Same pagination reasoning as fetchClientNames() above -- feeds the
|
|
// "Signalement" column's datalist (suggestions only, doesn't restrict
|
|
// input: see LedgerActionsController::updateField()'s 'flag' case).
|
|
async function fetchFlagNames() {
|
|
let url = '/jsonapi/taxonomy_term/flag?sort=name&page[limit]=50';
|
|
const names = [];
|
|
while (url) {
|
|
const res = await fetch(url, { headers: { Accept: 'application/vnd.api+json' } });
|
|
if (!res.ok) throw new Error('JSON:API a répondu ' + res.status);
|
|
const json = await res.json();
|
|
names.push(...(json.data || []).map((t) => t.attributes.name).filter(Boolean));
|
|
url = json.links && json.links.next ? json.links.next.href : null;
|
|
}
|
|
return names.sort();
|
|
}
|
|
|
|
async function fetchYearsList() {
|
|
const res = await fetch('/lignes/api/annees', { headers: { Accept: 'application/json' } });
|
|
if (!res.ok) throw new Error('/lignes/api/annees a répondu ' + res.status);
|
|
const json = await res.json();
|
|
return json.annees || [];
|
|
}
|
|
|
|
// { "2023": { "Bachir": -0.03, ... }, ... } -- years where the actual
|
|
// ouverture doesn't match the previous year's calculated closing
|
|
// balance (that year's own ouverture + every movement dated within
|
|
// it). Small dataset (a handful of year boundaries), fetched once.
|
|
async function fetchOuvertureEcarts() {
|
|
const res = await fetch('/lignes/api/reconciliation-ouverture', { headers: { Accept: 'application/json' } });
|
|
if (!res.ok) throw new Error('/lignes/api/reconciliation-ouverture a répondu ' + res.status);
|
|
return res.json();
|
|
}
|
|
|
|
// POST /lignes/{nid}/type -- change field_type_ligne without opening the
|
|
// full edit form. Fetches a fresh CSRF token each time (core's
|
|
// /session/token) rather than caching one -- this is an occasional
|
|
// action, not worth the complexity of handling a stale cached token.
|
|
// `changed` (the row's last-known changed timestamp) lets the server
|
|
// reject a save-over-a-stale-view instead of silently overwriting
|
|
// someone else's concurrent edit -- see LedgerActionsController::
|
|
// checkConflict(). The thrown error's `.status` lets callers tell a
|
|
// 409 conflict apart from any other failure.
|
|
async function updateLigneType(nid, type, changed) {
|
|
const tokenRes = await fetch('/session/token');
|
|
const token = await tokenRes.text();
|
|
const res = await fetch('/lignes/' + nid + '/type', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
|
|
body: JSON.stringify({ type, changed }),
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
const err = new Error(json.error || ('/lignes/' + nid + '/type a répondu ' + res.status));
|
|
err.status = res.status;
|
|
throw err;
|
|
}
|
|
return json;
|
|
}
|
|
|
|
// POST /lignes/{nid}/champ -- change client/facture/libellé without
|
|
// opening the full edit form. Same fresh-token-per-call and conflict-
|
|
// detection reasoning as updateLigneType() above.
|
|
async function updateLigneField(nid, field, value, changed) {
|
|
const tokenRes = await fetch('/session/token');
|
|
const token = await tokenRes.text();
|
|
const res = await fetch('/lignes/' + nid + '/champ', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
|
|
body: JSON.stringify({ field, value, changed }),
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
const err = new Error(json.error || ('/lignes/' + nid + '/champ a répondu ' + res.status));
|
|
err.status = res.status;
|
|
throw err;
|
|
}
|
|
return json;
|
|
}
|
|
|
|
// Sums the same fields LedgerRowsController::index() rows carry into
|
|
// the {montant_ht, cotisation, montant_ttc, ecart, par_compte} shape
|
|
// the footer template expects.
|
|
function aggregateTotals(rows) {
|
|
let montantHt = 0;
|
|
let cotisation = 0;
|
|
let montantTtc = 0;
|
|
let ecart = 0;
|
|
const parCompte = {};
|
|
for (const r of rows) {
|
|
montantHt += r.montant_ht || 0;
|
|
cotisation += r.cotisation || 0;
|
|
montantTtc += r.montant_ttc || 0;
|
|
ecart += r.ecart || 0;
|
|
for (const [c, v] of Object.entries(r.parCompte)) {
|
|
parCompte[c] = (parCompte[c] || 0) + v;
|
|
}
|
|
}
|
|
const round = (v) => Math.round(v * 100) / 100;
|
|
return {
|
|
montant_ht: round(montantHt),
|
|
cotisation: round(cotisation),
|
|
montant_ttc: round(montantTtc),
|
|
ecart: round(ecart),
|
|
par_compte: Object.fromEntries(Object.entries(parCompte).map(([c, v]) => [c, round(v)])),
|
|
};
|
|
}
|
|
|
|
// Per-année footer totals, filtered the same way the table itself is --
|
|
// fetches every row for the year via the same server-side-filtered
|
|
// endpoint the table window uses (fetchFilteredLignes), then sums them
|
|
// client-side. Replaces the old /lignes/api/totaux (LedgerStatsController::
|
|
// totauxAnnee(), always unfiltered) now that the footer needs to
|
|
// reflect whatever's actually on screen, not the whole year regardless
|
|
// of the active filters.
|
|
async function fetchYearTotals(annee, filters) {
|
|
const rows = await fetchFilteredLignes({ annee }, filters);
|
|
return Object.assign({ annee }, aggregateTotals(rows));
|
|
}
|
|
|
|
// URL hash (#compte=Maud,Bachir&type=versement,achat&annee=2023&ecarts=1&aller=2024)
|
|
// makes the filters and "Aller à" shareable/reloadable -- reload the
|
|
// page or send the link and you land back in the same filtered view.
|
|
// compte/type can each hold several values (comma-separated) since
|
|
// both filters are now <select multiple>.
|
|
// "aller" isn't an ongoing filter (jumpYearValue itself always resets
|
|
// to '' right after firing) but its target year is worth remembering
|
|
// for this purpose, so it's tracked separately (lastJumpYear) purely
|
|
// for the hash. Not included: groupBy, filterEntreeId -- out of scope
|
|
// of what was asked (the toolbar filters + "Aller à").
|
|
function readHashState() {
|
|
const params = new URLSearchParams(location.hash.replace(/^#/, ''));
|
|
return {
|
|
filterCompte: params.get('compte') ? params.get('compte').split(',') : [],
|
|
filterClient: params.get('client') || '',
|
|
filterType: params.get('type') ? params.get('type').split(',') : [],
|
|
filterFlag: params.get('tag') ? params.get('tag').split(',') : [],
|
|
filterYear: params.get('annee') || '',
|
|
filterQ: params.get('q') || '',
|
|
onlyErrors: params.get('ecarts') === '1',
|
|
onlyFlagged: params.get('signale') === '1',
|
|
aller: params.get('aller') || '',
|
|
};
|
|
}
|
|
|
|
function buildHashString(state) {
|
|
const params = new URLSearchParams();
|
|
if (state.filterCompte.length) params.set('compte', state.filterCompte.join(','));
|
|
if (state.filterClient) params.set('client', state.filterClient);
|
|
if (state.filterType.length) params.set('type', state.filterType.join(','));
|
|
if (state.filterFlag.length) params.set('tag', state.filterFlag.join(','));
|
|
if (state.filterYear) params.set('annee', state.filterYear);
|
|
if (state.filterQ) params.set('q', state.filterQ);
|
|
if (state.onlyErrors) params.set('ecarts', '1');
|
|
if (state.onlyFlagged) params.set('signale', '1');
|
|
// Redundant/ambiguous alongside an active "Année" filter -- that
|
|
// already fully describes the year, so don't also carry a stale
|
|
// "aller" target into the hash.
|
|
if (state.lastJumpYear && !state.filterYear) params.set('aller', state.lastJumpYear);
|
|
return params.toString();
|
|
}
|
|
|
|
function resolve(includedMap, ref) {
|
|
if (!ref) return null;
|
|
return includedMap.get(ref.type + ':' + ref.id) || null;
|
|
}
|
|
|
|
function buildRows(data, includedMap) {
|
|
const rows = [];
|
|
for (const node of data) {
|
|
const rels = node.relationships || {};
|
|
const attrs = node.attributes;
|
|
const clientTerm = resolve(includedMap, rels.field_client && rels.field_client.data);
|
|
// field_entree_liee is multi-value (a single payment sometimes
|
|
// covers several client invoices at once) -- JSON:API always
|
|
// returns an array for a multi-cardinality relationship, one ref
|
|
// per linked entrée, even when there's only one or none.
|
|
const entreeLieeRefs = (rels.field_entree_liee && rels.field_entree_liee.data) || [];
|
|
const entreeLieeNodes = entreeLieeRefs.map((ref) => resolve(includedMap, ref)).filter(Boolean);
|
|
// Multi-value like field_entree_liee above -- zero, one or several
|
|
// free-form "signalement" tags (see LedgerActionsController::
|
|
// updateField()'s 'flag' case for how they're written).
|
|
const flagRefs = (rels.field_flag && rels.field_flag.data) || [];
|
|
const flagTerms = flagRefs.map((ref) => resolve(includedMap, ref)).filter(Boolean);
|
|
const parCompte = {};
|
|
let somme = 0;
|
|
const repartitionRefs = (rels.field_repartition && rels.field_repartition.data) || [];
|
|
for (const ref of repartitionRefs) {
|
|
const paragraph = resolve(includedMap, ref);
|
|
if (!paragraph) continue;
|
|
const montant = parseFloat(paragraph.attributes.field_montant || 0);
|
|
const compteTerm = resolve(includedMap, paragraph.relationships && paragraph.relationships.field_compte && paragraph.relationships.field_compte.data);
|
|
const compteName = compteTerm ? compteTerm.attributes.name : '(compte inconnu)';
|
|
parCompte[compteName] = (parCompte[compteName] || 0) + montant;
|
|
somme += montant;
|
|
}
|
|
const montantHt = attrs.field_montant_ht !== null && attrs.field_montant_ht !== undefined ? parseFloat(attrs.field_montant_ht) : null;
|
|
const ecart = montantHt !== null ? Math.round((montantHt - somme) * 100) / 100 : 0;
|
|
rows.push({
|
|
id: node.id,
|
|
nid: attrs.drupal_internal__nid,
|
|
// ISO 8601 string (ok as an opaque token here, only ever
|
|
// compared for equality/passed straight back to the server) --
|
|
// sent back on the next inline edit so the server can detect
|
|
// "someone else saved this line in between" and reject instead
|
|
// of silently overwriting. See LedgerActionsController::
|
|
// checkConflict() and pollForChanges()/mergeChangedRows() below.
|
|
changed: attrs.changed,
|
|
date: attrs.field_date_ligne,
|
|
type: attrs.field_type_ligne,
|
|
client: clientTerm ? clientTerm.attributes.name : null,
|
|
facture: attrs.field_numero_facture || null,
|
|
libelle: attrs.field_notes || attrs.title,
|
|
montant_ht: montantHt,
|
|
cotisation: attrs.field_cotisation_urssaf !== null && attrs.field_cotisation_urssaf !== undefined ? parseFloat(attrs.field_cotisation_urssaf) : null,
|
|
tva: attrs.field_tva !== null && attrs.field_tva !== undefined ? parseFloat(attrs.field_tva) : null,
|
|
montant_ttc: attrs.field_montant_ttc !== null && attrs.field_montant_ttc !== undefined ? parseFloat(attrs.field_montant_ttc) : null,
|
|
parCompte,
|
|
somme,
|
|
ecart,
|
|
// Visible écart = non-zero to the centime (a 0.01 mismatch is
|
|
// savable -- the blocking threshold stays at 0.01 server-side --
|
|
// but must still be shown; mirrors LedgerRowsController's
|
|
// hasError). 0.005 guards against float representation of
|
|
// stored centimes.
|
|
hasError: Math.abs(ecart) > 0.005,
|
|
linkable: LINKABLE_TYPES.includes(attrs.field_type_ligne),
|
|
entreeLieeIds: entreeLieeNodes.map((n) => n.id),
|
|
entreeLieeLabels: entreeLieeNodes.map((n) => n.attributes.title || n.id),
|
|
flags: flagTerms.map((t) => t.attributes.name),
|
|
hasFlag: flagTerms.length > 0,
|
|
});
|
|
}
|
|
rows.sort((a, b) => (a.date || '').localeCompare(b.date || ''));
|
|
return rows;
|
|
}
|
|
|
|
const App = {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
error: null,
|
|
rows: [],
|
|
allComptes: ['Sandrine', 'Maud', 'Ouidade', 'Chloé', 'Bachir', 'Valentin', 'EXT.', 'EXT.WEB'],
|
|
allClientsList: [],
|
|
allFlagsList: [],
|
|
allYearsList: [],
|
|
ouvertureEcarts: {},
|
|
// Arrays -- both are native <select multiple>, so ctrl/cmd+click
|
|
// and shift+click just work (Vue's v-model binds a <select
|
|
// multiple> to an array natively, no custom handling needed). An
|
|
// empty array means "tous", same as the single-value '' used to.
|
|
filterCompte: [],
|
|
filterClient: '',
|
|
filterType: [],
|
|
// Same array/OR-semantics/multiselect model as filterCompte/
|
|
// filterType above -- independent of onlyFlagged (the plain on/
|
|
// off toggle): this narrows to specific tags, onlyFlagged just
|
|
// means "has any tag at all".
|
|
filterFlag: [],
|
|
filterYear: '',
|
|
// Free-text match against Libellé/Détail (field_notes, falling
|
|
// back to the title) -- server-side (see LedgerRowsController),
|
|
// debounced client-side (see the filterQ watcher) so every
|
|
// keystroke doesn't fire its own request.
|
|
filterQ: '',
|
|
jumpYearValue: '',
|
|
// Not a filter itself (jumpYearValue always resets to '' right
|
|
// after firing) -- just remembers the last "Aller à" target so
|
|
// the URL hash can reflect it. See syncHash()/readHashState().
|
|
lastJumpYear: '',
|
|
groupBy: 'month',
|
|
onlyErrors: false,
|
|
onlyFlagged: false,
|
|
hoverCol: null,
|
|
filterEntreeId: null,
|
|
// Rows fetched to fill in entrées/sorties that /lignes/api/groupe
|
|
// found but the sliding window doesn't have loaded (a versement
|
|
// can link to an entrée from any prior year) -- see
|
|
// allKnownRows()/toggleEntreeFilter(). Kept around (not cleared
|
|
// on close) as a soft cache: reopening the same or an overlapping
|
|
// group doesn't need to re-fetch.
|
|
groupExtraRows: [],
|
|
groupLoading: false,
|
|
// Entrée ids whose full linked group has already been resolved
|
|
// by ensureLinkedReconciliationResolved() below (or by opening
|
|
// the drill-down modal for it) -- avoids re-fetching the same
|
|
// group again for every other sortie that happens to link to
|
|
// the same entrée.
|
|
resolvedLinkGroups: new Set(),
|
|
// Unix timestamp (seconds) -- everything with `changed` after
|
|
// this has appeared since the last poll. See pollForChanges().
|
|
lastPollTs: null,
|
|
// Which row's type badge is currently showing its inline <select>
|
|
// instead of the badge -- only one at a time.
|
|
editingTypeId: null,
|
|
typeUpdateError: null,
|
|
// Which row+field (client/facture/libelle) is currently showing
|
|
// its inline <input> instead of the plain text -- only one at a
|
|
// time, mirroring editingTypeId above. { id, field } or null.
|
|
editingCell: null,
|
|
// Row currently open in the signalement modal (see
|
|
// openFlagModal()) -- a small standalone object, not the row
|
|
// itself, and the text of a not-yet-added tag typed into that
|
|
// modal's own input.
|
|
flagModalItem: null,
|
|
flagModalNewTag: '',
|
|
// Fenêtre glissante.
|
|
windowStart: null,
|
|
windowEnd: null,
|
|
// Drive the sentinel-row "Chargement…" text only -- actual
|
|
// serialization is the `_windowOpChain` queue in
|
|
// _queueWindowOp(), not these (see loadOlder()/loadNewer()).
|
|
loadingOlder: false,
|
|
loadingNewer: false,
|
|
// Footer : totaux de l'année actuellement visible à l'écran (pas
|
|
// de la fenêtre chargée), voir detectCurrentYear().
|
|
currentYear: null,
|
|
currentYearTotals: null,
|
|
currentYearLoading: false,
|
|
};
|
|
},
|
|
computed: {
|
|
allTypes() {
|
|
return Object.entries(TYPE_LABELS).map(([value, label]) => ({ value, label }));
|
|
},
|
|
errorCount() {
|
|
return this.rows.filter((r) => r.hasError).length;
|
|
},
|
|
// Every row known locally that could feed the reconciliation/
|
|
// drill-down computeds below: the loaded sliding window, plus
|
|
// whatever groupExtraRows filled in (see toggleEntreeFilter()) --
|
|
// deduped by id in case the same node ends up in both. A versement
|
|
// can link to (or be linked from) an entrée dated years earlier or
|
|
// later, well outside `rows`; groupExtraRows is how that gap gets
|
|
// closed once the full group has been resolved server-side.
|
|
allKnownRows() {
|
|
if (!this.groupExtraRows.length) return this.rows;
|
|
const seen = new Set(this.rows.map((r) => r.id));
|
|
return [...this.rows, ...this.groupExtraRows.filter((r) => !seen.has(r.id))];
|
|
},
|
|
// A sortie linked to several entrées (one payment covering several
|
|
// invoices) appears under each of them here.
|
|
sortiesByEntree() {
|
|
const map = new Map();
|
|
for (const r of this.allKnownRows) {
|
|
for (const entreeId of r.entreeLieeIds) {
|
|
if (!map.has(entreeId)) map.set(entreeId, []);
|
|
map.get(entreeId).push(r);
|
|
}
|
|
}
|
|
return map;
|
|
},
|
|
// Compares each entrée's répartition (positive shares owed) against
|
|
// the combined répartition of every sortie linked to it (negative
|
|
// amounts paid out), per compte -- both sides can be split across
|
|
// several comptes. A residual near zero means fully settled;
|
|
// positive means still owed ("reste à verser"); negative means more
|
|
// was paid out than the entrée allocated ("sur-versé", worth a
|
|
// closer look). Precomputed once for all entrée rows rather than
|
|
// recomputed per template read. Only sees whatever sortiesByEntree
|
|
// knows about -- accurate for an entrée once its full group has
|
|
// been resolved (see allKnownRows()/toggleEntreeFilter()), but may
|
|
// under-count a sortie linked to it that's neither in the loaded
|
|
// window nor already fetched into groupExtraRows.
|
|
//
|
|
// A sortie linked to several entrées at once (one payment covering
|
|
// several invoices) has no record of how much of it applies to
|
|
// each -- there's no per-link amount, just a set of linked entrées.
|
|
// Split its répartition equally between them as the least-wrong
|
|
// assumption available, rather than counting its full amount
|
|
// against every linked entrée (which would double- or triple-count
|
|
// the same money).
|
|
reconciliationByEntree() {
|
|
const map = new Map();
|
|
for (const entreeRow of this.allKnownRows) {
|
|
if (entreeRow.type !== 'entree') continue;
|
|
const linked = this.sortiesByEntree.get(entreeRow.id) || [];
|
|
const versementsParCompte = {};
|
|
for (const s of linked) {
|
|
const share = s.entreeLieeIds.length || 1;
|
|
for (const [compte, montant] of Object.entries(s.parCompte)) {
|
|
versementsParCompte[compte] = (versementsParCompte[compte] || 0) + montant / share;
|
|
}
|
|
}
|
|
const comptes = new Set([...Object.keys(entreeRow.parCompte), ...Object.keys(versementsParCompte)]);
|
|
let resteAVerser = 0;
|
|
let surVerse = 0;
|
|
const detail = [];
|
|
// Kept per-compte (not just folded into the two totals above) --
|
|
// linkStatus() below needs to check a single sortie's own
|
|
// compte(s) against the entrée, not the entrée's overall
|
|
// reconciliation, which can span *other* comptes tied to other
|
|
// sorties linked to the same entrée.
|
|
const parCompteResidual = {};
|
|
for (const c of comptes) {
|
|
const residual = Math.round(((entreeRow.parCompte[c] || 0) + (versementsParCompte[c] || 0)) * 100) / 100;
|
|
parCompteResidual[c] = residual;
|
|
if (residual > 0.01) resteAVerser += residual;
|
|
else if (residual < -0.01) surVerse += -residual;
|
|
if (Math.abs(residual) > 0.01) detail.push(c + ' : ' + this.formatEur(residual));
|
|
}
|
|
map.set(entreeRow.id, {
|
|
count: linked.length,
|
|
resteAVerser: Math.round(resteAVerser * 100) / 100,
|
|
surVerse: Math.round(surVerse * 100) / 100,
|
|
detail: detail.join(', ') || 'Entièrement soldé',
|
|
parCompteResidual,
|
|
});
|
|
}
|
|
return map;
|
|
},
|
|
// The full connected group of entrées + sorties reachable from
|
|
// filterEntreeId by following field_entree_liee links transitively.
|
|
// A sortie can now link to several entrées at once (split payment),
|
|
// so drilling into one entrée should also surface every *other*
|
|
// entrée it shares a sortie with, and that entrée's own sorties in
|
|
// turn -- not just the originally-clicked entrée's direct links.
|
|
// Runs over allKnownRows (loaded window + groupExtraRows), not just
|
|
// `rows` -- toggleEntreeFilter() fetches the complete group up
|
|
// front via /lignes/api/groupe/{node}, so by the time this
|
|
// re-evaluates, every member should already be present regardless
|
|
// of its date.
|
|
filterEntreeGroup() {
|
|
if (!this.filterEntreeId) return null;
|
|
const pool = this.allKnownRows;
|
|
const entreeIds = new Set([this.filterEntreeId]);
|
|
let grown = true;
|
|
while (grown) {
|
|
grown = false;
|
|
for (const r of pool) {
|
|
if (r.type === 'entree' || !r.entreeLieeIds.some((id) => entreeIds.has(id))) continue;
|
|
for (const id of r.entreeLieeIds) {
|
|
if (!entreeIds.has(id)) {
|
|
entreeIds.add(id);
|
|
grown = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const entrees = pool.filter((r) => r.type === 'entree' && entreeIds.has(r.id));
|
|
const sorties = pool.filter((r) => r.type !== 'entree' && r.entreeLieeIds.some((id) => entreeIds.has(id)));
|
|
return [...entrees, ...sorties];
|
|
},
|
|
// Which comptes actually carry a value somewhere in the drill-down
|
|
// group -- unlike the main table (always all 8, so columns line up
|
|
// across every row/year), this modal's group is usually 2-4 rows
|
|
// touching only 1-2 comptes, so the other 6+ empty columns are pure
|
|
// clutter.
|
|
modalComptes() {
|
|
if (!this.filterEntreeGroup) return [];
|
|
return this.allComptes.filter((c) => this.filterEntreeGroup.some((r) => r.parCompte[c] !== undefined));
|
|
},
|
|
// Totals for the entrée + linked sorties drill-down modal (see
|
|
// filterEntreeGroup above): the whole point of that view is "does
|
|
// this entrée balance against what was paid out", so its own footer
|
|
// answers exactly that instead of the current year's totals -- and
|
|
// it can be computed locally (unlike the per-year figures, this
|
|
// handful of rows is already fully loaded), no server round-trip
|
|
// needed. Same shape as /lignes/api/totaux so the template can
|
|
// render either the same way.
|
|
drilldownTotals() {
|
|
if (!this.filterEntreeId) return null;
|
|
let montantHt = 0;
|
|
let montantTtc = 0;
|
|
let ecart = 0;
|
|
const parCompte = {};
|
|
for (const r of this.filterEntreeGroup) {
|
|
montantHt += r.montant_ht || 0;
|
|
montantTtc += r.montant_ttc || 0;
|
|
ecart += r.ecart || 0;
|
|
for (const [c, v] of Object.entries(r.parCompte)) {
|
|
parCompte[c] = (parCompte[c] || 0) + v;
|
|
}
|
|
}
|
|
const round = (v) => Math.round(v * 100) / 100;
|
|
return {
|
|
montant_ht: round(montantHt),
|
|
montant_ttc: round(montantTtc),
|
|
ecart: round(ecart),
|
|
par_compte: Object.fromEntries(Object.entries(parCompte).map(([c, v]) => [c, round(v)])),
|
|
};
|
|
},
|
|
// `rows` no longer needs a separate client-side filtering pass --
|
|
// every toolbar filter is already applied server-side by whatever
|
|
// fetched the current window (see fetchFilteredLignes()), so this
|
|
// only handles the month/year grouping on top.
|
|
groupedRows() {
|
|
const list = this.rows;
|
|
if (this.groupBy === 'none') return list;
|
|
const groups = new Map();
|
|
for (const r of list) {
|
|
const d = r.date ? new Date(r.date + 'T00:00:00') : null;
|
|
let key, label;
|
|
if (this.groupBy === 'year') {
|
|
key = d ? String(d.getFullYear()) : '?';
|
|
label = key;
|
|
} else {
|
|
key = d ? d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') : '?';
|
|
label = d ? MONTHS[d.getMonth()] + ' ' + d.getFullYear() : 'Date inconnue';
|
|
}
|
|
if (!groups.has(key)) groups.set(key, { label, year: d ? String(d.getFullYear()) : null, rows: [] });
|
|
groups.get(key).rows.push(r);
|
|
}
|
|
const sortedKeys = Array.from(groups.keys()).sort();
|
|
const out = [];
|
|
for (const key of sortedKeys) {
|
|
const g = groups.get(key);
|
|
out.push({ isGroup: true, key: 'g-' + key, label: g.label, count: g.rows.length, year: g.year });
|
|
for (const r of g.rows) out.push(Object.assign({ key: 'r-' + r.id }, r));
|
|
}
|
|
return out;
|
|
},
|
|
},
|
|
methods: {
|
|
formatEur(v) {
|
|
return v === null || v === undefined ? '' : EUR.format(v);
|
|
},
|
|
// Historical lines can carry a backfilled, non-round rate (e.g.
|
|
// 12.6414 -- see figli_compta_ledger_update_8005()'s docblock for
|
|
// why); rounded to 2 decimals for display, same as every amount
|
|
// column here, rather than showing the full stored precision.
|
|
formatPct(v) {
|
|
return v === null || v === undefined ? '' : PCT.format(v) + ' %';
|
|
},
|
|
// Flags a TVA rate that isn't one of the 5 official French VAT
|
|
// rates -- either a genuinely blended/multi-rate invoice collapsed
|
|
// into one ligne_comptable, or a migrated line
|
|
// figli_compta_ledger_update_8007() left ambiguous rather than
|
|
// guess (see that function's docblock). Null (no TVA recorded at
|
|
// all) is never flagged -- nothing to question there.
|
|
isTvaOfficial(v) {
|
|
if (v === null || v === undefined) return true;
|
|
return OFFICIAL_TVA_RATES.some((o) => Math.abs(v - o) < OFFICIAL_TVA_EPSILON);
|
|
},
|
|
// Écart between this ouverture row's year and the previous year's
|
|
// calculated closing balance -- restricted to whichever compte(s)
|
|
// this specific row's répartition actually touches (ouverture lines
|
|
// are entered one per compte, so showing every compte's écart on
|
|
// every row would just repeat the same list). Null if this row's
|
|
// compte(s) reconcile cleanly.
|
|
ouvertureEcart(item) {
|
|
if (item.type !== 'ouverture' || !item.date) return null;
|
|
const annee = item.date.slice(0, 4);
|
|
const ecarts = this.ouvertureEcarts[annee];
|
|
if (!ecarts) return null;
|
|
const relevant = Object.keys(item.parCompte).filter((c) => ecarts[c] !== undefined);
|
|
if (!relevant.length) return null;
|
|
const detail = relevant.map((compte) => compte + ' : ' + this.formatEur(ecarts[compte])).join(', ');
|
|
return { detail, comptes: relevant.length };
|
|
},
|
|
// Status badge for any linkable sortie row (versement, achat,
|
|
// hébergement, sous-traitant -- see LINKABLE_TYPES) -- always
|
|
// present for one of those types, specifically so a
|
|
// linked-but-settled row still gets a badge to drill down through
|
|
// (it used to return null there, silently losing the only way to
|
|
// open the linked entrée's filtered view for a row with nothing
|
|
// wrong to report). "kind" distinguishes not-linked-at-all, a
|
|
// residual against at least one linked entrée, or linked-and-settled:
|
|
// - not linked at all
|
|
// - linked but its own compte(s) still show a residual against at
|
|
// least one linked entrée -- deliberately scoped to just the
|
|
// compte(s) this row's own répartition touches
|
|
// (reconciliationByEntree's parCompteResidual), not the
|
|
// entrée's overall resteAVerser/surVerse, which can be driven
|
|
// entirely by a *different* compte tied to some other sortie
|
|
// linked to the same entrée and would say nothing about
|
|
// whether this row's own répartition is settled. When linked
|
|
// to several entrées (see reconciliationByEntree's equal-split
|
|
// note), each entrée's residual for these compte(s) counts
|
|
// separately -- they're independent invoices, each with its
|
|
// own outstanding amount.
|
|
// - linked and settled
|
|
// - inconnu: at least one linked entrée's reconciliation couldn't
|
|
// be resolved (not yet fetched into groupExtraRows -- see
|
|
// allKnownRows()/loadEntreeGroup()). Deliberately distinct from
|
|
// "ok": defaulting an unresolved entrée to "settled" would show
|
|
// a false all-clear for a row that's actually fine, or one
|
|
// that owes money, purely because its linked entrée hasn't
|
|
// been fetched yet -- opening the badge resolves it and flips
|
|
// the status to whatever it actually is.
|
|
linkStatus(item) {
|
|
if (!LINKABLE_TYPES.includes(item.type)) return null;
|
|
if (!item.entreeLieeIds.length) {
|
|
return { kind: 'non-liee', detail: 'Aucune entrée client liée.' };
|
|
}
|
|
let resteAVerser = 0;
|
|
let surVerse = 0;
|
|
let unresolved = false;
|
|
for (const entreeId of item.entreeLieeIds) {
|
|
const recon = this.reconciliationByEntree.get(entreeId);
|
|
if (!recon) {
|
|
unresolved = true;
|
|
continue;
|
|
}
|
|
for (const c of Object.keys(item.parCompte)) {
|
|
const residual = recon.parCompteResidual[c] || 0;
|
|
if (residual > 0.01) resteAVerser += residual;
|
|
else if (residual < -0.01) surVerse += -residual;
|
|
}
|
|
}
|
|
if (resteAVerser > 0.01) {
|
|
const montant = Math.round(resteAVerser * 100) / 100;
|
|
return { kind: 'reste', montant, detail: 'Reste à verser (comptes de cette ligne) : ' + this.formatEur(montant) };
|
|
}
|
|
if (surVerse > 0.01) {
|
|
const montant = Math.round(surVerse * 100) / 100;
|
|
return { kind: 'sur-verse', montant, detail: 'Sur-versé (comptes de cette ligne) : ' + this.formatEur(montant) };
|
|
}
|
|
if (unresolved) {
|
|
return { kind: 'inconnu', detail: 'Entrée(s) liée(s) pas encore vérifiée(s) -- cliquer pour vérifier.' };
|
|
}
|
|
const n = item.entreeLieeIds.length;
|
|
return { kind: 'ok', montant: 0, detail: 'Lié à ' + n + ' entrée' + (n > 1 ? 's' : '') + ' client' + (n > 1 ? 's' : '') + '.' };
|
|
},
|
|
// Takes the whole status object (not just kind) -- reste/sur-verse/
|
|
// ok show the exact solde right in the badge, not just in the
|
|
// hover title, since a bare "Reste à verser" with no figure meant
|
|
// opening the drill-down modal just to see how much.
|
|
linkStatusLabel(status) {
|
|
if (status.kind === 'non-liee') return 'Non liée';
|
|
if (status.kind === 'reste') return 'Reste à verser : ' + this.formatEur(status.montant);
|
|
if (status.kind === 'sur-verse') return 'Sur-versé : ' + this.formatEur(status.montant);
|
|
if (status.kind === 'inconnu') return 'À vérifier';
|
|
return 'Lié : ' + this.formatEur(status.montant);
|
|
},
|
|
// Only non-liee/sur-versé read as a hard anomaly (red); reste and
|
|
// inconnu are their own softer amber; ok gets neither, falling back
|
|
// to the badge's default green -- same "all clear" green the
|
|
// entrée side already uses for a fully-settled "N sorties liées".
|
|
linkStatusClasses(kind) {
|
|
return {
|
|
'is-anomalie': kind === 'non-liee' || kind === 'sur-verse',
|
|
'is-reste': kind === 'reste' || kind === 'inconnu',
|
|
};
|
|
},
|
|
// aa/mm/jj -- shorter than the API's ISO yyyy-mm-dd (saves column
|
|
// width in a table already packed with 8 compte columns) while
|
|
// keeping the same year-month-day ordering, so it still sorts
|
|
// correctly as plain text and reads unambiguously either way.
|
|
formatDate(iso) {
|
|
if (!iso) return '';
|
|
const [y, m, d] = iso.split('-');
|
|
return y.slice(2) + '/' + m + '/' + d;
|
|
},
|
|
typeLabel(t) {
|
|
return TYPE_LABELS[t] || t;
|
|
},
|
|
soldeClass(v) {
|
|
if (v > 0.5) return 'figli-solde-crediteur';
|
|
if (v < -0.5) return 'figli-solde-debiteur';
|
|
return '';
|
|
},
|
|
// Single colored anchor per row (Montant HT only, not every compte
|
|
// column) so entrées/sorties are scannable at a glance without the
|
|
// table turning into a red/green garland. No 0.5€ threshold like
|
|
// soldeClass -- individual lines are often small (e.g. a -1.07€ OVH
|
|
// renewal), any nonzero sign should read as positive/negative.
|
|
montantClass(v) {
|
|
if (v > 0) return 'figli-montant-positif';
|
|
if (v < 0) return 'figli-montant-negatif';
|
|
return '';
|
|
},
|
|
openAddForm() {
|
|
Drupal.ajax({
|
|
url: '/node/add/ligne_comptable',
|
|
dialogType: 'modal',
|
|
dialog: { width: 800, title: 'Ajouter une ligne comptable' },
|
|
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();
|
|
},
|
|
openLinkForm(nid) {
|
|
Drupal.ajax({
|
|
url: '/lignes/' + nid + '/lier',
|
|
dialogType: 'modal',
|
|
dialog: { width: 500, title: 'Lier à une entrée client' },
|
|
progress: { type: 'throbber' },
|
|
}).execute();
|
|
},
|
|
// Opens/closes the entrée + linked sorties drill-down modal -- a
|
|
// separate overlay (see the template), not a filter applied to the
|
|
// main table, so opening/closing it never touches the main table's
|
|
// scroll position. fallbackNid: see loadEntreeGroup() below --
|
|
// clicking a versement's badge passes the versement's own nid,
|
|
// since the entrée id alone isn't enough to start the server-side
|
|
// lookup when that entrée isn't loaded at all.
|
|
toggleEntreeFilter(id, fallbackNid) {
|
|
if (this.filterEntreeId === id) {
|
|
this.closeDrilldown();
|
|
return;
|
|
}
|
|
this.filterEntreeId = id;
|
|
this.loadEntreeGroup(id, fallbackNid);
|
|
},
|
|
closeDrilldown() {
|
|
this.filterEntreeId = null;
|
|
},
|
|
// Low-level: fetches /lignes/api/groupe/{nid}'s full member list
|
|
// (the sliding window can't discover it client-side -- see
|
|
// LedgerStatsController::groupeEntree()) and merges whatever isn't
|
|
// already known locally into groupExtraRows. filterEntreeGroup/
|
|
// reconciliationByEntree re-evaluate automatically once that
|
|
// lands, since they read allKnownRows (rows + groupExtraRows).
|
|
// Shared by loadEntreeGroup() (click-triggered) and
|
|
// ensureLinkedReconciliationResolved() (background) below.
|
|
async fetchGroupFromNid(nid) {
|
|
const nids = await fetchGroupeIds(nid);
|
|
const known = new Set(this.allKnownRows.map((r) => r.nid));
|
|
const missingNids = nids.filter((n) => !known.has(n));
|
|
if (missingNids.length) {
|
|
const { data, includedMap } = await fetchLignesByNids(missingNids);
|
|
const newRows = buildRows(data, includedMap);
|
|
const existingIds = new Set(this.groupExtraRows.map((r) => r.id));
|
|
this.groupExtraRows = [...this.groupExtraRows, ...newRows.filter((r) => !existingIds.has(r.id))];
|
|
}
|
|
},
|
|
// Resolves the full transitive-closure group for the given row id.
|
|
// id itself might not be loaded at all -- a versement's linked
|
|
// entrée can be dated years before or after it -- so fallbackNid
|
|
// lets the caller supply a *different*, guaranteed-loaded node's
|
|
// nid (e.g. the versement's own) to start the server-side
|
|
// traversal from instead; groupeEntree() finds the same connected
|
|
// component either way.
|
|
async loadEntreeGroup(id, fallbackNid) {
|
|
const row = this.allKnownRows.find((r) => r.id === id);
|
|
const startNid = row ? row.nid : fallbackNid;
|
|
if (!startNid) return;
|
|
this.groupLoading = true;
|
|
try {
|
|
await this.fetchGroupFromNid(startNid);
|
|
} catch (err) {
|
|
this.typeUpdateError = err.message;
|
|
} finally {
|
|
this.groupLoading = false;
|
|
}
|
|
},
|
|
// Proactively resolves the same group for every visible linkable
|
|
// row instead of waiting for a click -- a linked entrée can be
|
|
// dated years before or after the sortie that pays it out, so the
|
|
// reste à verser/sur-versé badge can never be answered correctly
|
|
// from whatever the sliding window happens to have loaded.
|
|
// Triggered by the `rows` watcher, so it re-runs after every
|
|
// load/loadOlder/loadNewer. Marks every entrée id a row links to
|
|
// (not just the first) before fetching, so another row sharing
|
|
// one of the same entrées doesn't queue a redundant fetch for it.
|
|
// Errors are swallowed here (unlike loadEntreeGroup() above) --
|
|
// this is unattended background work, not something the user
|
|
// explicitly asked for, so a failure just leaves the badge
|
|
// "inconnu" for that row instead of surfacing an error banner.
|
|
async ensureLinkedReconciliationResolved() {
|
|
const toFetch = [];
|
|
for (const r of this.rows) {
|
|
if (!LINKABLE_TYPES.includes(r.type) || !r.entreeLieeIds.length) continue;
|
|
if (r.entreeLieeIds.every((eid) => this.resolvedLinkGroups.has(eid))) continue;
|
|
r.entreeLieeIds.forEach((eid) => this.resolvedLinkGroups.add(eid));
|
|
toFetch.push(r.nid);
|
|
}
|
|
await Promise.all(toFetch.map((nid) => this.fetchGroupFromNid(nid).catch(() => {})));
|
|
},
|
|
// Live multi-user updates without websocket/Socket.io infra --
|
|
// plain polling (see POLL_INTERVAL_MS) is simple, fits the
|
|
// existing fetch-based architecture, and is plenty for a
|
|
// 6-person internal tool. A failed poll is silent and just tried
|
|
// again next tick (matches other background-refresh code here);
|
|
// lastPollTs is deliberately *not* advanced on failure, so a
|
|
// transient network blip doesn't miss whatever changed during it.
|
|
startPolling() {
|
|
setInterval(() => this.pollForChanges(), POLL_INTERVAL_MS);
|
|
},
|
|
async pollForChanges() {
|
|
// setInterval doesn't wait for a previous callback's promise to
|
|
// settle before scheduling the next tick -- without this guard,
|
|
// a poll that takes longer than POLL_INTERVAL_MS to respond
|
|
// (slow network, tab was backgrounded and just resumed) would
|
|
// overlap with the next one, both merging into `rows` at once.
|
|
if (this._pollInFlight) return;
|
|
this._pollInFlight = true;
|
|
try {
|
|
const { data, includedMap } = await fetchChangedSince(this.lastPollTs);
|
|
if (data.length) {
|
|
this.mergeChangedRows(buildRows(data, includedMap));
|
|
}
|
|
this.lastPollTs = Math.floor(Date.now() / 1000);
|
|
} catch (err) {
|
|
// silent -- see comment above.
|
|
} finally {
|
|
this._pollInFlight = false;
|
|
}
|
|
},
|
|
// Patches already-loaded rows in place (mutates each row's own
|
|
// properties via Object.assign, not the `rows`/`groupExtraRows`
|
|
// arrays themselves) so Vue's reactivity updates just the
|
|
// affected cells, without re-triggering the `rows` watcher (and
|
|
// so ensureLinkedReconciliationResolved()) for routine polls that
|
|
// only touch content already known locally. A row currently being
|
|
// edited is left alone entirely -- overwriting its value out from
|
|
// under an in-progress keystroke would be worse than a few
|
|
// seconds of staleness; it'll pick up on the next poll once
|
|
// editing finishes. Genuinely new lines (not loaded at all yet)
|
|
// that fall inside the current window get appended -- that's the
|
|
// one case that *does* need the array reassigned, since there's
|
|
// no existing row object to mutate.
|
|
//
|
|
// `rows` is server-filtered (see fetchFilteredLignes()), unlike
|
|
// before Phase 2 where it held the whole window and a computed
|
|
// property filtered it for display -- pollForChanges() is
|
|
// deliberately still unfiltered/global (see its own comment), so a
|
|
// change reported here might have moved a row *out* of the active
|
|
// filters (patch would leave a stale non-matching row visible) or
|
|
// *into* them (a row not previously loaded now qualifies). A row
|
|
// living in groupExtraRows instead is unaffected by the toolbar
|
|
// filters at all (that's the drill-down modal's own concern), so
|
|
// it's always just patched in place.
|
|
mergeChangedRows(changedRows) {
|
|
const isBeingEdited = (id) => this.editingTypeId === id || (this.editingCell && this.editingCell.id === id);
|
|
const rowsById = new Map(this.rows.map((r) => [r.id, r]));
|
|
const extraById = new Map(this.groupExtraRows.map((r) => [r.id, r]));
|
|
const newOnes = [];
|
|
const removeIds = new Set();
|
|
for (const fresh of changedRows) {
|
|
if (isBeingEdited(fresh.id)) continue;
|
|
const inExtra = extraById.get(fresh.id);
|
|
if (inExtra) {
|
|
Object.assign(inExtra, fresh);
|
|
continue;
|
|
}
|
|
const inWindow = fresh.date >= this.windowStart && fresh.date < this.windowEnd;
|
|
const matches = inWindow && this.rowMatchesFilters(fresh);
|
|
const existing = rowsById.get(fresh.id);
|
|
if (existing) {
|
|
if (matches) {
|
|
Object.assign(existing, fresh);
|
|
} else {
|
|
removeIds.add(fresh.id);
|
|
}
|
|
} else if (matches) {
|
|
newOnes.push(fresh);
|
|
}
|
|
}
|
|
if (newOnes.length || removeIds.size) {
|
|
this.rows = [...this.rows.filter((r) => !removeIds.has(r.id)), ...newOnes].sort((a, b) => (a.date || '').localeCompare(b.date || ''));
|
|
}
|
|
},
|
|
startEditType(item) {
|
|
this.typeUpdateError = null;
|
|
this.editingTypeId = item.id;
|
|
},
|
|
// Optimistically patches the row in `rows` (not the transient
|
|
// `item` from groupedRows -- that object is rebuilt from scratch on
|
|
// every computed re-evaluation, so mutating it wouldn't stick) for
|
|
// instant feedback, then reconciles with the server in the
|
|
// background via reloadWindow() (picks up anything else the save
|
|
// touched, e.g. a cleared field_entree_liee).
|
|
async saveType(item, event) {
|
|
const newType = event.target.value;
|
|
this.editingTypeId = null;
|
|
if (newType === item.type) return;
|
|
try {
|
|
const result = await updateLigneType(item.nid, newType, item.changed);
|
|
const row = this.rows.find((r) => r.id === item.id);
|
|
if (row) {
|
|
row.type = newType;
|
|
row.linkable = LINKABLE_TYPES.includes(newType);
|
|
row.changed = result.changed;
|
|
if (result.entree_liee_cleared) {
|
|
row.entreeLieeIds = [];
|
|
row.entreeLieeLabels = [];
|
|
}
|
|
}
|
|
this.reloadWindow();
|
|
} catch (err) {
|
|
this.typeUpdateError = err.message;
|
|
if (err.status === 409) this.refreshSingleRow(item.id, item.nid);
|
|
}
|
|
},
|
|
startEditCell(item, field) {
|
|
this.typeUpdateError = null;
|
|
this.editingCell = { id: item.id, field };
|
|
},
|
|
isEditingCell(item, field) {
|
|
return !!this.editingCell && this.editingCell.id === item.id && this.editingCell.field === field;
|
|
},
|
|
// Same optimistic-patch-then-close pattern as saveType() above --
|
|
// client/facture/libellé don't affect linkability or
|
|
// field_entree_liee, so there's nothing else to reconcile via
|
|
// reloadWindow() here. Signalement (field_flag) isn't handled here
|
|
// -- it's multi-value and edited through its own modal, see
|
|
// openFlagModal()/saveFlagList() below.
|
|
async saveCell(item, field, event) {
|
|
const newValue = event.target.value.trim();
|
|
this.editingCell = null;
|
|
if (newValue === (item[field] || '')) return;
|
|
try {
|
|
const result = await updateLigneField(item.nid, field, newValue, item.changed);
|
|
const row = this.rows.find((r) => r.id === item.id);
|
|
if (row) {
|
|
row[field] = result.value;
|
|
row.changed = result.changed;
|
|
}
|
|
// A client name with no existing match gets created on the fly
|
|
// (server-side) rather than rejected -- reflect it in the
|
|
// filter dropdown/datalist immediately instead of only after a
|
|
// reload picks up the new taxonomy term via fetchClientNames().
|
|
if (field === 'client' && result.value && !this.allClientsList.includes(result.value)) {
|
|
this.allClientsList = [...this.allClientsList, result.value].sort();
|
|
}
|
|
} catch (err) {
|
|
this.typeUpdateError = err.message;
|
|
if (err.status === 409) this.refreshSingleRow(item.id, item.nid);
|
|
}
|
|
},
|
|
// Signalement modal: one tag per line (add/remove), not a single
|
|
// comma-separated text field -- easier to see what's already there
|
|
// and remove just one without retyping the rest. flagModalItem is
|
|
// its own small reactive object (not aliased to the row in `rows`)
|
|
// so the modal keeps working even if the underlying row gets
|
|
// trimmed out of the sliding window while it's open; saveFlagList()
|
|
// updates both explicitly.
|
|
openFlagModal(item) {
|
|
this.typeUpdateError = null;
|
|
this.flagModalItem = { id: item.id, nid: item.nid, date: item.date, client: item.client, changed: item.changed, flags: item.flags.slice() };
|
|
this.flagModalNewTag = '';
|
|
},
|
|
closeFlagModal() {
|
|
this.flagModalItem = null;
|
|
this.flagModalNewTag = '';
|
|
},
|
|
async addFlagTag() {
|
|
const name = this.flagModalNewTag.trim();
|
|
if (!name || this.flagModalItem.flags.includes(name)) {
|
|
this.flagModalNewTag = '';
|
|
return;
|
|
}
|
|
this.flagModalNewTag = '';
|
|
await this.saveFlagList([...this.flagModalItem.flags, name]);
|
|
},
|
|
async removeFlagTag(name) {
|
|
await this.saveFlagList(this.flagModalItem.flags.filter((f) => f !== name));
|
|
},
|
|
async saveFlagList(newFlags) {
|
|
const item = this.flagModalItem;
|
|
try {
|
|
const result = await updateLigneField(item.nid, 'flag', newFlags.join(', '), item.changed);
|
|
item.flags = result.value;
|
|
item.changed = result.changed;
|
|
const row = this.rows.find((r) => r.id === item.id) || this.groupExtraRows.find((r) => r.id === item.id);
|
|
if (row) {
|
|
row.flags = result.value;
|
|
row.hasFlag = result.value.length > 0;
|
|
row.changed = result.changed;
|
|
}
|
|
const newNames = result.value.filter((name) => !this.allFlagsList.includes(name));
|
|
if (newNames.length) this.allFlagsList = [...this.allFlagsList, ...newNames].sort();
|
|
} catch (err) {
|
|
this.typeUpdateError = err.message;
|
|
if (err.status === 409) {
|
|
this.refreshSingleRow(item.id, item.nid);
|
|
this.closeFlagModal();
|
|
}
|
|
}
|
|
},
|
|
// 409 conflict from saveType()/saveCell() above -- someone else
|
|
// saved this exact line in between. Re-fetch just this one node
|
|
// and patch it in place, so the row reflects their change right
|
|
// away instead of staying stuck on the stale view that caused the
|
|
// rejection (the user would otherwise hit the same conflict again
|
|
// on retry without understanding why).
|
|
async refreshSingleRow(id, nid) {
|
|
try {
|
|
const { data, includedMap } = await fetchLignesByNids([nid]);
|
|
if (!data.length) return;
|
|
const [freshRow] = buildRows(data, includedMap);
|
|
const existing = this.rows.find((r) => r.id === id) || this.groupExtraRows.find((r) => r.id === id);
|
|
if (existing) Object.assign(existing, freshRow);
|
|
} catch (err) {
|
|
// Best effort -- the error banner from the conflict itself
|
|
// already told the user to reload if this doesn't work out.
|
|
}
|
|
},
|
|
onCellHover(evt) {
|
|
const cell = evt.target.closest('td, th');
|
|
if (!cell) return;
|
|
// No crosshair on the technical action columns (link/edit icons) --
|
|
// there's nothing to compare across rows there.
|
|
if (cell.classList.contains('actions-col')) {
|
|
this.clearColHover();
|
|
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;
|
|
}
|
|
});
|
|
},
|
|
// showLoading defaults to true for the initial mount, where there's
|
|
// nothing on screen yet to preserve. A post-edit refresh passes
|
|
// false: flipping `loading` back to true would unmount the whole
|
|
// v-else table (the "Chargement…" paragraph takes its place) and
|
|
// remount it from scratch once the fetch resolves -- exactly the
|
|
// full-table flicker/scroll-reset Vue's keyed diffing exists to
|
|
// avoid. Reassigning `rows` in place lets Vue patch just the rows
|
|
// that actually changed.
|
|
async load(showLoading = true) {
|
|
if (showLoading) this.loading = true;
|
|
this.error = null;
|
|
try {
|
|
const today = todayStr();
|
|
this.windowStart = addMonths(today, -WINDOW_MONTHS);
|
|
this.windowEnd = addMonths(today, WINDOW_MONTHS);
|
|
this.rows = await fetchFilteredLignes({ start: this.windowStart, end: this.windowEnd }, this.currentFilters());
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
if (showLoading) this.loading = false;
|
|
}
|
|
},
|
|
// Post-edit refresh: re-fetch exactly the currently loaded window
|
|
// (not a fresh "last 18 months" window) so editing an old line
|
|
// doesn't silently reset how far the user had scrolled back. Also
|
|
// the reload path every toolbar filter change routes through (see
|
|
// onFilterChanged()) -- with filtering now server-side, changing a
|
|
// filter has to re-fetch, not just re-scan what's already loaded.
|
|
async reloadWindow() {
|
|
if (!this.windowStart || !this.windowEnd) return;
|
|
try {
|
|
this.rows = await fetchFilteredLignes({ start: this.windowStart, end: this.windowEnd }, this.currentFilters());
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
}
|
|
},
|
|
// Public entry points queue onto a shared chain (see _queueWindowOp)
|
|
// instead of running immediately -- see that method for why a
|
|
// "drop if busy" guard used to sit here and why it had to go.
|
|
loadOlder() {
|
|
return this._queueWindowOp(() => this._loadOlderNow());
|
|
},
|
|
loadNewer() {
|
|
return this._queueWindowOp(() => this._loadNewerNow());
|
|
},
|
|
// Both loadOlder()/loadNewer() mutate `rows`/windowStart/windowEnd,
|
|
// and a scroll-position compensation write inside one (from
|
|
// trimming the far end) fires a real 'scroll' event that can kick
|
|
// off the other direction while the first is still in flight --
|
|
// interleaving them races on that shared state (observed earlier
|
|
// this session as `rows` transiently emptying out). That used to be
|
|
// guarded by a `loadingWindow` boolean that made a call arriving
|
|
// while another was in flight a silent no-op -- but a no-op is
|
|
// indistinguishable from "there's nothing more to load", which is
|
|
// exactly the signal ensureScrollable() uses to stop recursing. In
|
|
// practice that meant several filters restored from the URL hash at
|
|
// once (mounted() sets filterCompte/filterClient/filterType as
|
|
// three separate reactive writes, each firing its own watcher) could
|
|
// each kick off loadOlder()/loadNewer(), have all but one silently
|
|
// dropped by the guard, and have ensureScrollable() conclude "window
|
|
// didn't change" and give up after a single round -- even though the
|
|
// table was nowhere near scrollable yet, and with nothing left to
|
|
// ever retry (no scrollbar, no more scroll events). Queuing instead
|
|
// of dropping means every call still eventually runs, in order, once
|
|
// whatever's ahead of it in the queue finishes.
|
|
_queueWindowOp(fn) {
|
|
const run = () => fn().catch((err) => { this.error = err.message; });
|
|
this._windowOpChain = (this._windowOpChain || Promise.resolve()).then(run, run);
|
|
return this._windowOpChain;
|
|
},
|
|
async _loadOlderNow() {
|
|
// Bypassed while a specific "Année" filter is active -- that mode
|
|
// loads exactly one year and nothing else (see enterYearMode).
|
|
// Also bypassed once the window already reaches MIN_LOADABLE_DATE --
|
|
// nothing older to fetch, so skip straight out instead of re-firing
|
|
// an empty request on every subsequent scroll/layout tick. Checked
|
|
// here (at actual run time, not call time) since by the time this
|
|
// reaches the front of the queue, windowStart may have moved.
|
|
if (!this.windowStart || this.filterYear || this.windowStart <= MIN_LOADABLE_DATE) return;
|
|
this.loadingOlder = true;
|
|
try {
|
|
let newStart = addMonths(this.windowStart, -EXTEND_MONTHS);
|
|
if (newStart < MIN_LOADABLE_DATE) newStart = MIN_LOADABLE_DATE;
|
|
const newRows = await fetchFilteredLignes({ start: newStart, end: this.windowStart }, this.currentFilters());
|
|
this.windowStart = newStart;
|
|
|
|
if (newRows.length) {
|
|
const wrap = this.$refs.tableWrap;
|
|
const prevScrollHeight = wrap ? wrap.scrollHeight : 0;
|
|
this.rows = [...newRows, ...this.rows];
|
|
await this.$nextTick();
|
|
// Prepending pushes existing content down -- keep whatever
|
|
// the user was looking at in the same visual spot. This
|
|
// write fires its own native 'scroll' event, re-entering
|
|
// checkEdges() -- harmless: loadingOlder is still true at
|
|
// this point (reset only in the `finally` below), so that
|
|
// event finds the guard there already blocking a redundant
|
|
// call, no separate suppression needed.
|
|
if (wrap) wrap.scrollTop += wrap.scrollHeight - prevScrollHeight;
|
|
}
|
|
|
|
// Trim the far (newer) end once the window's grown past the cap
|
|
// -- happens below the current scroll position, so no visual
|
|
// jump to compensate for.
|
|
const maxEnd = addMonths(this.windowStart, this.isFiltering() ? MAX_LOADED_MONTHS_FILTERED : MAX_LOADED_MONTHS);
|
|
if (this.windowEnd > maxEnd) {
|
|
this.rows = this.rows.filter((r) => r.date < maxEnd);
|
|
this.windowEnd = maxEnd;
|
|
}
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
this.loadingOlder = false;
|
|
}
|
|
},
|
|
async _loadNewerNow() {
|
|
// Same MIN_LOADABLE_DATE reasoning as _loadOlderNow(), mirrored at
|
|
// the future end.
|
|
if (!this.windowEnd || this.filterYear || this.windowEnd >= MAX_LOADABLE_DATE) return;
|
|
this.loadingNewer = true;
|
|
try {
|
|
let newEnd = addMonths(this.windowEnd, EXTEND_MONTHS);
|
|
if (newEnd > MAX_LOADABLE_DATE) newEnd = MAX_LOADABLE_DATE;
|
|
const newRows = await fetchFilteredLignes({ start: this.windowEnd, end: newEnd }, this.currentFilters());
|
|
this.windowEnd = newEnd;
|
|
|
|
if (newRows.length) {
|
|
// Appended below the viewport -- no scroll compensation needed.
|
|
this.rows = [...this.rows, ...newRows];
|
|
}
|
|
|
|
// Trim the far (older) end once past the cap -- this IS above
|
|
// the viewport, so compensate scrollTop the same way loadOlder
|
|
// does for its prepend.
|
|
const minStart = addMonths(this.windowEnd, this.isFiltering() ? -MAX_LOADED_MONTHS_FILTERED : -MAX_LOADED_MONTHS);
|
|
if (this.windowStart < minStart) {
|
|
const wrap = this.$refs.tableWrap;
|
|
const prevScrollHeight = wrap ? wrap.scrollHeight : 0;
|
|
const prevScrollTop = wrap ? wrap.scrollTop : 0;
|
|
this.rows = this.rows.filter((r) => r.date >= minStart);
|
|
this.windowStart = minStart;
|
|
await this.$nextTick();
|
|
if (wrap) wrap.scrollTop = prevScrollTop - (prevScrollHeight - wrap.scrollHeight);
|
|
}
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
this.loadingNewer = false;
|
|
}
|
|
},
|
|
// Scroll-position based rather than IntersectionObserver: one
|
|
// unified scroll handler drives both edge-loading and
|
|
// detectCurrentYear() below, instead of maintaining two separate
|
|
// observer instances for what's fundamentally the same "where is
|
|
// the user looking right now" question.
|
|
checkEdges() {
|
|
const wrap = this.$refs.tableWrap;
|
|
if (!wrap) return;
|
|
const threshold = 400;
|
|
// No overflow at all -- typically a filter (compte/client/type/
|
|
// écarts) has thinned the visible rows enough that the loaded
|
|
// window's worth of matches doesn't fill the viewport. scrollTop
|
|
// is stuck at 0 either way, so neither of the two checks below
|
|
// means anything on its own; try both directions instead of
|
|
// waiting for a scroll that can never happen with nothing to
|
|
// scroll.
|
|
const notScrollable = wrap.scrollHeight <= wrap.clientHeight;
|
|
// Guarded by loadingOlder/loadingNewer, not just called
|
|
// unconditionally: loadOlder()/loadNewer() queue instead of
|
|
// dropping a call that arrives while one's already running (see
|
|
// _queueWindowOp) -- correct for the *distinct* triggers that fix
|
|
// was about (several filters changing in the same tick), but a
|
|
// single continuous scroll gesture fires many native 'scroll'
|
|
// events, and checkEdges() runs on every one of them. Without
|
|
// this guard, every one of those events near an edge queued its
|
|
// own loadOlder()/loadNewer() call, and every queued call did a
|
|
// real fetch + scroll compensation regardless of whether the
|
|
// very first one already moved the window away from the edge --
|
|
// that pileup is what looked like the same request firing over
|
|
// and over, dragging the scroll position around unpredictably.
|
|
if ((notScrollable || wrap.scrollTop < threshold) && !this.loadingOlder) this.loadOlder();
|
|
if ((notScrollable || wrap.scrollTop + wrap.clientHeight > wrap.scrollHeight - threshold) && !this.loadingNewer) this.loadNewer();
|
|
},
|
|
// Whether an active filter (server-side now, see
|
|
// fetchFilteredLignes()) thins `rows` down to fewer matches than an
|
|
// unfiltered window would have -- loadOlder()/loadNewer() use this to
|
|
// widen the trim cap (MAX_LOADED_MONTHS_FILTERED instead of
|
|
// MAX_LOADED_MONTHS), since the normal cap actively works against a
|
|
// sparse filter: extending one end and immediately trimming the
|
|
// other off nets out to almost the same slice every round, so a
|
|
// filter with only a few matches a year could search almost forever
|
|
// without surfacing more of them.
|
|
isFiltering() {
|
|
return !!(this.filterCompte.length || this.filterClient || this.filterType.length || this.filterFlag.length || this.filterQ || this.onlyErrors || this.onlyFlagged);
|
|
},
|
|
// The non-date part of every toolbar filter, in the shape
|
|
// fetchFilteredLignes()/filteredLignesUrl() expect -- built fresh
|
|
// from current state each call rather than kept as its own piece
|
|
// of reactive state, so there's only one source of truth for what
|
|
// "the active filters" are.
|
|
currentFilters() {
|
|
return {
|
|
compte: this.filterCompte,
|
|
client: this.filterClient,
|
|
type: this.filterType,
|
|
flag: this.filterFlag,
|
|
q: this.filterQ,
|
|
ecarts: this.onlyErrors,
|
|
signale: this.onlyFlagged,
|
|
};
|
|
},
|
|
// Client-side mirror of the non-date conditions LedgerRowsController
|
|
// applies server-side -- used only by mergeChangedRows() below, to
|
|
// decide whether a row a poll just reported on still belongs in
|
|
// `rows` (which, unlike before Phase 2, only ever holds matches for
|
|
// the active filters, not the whole window). filterYear/the date
|
|
// window itself is checked separately by the caller, since
|
|
// windowStart/windowEnd already cover both the sliding-window and
|
|
// year-mode cases identically.
|
|
rowMatchesFilters(row) {
|
|
if (this.filterCompte.length && !this.filterCompte.some((c) => row.parCompte[c] !== undefined)) return false;
|
|
if (this.filterClient && row.client !== this.filterClient) return false;
|
|
if (this.filterType.length && !this.filterType.includes(row.type)) return false;
|
|
if (this.filterFlag.length && !this.filterFlag.some((f) => row.flags.includes(f))) return false;
|
|
if (this.filterQ && !(row.libelle || '').toLowerCase().includes(this.filterQ.toLowerCase())) return false;
|
|
if (this.onlyErrors && !row.hasError) return false;
|
|
if (this.onlyFlagged && !row.hasFlag) return false;
|
|
return true;
|
|
},
|
|
// Every toolbar filter change routes through here: with filtering
|
|
// now server-side (see fetchFilteredLignes()), there's no more
|
|
// "just recompute a client-side view" -- the currently loaded
|
|
// window has to be re-fetched with the new filter applied. The
|
|
// reload itself is queued through the same chain as loadOlder()/
|
|
// loadNewer() (see _queueWindowOp) since several filters can change
|
|
// in the same tick (e.g. mounted() restoring them all from the URL
|
|
// hash at once), and interleaving their fetches would race on
|
|
// `rows` the same way parallel loadOlder()/loadNewer() calls used
|
|
// to. ensureScrollable() is deliberately chained AFTER that queued
|
|
// op settles, not passed into it: ensureScrollable() itself calls
|
|
// loadOlder()/loadNewer(), which each enqueue their own op onto the
|
|
// very same chain -- queuing it *inside* the op currently occupying
|
|
// that chain made the chain await its own continuation (the queued
|
|
// op can't finish until its child call, appended behind it on the
|
|
// same chain, finishes first) and deadlocked solid the moment a
|
|
// filter actually left too few rows to fill the viewport, wedging
|
|
// every future filter change and scroll-triggered load right along
|
|
// with it.
|
|
//
|
|
// loadCurrentYearTotals() is called unconditionally here (not just
|
|
// left to detectCurrentYear()'s own trigger): that one only
|
|
// re-fetches when the *visible year* changes, so a filter change
|
|
// while staying on the same year would otherwise leave the footer
|
|
// showing stale, pre-filter totals. Independent of the window
|
|
// reload above (different endpoint call, no shared state), so no
|
|
// need to chain it through the same queue.
|
|
onFilterChanged() {
|
|
this._queueWindowOp(() => this.reloadWindow()).then(() => this.ensureScrollable());
|
|
this.loadCurrentYearTotals();
|
|
this.syncHash();
|
|
},
|
|
// Keeps extending the window (both directions) as long as a filter
|
|
// leaves too few matching rows to fill the viewport -- otherwise
|
|
// there's never another scroll event to hang further loading off
|
|
// of, and the sliding window silently stops responding the moment a
|
|
// filter (compte/client/type/écarts) makes the visible page short
|
|
// enough to not need a scrollbar.
|
|
//
|
|
// Bounded by a round count regardless, as a safety net: addMonths()
|
|
// uses JS's Date#setMonth(), which isn't invertible for month-end
|
|
// dates (e.g. 2025-03-31 minus 1 month lands on 2025-03-03, not
|
|
// 2025-02-28, because setMonth(1) overflows February), so even with
|
|
// the widened cap above, "no change since last round" isn't a
|
|
// guaranteed way to detect "there's genuinely nothing more to find".
|
|
//
|
|
// Public entry point is serialized: mounted() restoring several
|
|
// filters from the URL hash (filterCompte/filterClient/filterType)
|
|
// assigns each as its own reactive property write, so each fires
|
|
// its own watcher and its own independent ensureScrollable(0) call
|
|
// in the very same tick. Without serializing, those chains race on
|
|
// loadOlder()/loadNewer()'s shared `loadingWindow` guard -- a call
|
|
// that lands while another is already in flight just no-ops
|
|
// immediately, so a chain can see "window didn't change" and give
|
|
// up after one round even though the table is nowhere near
|
|
// scrollable yet, and nothing is left afterward to ever retry
|
|
// (there's no scrollbar to generate the scroll events checkEdges()
|
|
// would otherwise rely on). Queuing instead of racing means the
|
|
// first call runs its full recursive loop uninterrupted, and any
|
|
// calls that arrived while it was busy collapse into a single
|
|
// follow-up run once it's done (covering the final filter state,
|
|
// cheap/no-op if that first run already converged).
|
|
ensureScrollable() {
|
|
if (this._ensureScrollableRunning) {
|
|
this._ensureScrollablePending = true;
|
|
return this._ensureScrollableRunning;
|
|
}
|
|
this._ensureScrollableRunning = this._ensureScrollableLoop(0).finally(() => {
|
|
this._ensureScrollableRunning = null;
|
|
if (this._ensureScrollablePending) {
|
|
this._ensureScrollablePending = false;
|
|
this.ensureScrollable();
|
|
}
|
|
});
|
|
return this._ensureScrollableRunning;
|
|
},
|
|
async _ensureScrollableLoop(round) {
|
|
if (this.filterYear || round >= MAX_ENSURE_SCROLLABLE_ROUNDS) return;
|
|
const wrap = this.$refs.tableWrap;
|
|
if (!wrap) return;
|
|
await this.$nextTick();
|
|
if (wrap.scrollHeight > wrap.clientHeight) return;
|
|
const beforeStart = this.windowStart;
|
|
const beforeEnd = this.windowEnd;
|
|
await this.loadOlder();
|
|
await this.loadNewer();
|
|
if (this.windowStart === beforeStart && this.windowEnd === beforeEnd) return;
|
|
await this._ensureScrollableLoop(round + 1);
|
|
},
|
|
// Which year is "at the top" of the visible area right now (just
|
|
// under the sticky thead) -- drives the totals footer. Works
|
|
// regardless of grouping mode: every rendered row (group header or
|
|
// data row) carries a data-year attribute.
|
|
detectCurrentYear() {
|
|
const wrap = this.$refs.tableWrap;
|
|
const table = this.$refs.tableEl;
|
|
if (!wrap || !table) return;
|
|
const thead = table.querySelector('thead');
|
|
const wrapRect = wrap.getBoundingClientRect();
|
|
const thresholdY = wrapRect.top + (thead ? thead.getBoundingClientRect().height : 0) + 2;
|
|
const rows = table.querySelectorAll('tbody tr[data-year]');
|
|
let year = null;
|
|
for (const tr of rows) {
|
|
const rect = tr.getBoundingClientRect();
|
|
if (rect.bottom > thresholdY) {
|
|
year = tr.dataset.year;
|
|
break;
|
|
}
|
|
}
|
|
if (year && year !== this.currentYear) {
|
|
this.currentYear = year;
|
|
this.loadCurrentYearTotals();
|
|
}
|
|
},
|
|
// No requestAnimationFrame throttle here anymore -- it used a
|
|
// "skip if a frame is already pending" guard reset from *inside*
|
|
// the rAF callback, which meant a single rAF callback that never
|
|
// fires (observed: a backgrounded/non-visible tab, where browsers
|
|
// routinely throttle or fully suspend rAF) permanently wedges the
|
|
// guard true, silently dropping every future scroll event forever
|
|
// -- exactly the "loads once then stops, can't scroll back" bug
|
|
// this replaces. detectCurrentYear()/checkEdges() are cheap (DOM
|
|
// reads + early-return guards, no work of their own), so calling
|
|
// them on every scroll event costs nothing worth throttling for.
|
|
onScroll() {
|
|
this.detectCurrentYear();
|
|
this.checkEdges();
|
|
},
|
|
// mounted() only runs once, but `v-if="loading"` swaps out the
|
|
// <div ref="tableWrap"> for a fresh DOM node every time loading
|
|
// toggles true -> false (enterYearMode/exitYearMode/jumpToYear all
|
|
// do this) -- the old node's scroll listener goes with it, silently
|
|
// leaving the new one with no listener at all (checkEdges() and
|
|
// detectCurrentYear(), and so the footer, stop responding to
|
|
// scroll). Call this after every such transition, once the new
|
|
// wrap exists; the dataset flag makes it a no-op if the element is
|
|
// unchanged.
|
|
ensureScrollListener() {
|
|
const wrap = this.$refs.tableWrap;
|
|
if (wrap && !wrap.dataset.figliScrollBound) {
|
|
wrap.dataset.figliScrollBound = '1';
|
|
wrap.addEventListener('scroll', this.onScroll, { passive: true });
|
|
}
|
|
},
|
|
async loadCurrentYearTotals() {
|
|
if (!this.currentYear) return;
|
|
this.currentYearLoading = true;
|
|
try {
|
|
this.currentYearTotals = await fetchYearTotals(this.currentYear, this.currentFilters());
|
|
} catch (err) {
|
|
this.currentYearTotals = null;
|
|
} finally {
|
|
this.currentYearLoading = false;
|
|
}
|
|
},
|
|
// Picking a specific "Année" bypasses the sliding window entirely --
|
|
// load exactly that year (a bounded, small fetch on its own) rather
|
|
// than post-filtering whatever happens to be in the current window,
|
|
// which could easily be empty for a year the user hasn't scrolled
|
|
// to yet.
|
|
async enterYearMode(year) {
|
|
this.loading = true;
|
|
this.error = null;
|
|
try {
|
|
const start = year + '-01-01';
|
|
const end = (parseInt(year, 10) + 1) + '-01-01';
|
|
this.rows = await fetchFilteredLignes({ annee: year }, this.currentFilters());
|
|
this.windowStart = start;
|
|
this.windowEnd = end;
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
await this.$nextTick();
|
|
if (this.$refs.tableWrap) this.$refs.tableWrap.scrollTop = 0;
|
|
this.ensureScrollListener();
|
|
this.detectCurrentYear();
|
|
},
|
|
// Back to "Toutes" -- resume the normal sliding window, re-centered
|
|
// on today rather than trying to resume exactly where the year
|
|
// filter was applied from.
|
|
async exitYearMode() {
|
|
await this.load();
|
|
await this.$nextTick();
|
|
const wrap = this.$refs.tableWrap;
|
|
if (wrap) wrap.scrollTop = wrap.scrollHeight;
|
|
this.ensureScrollListener();
|
|
this.detectCurrentYear();
|
|
},
|
|
// "Aller à" -- a one-shot navigation shortcut, distinct from the
|
|
// "Année" filter: it re-centers the sliding window on 1 January of
|
|
// the chosen year and scrolls there, but (unlike filterYear) doesn't
|
|
// restrict the view to just that year -- scrolling up/down still
|
|
// extends the window normally, so you can still see the overlap
|
|
// with neighbouring years.
|
|
onJumpYearChange() {
|
|
const year = this.jumpYearValue;
|
|
this.jumpYearValue = ''; // reset immediately -- this is an action, not a sticky filter
|
|
this.jumpToYear(year);
|
|
},
|
|
async jumpToYear(year) {
|
|
if (!year) return;
|
|
// A year filter would otherwise fight with the window this sets
|
|
// below -- clear it first, silencing the watcher's own
|
|
// exitYearMode() so its (different) window doesn't race this one.
|
|
if (this.filterYear) {
|
|
this._skipYearWatch = true;
|
|
this.filterYear = '';
|
|
}
|
|
this.lastJumpYear = year;
|
|
this.syncHash();
|
|
this.loading = true;
|
|
this.error = null;
|
|
try {
|
|
const yearStart = year + '-01-01';
|
|
this.windowStart = yearStart;
|
|
this.windowEnd = addMonths(yearStart, WINDOW_MONTHS * 2);
|
|
this.rows = await fetchFilteredLignes({ start: this.windowStart, end: this.windowEnd }, this.currentFilters());
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
await this.$nextTick();
|
|
const wrap = this.$refs.tableWrap;
|
|
if (wrap) wrap.scrollTop = 0;
|
|
this.ensureScrollListener();
|
|
this.detectCurrentYear();
|
|
this.checkEdges();
|
|
},
|
|
// Reflects the current filters + "Aller à" target in the URL hash
|
|
// (replacing, not pushing, so tweaking a dropdown doesn't spam the
|
|
// back button with history entries) -- reload the page or share the
|
|
// link and readHashState()/mounted() reproduce the same view.
|
|
syncHash() {
|
|
const hash = buildHashString({
|
|
filterCompte: this.filterCompte,
|
|
filterClient: this.filterClient,
|
|
filterType: this.filterType,
|
|
filterFlag: this.filterFlag,
|
|
filterYear: this.filterYear,
|
|
filterQ: this.filterQ,
|
|
onlyErrors: this.onlyErrors,
|
|
onlyFlagged: this.onlyFlagged,
|
|
lastJumpYear: this.lastJumpYear,
|
|
});
|
|
const url = location.pathname + location.search + (hash ? '#' + hash : '');
|
|
history.replaceState(null, '', url);
|
|
},
|
|
},
|
|
watch: {
|
|
// Fires on every load()/loadOlder()/loadNewer()/jumpToYear()/
|
|
// enterYearMode()/exitYearMode() -- all of them reassign `rows`
|
|
// (never mutate it in place), so a shallow watch catches every
|
|
// window change without needing to hook each function
|
|
// individually. See ensureLinkedReconciliationResolved() itself
|
|
// for why this needs to run at all.
|
|
rows() {
|
|
this.ensureLinkedReconciliationResolved();
|
|
},
|
|
filterYear(newYear, oldYear) {
|
|
if (this._skipYearWatch) {
|
|
this._skipYearWatch = false;
|
|
return;
|
|
}
|
|
if (newYear) {
|
|
this.enterYearMode(newYear);
|
|
} else if (oldYear) {
|
|
this.exitYearMode();
|
|
}
|
|
this.syncHash();
|
|
},
|
|
// Any of these is now pushed server-side (see LedgerRowsController/
|
|
// fetchFilteredLignes()) -- onFilterChanged() re-fetches the
|
|
// currently loaded window with the new filter applied, then widens
|
|
// it if that leaves too few rows to fill the viewport (see
|
|
// ensureScrollable()). filterYear is handled separately above (it
|
|
// swaps the whole loading strategy, not just which filter params
|
|
// get sent). Each also reflects into the URL hash -- see syncHash().
|
|
filterCompte() {
|
|
this.onFilterChanged();
|
|
},
|
|
filterClient() {
|
|
this.onFilterChanged();
|
|
},
|
|
filterType() {
|
|
this.onFilterChanged();
|
|
},
|
|
filterFlag() {
|
|
this.onFilterChanged();
|
|
},
|
|
// Debounced (unlike the other filters above) -- this one changes on
|
|
// every keystroke, and each change is a network round-trip now,
|
|
// not a free client-side recompute.
|
|
filterQ() {
|
|
clearTimeout(this._filterQDebounce);
|
|
this._filterQDebounce = setTimeout(() => this.onFilterChanged(), 350);
|
|
},
|
|
onlyErrors() {
|
|
this.onFilterChanged();
|
|
},
|
|
onlyFlagged() {
|
|
this.onFilterChanged();
|
|
},
|
|
},
|
|
async mounted() {
|
|
// Reproduce whatever the URL hash describes -- reload or a shared
|
|
// link should land on the same filtered view. The basic filters are
|
|
// all sent as query params on the very first load() below, so
|
|
// setting them here first (before deciding how to load) means that
|
|
// first fetch already reflects the restored view instead of
|
|
// loading unfiltered and re-fetching a moment later; filterYear/
|
|
// aller each own their loading path (enterYearMode()/jumpToYear()),
|
|
// so at most one of those runs instead of the default load().
|
|
const hashState = readHashState();
|
|
this.filterCompte = hashState.filterCompte;
|
|
this.filterClient = hashState.filterClient;
|
|
this.filterType = hashState.filterType;
|
|
this.filterFlag = hashState.filterFlag;
|
|
this.filterQ = hashState.filterQ;
|
|
this.onlyErrors = hashState.onlyErrors;
|
|
this.onlyFlagged = hashState.onlyFlagged;
|
|
|
|
if (hashState.filterYear) {
|
|
this.filterYear = hashState.filterYear;
|
|
} else if (hashState.aller) {
|
|
this.lastJumpYear = hashState.aller;
|
|
this.jumpToYear(hashState.aller);
|
|
} else {
|
|
await this.load();
|
|
await this.$nextTick();
|
|
const wrap = this.$refs.tableWrap;
|
|
this.ensureScrollListener();
|
|
if (wrap) {
|
|
// Start scrolled to the most recent data (the window is
|
|
// centered on "today", so that's the bottom of what's loaded).
|
|
wrap.scrollTop = wrap.scrollHeight;
|
|
}
|
|
this.detectCurrentYear();
|
|
this.checkEdges();
|
|
this.ensureScrollable();
|
|
}
|
|
|
|
// Independent of the row window, so the dropdowns don't shrink to
|
|
// "whatever happens to be loaded right now".
|
|
fetchClientNames().then((names) => { this.allClientsList = names; }).catch(() => {});
|
|
fetchFlagNames().then((names) => { this.allFlagsList = names; }).catch(() => {});
|
|
fetchYearsList().then((years) => { this.allYearsList = years; }).catch(() => {});
|
|
fetchOuvertureEcarts().then((ecarts) => { this.ouvertureEcarts = ecarts; }).catch(() => {});
|
|
jQuery(document).on('dialog:afterclose', () => this.reloadWindow());
|
|
|
|
this.lastPollTs = Math.floor(Date.now() / 1000);
|
|
this.startPolling();
|
|
},
|
|
};
|
|
|
|
Drupal.behaviors.figliComptaHome = {
|
|
attach(context) {
|
|
const root = context.querySelector ? context.querySelector('#figli-home-app') : null;
|
|
if (root && !root.dataset.figliInitialized) {
|
|
root.dataset.figliInitialized = '1';
|
|
Vue.createApp(App)
|
|
// Click-to-edit cells (type/client/facture/libellé) swap a
|
|
// span for an <input>/<select> via v-if -- Vue doesn't focus a
|
|
// newly created element on its own, so without this the first
|
|
// click only opened the field and a second click was needed to
|
|
// actually type into it. mounted() fires once per v-if
|
|
// true-flip, i.e. exactly when the field appears.
|
|
.directive('focus', {
|
|
mounted(el) {
|
|
el.focus();
|
|
if (typeof el.select === 'function') el.select();
|
|
},
|
|
})
|
|
.mount(root);
|
|
}
|
|
},
|
|
};
|
|
})(Drupal, Vue, jQuery);
|