feat(article): implement articlesupplier editor tab

- ApiClient: add getSuppliers, addSupplier, updateSupplier,
  orderSuppliers, deleteSupplier on article namespace
- api/index.js: expose same methods in legacy http client
- StorageManager: add #supplierWatchers Map and watchArticleSuppliers()
  backed by article-<sku> SSE signal; wired up as article.supplierWatch
- ArticleTileTab: pass article prop to ArticleSupplierTab
- ArticleSupplierDialog (new): dialog to assign / edit a supplier link
  (supplier autocomplete, Lief.-SKU, VPE, stock, EK Netto + MwSt.)
- ArticleSupplierTab: full supplier management table with reordering
  (up/down arrows → PUT /supplier/order), inline edit and delete,
  stock badge, purchase price display and empty state
This commit is contained in:
seb
2026-09-17 23:37:41 +02:00
parent 6e72ae84bd
commit 795043fe99
6 changed files with 833 additions and 10 deletions

View File

@@ -80,11 +80,15 @@ export class StorageManager extends ApiClient {
#articleWatchers = new Map();
/** @type {Map<string, Set<() => void>>} sku → history refreshers */
#historyWatchers = new Map();
/** @type {Map<string, Set<() => void>>} sku → supplier refreshers */
#supplierWatchers = new Map();
constructor(baseUrl = window.location.origin) {
super(baseUrl);
this.#initCaches();
this.article.watch = (sku, onArticle) => this.watchArticle(sku, onArticle);
this.article.supplierWatch = (sku, onSuppliers) =>
this.watchArticleSuppliers(sku, onSuppliers);
}
/** Settled article detail for sku, or undefined. */
@@ -124,7 +128,10 @@ export class StorageManager extends ApiClient {
*/
watchArticle(sku, onArticle) {
const key = String(sku);
const needListen = !this.#articleWatchers.has(key) && !this.#historyWatchers.has(key);
const needListen =
!this.#articleWatchers.has(key) &&
!this.#historyWatchers.has(key) &&
!this.#supplierWatchers.has(key);
let watchers = this.#articleWatchers.get(key);
if (!watchers) {
@@ -144,7 +151,10 @@ export class StorageManager extends ApiClient {
set.delete(onArticle);
if (set.size === 0) {
this.#articleWatchers.delete(key);
if (!this.#historyWatchers.has(key)) {
if (
!this.#historyWatchers.has(key) &&
!this.#supplierWatchers.has(key)
) {
this.#events?.removeEventListener(`article-${key}`, this.#onArticleSignal);
}
}
@@ -214,7 +224,10 @@ export class StorageManager extends ApiClient {
notifyError(err);
});
const needListen = !this.#articleWatchers.has(key) && !this.#historyWatchers.has(key);
const needListen =
!this.#articleWatchers.has(key) &&
!this.#historyWatchers.has(key) &&
!this.#supplierWatchers.has(key);
let watchers = this.#historyWatchers.get(key);
if (!watchers) {
@@ -236,7 +249,10 @@ export class StorageManager extends ApiClient {
set.delete(run);
if (set.size === 0) {
this.#historyWatchers.delete(key);
if (!this.#articleWatchers.has(key)) {
if (
!this.#articleWatchers.has(key) &&
!this.#supplierWatchers.has(key)
) {
this.#events?.removeEventListener(`article-${key}`, this.#onArticleSignal);
}
}
@@ -249,6 +265,68 @@ export class StorageManager extends ApiClient {
};
}
/**
* Load suppliers for an article and refetch on SSE `article-<sku>`.
* @param {string} sku
* @param {(suppliers: Array<object>) => void} onSuppliers
* @returns {{ unwatch: () => void, refresh: () => Promise<void> }}
*/
watchArticleSuppliers(sku, onSuppliers) {
const key = String(sku);
let active = true;
const refresh = async () => {
const res = await this.article.getSuppliers(key);
if (!active) return;
requireObject(res, 'GET /api/article/{sku}/supplier');
const list = requireArray(res.suppliers, 'suppliers');
onSuppliers(list);
};
const run = () => {
void refresh().catch((err) => {
if (!active) return;
notifyError(err);
});
};
const needListen =
!this.#articleWatchers.has(key) &&
!this.#historyWatchers.has(key) &&
!this.#supplierWatchers.has(key);
let watchers = this.#supplierWatchers.get(key);
if (!watchers) {
watchers = new Set();
this.#supplierWatchers.set(key, watchers);
}
watchers.add(run);
if (needListen) {
this.#events?.addEventListener(`article-${key}`, this.#onArticleSignal);
}
run();
return {
refresh,
unwatch: () => {
active = false;
const set = this.#supplierWatchers.get(key);
if (!set) return;
set.delete(run);
if (set.size === 0) {
this.#supplierWatchers.delete(key);
if (
!this.#articleWatchers.has(key) &&
!this.#historyWatchers.has(key)
) {
this.#events?.removeEventListener(`article-${key}`, this.#onArticleSignal);
}
}
},
};
}
#onArticleSignal = (event) => {
const sku = event.type.slice('article-'.length);
if (this.#articleWatchers.has(sku)) {
@@ -258,6 +336,10 @@ export class StorageManager extends ApiClient {
if (historyWatchers) {
for (const run of historyWatchers) run();
}
const supplierWatchers = this.#supplierWatchers.get(sku);
if (supplierWatchers) {
for (const run of supplierWatchers) run();
}
};
/** Patch local articleIndex name if already loaded; no-op otherwise. */
@@ -393,6 +475,7 @@ export class StorageManager extends ApiClient {
for (const sku of new Set([
...this.#articleWatchers.keys(),
...this.#historyWatchers.keys(),
...this.#supplierWatchers.keys(),
])) {
es.addEventListener(`article-${sku}`, this.#onArticleSignal);
}