u

src/api/ApiClient.js

@@ -110,7 +110,8 @@ export class ApiClient {
       history: (sku) => this.#json('GET', `/api/article/${enc(sku)}/history`),
       /**
        * Load history and refetch on SSE `article-<sku>`.
-       * `onHistory(history)` — returns unwatch(). Errors via notifyError.
+       * Paginates in StorageManager until the HTTP API supports skip/offset.
+       * `onHistory(history, total)` — returns `{ unwatch, setSkipAndOffset }`.
        */
       historyWatch: (sku, onHistory) => this.watchArticleHistory(sku, onHistory),
       /** PATCH /api/article/{sku} — body: at least one of { name, unitamount, unitSi } */

src/api/StorageManager.js

@@ -176,19 +176,36 @@ export class StorageManager extends ApiClient {
 
   /**
    * Fetch article history, then refetch whenever SSE emits `article-<sku>`.
+   * Paginates in the store (full list from HTTP; slice via setSkipAndOffset).
    * @param {string} sku
-   * @param {(history: unknown[]) => void} onHistory
-   * @returns {() => void} unwatch
+   * @param {(history: unknown[], total: number) => void} onHistory
+   * @returns {{ unwatch: () => void, setSkipAndOffset: (skip: number, offset: number) => void }}
    */
   watchArticleHistory(sku, onHistory) {
     const key = String(sku);
     let active = true;
+    let loaded = false;
+    /** @type {unknown[]} */
+    let all = [];
+    let skip = 0;
+    /** Page size (how many rows to emit). */
+    let offset = Number.POSITIVE_INFINITY;
+
+    const emit = () => {
+      if (!active || !loaded) return;
+      const total = all.length;
+      const end =
+        offset === Number.POSITIVE_INFINITY ? total : skip + offset;
+      onHistory(all.slice(skip, end), total);
+    };
 
     const refresh = () =>
       this.article.history(key).then((res) => {
         if (!active) return;
         requireObject(res, 'GET /api/article/{sku}/history');
-        onHistory(requireArray(res.history, 'history'));
+        all = requireArray(res.history, 'history');
+        loaded = true;
+        emit();
       });
 
     const run = () =>
@@ -211,17 +228,24 @@ export class StorageManager extends ApiClient {
 
     run();
 
-    return () => {
-      active = false;
-      const set = this.#historyWatchers.get(key);
-      if (!set) return;
-      set.delete(run);
-      if (set.size === 0) {
-        this.#historyWatchers.delete(key);
-        if (!this.#articleWatchers.has(key)) {
-          this.#events?.removeEventListener(`article-${key}`, this.#onArticleSignal);
+    return {
+      unwatch: () => {
+        active = false;
+        const set = this.#historyWatchers.get(key);
+        if (!set) return;
+        set.delete(run);
+        if (set.size === 0) {
+          this.#historyWatchers.delete(key);
+          if (!this.#articleWatchers.has(key)) {
+            this.#events?.removeEventListener(`article-${key}`, this.#onArticleSignal);
+          }
         }
-      }
+      },
+      setSkipAndOffset: (nextSkip, nextOffset) => {
+        skip = nextSkip;
+        offset = nextOffset;
+        emit();
+      },
     };
   }