Add "Aller à" year-jump shortcut next to the filters
Distinct from the existing "Année" filter (which restricts the view to just that year): this re-centers the sliding window on 1 January of the chosen year and scrolls there, while staying in the continuous view -- scrolling still extends the window normally in both directions, so overlaps between years stay visible, matching the earlier stated preference for a continuous view over a filtered one. Resets to the placeholder immediately after firing since it's a one-shot action, not a sticky filter. Guards against racing the "Année" watcher's own exitYearMode() when a year filter is already active when the jump is triggered.
This commit is contained in:
@@ -197,6 +197,7 @@
|
||||
filterClient: '',
|
||||
filterType: '',
|
||||
filterYear: '',
|
||||
jumpYearValue: '',
|
||||
groupBy: 'month',
|
||||
onlyErrors: false,
|
||||
hoverCol: null,
|
||||
@@ -649,9 +650,52 @@
|
||||
if (wrap) wrap.scrollTop = wrap.scrollHeight;
|
||||
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.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const yearStart = year + '-01-01';
|
||||
this.windowStart = yearStart;
|
||||
this.windowEnd = addMonths(yearStart, WINDOW_MONTHS * 2);
|
||||
const { data, includedMap } = await fetchLignes(rangeUrl(this.windowStart, this.windowEnd));
|
||||
this.rows = buildRows(data, includedMap);
|
||||
} catch (err) {
|
||||
this.error = err.message;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
await this.$nextTick();
|
||||
const wrap = this.$refs.tableWrap;
|
||||
if (wrap) wrap.scrollTop = 0;
|
||||
this.detectCurrentYear();
|
||||
this.checkEdges();
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
filterYear(newYear, oldYear) {
|
||||
if (this._skipYearWatch) {
|
||||
this._skipYearWatch = false;
|
||||
return;
|
||||
}
|
||||
if (newYear) {
|
||||
this.enterYearMode(newYear);
|
||||
} else if (oldYear) {
|
||||
|
||||
@@ -43,6 +43,13 @@
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>Aller à
|
||||
<select v-model="jumpYearValue" @change="onJumpYearChange">
|
||||
<option value="">Aller à…</option>
|
||||
<option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>Regrouper par
|
||||
<select v-model="groupBy">
|
||||
<option value="none">Aucun</option>
|
||||
|
||||
Reference in New Issue
Block a user