seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-13 01:50:36 +02:00
parent d715b9c4e5
commit 8f68f7d224
2 changed files with 241 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
src/automats/orderAutomat.js
View File

@@ -10,7 +10,6 @@
import { Automat } from 'react-automat'; import { Automat } from 'react-automat';
import { order as orderApi } from '../api'; import { order as orderApi } from '../api';
import authAutomat from './authAutomat'; import authAutomat from './authAutomat';
import entityAutomat from './entityAutomat';
/** /**
* @typedef {Object} OrderLine * @typedef {Object} OrderLine
@@ -47,6 +46,7 @@ import entityAutomat from './entityAutomat';
export const CHUNK_SIZE = 50; export const CHUNK_SIZE = 50;
const PREFETCH_CHUNKS = 2; const PREFETCH_CHUNKS = 2;
const CHUNK_DEBOUNCE_MS = 130;
const initialState = { const initialState = {
items: null, items: null,
@@ -62,10 +62,59 @@ const initialState = {
}; };
let automat; let automat;
let rawItems = null; let queryEpoch = 0;
let filterDebounceTimer = null;
let chunkDebounceTimer = null;
let currentEventTick = 0;
let lastRequireChunkTick = -1;
const pendingTargetChunks = new Set();
let pendingChunkPromise = null;
let pendingChunkResolve = null;
let pendingChunkReject = null;
const loadedChunks = new Set(); const loadedChunks = new Set();
const inflightChunks = new Map(); const inflightChunks = new Map();
// Clears pending debounced chunk requests
function clearChunkDebounce() {
if (chunkDebounceTimer) {
clearTimeout(chunkDebounceTimer);
chunkDebounceTimer = null;
}
pendingTargetChunks.clear();
pendingChunkPromise = null;
pendingChunkResolve = null;
pendingChunkReject = null;
}
// Executes chunk loading for the standstill target and prefetches lookahead chunks
function _executeRequiredChunks(chunks, targetEpoch) {
if (targetEpoch !== queryEpoch) {
return Promise.resolve(automat.state.items);
}
const chunkList = Array.from(chunks).sort((a, b) => a - b);
if (chunkList.length === 0) {
return Promise.resolve(automat.state.items);
}
const promises = [];
for (const c of chunkList) {
promises.push(actions.loadChunk(c, targetEpoch));
}
// Prefetch lookahead chunks after the highest requested chunk
const maxChunk = chunkList[chunkList.length - 1];
const total = automat.state.total || 0;
for (let c = maxChunk + 1; c <= maxChunk + PREFETCH_CHUNKS; c++) {
if (total > 0 && c * CHUNK_SIZE >= total) {
break;
}
void actions.loadChunk(c, targetEpoch);
}
return Promise.all(promises).then(() => automat.state.items);
}
// MARK: pure order helpers // MARK: pure order helpers
export function isOrderPaid(order) { export function isOrderPaid(order) {
if (!order) return false; if (!order) return false;
@@ -118,123 +167,155 @@ export function formatNegativeSeek(months) {
return `-${parts.join(' ')}`; return `-${parts.join(' ')}`;
} }
// MARK: fetches a single chunk from GET /api/order // Builds server query parameters from current automat filter state
function buildQueryParams(offset = 0, limit = CHUNK_SIZE) {
const { filter, onlyUnpaid, onlyUndelivered, negativeSeekMonths } = automat.state;
const params = { offset, limit };
const trimmed = String(filter ?? '').trim();
if (trimmed) params.search = trimmed;
if (onlyUnpaid) params.onlyUnpaid = true;
if (onlyUndelivered) params.onlyUndelivered = true;
if (negativeSeekMonths != null && Number(negativeSeekMonths) < 0) {
params.seekMonths = Number(negativeSeekMonths);
}
return params;
}
// MARK: fetches a single chunk from GET /api/order with server-side filters
async function fetchOrdersPage(offset = 0, limit = CHUNK_SIZE) { async function fetchOrdersPage(offset = 0, limit = CHUNK_SIZE) {
const res = await orderApi.list({ offset, limit }); const params = buildQueryParams(offset, limit);
const res = await orderApi.list(params);
const orders = Array.isArray(res?.orders) ? res.orders : []; const orders = Array.isArray(res?.orders) ? res.orders : [];
const total = Number(res?.total ?? orders.length); const total = Number(res?.total ?? orders.length);
return { orders, total }; return { orders, total };
} }
/** function onFilterChange(immediate = false) {
* Client-side filter helper over loaded orders. if (filterDebounceTimer) {
* @param {Order[]} items clearTimeout(filterDebounceTimer);
* @param {string|object} filterOrOpts String filter query or options object filterDebounceTimer = null;
* @param {(order: Order) => string} [nameOf] Customer name resolver.
*/
export function filterOrders(items, filterOrOpts, nameOf) {
if (!Array.isArray(items)) return [];
const opts = typeof filterOrOpts === 'string'
? { filter: filterOrOpts }
: (filterOrOpts ?? {});
const query = String(opts.filter ?? '').trim().toLowerCase();
const onlyUnpaid = Boolean(opts.onlyUnpaid);
const onlyUndelivered = Boolean(opts.onlyUndelivered);
const seekMonths = Number(opts.negativeSeekMonths ?? 0);
const cutoff = getNegativeSeekCutoff(seekMonths);
return items.filter((o) => {
if (!o) return false;
if (onlyUnpaid && isOrderPaid(o)) return false;
if (onlyUndelivered && isOrderDelivered(o)) return false;
if (cutoff) {
const orderDate = getOrderDate(o);
if (!orderDate || orderDate.getTime() > cutoff.getTime()) {
return false;
}
}
if (query) {
const customer = nameOf ? nameOf(o) : getCustomerName(o);
const matches = [o.number, o.externalNumber, customer]
.some((v) => String(v ?? '').toLowerCase().includes(query));
if (!matches) return false;
}
return true;
});
}
function getCustomerName(order) {
if (!order?.entityId) return '';
const entities = entityAutomat.state?.items;
if (!Array.isArray(entities)) return '';
const entity = entities.find((e) => e.id === order.entityId);
if (!entity) return '';
return [entity.firstName, entity.name].filter(Boolean).join(' ');
}
function hasActiveFilters(state = automat.state) {
return Boolean(
state.filter ||
state.onlyUnpaid ||
state.onlyUndelivered ||
state.negativeSeekMonths < 0
);
}
function updatePublishedItems() {
if (rawItems === null) {
automat.setState({ items: null });
return;
} }
const state = automat.state; if (immediate) {
if (!hasActiveFilters(state)) { applyFilterReload();
automat.setState({ } else {
items: rawItems ? [...rawItems] : null, filterDebounceTimer = setTimeout(() => {
total: rawItems ? rawItems.length : 0, filterDebounceTimer = null;
}); applyFilterReload();
return; }, 200);
} }
const loadedOrders = rawItems.filter(Boolean); }
const filtered = filterOrders(loadedOrders, {
filter: state.filter, function applyFilterReload() {
onlyUnpaid: state.onlyUnpaid, queryEpoch++;
onlyUndelivered: state.onlyUndelivered, clearChunkDebounce();
negativeSeekMonths: state.negativeSeekMonths, loadedChunks.clear();
}); inflightChunks.clear();
automat.setState({ void actions.loadChunk(0, queryEpoch);
items: filtered,
total: filtered.length,
});
} }
const actions = { const actions = {
// MARK: returns current items and triggers chunk 0 if not loaded // MARK: returns current items and triggers chunk 0 if not loaded
getItems() { getItems() {
if (automat.state.items === null) { if (automat.state.items === null) {
void actions.requireChunk(0); void actions.requireChunk(0, 0, { immediate: true });
return null; return null;
} }
return automat.state.items; return automat.state.items;
}, },
// MARK: ensures chunkIndex and lookahead chunks are loaded/loading // MARK: ensures chunkIndex and lookahead chunks are loaded/loading (debounced)
requireChunk(chunkIndex) { requireChunk(chunkIndex, endOrOptions = chunkIndex, maybeOptions = {}) {
const start = Math.max(0, Number(chunkIndex) || 0); let start;
const p = actions.loadChunk(start); let end;
for (let c = start + 1; c <= start + PREFETCH_CHUNKS; c++) { let options = {};
const total = rawItems ? rawItems.length : (automat.state.total || 0);
if (total > 0 && c * CHUNK_SIZE >= total) { if (Array.isArray(chunkIndex)) {
break; start = chunkIndex[0] ?? 0;
end = chunkIndex[chunkIndex.length - 1] ?? start;
if (typeof endOrOptions === 'object' && endOrOptions !== null) {
options = endOrOptions;
}
} else {
start = Number(chunkIndex) || 0;
if (typeof endOrOptions === 'object' && endOrOptions !== null) {
end = start;
options = endOrOptions;
} else {
end = Number(endOrOptions ?? start) || start;
if (typeof maybeOptions === 'object' && maybeOptions !== null) {
options = maybeOptions;
}
} }
void actions.loadChunk(c);
} }
return p;
start = Math.max(0, Math.floor(start));
end = Math.max(start, Math.floor(end));
// If initial items are null or immediate requested, bypass debounce and load immediately
if (options.immediate || automat.state.items === null) {
clearChunkDebounce();
const chunks = new Set();
for (let c = start; c <= end; c++) chunks.add(c);
return _executeRequiredChunks(chunks, queryEpoch);
}
// New event tick (drag mousemove / pagination click) replaces previous target position
if (lastRequireChunkTick !== currentEventTick) {
pendingTargetChunks.clear();
lastRequireChunkTick = currentEventTick;
if (typeof queueMicrotask === 'function') {
queueMicrotask(() => {
currentEventTick++;
});
} else {
Promise.resolve().then(() => {
currentEventTick++;
});
}
}
for (let c = start; c <= end; c++) {
pendingTargetChunks.add(c);
}
if (chunkDebounceTimer) {
clearTimeout(chunkDebounceTimer);
chunkDebounceTimer = null;
}
if (!pendingChunkPromise) {
pendingChunkPromise = new Promise((resolve, reject) => {
pendingChunkResolve = resolve;
pendingChunkReject = reject;
});
}
const captureEpoch = queryEpoch;
chunkDebounceTimer = setTimeout(() => {
chunkDebounceTimer = null;
const chunksToLoad = new Set(pendingTargetChunks);
pendingTargetChunks.clear();
const resolve = pendingChunkResolve;
const reject = pendingChunkReject;
pendingChunkPromise = null;
pendingChunkResolve = null;
pendingChunkReject = null;
_executeRequiredChunks(chunksToLoad, captureEpoch)
.then((res) => resolve?.(res))
.catch((err) => reject?.(err));
}, CHUNK_DEBOUNCE_MS);
return pendingChunkPromise;
}, },
// MARK: fetches a single chunk and populates prefilled array // MARK: fetches a single chunk and populates prefilled array
loadChunk(chunkIndex) { loadChunk(chunkIndex, targetEpoch = queryEpoch) {
const index = Math.max(0, Number(chunkIndex) || 0); const index = Math.max(0, Number(chunkIndex) || 0);
if (targetEpoch !== queryEpoch) {
return Promise.resolve(automat.state.items);
}
if (loadedChunks.has(index)) { if (loadedChunks.has(index)) {
return Promise.resolve(automat.state.items); return Promise.resolve(automat.state.items);
} }
@@ -244,57 +325,61 @@ const actions = {
const offset = index * CHUNK_SIZE; const offset = index * CHUNK_SIZE;
const limit = CHUNK_SIZE; const limit = CHUNK_SIZE;
if (rawItems === null && automat.state.status === 'idle') { if (index === 0 && automat.state.items === null) {
automat.setState({ status: 'loading', error: null }); automat.setState({ status: 'loading', error: null });
} }
const promise = fetchOrdersPage(offset, limit) const promise = fetchOrdersPage(offset, limit)
.then(({ orders, total }) => { .then(({ orders, total }) => {
const currentTotal = total > 0 ? total : (orders.length + offset); // Discard if active filter query changed while request was in flight
if (targetEpoch !== queryEpoch) {
if (rawItems === null) { return automat.state.items;
// Pre-fill rawItems array with that many empty (null) items
rawItems = new Array(currentTotal).fill(null);
} else if (rawItems.length !== currentTotal) {
const next = new Array(currentTotal).fill(null);
const copyLen = Math.min(rawItems.length, currentTotal);
for (let i = 0; i < copyLen; i++) {
next[i] = rawItems[i];
}
rawItems = next;
} }
// Fill in real received items let items = automat.state.items;
const currentTotal = total > 0 ? total : 0;
if (items === null || items.length !== currentTotal) {
// Pre-fill items array with empty (null) items based on server filtered total
items = new Array(currentTotal).fill(null);
} else {
items = [...items];
}
// Fill in real received items for this chunk
for (let i = 0; i < orders.length; i++) { for (let i = 0; i < orders.length; i++) {
const idx = offset + i; const idx = offset + i;
if (idx < rawItems.length) { if (idx < items.length) {
rawItems[idx] = orders[i]; items[idx] = orders[i];
} }
} }
loadedChunks.add(index); loadedChunks.add(index);
automat.setState({ automat.setState({
items,
total: currentTotal,
status: 'ready', status: 'ready',
error: null, error: null,
}); });
updatePublishedItems();
// Trigger lookahead prefetching if first chunk just arrived // Trigger lookahead prefetching if first chunk just arrived
if (index === 0) { if (index === 0) {
for (let c = 1; c <= PREFETCH_CHUNKS; c++) { for (let c = 1; c <= PREFETCH_CHUNKS; c++) {
if (c * CHUNK_SIZE < currentTotal) { if (c * CHUNK_SIZE < currentTotal) {
void actions.loadChunk(c); void actions.loadChunk(c, targetEpoch);
} }
} }
} }
return automat.state.items; return items;
}) })
.catch((err) => { .catch((err) => {
console.error(`[orderAutomat] loadChunk(${index}) error:`, err); if (targetEpoch === queryEpoch) {
if (rawItems === null) { console.error(`[orderAutomat] loadChunk(${index}) error:`, err);
automat.setState({ status: 'failed', error: err }); if (index === 0 && automat.state.items === null) {
automat.setState({ status: 'failed', error: err });
}
} }
throw err; throw err;
}) })
@@ -306,41 +391,20 @@ const actions = {
return promise; return promise;
}, },
// MARK: loads all remaining chunks in the background when filtering // MARK: server-side filter actions
loadAllRemainingChunks() {
if (!rawItems) return;
const total = rawItems.length;
const totalChunks = Math.ceil(total / CHUNK_SIZE);
for (let c = 0; c < totalChunks; c++) {
if (!loadedChunks.has(c) && !inflightChunks.has(c)) {
void actions.loadChunk(c);
}
}
},
// MARK: filter actions
filter(query) { filter(query) {
automat.setState({ filter: String(query ?? '') }); automat.setState({ filter: String(query ?? '') });
updatePublishedItems(); onFilterChange(false);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
}, },
setOnlyUnpaid(onlyUnpaid) { setOnlyUnpaid(onlyUnpaid) {
automat.setState({ onlyUnpaid: Boolean(onlyUnpaid) }); automat.setState({ onlyUnpaid: Boolean(onlyUnpaid) });
updatePublishedItems(); onFilterChange(true);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
}, },
setOnlyUndelivered(onlyUndelivered) { setOnlyUndelivered(onlyUndelivered) {
automat.setState({ onlyUndelivered: Boolean(onlyUndelivered) }); automat.setState({ onlyUndelivered: Boolean(onlyUndelivered) });
updatePublishedItems(); onFilterChange(true);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
}, },
addSeekMonth() { addSeekMonth() {
@@ -348,10 +412,7 @@ const actions = {
const seekYears = automat.state.seekYears ?? 0; const seekYears = automat.state.seekYears ?? 0;
const totalMonths = -(seekMonths + seekYears * 12); const totalMonths = -(seekMonths + seekYears * 12);
automat.setState({ seekMonths, negativeSeekMonths: totalMonths }); automat.setState({ seekMonths, negativeSeekMonths: totalMonths });
updatePublishedItems(); onFilterChange(true);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
}, },
addSeekYear() { addSeekYear() {
@@ -359,10 +420,7 @@ const actions = {
const seekYears = (automat.state.seekYears ?? 0) + 1; const seekYears = (automat.state.seekYears ?? 0) + 1;
const totalMonths = -(seekMonths + seekYears * 12); const totalMonths = -(seekMonths + seekYears * 12);
automat.setState({ seekYears, negativeSeekMonths: totalMonths }); automat.setState({ seekYears, negativeSeekMonths: totalMonths });
updatePublishedItems(); onFilterChange(true);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
}, },
addNegativeSeek(months) { addNegativeSeek(months) {
@@ -374,16 +432,13 @@ const actions = {
const current = Math.min(0, Number(automat.state.negativeSeekMonths ?? 0)); const current = Math.min(0, Number(automat.state.negativeSeekMonths ?? 0));
const next = current + months; const next = current + months;
automat.setState({ negativeSeekMonths: Math.min(0, next) }); automat.setState({ negativeSeekMonths: Math.min(0, next) });
updatePublishedItems(); onFilterChange(true);
if (hasActiveFilters()) {
actions.loadAllRemainingChunks();
}
} }
}, },
resetNegativeSeek() { resetNegativeSeek() {
automat.setState({ seekMonths: 0, seekYears: 0, negativeSeekMonths: 0 }); automat.setState({ seekMonths: 0, seekYears: 0, negativeSeekMonths: 0 });
updatePublishedItems(); onFilterChange(true);
}, },
resetFilters() { resetFilters() {
@@ -395,12 +450,12 @@ const actions = {
seekYears: 0, seekYears: 0,
negativeSeekMonths: 0, negativeSeekMonths: 0,
}); });
updatePublishedItems(); onFilterChange(true);
}, },
// MARK: initial load // MARK: initial load
load() { load() {
return actions.loadChunk(0); return actions.loadChunk(0, queryEpoch);
}, },
// MARK: ensure loaded // MARK: ensure loaded
@@ -408,63 +463,61 @@ const actions = {
if (automat.state.items !== null) { if (automat.state.items !== null) {
return Promise.resolve(automat.state.items); return Promise.resolve(automat.state.items);
} }
return actions.loadChunk(0); return actions.loadChunk(0, queryEpoch);
}, },
// MARK: reload all previously loaded chunks // MARK: reload with current active server filters
async reload() { async reload() {
const chunksToReload = Array.from(loadedChunks); queryEpoch++;
clearChunkDebounce();
loadedChunks.clear(); loadedChunks.clear();
inflightChunks.clear(); inflightChunks.clear();
rawItems = null; await actions.loadChunk(0, queryEpoch);
if (chunksToReload.length === 0) {
return actions.loadChunk(0);
}
await actions.loadChunk(0);
for (const c of chunksToReload) {
if (c !== 0 && rawItems && c * CHUNK_SIZE < rawItems.length) {
void actions.loadChunk(c);
}
}
return automat.state.items; return automat.state.items;
}, },
// MARK: replace items directly // MARK: replace items directly
replace(items) { replace(items) {
clearChunkDebounce();
loadedChunks.clear(); loadedChunks.clear();
inflightChunks.clear(); inflightChunks.clear();
rawItems = Array.isArray(items) ? [...items] : []; const count = Array.isArray(items) ? items.length : 0;
updatePublishedItems();
automat.setState({ automat.setState({
items,
total: count,
status: 'ready', status: 'ready',
error: null, error: null,
}); });
return automat.state.items; return items;
}, },
// MARK: patches an order locally in the automat items cache // MARK: patches an order locally in the automat items cache
patchOrder(id, patch) { patchOrder(id, patch) {
if (!Array.isArray(automat.state.items)) return automat.state.items;
let changed = false; let changed = false;
if (Array.isArray(rawItems)) { const items = automat.state.items.map((o) => {
rawItems = rawItems.map((o) => { if (o && o.id === id) {
if (o && o.id === id) { changed = true;
changed = true; return { ...o, ...patch };
return { ...o, ...patch }; }
} return o;
return o; });
});
}
if (changed) { if (changed) {
updatePublishedItems(); automat.setState({ items });
} }
return automat.state.items; return items;
}, },
// MARK: resets state // MARK: resets state
reset() { reset() {
queryEpoch++;
if (filterDebounceTimer) {
clearTimeout(filterDebounceTimer);
filterDebounceTimer = null;
}
clearChunkDebounce();
loadedChunks.clear(); loadedChunks.clear();
inflightChunks.clear(); inflightChunks.clear();
rawItems = null;
automat.setState(initialState); automat.setState(initialState);
}, },
}; };
@@ -477,8 +530,8 @@ export function getItems() {
return actions.getItems(); return actions.getItems();
} }
export function requireChunk(chunkIndex) { export function requireChunk(chunkIndex, endOrOptions, maybeOptions) {
return actions.requireChunk(chunkIndex); return actions.requireChunk(chunkIndex, endOrOptions, maybeOptions);
} }
orderAutomat.getItems = getItems; orderAutomat.getItems = getItems;

7
src/components/manifest/OrderList.jsx
View File

@@ -487,14 +487,11 @@ export class OrderList extends PureComponent {
const startChunk = Math.floor(startIndex / CHUNK_SIZE); const startChunk = Math.floor(startIndex / CHUNK_SIZE);
const endChunk = Math.floor(endIndex / CHUNK_SIZE); const endChunk = Math.floor(endIndex / CHUNK_SIZE);
orderAutomat.requireChunk(startChunk); orderAutomat.requireChunk(startChunk, endChunk);
if (endChunk !== startChunk) {
orderAutomat.requireChunk(endChunk);
}
} }
handleRetry() { handleRetry() {
void orderAutomat.actions.requireChunk(0).catch(() => {}); void orderAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
} }
handleCreate() { handleCreate() {