Compare commits
2 Commits
2046f96768
...
5e13b8f9cd
| Author | SHA1 | Date | |
|---|---|---|---|
|
5e13b8f9cd | ||
|
|
536e7b1e2a |
207
.agents/skills/backend/SKILL.md
Normal file
207
.agents/skills/backend/SKILL.md
Normal file
@@ -0,0 +1,207 @@
|
||||
---
|
||||
name: backend
|
||||
description: >-
|
||||
Reference and schema documentation for LibDashStore backend service and database models.
|
||||
Use this skill whenever working with backend data models, database schema definitions (articles, categories, companies, entities, manifests, orders, POS terminals), or calling and integrating with LibDashStore API methods and namespaces.
|
||||
---
|
||||
|
||||
# LibDashStore API
|
||||
|
||||
This document is auto-generated from the JSDoc comments in `src/store` by running `npm run api-doc`.
|
||||
|
||||
The store is exposed as a `LibDashStore` instance (see `src/index.js`). Each method is an async function that takes a `pool` (mssql connection pool) at construction time and returns a callable function. Methods are grouped by the namespace they are exposed under.
|
||||
|
||||
## Database Schema
|
||||
|
||||
> **Convention**: `PK` primary key · `?` nullable · `->tbl` foreign key · `UQ` unique · `s(N)` string · `txt` text · `i` int · `bi` bigint · `f` float · `d` decimal · `b` bit · `dt` datetime · `bin` binary · `=val` default
|
||||
|
||||
- **article**: `id PK, sku?:s(100) UQ, unit_id->unit, unitamount:f, weight:f, brand_id?->brand, articlelist_id?->articlelist, optionslist_id?->optionslist, is_father:b=0, fatherarticle_id?->article, fathersort:i=0, created_at:dt, updated_at:dt, UQ(fatherarticle_id, fathersort)`
|
||||
- **articleean**: `id PK, article_id->article, ean:s(50) UQ`
|
||||
- **articlehistory**: `id PK, article_id->article, companyuser_id?->companyuser, date:dt, text:txt`
|
||||
- **articlelist**: `id PK`
|
||||
- **articlelistarticle**: `id PK, articlelist_id->articlelist, article_id->article, count:i=1, sort:i=0, UQ(articlelist_id, article_id), UQ(articlelist_id, sort)`
|
||||
- **articlepic**: `id PK, article_id->article, pic_id->pic, sort:i=0, UQ(article_id, pic_id), UQ(article_id, sort)`
|
||||
- **articlesupplier**: `id PK, article_id->article, entity_id->entity, price_id?->price, sku?:s(100), stock?:f, pu:f=1, sort:i=0, UQ(article_id, entity_id), UQ(article_id, sort)`
|
||||
- **articletext**: `id PK, article_id->article, language_id->language, name:s(255), slug:s(255), seo?:txt, desc?:txt, UQ(article_id, language_id)`
|
||||
- **brand**: `id PK, company_id->company, name:s(255), gsprpinfo?:txt, UQ(company_id, name)`
|
||||
- **brandpic**: `id PK, brand_id->brand, pic_id->pic, sort:i=0, UQ(brand_id, pic_id), UQ(brand_id, sort)`
|
||||
- **category**: `id PK, parent_id?->category, sort:i=0`
|
||||
- **categoryarticle**: `id PK, category_id->category, article_id->article, UQ(category_id, article_id)`
|
||||
- **categorypic**: `id PK, category_id->category, pic_id->pic, sort:i=0, UQ(category_id, pic_id), UQ(category_id, sort)`
|
||||
- **categorytext**: `id PK, category_id->category, language_id->language, name:s(255), slug:s(255), seo?:txt, desc?:txt, UQ(category_id, language_id)`
|
||||
- **company**: `id PK, name:s(255) UQ, root_category_id?->category, default_language_id?->language, taxrate?->tax, reducedtaxrate?->tax, taxfreerate?->tax, poscustomergroup_id->customergroup`
|
||||
- **companysetting**: `id PK, company_id->company, key:s(255), value:txt, frontend:b=0, writeonly:b=0, UQ(company_id, key)`
|
||||
- **companyuser**: `id PK, google_auth_id->google_auth, company_id->company, UQ(google_auth_id, company_id)`
|
||||
- **customergroup**: `id PK, name:s(255), sort:i=0, company_id?->company`
|
||||
- **entity**: `id PK, customergroup_id->customergroup, first_name?:s(255), name:s(255), number?:s(100), created_at:dt, updated_at:dt, UQ(company_id, number)`
|
||||
- **entityaddress**: `id PK, entity_id->entity, first_name?:s(255), name?:s(255), street?:s(255), streetnumber?:s(50), zip?:s(50), city?:s(255), county?:s(255), addresstype:s(50), sort:i=0`
|
||||
- **entitycontact**: `id PK, entity_id->entity, contacttype:s(50), contact:s(255), sort:i=0`
|
||||
- **entityhistory**: `id PK, entity_id->entity, companyuser_id?->companyuser, date:dt, text:txt`
|
||||
- **file**: `id PK, hash:s(64), mimetype:s(255), name:s(255), size:bi, created:dt, modified:dt, content:bin, thumbavif?:bin, thumbx?:i, thumby?:i, meta?:txt`
|
||||
- **google_auth**: `id PK, email:s(320) UQ, picture?:s(2048), picturebinary?:bin, sub?:s(255) UQ, created_at:dt, selected_company?->company`
|
||||
- **language**: `id PK, iso639:s(10) UQ`
|
||||
- **ledger**: `id PK, manifestarticle_id->manifestarticle, transaction_type:s(100), amount:f, transaction_text:txt, hash_version:i, prev_hash?:s(128) [append-only]`
|
||||
- **manifest**: `id PK, company_id->company, number:s(100), type:s(100), entity_id?->entity, external_number?:s(100), date:dt`
|
||||
- **manifestarticle**: `id PK, manifest_id->manifest, sku?:s(100), name?:s(255), pu:f=1, amount:f, net:f, comment?:txt, rebate:f=0, taxrate:f=0`
|
||||
- **manifestattachment**: `id PK, manifest_id->manifest, file_id->file, sort:i=0, UQ(manifest_id, sort)`
|
||||
- **meta**: `key:s(255) PK, value:txt`
|
||||
- **numbers**: `id PK, company_id->company, type:s(100), prefix:s(50)='', padding:i=0, next:i=1, UQ(company_id, type)`
|
||||
- **optionslist**: `id PK`
|
||||
- **optionslistarticle**: `id PK, optionslist_id->optionslist, article_id->article, count:i=1, sort:i=0, mandated:b=0, UQ(optionslist_id, article_id), UQ(optionslist_id, sort)`
|
||||
- **pic**: `id PK, w:i, h:i, size:bi, hash:s(64) UQ, thumbw:i, thumbh:i, thumbhash:s(64), source:txt, fullbinary:bin, thumbbinary:bin`
|
||||
- **posterminal**: `id PK, company_id->company, name:s(255), token?:s(255) UQ, pairingpin:s(50)`
|
||||
- **posterminalcategory**: `id PK, posterminal_id->posterminal, category_id->category, UQ(posterminal_id, category_id)`
|
||||
- **price**: `id PK, tax_id->tax, article_id->article, minmultiplier:d(18,4)=1, customergroup_id->customergroup, net:f`
|
||||
- **syncpos**: `id PK, company_id->company, paircode:s(50) UQ, token?:s(255) UQ`
|
||||
- **tax**: `id PK, rate:d(18,4) UQ`
|
||||
- **unit**: `id PK, company_id->company, si:s(50), basesi:s(50), basesifactor:f, UQ(company_id, si)`
|
||||
- **unittext**: `id PK, unit_id->unit, language_id->language, symbol:s(50), name:s(255), UQ(unit_id, language_id)`
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [companyuser](API.companyuser.md)
|
||||
- `add(companyId: number, googleAuthId: number): Promise<number>`
|
||||
- `delete(id: number): Promise<void>`
|
||||
- `getByEmail(email: string): Promise<Array<number>>`
|
||||
- [company](API.company.md)
|
||||
- `create(input: {iso639: string, name: string, taxrate: number, reducedtaxrate: number, googleAuthId: number}): Promise<{id: number, rootCategoryId: number, languageId: number, taxrateId: number, reducedtaxrateId: number, taxfreerateId: number, posCustomerGroupId: number}>`
|
||||
- `delete(companyId: number): Promise<void>`
|
||||
- `getById(id: number, tx?: object): Promise<object|undefined>`
|
||||
- `getByName(name: string, tx?: object): Promise<object|undefined>`
|
||||
- `list(googleAuthId: number): Promise<Array<object>>`
|
||||
- `update(id: number, input: {iso639: string, name: string, taxrate: number, reducedtaxrate: number}): Promise<{id: number, rootCategoryId: number, languageId: number, taxrateId: number, reducedtaxrateId: number, taxfreerateId: number}>`
|
||||
- [category](API.category.md)
|
||||
- `addImage(googleAuthId: number, categoryId: number, image: Buffer): Promise<{id: number, fullHash: string, thumbW: number, thumbH: number, thumbHash: string}>`
|
||||
- `createUnderParent(input: {googleAuthId: number, parentId: number, name: string}): Promise<{id: number, parentId: number, sort: number, name: string, slug: string}>`
|
||||
- `delete(input: {googleAuthId: number, id: number}): Promise<void>`
|
||||
- `deleteImage(googleAuthId: number, categoryId: number): Promise<{id: number, thumbW: null, thumbH: null, thumbHash: null}>`
|
||||
- `ensureByPath(input: {googleAuthId: number, parentId: number, path: string}, tx?: object): Promise<number>`
|
||||
- `getCategoryArticles(googleAuthId: number, categoryId: number): Promise<Array<object>>`
|
||||
- `getTreeForCompany(googleAuthId: number): Promise<{languageId: number, tree: Array<object>, articles: Array<object>}>`
|
||||
- `move(input: {googleAuthId: number, id: number, parentId: number}): Promise<{id: number, parentId: number, sort: number}>`
|
||||
- `order(input: {googleAuthId: number, parentId: number, categoryIds: Array<number>}): Promise<{categoryIds: Array<number>}>`
|
||||
- `rename(input: {googleAuthId: number, id: number, name: string}): Promise<{id: number, name: string, slug: string}>`
|
||||
- [article](API.article.md)
|
||||
- `addImage(googleAuthId: number, sku: string, image: Buffer): Promise<{picId: number, sort: number, full: {w: number, h: number, size: number}, thumb: {w: number, h: number}, fullHash: string, thumbHash: string}>`
|
||||
- `createUnderParent(input: {googleAuthId: number, parentId: number, name: string}): Promise<{id: number, parentId: number, name: string, sku: string}>`
|
||||
- `delete(googleAuthId: number, sku: string): Promise<void>`
|
||||
- `deleteImage(googleAuthId: number, sku: string, fullHash: string): Promise<void>`
|
||||
- `getBySku(googleAuthId: number, sku: string): Promise<{article: {id: number, sku: string, name: string, slug: string, unitamount: number|null, weight: number|null, unit: {si: string|null, basesi: string|null, basesifactor: number|null, symbol: string|null, name: string|null}, brand: {name: string, thumbW: number, thumbH: number, thumbHash: string}|null, categoryIds: number[], photos: Array<{sort: number, fullHash: string, fullW: number, fullH: number, fullSize: number, thumbW: number, thumbH: number, thumbHash: string}>, eans: string[], prices: Array<{minmultiplier: number, net: number, taxRate: number, customergroupId: number}>, suppliers: Array<{id: number, articleId: number, entityId: number, supplierName: string|null, sku: string|null, pu: number, stock: number|null, sort: number, priceId: number|null, price: {net: number, taxId: number, taxRate?: number}|null}>, optionsCount: number, articleListCount: number, childCount: number, fatherArticleId: number|null, fatherSku: string|null}}>`
|
||||
- `getHistoryBySku(googleAuthId: number, sku: string): Promise<Array<{id: number, companyuserId: number|null, date: string, text: string}>>`
|
||||
- `importRows(input: {googleAuthId: number, rows: Array<object>}): Promise<{imported: Array<object>, skipped: Array<object>, errors: Array<object>}>`
|
||||
- `listExport(googleAuthId: number, categoryId?: number|null): Promise<Array<object>>`
|
||||
- `listSearchIndex(googleAuthId: number): Promise<Array<{id: number, sku: string, name: string, eans: Array<string>, categoryIds: Array<number>}>>`
|
||||
- `orderImages(googleAuthId: number, sku: string, input: {fullHashes: Array<string>}): Promise<{fullHashes: Array<string>}>`
|
||||
- `setBrandIdBySku(googleAuthId: number, sku: string, brandId: number|null): Promise<object>`
|
||||
- `setCategoryIdsBySku(googleAuthId: number, sku: string, categoryIds: Array<number>): Promise<object>`
|
||||
- `setEansBySku(googleAuthId: number, sku: string, eans: Array<string>): Promise<object>`
|
||||
- `setFatherBySku(googleAuthId: number, sku: string, fatherSku: string|null): Promise<object>`
|
||||
- `setPricesBySku(googleAuthId: number, sku: string, prices: Array<{price: number, tax: number, minmultiplier?: number}>): Promise<object>`
|
||||
- `setWeightBySku(googleAuthId: number, sku: string, weight: number): Promise<object>`
|
||||
- `updateBySku(googleAuthId: number, sku: string, patch: {name?: string, unitSi?: string, unitamount?: number}): Promise<object>`
|
||||
- [lang](API.lang.md)
|
||||
- `create(iso639: string, tx?: object): Promise<number>`
|
||||
- `delete(id: number): Promise<void>`
|
||||
- `ensure(iso639: string, tx?: object): Promise<number>`
|
||||
- `getByIso639(iso639: string, tx?: object): Promise<{id: number, iso639: string}>`
|
||||
- `list(): Promise<Array<{id: number, iso639: string}>>`
|
||||
- [tax](API.tax.md)
|
||||
- `create(rate: number, tx?: object): Promise<number>`
|
||||
- `ensure(rate: number, tx?: object): Promise<number>`
|
||||
- `getByRate(rate: number, tx?: object): Promise<{id: number, rate: number}>`
|
||||
- `list(): Promise<Array<{id: number, rate: number}>>`
|
||||
- [unit](API.unit.md)
|
||||
- `delete(googleAuthId: number, si: string): Promise<void>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, si: string, basesi: string, basesifactor: number, symbol: string, name: string}>>`
|
||||
- `upsert(googleAuthId: number, input: {si: string, basesi: string, basesifactor: number, symbol: string, name: string}): Promise<{id: number, si: string, basesi: string, basesifactor: number, symbol: string, name: string}>`
|
||||
- [companysetting](API.companysetting.md)
|
||||
- `get(googleAuthId: number, key: string, options?: {frontendOnly?: boolean, maskWriteonly?: boolean}): Promise<{key: string, value: string, frontend: boolean, writeonly: boolean}|undefined>`
|
||||
- `list(googleAuthId: number, options?: {frontendOnly?: boolean, maskWriteonly?: boolean}): Promise<Array<{key: string, value: string, frontend: boolean, writeonly: boolean}>>`
|
||||
- `set(googleAuthId: number, input: {key: string, value: string, frontend?: boolean, writeonly?: boolean}): Promise<{key: string, value: string, frontend: boolean, writeonly: boolean}>`
|
||||
- [brand](API.brand.md)
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, name: string, gsprpinfo: string|null}>>`
|
||||
- `upsert(googleAuthId: number, input: {name: string, gsprpinfo?: string}): Promise<{id: number, name: string, gsprpinfo: string|null}>`
|
||||
- [customergroup](API.customergroup.md)
|
||||
- `create(googleAuthId: number, input: {name: string}): Promise<{id: number, name: string, sort: number}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, name: string, sort: number}>>`
|
||||
- `order(googleAuthId: number, input: {customergroupIds: Array<number>}): Promise<{customergroupIds: Array<number>}>`
|
||||
- `update(googleAuthId: number, id: number, input: {name: string}): Promise<{id: number, name: string, sort: number}>`
|
||||
- [entity](API.entity.md)
|
||||
- `create(googleAuthId: number, input: {customergroupId: number, name: string, firstName?: string, number?: string}): Promise<{id: number, customergroupId: number, firstName: string|null, name: string, number: string, createdAt: string, updatedAt: string}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `getById(googleAuthId: number, id: number): Promise<{id: number, customergroupId: number, firstName: string|null, name: string, number: string, createdAt: string, updatedAt: string}>`
|
||||
- `isNumberFree(googleAuthId: number, number: string, options?: {excludeEntityId?: number}): Promise<boolean>`
|
||||
- `list(googleAuthId: number, options?: {customergroupId?: number, role?: string}): Promise<Array<{id: number, customergroupId: number, firstName: string|null, name: string, number: string, createdAt: string, updatedAt: string}>>`
|
||||
- `peekNextNumber(googleAuthId: number): Promise<string>`
|
||||
- `update(googleAuthId: number, id: number, patch: {name?: string, firstName?: string, number?: string}): Promise<{id: number, customergroupId: number, firstName: string|null, name: string, number: string, createdAt: string, updatedAt: string}>`
|
||||
- [entityaddress](API.entityaddress.md)
|
||||
- `create(googleAuthId: number, entityId: number, input: {addressType: string, firstName?: string, name?: string, street?: string, streetNumber?: string, zip?: string, city?: string, county?: string, sort?: number}): Promise<{id: number, entityId: number, firstName: string|null, name: string|null, street: string|null, streetNumber: string|null, zip: string|null, city: string|null, county: string|null, addressType: string, sort: number}>`
|
||||
- `delete(googleAuthId: number, entityId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number, entityId: number): Promise<Array<{id: number, entityId: number, firstName: string|null, name: string|null, street: string|null, streetNumber: string|null, zip: string|null, city: string|null, county: string|null, addressType: string, sort: number}>>`
|
||||
- `update(googleAuthId: number, entityId: number, id: number, patch: {addressType?: string, firstName?: string, name?: string, street?: string, streetNumber?: string, zip?: string, city?: string, county?: string, sort?: number}): Promise<{id: number, entityId: number, firstName: string|null, name: string|null, street: string|null, streetNumber: string|null, zip: string|null, city: string|null, county: string|null, addressType: string, sort: number}>`
|
||||
- [entitycontact](API.entitycontact.md)
|
||||
- `create(googleAuthId: number, entityId: number, input: {contactType: string, contact: string, sort?: number}): Promise<{id: number, entityId: number, contactType: string, contact: string, sort: number}>`
|
||||
- `delete(googleAuthId: number, entityId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number, entityId: number): Promise<Array<{id: number, entityId: number, contactType: string, contact: string, sort: number}>>`
|
||||
- `update(googleAuthId: number, entityId: number, id: number, patch: object): Promise<{id: number, entityId: number, contactType: string, contact: string, sort: number}>`
|
||||
- [supplier](API.supplier.md)
|
||||
- `create(googleAuthId: number, input: {name: string}): Promise<{id: number, name: string, createdAt: string, updatedAt: string}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, name: string, createdAt: string, updatedAt: string}>>`
|
||||
- `update(googleAuthId: number, id: number, input: {name: string}): Promise<{id: number, name: string, createdAt: string, updatedAt: string}>`
|
||||
- [articlesupplier](API.articlesupplier.md)
|
||||
- `create(googleAuthId: number, sku: string, input: {entityId: number, sku?: string, pu?: number, stock?: number|null, sort?: number, netPrice?: number|null, taxId?: number, taxRate?: number}): Promise<{id: number, articleId: number, entityId: number, supplierName: string|null, sku: string|null, pu: number, stock: number|null, sort: number, priceId: number|null, price: {net: number, taxId: number, taxRate?: number}|null}>`
|
||||
- `delete(googleAuthId: number, sku: string, id: number): Promise<void>`
|
||||
- `listByArticleSku(googleAuthId: number, sku: string): Promise<Array<{id: number, articleId: number, entityId: number, supplierName: string|null, sku: string|null, pu: number, stock: number|null, sort: number, priceId: number|null, price: {net: number, taxId: number, taxRate?: number}|null}>>`
|
||||
- `listByEntityAndSkus(googleAuthId: number, entityIdOrOptions: number|{entityId?: number, supplierId?: number, skus?: string[]|string}, maybeSkus?: string[]|string): Promise<Array<{id: number, articleId: number, entityId: number, supplierName: string|null, sku: string|null, pu: number, stock: number|null, sort: number, priceId: number|null, price: {net: number, taxId: number, taxRate?: number}|null, article: {id: number, sku: string, name: string|null, slug: string|null, photos: Array<{sort: number, thumbhash: string, hash: string, thumbw: number, thumbh: number}>, articlepic: Array<{sort: number, thumbhash: string, hash: string, thumbw: number, thumbh: number}>, eans: string[], articleean: string[]}}>>`
|
||||
- `order(googleAuthId: number, sku: string, input: {ids: Array<number>}): Promise<{ids: Array<number>}>`
|
||||
- `update(googleAuthId: number, sku: string, id: number, patch: {sku?: string|null, pu?: number, stock?: number|null, sort?: number, netPrice?: number|null, taxId?: number, taxRate?: number}): Promise<{id: number, articleId: number, entityId: number, supplierName: string|null, sku: string|null, pu: number, stock: number|null, sort: number, priceId: number|null, price: {net: number, taxId: number, taxRate?: number}|null}>`
|
||||
- [delivery](API.delivery.md)
|
||||
- `attachments(): void`
|
||||
- `create(googleAuthId: number, body: {date: string, supplierId: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `getById(googleAuthId: number, id: number): Promise<{id: number, number: string, type: string, entityId: number, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, number: string, type: string, entityId: number, externalNumber: string|null, date: string}>>`
|
||||
- `update(googleAuthId: number, id: number, patch: {number?: string, date?: string, supplierId?: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- [quote](API.quote.md)
|
||||
- `create(googleAuthId: number, body: {number: string, date: string, entityId?: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `getById(googleAuthId: number, id: number): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string}>>`
|
||||
- `update(googleAuthId: number, id: number, patch: {number?: string, date?: string, entityId?: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- [order](API.order.md)
|
||||
- `create(googleAuthId: number, body: {number: string, date: string, entityId?: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `getById(googleAuthId: number, id: number): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string}>>`
|
||||
- `update(googleAuthId: number, id: number, patch: {number?: string, date?: string, entityId?: number, externalNumber?: string, lines?: Array<{sku?: string, name?: string, pu?: number, amount: number, net: number, rebate?: number, taxrate: number, comment?: string|null}>}): Promise<{id: number, number: string, type: string, entityId: number|null, externalNumber: string|null, date: string, lines: Array<{id: number, sku: string|null, name: string|null, pu: number, amount: number, net: number, rebate: number, taxrate: number, comment: string|null}>}>`
|
||||
- [manifestattachment](API.manifestattachment.md)
|
||||
- `add(googleAuthId: number, manifestId: number, input: {mimetype: string, name: string, content: Buffer, sort?: number, size?: number, created?: Date|string, modified?: Date|string, hash?: string, thumbavif?: Buffer, thumbx?: number, thumby?: number, meta?: object}): Promise<{id: number, manifestId: number, fileId: number, sort: number, hash: string, mimetype: string, name: string, size: number, created: Date, modified: Date, thumbavif: Buffer|null, thumbx: number|null, thumby: number|null, meta: object|null}>`
|
||||
- `getById(googleAuthId: number, manifestId: number, id: number): Promise<{id: number, manifestId: number, fileId: number, sort: number, hash: string, mimetype: string, name: string, size: number, created: Date, modified: Date, content: Buffer, thumbavif: Buffer|null, thumbx: number|null, thumby: number|null, meta: object|null}>`
|
||||
- `listByManifestId(): void`
|
||||
- `order(googleAuthId: number, manifestId: number, input: {ids?: Array<number>}): Promise<{ids: Array<number>}>`
|
||||
- `remove(googleAuthId: number, manifestId: number, id: number): Promise<void>`
|
||||
- [posterminal](API.posterminal.md)
|
||||
- `delete(googleAuthId: number, id: number): Promise<void>`
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, name: string, token: string, pairingpin: string}>>`
|
||||
- `setOff(googleAuthId: number, posterminalId: number, categoryId: number): Promise<{id: number, categoryIds: Array<number>}>`
|
||||
- `setOffAll(googleAuthId: number, posterminalId: number): Promise<{id: number, categoryIds: Array<number>}>`
|
||||
- `setOn(googleAuthId: number, posterminalId: number, categoryId: number): Promise<{id: number, categoryIds: Array<number>}>`
|
||||
- `setOnAll(googleAuthId: number, posterminalId: number): Promise<{id: number, categoryIds: Array<number>}>`
|
||||
- `upsert(googleAuthId: number, input: {name: string, pairingpin: string, token?: string, id?: number}): Promise<{id: number, name: string, token: string, pairingpin: string}>`
|
||||
- [google_auth](API.google_auth.md)
|
||||
- `add(email: string): Promise<number>`
|
||||
- `getByEmail(email: string): Promise<object|undefined>`
|
||||
- `getById(googleAuthId: number): Promise<object|undefined>`
|
||||
- `listAllowedEmails(): Promise<Array<{id: number, email: string}>>`
|
||||
- `removeAllowedEmail(email: string): Promise<void>`
|
||||
- `setProfile(googleAuthId: number, input: {picture?: string, pictureBinary?: Buffer, sub?: string}): Promise<void>`
|
||||
- `setSelectedCompany(googleAuthId: number, companyId: number): Promise<void>`
|
||||
- [pic](API.pic.md)
|
||||
- `getImageByHash(googleAuthId: number, fullHash: string): Promise<{buffer: Buffer, w: number, h: number, size: number, contentType: string}>`
|
||||
- `getThumbByHash(googleAuthId: number, fullHash: string): Promise<{buffer: Buffer, w: number, h: number, contentType: string}>`
|
||||
- [numbers](API.numbers.md)
|
||||
- `list(googleAuthId: number): Promise<Array<{id: number, type: string, prefix: string, padding: number, next: number}>>`
|
||||
- `update(googleAuthId: number, id: number, input: {prefix?: string, padding?: number, next?: number}): Promise<{id: number, type: string, prefix: string, padding: number, next: number}>`
|
||||
536
AGENTS.md
Normal file
536
AGENTS.md
Normal file
@@ -0,0 +1,536 @@
|
||||
# AGENTS.md — Dashfront Developer & Agent Guide
|
||||
|
||||
> **Audience**: AI Coding Agents & Pair-Programmers working on `dashfront`.
|
||||
> **Workspace**: `/home/seb/src/dashfront`
|
||||
> **Last Updated**: 2026-09-21
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [System Overview & Ecosystem Map](#1-system-overview--ecosystem-map)
|
||||
2. [Technology Stack & Key Libraries](#2-technology-stack--key-libraries)
|
||||
3. [Directory Layout](#3-directory-layout)
|
||||
4. [State Management Conventions](#4-state-management-conventions)
|
||||
5. [Backend Communication & Authentication Rules](#5-backend-communication--authentication-rules)
|
||||
6. [Route & Navigation Architecture](#6-route--navigation-architecture)
|
||||
7. [Developer Workflows & Commands](#7-developer-workflows--commands)
|
||||
8. [Critical Agent Rules & Common Pitfalls](#8-critical-agent-rules--common-pitfalls)
|
||||
9. [Deep Dive: The Automats (`react-automat`)](#9-deep-dive-the-automats-react-automat)
|
||||
10. [Deep Dive: Redux Toolkit Architecture](#10-deep-dive-redux-toolkit-architecture)
|
||||
11. [`dashgui` Component Library Integration](#11-dashgui-component-library-integration)
|
||||
12. [Application Views & Route Hierarchy](#12-application-views--route-hierarchy)
|
||||
13. [Media, Images & Document Pipelines](#13-media-images--document-pipelines)
|
||||
14. [Real-time SSE Signals & Invalidation](#14-real-time-sse-signals--invalidation)
|
||||
15. [Developer Tooling & Debugging](#15-developer-tooling--debugging)
|
||||
16. [Agent Cheatsheet & Code Recipes](#16-agent-cheatsheet--code-recipes)
|
||||
|
||||
---
|
||||
|
||||
## 1. System Overview & Ecosystem Map
|
||||
|
||||
`dashfront` is the React web client and Progressive Web App (PWA) for the Dash ERP/POS system. It is part of a multi-repository workspace under `/home/seb/src/`:
|
||||
|
||||
```
|
||||
/home/seb/src/
|
||||
├── dashfront/ # THIS REPO: Vite + React 19 web/PWA client (port 4209 HTTP, 4308 HTTPS)
|
||||
├── dashback/ # Backend Express REST/SSE API server (port 4208)
|
||||
├── dashdbschema/ # LibDashStore (MSSQL data layer, migrations, schema graph, API docs)
|
||||
├── dashgui/ # Reusable custom UI component library (file:../dashgui)
|
||||
└── automat/ # react-automat state management library (file:../automat or npm)
|
||||
```
|
||||
|
||||
### End-to-End Data & Execution Flow
|
||||
|
||||
```yaml
|
||||
# Machine-readable execution flow:
|
||||
flow:
|
||||
- step: 1_client
|
||||
component: dashfront
|
||||
runtime: React 19 (PureComponent & Function Components)
|
||||
state_layers:
|
||||
automats: [artikelAutomat, deliveryEditorAutomat, authAutomat, supplierAutomat, navigationAutomat, userSettingsAutomat]
|
||||
redux_slices: [company, category, brand, unit, posterminal]
|
||||
transport: src/api (http(), ApiClient)
|
||||
egress:
|
||||
protocol: HTTP (fetch with credentials: "include") & SSE (/api/events)
|
||||
proxy: Vite dev server (/api -> http://localhost:4208)
|
||||
target: dashback
|
||||
|
||||
- step: 2_api_gateway
|
||||
component: dashback
|
||||
runtime: Express 5 API server (src/api/routes/*)
|
||||
security:
|
||||
auth_middleware: Cookie auth middleware (validates JWT in HTTP-only "token" cookie)
|
||||
context_injection:
|
||||
user_auth_id: req.user.googleAuthId
|
||||
tenant_company_id: req.selectedCompanyId
|
||||
events: Dispatches real-time SSE mutation events to subscribed clients via /api/events
|
||||
egress:
|
||||
interface: In-process method calls (store.<namespace>.<method>())
|
||||
target: dashdbschema
|
||||
|
||||
- step: 3_data_layer
|
||||
component: dashdbschema
|
||||
runtime: LibDashStore (src/store/*)
|
||||
storage: MSSQL connection pool, migrations, and SQL transactions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Technology Stack & Key Libraries
|
||||
|
||||
| Technology | Version / Spec | Notes |
|
||||
|---|---|---|
|
||||
| **Build & Dev** | Vite 8 (`type: module`) | Dev server on `4209`, HTTPS on `4308`, proxies `/api` → `http://localhost:4208` |
|
||||
| **Framework** | React 19 (`react`, `react-dom`) | Uses `PureComponent` (with Automats & dashgui) and modern function components |
|
||||
| **Routing** | `react-router-dom` v7 | Configured in [src/appRouter.jsx](file:///home/seb/src/dashfront/src/appRouter.jsx) with HMR router preservation |
|
||||
| **UI & Theming** | MUI 9 (`@mui/material`, Emotion) | Custom theme in `src/theme/`, base background `#c5ddd8` in `src/colors.js` |
|
||||
| **Shared GUI** | `dashgui` (`file:../dashgui`) | `PanelTile`, `RecordList`, `Tile`, `SingleLineTextEdit`, `ElevatedPill` |
|
||||
| **State Management** | `react-automat` + Redux Toolkit | Automats for reactive domain models; Redux for category tree & session bootstrap |
|
||||
| **Notifications** | `notistack` | `useSnackbar()` / `<SnackbarProvider>` in [src/main.jsx](file:///home/seb/src/dashfront/src/main.jsx) |
|
||||
| **Media & Images** | `@jsquash/avif`, `@jsquash/resize`, `thumbhash` | Client-side AVIF encoding and instant thumbnail hash generation |
|
||||
| **Documents** | `pdfconvert-wasm` | In-browser PDF processing for supplier delivery invoices & receipts |
|
||||
| **Drag & Drop** | `@shopify/draggable`, `sortablejs` | Category re-ordering, article assignments, nested tree nodes |
|
||||
|
||||
---
|
||||
|
||||
## 3. Directory Layout
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # Backend communication layer
|
||||
│ ├── index.js # Canonical API module exports (article, category, delivery, etc.)
|
||||
│ ├── ApiClient.js # Object-oriented API client (this.article, this.delivery, etc.)
|
||||
│ ├── StorageManager.js # Client-side cache / local storage management
|
||||
│ └── storageManagerContext.js # React context provider for StorageManager
|
||||
├── automats/ # react-automat stores with fine-grained subscriptions
|
||||
│ ├── artikelAutomat.js # Article cache, deduplicated loads, and reactive single-article state
|
||||
│ ├── authAutomat.js # Authentication state, company list, company selection
|
||||
│ ├── deliveryEditorAutomat.js # Multi-line delivery receipt / invoice editor & draft state
|
||||
│ ├── navigationAutomat.js # Remembers active paths (last delivery path, last article SKU)
|
||||
│ ├── supplierAutomat.js # Supplier list and supplier-article catalogs
|
||||
│ ├── userSettingsAutomat.js # User preferences (viewer positions, layout settings)
|
||||
│ └── index.js # Barrel exports for all automats and helper selectors
|
||||
├── components/ # Shared UI components
|
||||
│ ├── AppShell.jsx # Main application frame (top bar, sidebar, nav buttons)
|
||||
│ ├── SectionLayout.jsx # Secondary navigation header for sections (/artikel, /lieferung...)
|
||||
│ ├── AuthBootstrap.jsx # Session bootstrapper, Google One Tap, company setup gate
|
||||
│ ├── LoginPage.jsx # Google One Tap / credentials login interface
|
||||
│ ├── UserMenu.jsx # User avatar, company switcher dropdown, logout action
|
||||
│ ├── BackendError.jsx # Graceful error banner for backend communication failures
|
||||
│ ├── article/ # Article tiles, editors, dialogs, photos, price tiers
|
||||
│ ├── category/ # Category navigation, dialogs, and picker components
|
||||
│ ├── manifest/ # Manifest / delivery line inspection widgets
|
||||
│ ├── settings/ # Terminal, unit, and brand settings dialogs
|
||||
│ └── tiles/ # Tile components extending dashgui base Tile
|
||||
├── devtools/ # Dev-only debug tools
|
||||
│ └── AutomatInspector.jsx # Docked overlay inspecting all registered window.__AUTOMATS__
|
||||
├── pages/ # Top-level view routes
|
||||
│ ├── artikel/ # Article index, category browser, warehouse, SKU detail editor
|
||||
│ ├── lieferung/ # Delivery list, new delivery editor, supplier manager, edit page
|
||||
│ ├── auftrag/ # Quotes (Angebote) and orders (Bestellungen)
|
||||
│ ├── kunde/ # Customer list, new customer, customer groups, edit page
|
||||
│ └── infos/ # System and company information page
|
||||
├── store/ # Redux Toolkit store (legacy & tree slice)
|
||||
│ ├── index.js # configureStore with dev logger & listener middleware
|
||||
│ ├── authSlice.js # Redux auth state (session bootstrap, company selection)
|
||||
│ ├── companySlice.js # Redux company details (tax rates, rootCategoryId)
|
||||
│ ├── categorySlice.js # Redux category tree, breadcrumbs, category articles
|
||||
│ ├── brandSlice.js # Redux brand list and lookup
|
||||
│ ├── posterminalSlice.js # Redux POS terminals configuration
|
||||
│ └── unitSlice.js # Redux unit of measure definitions
|
||||
├── theme/ # MUI theme definitions (light/dark palette, typography, components)
|
||||
├── utils/ # Helpers (apiShape.js, number formatters, notify.js, etc.)
|
||||
├── appRouter.jsx # react-router-dom route definitions
|
||||
├── nav.js # Navigation items (NAV_ITEMS, SUB_NAV, badges, active path matchers)
|
||||
├── colors.js # Shared color constants (MAIN_BACKGROUND)
|
||||
├── main.jsx # React root mount, providers, dev SW unregistration
|
||||
└── App.jsx # Main router provider wrapper
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. State Management Conventions
|
||||
|
||||
In `dashfront`, two state management solutions coexist harmoniously:
|
||||
|
||||
### A. `react-automat` (Recommended for Domain Models & Frequent Updates)
|
||||
- **Skill reference**: Read [.agents/skills/automat/SKILL.md](file:///home/seb/src/dashfront/.agents/skills/automat/SKILL.md).
|
||||
- Lives outside the React lifecycle in module scope (`src/automats/*.js`).
|
||||
- Designed for React `PureComponent` to bypass unnecessary React reconciliations.
|
||||
- **Pattern**:
|
||||
```jsx
|
||||
import { PureComponent } from 'react';
|
||||
import { artikelAutomat, createArticleSelector, getArticle } from '../automats';
|
||||
|
||||
class ArticleView extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// 1. Synchronous read in constructor — zero blank flash!
|
||||
this.state = {
|
||||
article: getArticle(props.sku),
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 2. Subscribe with fine-grained selector
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: createArticleSelector(this.props.sku)(state),
|
||||
}));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// 3. Always unsubscribe
|
||||
this.unsub?.();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { article } = this.state;
|
||||
if (!article) return <div>Lädt...</div>;
|
||||
return <div>{article.name}</div>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### B. Redux Toolkit (`src/store/`)
|
||||
- Used for static/relational trees: `company`, hierarchical `category` tree, `brand`, `posterminal`, and `unit`.
|
||||
- Uses `connect(mapStateToProps, mapDispatchToProps)` to connect to `PureComponent` classes or functional hooks where appropriate.
|
||||
- Coordinated via `createListenerMiddleware`: when `authAutomat` emits an auth change (`auth/sessionEstablished` or `auth/companyChanged`), listeners automatically dispatch loads for company info, brands, POS terminals, and units.
|
||||
|
||||
---
|
||||
|
||||
## 5. Backend Communication & Authentication Rules
|
||||
|
||||
### Authentication & Cookies
|
||||
1. **HTTP-only cookie**: The session token is stored in an HTTP-only cookie (`token`).
|
||||
2. **`credentials: 'include'`**: Every `fetch` request MUST set `credentials: 'include'`. The `http()` helper in [src/api/index.js](file:///home/seb/src/dashfront/src/api/index.js) does this automatically.
|
||||
3. **Never pass `googleAuthId`**: The frontend NEVER passes `googleAuthId` in request bodies or query parameters. The backend middleware extracts the authenticated user directly from the cookie session!
|
||||
4. **Session Company**: Multi-tenancy is scoped to the user's selected company. When a user switches companies (`PUT /api/auth/selected-company`), the backend updates the cookie session. All subsequent calls operate on that company.
|
||||
|
||||
### API Entry Point
|
||||
Import API namespaces from `src/api`:
|
||||
```js
|
||||
import { article, category, delivery, supplier, entity, company } from '../api';
|
||||
|
||||
// Examples:
|
||||
const { article: data } = await article.getBySku('SKU-1001');
|
||||
const { deliveries } = await delivery.list();
|
||||
const { suppliers } = await supplier.list();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Route & Navigation Architecture
|
||||
|
||||
- Main navigation sections are defined in [src/nav.js](file:///home/seb/src/dashfront/src/nav.js):
|
||||
- `/artikel` — Articles overview, SKU editor, Warehouse stock
|
||||
- `/kategorien/*` — Drag-and-drop category tree
|
||||
- `/lieferung` — Inbound deliveries, New delivery editor, Suppliers
|
||||
- `/auftrag` — Quotes (`/auftrag`) and Orders (`/auftrag/bestellung`)
|
||||
- `/kunde` — Customers, Customer groups
|
||||
- `/infos` — System settings & company info
|
||||
- **Router Singleton**:
|
||||
- Defined in [src/appRouter.jsx](file:///home/seb/src/dashfront/src/appRouter.jsx).
|
||||
- Preserved across Vite HMR via `import.meta.hot.data.router` to prevent mid-session resets when hot-reloading code.
|
||||
- **Dynamic Badges**:
|
||||
- `DeliveryNavIcon` and `DeliveryNeuIcon` in `src/nav.js` subscribe to `deliveryEditorAutomat` to show live uncommitted draft line badges in real time.
|
||||
|
||||
---
|
||||
|
||||
## 7. Developer Workflows & Commands
|
||||
|
||||
Run commands from the repository root `/home/seb/src/dashfront`:
|
||||
|
||||
```bash
|
||||
# Start Vite development server (proxies /api -> http://localhost:4208)
|
||||
npm run dev
|
||||
|
||||
# Start development server with local HTTPS (uses certs/key.pem and certs/cert.pem)
|
||||
npm run dev:https
|
||||
|
||||
# Run full PWA production build + preview (to test service worker / offline caching)
|
||||
npm run dev:pwa
|
||||
|
||||
# Generate local self-signed TLS certificates
|
||||
npm run cert
|
||||
|
||||
# Production build
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> When testing camera-based barcode scanning or Progressive Web App features on mobile devices or local network IP addresses, start the server using `npm run dev:https`. Web browsers require a secure context (HTTPS) to grant access to media devices and service workers.
|
||||
|
||||
---
|
||||
|
||||
## 8. Critical Agent Rules & Common Pitfalls
|
||||
|
||||
1. **Do not create dummy/mock backends**: `dashback` runs locally at `http://localhost:4208`. All `/api/*` routes are handled by it.
|
||||
2. **Keep `dashgui` links working**: `dashgui` is imported via `file:../dashgui`. Vite has deduplication configured (`dedupe: ['react', 'react-dom', ...]` in `vite.config.js`) to avoid dual-instance React conflicts.
|
||||
3. **Article Deletion Restriction**: An article CANNOT be deleted if it has child variants (`is_father: 1` or `childCount > 0`). The backend returns HTTP 400.
|
||||
4. **Prices and Multipliers**:
|
||||
- Article prices are tiered by `minmultiplier` and `customergroup_id`.
|
||||
- Prices sent to the backend are net prices (`net`).
|
||||
5. **Binary / Image Handling**:
|
||||
- Image uploads convert source images into AVIF variants client-side.
|
||||
- Frontend components use `thumbhash` for instant blur placeholders while loading full images via `/api/image/{fullHash}` or `/api/thumb/{fullHash}`.
|
||||
6. **No Hooks in PureComponents**: Never call React hooks (`useState`, `useSelector`, `useEffect`) inside `PureComponent` classes. Automats and `connect()` provide direct reactive subscription without hooks.
|
||||
7. **Always Unsubscribe**: Every `automat.subscribe(this, ...)` in `componentDidMount()` must have its cleanup callback called in `componentWillUnmount()`.
|
||||
|
||||
---
|
||||
|
||||
## 9. Deep Dive: The Automats (`react-automat`)
|
||||
|
||||
All domain Automats are located in [src/automats/](file:///home/seb/src/dashfront/src/automats/). Each automat exposes an observable state container with explicit action methods:
|
||||
|
||||
### 1. `artikelAutomat` ([src/automats/artikelAutomat.js](file:///home/seb/src/dashfront/src/automats/artikelAutomat.js))
|
||||
- **Role**: Cache and reactive distributor for article detail payloads (`GET /api/article/:sku`).
|
||||
- **Inflight Deduplication**: Uses an internal `Map<string, Promise<object>>` so concurrent UI tiles or navigation transitions requesting the same SKU share a single HTTP call.
|
||||
- **Key Actions**:
|
||||
- `loadArticle(sku)`: Fetches if missing, resolves immediately if cached.
|
||||
- `reloadArticle(sku)`: Silently re-fetches to update cache (used on SSE mutation events).
|
||||
- `setArticle(article)`: Updates cache after mutation responses.
|
||||
- `setArticleName(sku, name)`: Optimistic immediate rename.
|
||||
- `clearArticle(sku)` / `clear()`: Invalidates cache.
|
||||
- **Helper Selectors**: `getArticle(sku)`, `hasArticle(sku)`, `createArticleSelector(sku)`, `selectArticle(sku)`.
|
||||
|
||||
### 2. `authAutomat` ([src/automats/authAutomat.js](file:///home/seb/src/dashfront/src/automats/authAutomat.js))
|
||||
- **Role**: Manages user authentication lifecycle and multi-tenant company selection.
|
||||
- **State**: `{ user: AuthUser | null, googleClientId: string | null, status: 'loading' | 'anon' | 'authed' }`.
|
||||
- **Bridge to Redux**: Calls `emit(action)` registered via `setAuthEventDispatcher(store.dispatch)`. Emits:
|
||||
- `auth/sessionEstablished`
|
||||
- `auth/companyChanged`
|
||||
- `auth/loggedOut`
|
||||
- **Actions**: `bootstrapSession(session)`, `switchCompany(companyId)`, `logout()`.
|
||||
|
||||
### 3. `deliveryEditorAutomat` ([src/automats/deliveryEditorAutomat.js](file:///home/seb/src/dashfront/src/automats/deliveryEditorAutomat.js))
|
||||
- **Role**: State engine for the multi-line inbound delivery receiver and invoice reconciler ([src/pages/lieferung/neu.jsx](file:///home/seb/src/dashfront/src/pages/lieferung/neu.jsx)).
|
||||
- **Features**:
|
||||
- Line items editor (`lines`, `createEmptyLineitem`).
|
||||
- Supplier article auto-matching via `buildSupplierArticlesMap(articles)` indexing by supplier SKU, internal SKU, and EANs.
|
||||
- PDF/Receipt attachments parsing with OCR integration.
|
||||
- Reactive draft indicators (provides draft counts for badges in `src/nav.js`).
|
||||
|
||||
### 4. `supplierAutomat` ([src/automats/supplierAutomat.js](file:///home/seb/src/dashfront/src/automats/supplierAutomat.js))
|
||||
- **Role**: Caches supplier directory list and maps articles to their corresponding supplier catalogs (`GET /api/supplier`).
|
||||
|
||||
### 5. `navigationAutomat` ([src/automats/navigationAutomat.js](file:///home/seb/src/dashfront/src/automats/navigationAutomat.js))
|
||||
- **Role**: Remembers last active subpaths and last visited article SKU. When a user navigates between the main sidebar sections (e.g. from `/lieferung` to `/artikel` and back), it restores the exact active SKU or delivery document instead of resetting to the root list.
|
||||
|
||||
### 6. `userSettingsAutomat` ([src/automats/userSettingsAutomat.js](file:///home/seb/src/dashfront/src/automats/userSettingsAutomat.js))
|
||||
- **Role**: Stores client-side user layout preferences such as viewer panel coordinates and drawer positions.
|
||||
|
||||
---
|
||||
|
||||
## 10. Deep Dive: Redux Toolkit Architecture
|
||||
|
||||
Redux Toolkit manages static, relational, and configuration data in [src/store/](file:///home/seb/src/dashfront/src/store/):
|
||||
|
||||
### Slices
|
||||
1. **`categorySlice`**: Hierarchical category tree structure, category breadcrumbs, article-category memberships, category reordering (`moveCategory`, `reorderCategories`).
|
||||
2. **`companySlice`**: Active company configuration, tax rates (standard, reduced), root category ID, company legal details.
|
||||
3. **`brandSlice`**: Catalog brands and manufacturer list.
|
||||
4. **`posterminalSlice`**: Registered point-of-sale hardware terminals.
|
||||
5. **`unitSlice`**: Allowed units of measure (Stück, kg, Liter, etc.).
|
||||
|
||||
### Automatic Bootstrap with Listener Middleware
|
||||
In [src/store/index.js](file:///home/seb/src/dashfront/src/store/index.js), `createListenerMiddleware` coordinates data loading automatically when auth events fire:
|
||||
```js
|
||||
companyLoadListener(listenerMiddleware);
|
||||
unitLoadListener(listenerMiddleware);
|
||||
brandLoadListener(listenerMiddleware);
|
||||
posterminalLoadListener(listenerMiddleware);
|
||||
```
|
||||
When `auth/sessionEstablished` or `auth/companyChanged` occurs, these listeners trigger thunks to reload company tax settings, brands, units, and POS terminals without boilerplate in React views.
|
||||
|
||||
### Redux Dev Logger
|
||||
In development mode (`import.meta.env.DEV`), `reduxDevLogger` intercepts actions from `auth/`, `company/`, `category/`, `brand/`, `posterminal/`, and `unit/`, logging structured before/after counts to the browser console.
|
||||
|
||||
---
|
||||
|
||||
## 11. `dashgui` Component Library Integration
|
||||
|
||||
`dashgui` is a shared, high-performance UI library linked from `file:../dashgui`:
|
||||
|
||||
### Core Components
|
||||
- **`PanelTile`**: Structured card container featuring standard header styling, action slots, collapsible state, and clean borders.
|
||||
- **`RecordList`**: High-performance list component optimized for large dataset rendering with custom row click, hover, and selection handlers.
|
||||
- **`Tile`**: Base container element for building responsive dashboard grids.
|
||||
- **`SingleLineTextEdit`**: Inline editable text field with debounced autosave, blur commit, and escape rollback.
|
||||
- **`ElevatedPill`**: Compact visual badges for status, tags, and category chips.
|
||||
|
||||
### React 19 & Deduplication Warning
|
||||
Because `dashgui` is symlinked from `../dashgui`, it has its own `node_modules`. To prevent duplicate React, Emotion, or MUI instances from causing runtime context errors (`Cannot read properties of null (reading 'useContext')`), [vite.config.js](file:///home/seb/src/dashfront/vite.config.js) enforces `dedupe`:
|
||||
```js
|
||||
resolve: {
|
||||
dedupe: [
|
||||
'react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime',
|
||||
'react-router', 'react-router-dom', '@emotion/react', '@emotion/styled',
|
||||
'@mui/material', '@mui/icons-material'
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. Application Views & Route Hierarchy
|
||||
|
||||
The application routing is defined in [src/appRouter.jsx](file:///home/seb/src/dashfront/src/appRouter.jsx) and styled with [src/components/AppShell.jsx](file:///home/seb/src/dashfront/src/components/AppShell.jsx):
|
||||
|
||||
```
|
||||
/
|
||||
├── /artikel
|
||||
│ ├── index → ArtikelUebersichtPage (Search & filter grid)
|
||||
│ ├── /kategorien/* → ArtikelKategorienPage (Interactive category tree)
|
||||
│ ├── /lager → ArtikelLagerPage (Warehouse stock overview)
|
||||
│ └── /:sku/:tab? → ArtikelSkuPage (SKU detail: info, photos, prices, suppliers, warehouse)
|
||||
├── /lieferung
|
||||
│ ├── index → LieferungListePage (Inbound delivery list)
|
||||
│ ├── /neu → LieferungNeuPage (Receipt editor & OCR reconciliation)
|
||||
│ ├── /lieferanten → LieferungLieferantenPage (Supplier directory)
|
||||
│ └── /:deliveryId → LieferungEditPage (Delivery inspection & editing)
|
||||
├── /auftrag
|
||||
│ ├── index → AuftragAngebotPage (Quotes / Angebote)
|
||||
│ ├── /neu → AuftragAngebotNeuPage (Create quote)
|
||||
│ ├── /:quoteId → AuftragAngebotEditPage (Edit quote)
|
||||
│ ├── /bestellung → AuftragBestellungPage (Orders / Bestellungen)
|
||||
│ ├── /bestellung/neu → AuftragBestellungNeuPage (Create order)
|
||||
│ └── /bestellung/:id → AuftragBestellungEditPage (Edit order)
|
||||
├── /kunde
|
||||
│ ├── index → KundeListePage (Customer directory)
|
||||
│ ├── /neu → KundeNeuPage (Create customer)
|
||||
│ ├── /gruppen → KundeGruppenPage (Customer groups & price tiers)
|
||||
│ └── /:entityId → KundeEditPage (Customer profile & address editor)
|
||||
└── /infos → InfosPage (Company information & POS setup)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 13. Media, Images & Document Pipelines
|
||||
|
||||
### Client-Side AVIF Conversion
|
||||
To minimize backend CPU usage and reduce bandwidth:
|
||||
- When a user selects or drops an article photo, the frontend processes the image in-browser using `@jsquash/avif` and `@jsquash/resize`.
|
||||
- Images are scaled to target variant dimensions and compressed into AVIF format before transmission to `/api/article/:sku/photo`.
|
||||
|
||||
### ThumbHash Placeholders
|
||||
- For instant visual feedback without layout shift, article photos generate a 25-byte binary hash using `thumbhash`.
|
||||
- [src/components/article/ThumbHashImage.jsx](file:///home/seb/src/dashfront/src/components/article/ThumbHashImage.jsx) renders the blur preview instantly while the full image loads asynchronously from `/api/thumb/{hash}` or `/api/image/{hash}`.
|
||||
|
||||
### PDF & Document Ingestion
|
||||
- [src/pages/lieferung/neu.jsx](file:///home/seb/src/dashfront/src/pages/lieferung/neu.jsx) utilizes `pdfconvert-wasm` to process supplier PDF delivery notes and invoices directly inside the browser.
|
||||
- Extracted pages are rendered to canvas, displayed for line-by-line inspection, and passed to OCR recognition to populate delivery line items.
|
||||
|
||||
---
|
||||
|
||||
## 14. Real-time SSE Signals & Invalidation
|
||||
|
||||
The frontend connects to the backend Server-Sent Events stream at `/api/events`:
|
||||
- **Architecture**: When mutations occur on `dashback` (whether triggered by this client, another terminal, or the POS), SSE events are broadcast with payload information (e.g. `{ type: 'article-update', sku: '1001' }`).
|
||||
- **Reactive Cache Refresh**:
|
||||
- `artikelAutomat.actions.reloadArticle(sku)` re-fetches the updated article silently, updating subscribers without flicker.
|
||||
- Category updates trigger Redux category slice refreshes.
|
||||
- Delivery and order updates trigger automatic list reloads.
|
||||
|
||||
---
|
||||
|
||||
## 15. Developer Tooling & Debugging
|
||||
|
||||
### AutomatInspector ([src/devtools/AutomatInspector.jsx](file:///home/seb/src/dashfront/src/devtools/AutomatInspector.jsx))
|
||||
- Docked overlay on the right side of the screen, active only in development mode (`import.meta.env.DEV`).
|
||||
- Auto-discovers all running automats registered in `window.__AUTOMATS__`.
|
||||
- Allows developers and agents to:
|
||||
- Inspect full state JSON trees in real time.
|
||||
- View subscriber counts and registered actions.
|
||||
- Trigger actions and test state changes without code modifications.
|
||||
|
||||
### Vite API Proxy Logging
|
||||
[vite.config.js](file:///home/seb/src/dashfront/vite.config.js) includes automatic proxy logging for all `/api` requests and responses. HTTP method, path, request payloads, response statuses, and timing are formatted directly in the Vite terminal.
|
||||
|
||||
### TLS / HTTPS Development
|
||||
For testing hardware barcode scanners, camera video feeds, and PWA offline modes:
|
||||
```bash
|
||||
npm run cert # Generates local certs in ./certs/
|
||||
npm run dev:https # Runs Vite HTTPS server on port 4308
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 16. Agent Cheatsheet & Code Recipes
|
||||
|
||||
### Recipe 1: Consuming an Automat in a React PureComponent
|
||||
```jsx
|
||||
import { PureComponent } from 'react';
|
||||
import { artikelAutomat, createArticleSelector, getArticle } from '../automats';
|
||||
|
||||
export class ArticleTitle extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// 1. Read synchronously to avoid blank flash
|
||||
this.state = {
|
||||
article: getArticle(props.sku),
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 2. Subscribe with fine-grained selector
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: createArticleSelector(this.props.sku)(state),
|
||||
}));
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
// 3. Handle prop changes cleanly
|
||||
if (prevProps.sku !== this.props.sku) {
|
||||
this.setState({ article: getArticle(this.props.sku) });
|
||||
this.unsub?.();
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: createArticleSelector(this.props.sku)(state),
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// 4. Always cleanup
|
||||
this.unsub?.();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { article } = this.state;
|
||||
return <h1>{article?.name ?? 'Lädt...'}</h1>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Recipe 2: Calling the API and Notifying Errors
|
||||
```jsx
|
||||
import { article } from '../api';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { notifyError } from '../utils/notify';
|
||||
import { artikelAutomat } from '../automats';
|
||||
|
||||
async function handleSavePrice(sku, netPrice) {
|
||||
try {
|
||||
const res = await article.updatePrice(sku, { net: netPrice });
|
||||
artikelAutomat.actions.setArticle(res.article);
|
||||
enqueueSnackbar('Preis erfolgreich aktualisiert', { variant: 'success' });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Recipe 3: Calculating Gross Prices with Company Tax Rates
|
||||
```jsx
|
||||
// Prices in the database and API are NET prices.
|
||||
// Gross prices shown to end users must apply company tax rates from Redux companySlice:
|
||||
export function calculateGrossPrice(netPrice, taxRatePercent) {
|
||||
const net = Number(netPrice) || 0;
|
||||
const rate = Number(taxRatePercent) || 0;
|
||||
return Math.round(net * (1 + rate / 100) * 100) / 100;
|
||||
}
|
||||
```
|
||||
466
NGINX.md
Normal file
466
NGINX.md
Normal file
@@ -0,0 +1,466 @@
|
||||
# NGINX Configuration Guide for Dashfront & Dashback
|
||||
|
||||
This document provides a production-tested, complete NGINX reverse-proxy and static hosting guide for **Dashfront** (Vite + React 19 PWA) and **Dashback** (Express REST + SSE API).
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Architecture & Request Flow](#1-architecture--request-flow)
|
||||
2. [Key Technical Requirements](#2-key-technical-requirements)
|
||||
3. [Production Configuration (`dashfront.conf`)](#3-production-configuration-dashfrontconf)
|
||||
4. [Detailed Breakdown of Critical Directives](#4-detailed-breakdown-of-critical-directives)
|
||||
- [PWA & Cache Invalidation Strategy](#pwa--cache-invalidation-strategy)
|
||||
- [SPA Routing (`try_files`)](#spa-routing-try_files)
|
||||
- [Server-Sent Events (SSE) Buffering & Timeouts](#server-sent-events-sse-buffering--timeouts)
|
||||
- [File Uploads & Request Body Limits](#file-uploads--request-body-limits)
|
||||
- [WebAssembly (WASM) MIME Types](#webassembly-wasm-mime-types)
|
||||
- [Camera & Hardware Permissions](#camera--hardware-permissions)
|
||||
5. [Alternative: Remote Vite Dev Server Proxy](#5-alternative-remote-vite-dev-server-proxy)
|
||||
6. [Deployment & Operations Runbook](#6-deployment--operations-runbook)
|
||||
7. [Troubleshooting Matrix](#7-troubleshooting-matrix)
|
||||
|
||||
---
|
||||
|
||||
## 1. Architecture & Request Flow
|
||||
|
||||
In production, NGINX acts as both the high-performance static web server for Dashfront assets and the secure reverse proxy for the Dashback Express service.
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ CLIENT │
|
||||
│ (Desktop Browser, Tablet, Mobile PWA) │
|
||||
└──────────────────────┬───────────────────────┘
|
||||
│ HTTPS (:443)
|
||||
▼
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ NGINX │
|
||||
│ TLS Termination, Gzip, Caching, Auth │
|
||||
└──────────────┬────────────────┬──────────────┘
|
||||
│ │
|
||||
/assets/*, /index.html │ │ /api/*
|
||||
/sw.js, static files │ │ (REST & SSE)
|
||||
▼ ▼
|
||||
┌───────────────────┐ ┌───────────────────┐
|
||||
│ Static Build Dir │ │ Dashback │
|
||||
│ `dashfront/dist` │ │ Express API │
|
||||
│ │ │ (localhost:4208) │
|
||||
└───────────────────┘ └───────────────────┘
|
||||
```
|
||||
|
||||
| Path | Handled By | Cache Policy | Notes |
|
||||
|---|---|---|---|
|
||||
| `/index.html` & `/` | NGINX static file | `no-cache, no-store, must-revalidate` | Always fresh so users get new script hashes |
|
||||
| `/sw.js`, `/registerSW.js` | NGINX static file | `no-cache, no-store, must-revalidate` | **Must never cache**; avoids bricking PWA updates |
|
||||
| `/workbox-*.js` | NGINX static file | `no-cache, no-store, must-revalidate` | Workbox runtime loader |
|
||||
| `/manifest.webmanifest` | NGINX static file | `public, max-age=3600` | PWA manifest definition |
|
||||
| `/assets/*` | NGINX static file | `public, max-age=31536000, immutable` | Content-hashed JS, CSS, WASM, and workers |
|
||||
| `/api/events` | Dashback (`:4208`) | `no-cache, no-buffering` | Server-Sent Events (SSE) live push notifications |
|
||||
| `/api/*` | Dashback (`:4208`) | Dynamic / Backend controlled | REST endpoints, auth cookies, image & PDF uploads |
|
||||
| All other paths | NGINX `try_files` | Fallback to `/index.html` | React Router HTML5 History API deep linking |
|
||||
|
||||
---
|
||||
|
||||
## 2. Key Technical Requirements
|
||||
|
||||
1. **PWA Lifecycles**: A Progressive Web App checks for updates by fetching `sw.js`. If NGINX caches `sw.js` or `index.html`, client devices can remain stuck on obsolete bundles indefinitely.
|
||||
2. **SSE Streaming**: Real-time push updates at `/api/events` require NGINX proxy buffering and proxy caching to be turned **OFF**, with a 24-hour read timeout to prevent arbitrary 60-second connection drops.
|
||||
3. **Payload Limits**: Inbound delivery invoices (PDF receipts scanned client-side) and high-resolution article photos (AVIF) require a request body limit of at least `50m`–`100m` (matching Dashback's `BODY_LIMIT`).
|
||||
4. **Cookie Authentication**: Dashback issues HTTP-only `token` session cookies. NGINX must pass the original `Host`, `X-Real-IP`, and `X-Forwarded-Proto https` headers so Express sets and retains cookies correctly.
|
||||
5. **Camera Access (HTTPS)**: Mobile barcode scanning requires a secure origin (HTTPS) and appropriate `Permissions-Policy` response headers.
|
||||
|
||||
---
|
||||
|
||||
## 3. Production Configuration (`dashfront.conf`)
|
||||
|
||||
Place this configuration file at `/etc/nginx/sites-available/dashfront` (or adapt it to your existing reverse proxy structure):
|
||||
|
||||
```nginx
|
||||
# ==============================================================================
|
||||
# Dashfront + Dashback Production NGINX Server Configuration
|
||||
# ==============================================================================
|
||||
|
||||
# Map Connection header for WebSocket upgrades (if proxying dev server or WebSockets)
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# 1. HTTP -> HTTPS Redirect
|
||||
# ------------------------------------------------------------------------------
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name dash.example.com; # <-- Replace with your domain or server IP
|
||||
|
||||
# Let's Encrypt / ACME challenge directory
|
||||
location ^~ /.well-known/acme-challenge/ {
|
||||
root /var/www/certbot;
|
||||
}
|
||||
|
||||
location / {
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
}
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# 2. Main HTTPS Server Block
|
||||
# ------------------------------------------------------------------------------
|
||||
server {
|
||||
# NGINX >= 1.25.1 uses 'http2 on;'. For older NGINX, use: listen 443 ssl http2;
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
http2 on;
|
||||
|
||||
server_name dash.example.com; # <-- Replace with your domain or server IP
|
||||
|
||||
# --- SSL / TLS Certificates ---
|
||||
ssl_certificate /etc/letsencrypt/live/dash.example.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/dash.example.com/privkey.pem;
|
||||
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305;
|
||||
ssl_prefer_server_ciphers off;
|
||||
ssl_session_timeout 1d;
|
||||
ssl_session_cache shared:SSL:10m;
|
||||
ssl_session_tickets off;
|
||||
|
||||
# --- Static File Root ---
|
||||
# Point directly to the dist/ directory created by `npm run build`
|
||||
root /home/seb/src/dashfront/dist;
|
||||
index index.html;
|
||||
|
||||
# --- Request Body & Uploads ---
|
||||
# Supports large delivery PDF uploads and client-encoded AVIF photos
|
||||
client_max_body_size 100m;
|
||||
client_body_timeout 300s;
|
||||
|
||||
# --- Compression (Gzip) ---
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 5;
|
||||
gzip_min_length 256;
|
||||
gzip_types
|
||||
text/plain
|
||||
text/css
|
||||
text/xml
|
||||
text/javascript
|
||||
application/javascript
|
||||
application/x-javascript
|
||||
application/json
|
||||
application/xml
|
||||
application/manifest+json
|
||||
application/wasm
|
||||
image/svg+xml;
|
||||
|
||||
# --- Security Headers ---
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
# Allow camera access for the built-in barcode scanner
|
||||
add_header Permissions-Policy "camera=(self), microphone=(), geolocation=()" always;
|
||||
|
||||
# ==========================================================================
|
||||
# API & Backend Routing (Dashback on port 4208)
|
||||
# ==========================================================================
|
||||
|
||||
# Dedicated SSE route: Real-time broadcast events
|
||||
location = /api/events {
|
||||
proxy_pass http://127.0.0.1:4208;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
# Clear Connection header to maintain persistent HTTP/1.1 stream
|
||||
proxy_set_header Connection "";
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
# Disable buffering and caching completely for immediate push
|
||||
proxy_buffering off;
|
||||
proxy_cache off;
|
||||
chunked_transfer_encoding off;
|
||||
|
||||
# Prevent premature disconnections; keep SSE open for 24 hours
|
||||
proxy_read_timeout 86400s;
|
||||
proxy_send_timeout 86400s;
|
||||
}
|
||||
|
||||
# General API endpoints (REST)
|
||||
location /api/ {
|
||||
proxy_pass http://127.0.0.1:4208;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
# Retain cookies across domain/path
|
||||
proxy_cookie_path / /;
|
||||
|
||||
# Streaming uploads (PDF receipts, AVIF photos)
|
||||
proxy_request_buffering off;
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_send_timeout 300s;
|
||||
proxy_read_timeout 300s;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# PWA & Service Worker Rules (Zero Caching)
|
||||
# ==========================================================================
|
||||
|
||||
# Service worker scripts MUST NEVER be cached by HTTP cache
|
||||
location ~* ^/(sw\.js|registerSW\.js|workbox-[a-f0-9]+\.js)$ {
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
add_header Expires "0";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# PWA web manifest and browser icons
|
||||
location ~* ^/(manifest\.webmanifest|favicon\.svg|icons/.*)$ {
|
||||
add_header Cache-Control "public, max-age=3600";
|
||||
add_header Vary "Accept-Encoding";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# Static Assets & Hashed Bundles (Aggressive Immutable Caching)
|
||||
# ==========================================================================
|
||||
|
||||
# Vite content-hashed assets: JS, CSS, WASM, Web Workers
|
||||
# (Example: /assets/index-CutpK3vd.js, /assets/avif_enc-Co4TcJko.wasm)
|
||||
location /assets/ {
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
add_header Vary "Accept-Encoding";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# Ensure WebAssembly MIME type is correctly set
|
||||
location ~* \.wasm$ {
|
||||
default_type application/wasm;
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# HTML5 SPA Entry Point & Navigation Fallback
|
||||
# ==========================================================================
|
||||
|
||||
# index.html must never be cached so new release deployments take effect immediately
|
||||
location = /index.html {
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
add_header Expires "0";
|
||||
}
|
||||
|
||||
# SPA routing: Serve existing static file or directory; otherwise fallback to /index.html
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Detailed Breakdown of Critical Directives
|
||||
|
||||
### PWA & Cache Invalidation Strategy
|
||||
|
||||
PWA update lifecycles depend on byte-for-byte comparisons of `sw.js` when the user visits the page:
|
||||
1. **`sw.js` and `registerSW.js`**:
|
||||
```nginx
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
```
|
||||
If NGINX serves `sw.js` with a 30-day cache header, browser service worker checks will read from disk cache and never detect new application releases.
|
||||
2. **`index.html`**:
|
||||
Must also have `no-cache, no-store, must-revalidate`. When a new build is run, Vite produces chunks with new hashes (e.g., `index-AbCd12.js`). If `index.html` is cached, users continue loading old references that may no longer exist on disk.
|
||||
3. **`/assets/`**:
|
||||
Because Vite / Rolldown generates content-addressed filenames (hashes change whenever contents change), these files are completely immutable and safe to cache for 1 year (`max-age=31536000, immutable`).
|
||||
|
||||
### SPA Routing (`try_files`)
|
||||
|
||||
Dashfront uses React Router with HTML5 History API pushState:
|
||||
- Direct visits to URLs like `/artikel/10001`, `/kategorien/12`, `/lieferung/neu`, or `/kunde` do not correspond to files on disk.
|
||||
- The directive:
|
||||
```nginx
|
||||
try_files $uri $uri/ /index.html;
|
||||
```
|
||||
instructs NGINX to first check if a matching static file exists (e.g. `/favicon.svg` or `/assets/...`). If not found, it internally rewrites the request to `/index.html` without returning an HTTP 404, allowing React Router to resolve the route in-browser.
|
||||
|
||||
### Server-Sent Events (SSE) Buffering & Timeouts
|
||||
|
||||
The backend provides real-time model invalidation via `GET /api/events`. By default, NGINX buffers HTTP responses. If buffering is enabled:
|
||||
1. Events sent by Dashback stay in NGINX's internal memory buffer until the buffer fills up (often several kilobytes), causing clients to miss instant UI updates.
|
||||
2. NGINX will close idle proxy connections after `proxy_read_timeout` (default 60s).
|
||||
|
||||
The dedicated `/api/events` block fixes both issues:
|
||||
```nginx
|
||||
proxy_buffering off;
|
||||
proxy_cache off;
|
||||
chunked_transfer_encoding off;
|
||||
proxy_set_header Connection "";
|
||||
proxy_read_timeout 86400s;
|
||||
```
|
||||
|
||||
### File Uploads & Request Body Limits
|
||||
|
||||
In Dashfront:
|
||||
- Inbound deliveries support multi-page PDF invoices and OCR processing (`pdfconvert-wasm`).
|
||||
- Article management supports client-side AVIF image generation.
|
||||
- The default NGINX limit is `1m` (`client_max_body_size 1m;`), which causes HTTP 413 (Payload Too Large) errors on invoice uploads.
|
||||
- Setting:
|
||||
```nginx
|
||||
client_max_body_size 100m;
|
||||
proxy_request_buffering off;
|
||||
```
|
||||
allows uploads up to 100 megabytes and streams the body directly to Express without waiting for NGINX to buffer the entire file on disk.
|
||||
|
||||
### WebAssembly (WASM) MIME Types
|
||||
|
||||
Dashfront uses WebAssembly for:
|
||||
- `@jsquash/avif` (image encoding)
|
||||
- `@jsquash/resize` (squoosh resizing)
|
||||
- `pdfconvert-wasm` (PDF page extraction and rasterization)
|
||||
|
||||
Modern browsers require the HTTP header `Content-Type: application/wasm` for streaming compilation (`WebAssembly.instantiateStreaming`). If missing, NGINX may default to `application/octet-stream`. The WASM block guarantees the correct MIME header:
|
||||
```nginx
|
||||
location ~* \.wasm$ {
|
||||
default_type application/wasm;
|
||||
}
|
||||
```
|
||||
|
||||
### Camera & Hardware Permissions
|
||||
|
||||
The article lookup and delivery receipt features allow scanning barcodes using device cameras. Web browsers enforce two strict rules for camera access:
|
||||
1. **Secure Origin**: The page must be served over HTTPS or `localhost`. Plain HTTP over local IP addresses (e.g., `http://192.168.1.100/`) will automatically disable `navigator.mediaDevices`.
|
||||
2. **Permissions Policy**: The header `Permissions-Policy "camera=(self)"` ensures the browser allows Dashfront to access connected webcams or smartphone cameras.
|
||||
|
||||
---
|
||||
|
||||
## 5. Alternative: Remote Vite Dev Server Proxy
|
||||
|
||||
If you want to access the live **Vite development server** (running on `localhost:4209` with HMR) through NGINX from a smartphone, tablet, or external domain:
|
||||
|
||||
```nginx
|
||||
# Map connection upgrade for Vite HMR WebSockets
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name dev-dash.example.com;
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/dev-dash.example.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/dev-dash.example.com/privkey.pem;
|
||||
|
||||
client_max_body_size 100m;
|
||||
|
||||
# 1. API Calls -> Dashback (Port 4208)
|
||||
location /api/ {
|
||||
proxy_pass http://127.0.0.1:4208;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_buffering off;
|
||||
proxy_read_timeout 86400s;
|
||||
}
|
||||
|
||||
# 2. Vite Dev Server & HMR -> Vite (Port 4209)
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:4209;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
# Crucial for Vite Hot Module Replacement (HMR) WebSocket
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_read_timeout 86400s;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> When proxying to Vite dev server, ensure `server.allowedHosts = true` or add your domain to `allowedHosts` in [vite.config.js](file:///home/seb/src/dashfront/vite.config.js).
|
||||
|
||||
---
|
||||
|
||||
## 6. Deployment & Operations Runbook
|
||||
|
||||
### Step 1: Build Dashfront for Production
|
||||
|
||||
On the development machine or build server:
|
||||
|
||||
```bash
|
||||
cd /home/seb/src/dashfront
|
||||
npm run build
|
||||
```
|
||||
|
||||
This compiles optimized bundles and service worker files into `dashfront/dist`.
|
||||
|
||||
### Step 2: Install and Verify NGINX Configuration
|
||||
|
||||
```bash
|
||||
# 1. Copy config file to sites-available
|
||||
sudo cp deploy/nginx-dashfront.conf /etc/nginx/sites-available/dashfront
|
||||
|
||||
# 2. Enable site by creating a symlink
|
||||
sudo ln -s /etc/nginx/sites-available/dashfront /etc/nginx/sites-enabled/
|
||||
|
||||
# 3. Test configuration syntax
|
||||
sudo nginx -t
|
||||
|
||||
# 4. Reload NGINX without dropping active connections
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
### Step 3: Obtain TLS Certificates with Certbot
|
||||
|
||||
```bash
|
||||
sudo apt install certbot python3-certbot-nginx
|
||||
sudo certbot --nginx -d dash.example.com
|
||||
```
|
||||
|
||||
### Step 4: Ensure Filesystem Permissions
|
||||
|
||||
NGINX worker processes run as the `www-data` user by default. Ensure the directory path to `dist/` is readable:
|
||||
|
||||
```bash
|
||||
# Allow www-data execution on parent path components
|
||||
chmod 755 /home/seb /home/seb/src /home/seb/src/dashfront /home/seb/src/dashfront/dist
|
||||
```
|
||||
|
||||
Or deploy build artifacts into a standard web directory:
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /var/www/dashfront
|
||||
sudo rsync -av --delete /home/seb/src/dashfront/dist/ /var/www/dashfront/dist/
|
||||
sudo chown -R www-data:www-data /var/www/dashfront
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Troubleshooting Matrix
|
||||
|
||||
| Symptom | Cause | Solution |
|
||||
|---|---|---|
|
||||
| **HTTP 404 on page reload** on sub-routes (`/artikel`, `/kunde`) | Missing SPA fallback in NGINX | Ensure `try_files $uri $uri/ /index.html;` is present in `location /`. |
|
||||
| **PWA does not update** after deployment | `sw.js` or `index.html` cached in browser | Verify `Cache-Control: no-cache, no-store, must-revalidate` on `sw.js`, `registerSW.js`, and `index.html`. |
|
||||
| **HTTP 413 (Payload Too Large)** when uploading invoice PDF or image | Default NGINX upload limit is 1MB | Add `client_max_body_size 100m;` to the `server` or `location /api/` block. |
|
||||
| **Live SSE events disconnect every 60s** | Default `proxy_read_timeout` timeout | Set `proxy_read_timeout 86400s;` and `proxy_buffering off;` on `/api/events`. |
|
||||
| **Login loop / Cookie not sent** | Secure cookie rejected on plain HTTP, or missing proxy headers | Access via HTTPS; ensure `proxy_set_header Host $http_host;` and `proxy_set_header X-Forwarded-Proto $scheme;` are set. |
|
||||
| **Barcode camera scanner disabled** | Page accessed over insecure HTTP or missing permissions policy | Use HTTPS; check that `Permissions-Policy "camera=(self)"` header is present. |
|
||||
| **WASM compilation error** (`incorrect response MIME type`) | NGINX serving `.wasm` as `application/octet-stream` | Add `default_type application/wasm;` for `\.wasm$` extensions. |
|
||||
| **Vite HMR disconnects immediately** (Dev proxy) | Missing WebSocket upgrade headers | Ensure `proxy_set_header Upgrade $http_upgrade;` and `proxy_set_header Connection $connection_upgrade;` are configured. |
|
||||
@@ -24,6 +24,8 @@ Open `http://localhost:4209`. The dev server proxies `/api` to Dashback at
|
||||
To test the full PWA precache (production build + preview, no HMR), use
|
||||
`npm run dev:pwa` instead.
|
||||
|
||||
For production deployment with NGINX, see [NGINX.md](file:///home/seb/src/dashfront/NGINX.md).
|
||||
|
||||
Dashback must be running and your Google account must be authorized on the
|
||||
backend.
|
||||
|
||||
|
||||
168
deploy/nginx-dashfront.conf
Normal file
168
deploy/nginx-dashfront.conf
Normal file
@@ -0,0 +1,168 @@
|
||||
# ==============================================================================
|
||||
# Dashfront + Dashback Production NGINX Server Configuration
|
||||
# ==============================================================================
|
||||
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# 1. HTTP -> HTTPS Redirect
|
||||
# ------------------------------------------------------------------------------
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name dash.example.com; # <-- Replace with your domain or server IP
|
||||
|
||||
location ^~ /.well-known/acme-challenge/ {
|
||||
root /var/www/certbot;
|
||||
}
|
||||
|
||||
location / {
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
}
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# 2. Main HTTPS Server Block
|
||||
# ------------------------------------------------------------------------------
|
||||
server {
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
http2 on;
|
||||
|
||||
server_name dash.example.com; # <-- Replace with your domain or server IP
|
||||
|
||||
# --- SSL / TLS Certificates ---
|
||||
ssl_certificate /etc/letsencrypt/live/dash.example.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/dash.example.com/privkey.pem;
|
||||
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305;
|
||||
ssl_prefer_server_ciphers off;
|
||||
ssl_session_timeout 1d;
|
||||
ssl_session_cache shared:SSL:10m;
|
||||
ssl_session_tickets off;
|
||||
|
||||
# --- Static File Root ---
|
||||
root /home/seb/src/dashfront/dist;
|
||||
index index.html;
|
||||
|
||||
# --- Request Body & Uploads (PDF receipts, AVIF photos) ---
|
||||
client_max_body_size 100m;
|
||||
client_body_timeout 300s;
|
||||
|
||||
# --- Compression (Gzip) ---
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 5;
|
||||
gzip_min_length 256;
|
||||
gzip_types
|
||||
text/plain
|
||||
text/css
|
||||
text/xml
|
||||
text/javascript
|
||||
application/javascript
|
||||
application/x-javascript
|
||||
application/json
|
||||
application/xml
|
||||
application/manifest+json
|
||||
application/wasm
|
||||
image/svg+xml;
|
||||
|
||||
# --- Security Headers ---
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
add_header Permissions-Policy "camera=(self), microphone=(), geolocation=()" always;
|
||||
|
||||
# ==========================================================================
|
||||
# API & Backend Routing (Dashback on port 4208)
|
||||
# ==========================================================================
|
||||
|
||||
# Dedicated SSE route: Real-time broadcast events
|
||||
location = /api/events {
|
||||
proxy_pass http://127.0.0.1:4208;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
proxy_set_header Connection "";
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_buffering off;
|
||||
proxy_cache off;
|
||||
chunked_transfer_encoding off;
|
||||
|
||||
proxy_read_timeout 86400s;
|
||||
proxy_send_timeout 86400s;
|
||||
}
|
||||
|
||||
# General API endpoints (REST)
|
||||
location /api/ {
|
||||
proxy_pass http://127.0.0.1:4208;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
proxy_cookie_path / /;
|
||||
|
||||
proxy_request_buffering off;
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_send_timeout 300s;
|
||||
proxy_read_timeout 300s;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# PWA & Service Worker Rules (Zero Caching)
|
||||
# ==========================================================================
|
||||
|
||||
location ~* ^/(sw\.js|registerSW\.js|workbox-[a-f0-9]+\.js)$ {
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
add_header Expires "0";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
location ~* ^/(manifest\.webmanifest|favicon\.svg|icons/.*)$ {
|
||||
add_header Cache-Control "public, max-age=3600";
|
||||
add_header Vary "Accept-Encoding";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# Static Assets & Hashed Bundles (Aggressive Immutable Caching)
|
||||
# ==========================================================================
|
||||
|
||||
location /assets/ {
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
add_header Vary "Accept-Encoding";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
location ~* \.wasm$ {
|
||||
default_type application/wasm;
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# ==========================================================================
|
||||
# HTML5 SPA Entry Point & Navigation Fallback
|
||||
# ==========================================================================
|
||||
|
||||
location = /index.html {
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
add_header Expires "0";
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
1163
package-lock.json
generated
1163
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -20,15 +20,14 @@
|
||||
"@jsquash/resize": "^2.1.1",
|
||||
"@mui/icons-material": "^9.4.0",
|
||||
"@mui/material": "^9.4.0",
|
||||
"@reduxjs/toolkit": "^2.12.0",
|
||||
"@shopify/draggable": "^1.2.1",
|
||||
"dashgui": "file:../dashgui",
|
||||
"eslint": "^10.11.0",
|
||||
"notistack": "^3.0.2",
|
||||
"pdfconvert-wasm": "^0.3.0",
|
||||
"react": "^19.3.0",
|
||||
"react-automat": "^0.1.0",
|
||||
"react-automat": "file:../automat",
|
||||
"react-dom": "^19.3.0",
|
||||
"react-redux": "^9.3.0",
|
||||
"react-router-dom": "^7.18.4",
|
||||
"sortablejs": "^1.15.7",
|
||||
"thumbhash": "^0.1.1"
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
import { requireArray, requireDefined, requireObject } from '../utils/apiShape';
|
||||
import { notifyError } from '../utils/notify';
|
||||
import { parseCategoryTreeResponse } from '../store/categorySlice';
|
||||
import { parseCategoryTreeResponse } from '../utils/categoryUtils';
|
||||
import { ApiClient } from './ApiClient';
|
||||
import articleAutomat from '../store/articleAutomat';
|
||||
import artikelAutomat from '../automats/artikelAutomat';
|
||||
import companyAutomat from '../automats/companyAutomat';
|
||||
import brandAutomat from '../automats/brandAutomat';
|
||||
import unitAutomat from '../automats/unitAutomat';
|
||||
import authAutomat from '../automats/authAutomat';
|
||||
import categoryAutomat from '../automats/categoryAutomat';
|
||||
|
||||
|
||||
/**
|
||||
* Stale-while-revalidate cache: readers keep the current promise; update()
|
||||
@@ -75,8 +81,6 @@ export class StorageManager extends ApiClient {
|
||||
#events = null;
|
||||
/** @type {ReturnType<typeof createCache> | null} */
|
||||
#articleIndexCache = null;
|
||||
/** @type {Map<string, object>} sku → article detail */
|
||||
#articlesBySku = new Map();
|
||||
/** @type {Map<string, Set<(article: object) => void>>} sku → article listeners */
|
||||
#articleWatchers = new Map();
|
||||
/** @type {Map<string, Set<() => void>>} sku → history refreshers */
|
||||
@@ -92,39 +96,41 @@ export class StorageManager extends ApiClient {
|
||||
this.watchArticleSuppliers(sku, onSuppliers);
|
||||
}
|
||||
|
||||
/** Settled article detail for sku, or undefined. */
|
||||
/** Cached article detail from the shared artikelAutomat, or null. */
|
||||
getArticle(sku) {
|
||||
return this.#articlesBySku.get(String(sku));
|
||||
return artikelAutomat.state.bySku[String(sku)] ?? null;
|
||||
}
|
||||
|
||||
/** Keep local article detail in sync after GET/PATCH/PUT responses. */
|
||||
/**
|
||||
* Keep the shared article cache in sync after GET/PATCH/PUT responses and
|
||||
* notify any StorageManager-level watchers.
|
||||
*/
|
||||
setArticle(article) {
|
||||
requireObject(article, 'article');
|
||||
requireDefined(article.sku, 'article.sku');
|
||||
const key = String(article.sku);
|
||||
this.#articlesBySku.set(key, article);
|
||||
|
||||
// Update automat as well
|
||||
articleAutomat.actions.setArticle(article);
|
||||
const stored = artikelAutomat.actions.setArticle(article);
|
||||
|
||||
const watchers = this.#articleWatchers.get(key);
|
||||
if (watchers) {
|
||||
for (const onArticle of watchers) onArticle(stored);
|
||||
}
|
||||
return stored;
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/article/{sku} via the shared cache (deduplicated), notify watchers.
|
||||
* @param {string} sku
|
||||
*/
|
||||
async loadArticle(sku) {
|
||||
const article = await artikelAutomat.actions.loadArticle(sku);
|
||||
const watchers = this.#articleWatchers.get(String(sku));
|
||||
if (watchers) {
|
||||
for (const onArticle of watchers) onArticle(article);
|
||||
}
|
||||
return article;
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/article/{sku}, cache detail, return article.
|
||||
* @param {string} sku
|
||||
*/
|
||||
async loadArticle(sku) {
|
||||
const res = await this.article.get(sku);
|
||||
requireObject(res, 'GET /api/article/:sku');
|
||||
requireObject(res.article, 'article');
|
||||
return this.setArticle(res.article);
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to article detail updates (local setArticle + SSE `article-<sku>`).
|
||||
* @param {string} sku
|
||||
@@ -172,16 +178,12 @@ export class StorageManager extends ApiClient {
|
||||
* @returns {{ categories: object, rootCategoryId: unknown } | null}
|
||||
*/
|
||||
getCategoryState() {
|
||||
const treeData = this.categoryTree;
|
||||
const companies = this.companies;
|
||||
const session = this.authMe;
|
||||
if (treeData == null || companies == null || session == null) return null;
|
||||
|
||||
const companyId = session.user?.selectedCompanyId;
|
||||
if (companyId == null) return null;
|
||||
const company = companies.find((c) => c.id === companyId);
|
||||
const company = this.company;
|
||||
if (company == null) return null;
|
||||
|
||||
const treeData = this.categoryTree;
|
||||
if (treeData != null) {
|
||||
// Legacy: tree was loaded via the old cache mechanism
|
||||
const parsed = parseCategoryTreeResponse(treeData, company.rootCategoryId);
|
||||
return {
|
||||
categories: parsed.categories,
|
||||
@@ -189,6 +191,15 @@ export class StorageManager extends ApiClient {
|
||||
};
|
||||
}
|
||||
|
||||
// New path: use categoryAutomat state directly
|
||||
const catState = categoryAutomat.state;
|
||||
if (catState.categories == null || catState.treeStatus !== 'succeeded') return null;
|
||||
return {
|
||||
categories: catState.categories,
|
||||
rootCategoryId: catState.rootCategoryId,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch article history, then refetch whenever SSE emits `article-<sku>`.
|
||||
* Paginates in the store (full list from HTTP; slice via setSkipAndOffset).
|
||||
@@ -335,11 +346,11 @@ export class StorageManager extends ApiClient {
|
||||
#onArticleSignal = (event) => {
|
||||
const sku = event.type.slice('article-'.length);
|
||||
|
||||
// Update automat on SSE article events
|
||||
void articleAutomat.actions.loadArticle(sku).catch((err) => notifyError(err));
|
||||
|
||||
// Refresh the shared cache; silently when nothing is watching this SKU.
|
||||
if (this.#articleWatchers.has(sku)) {
|
||||
void this.loadArticle(sku).catch((err) => notifyError(err));
|
||||
void artikelAutomat.actions.reloadArticle(sku).catch((err) => notifyError(err));
|
||||
} else {
|
||||
void artikelAutomat.actions.reloadArticle(sku).catch(() => {});
|
||||
}
|
||||
const historyWatchers = this.#historyWatchers.get(sku);
|
||||
if (historyWatchers) {
|
||||
@@ -360,9 +371,9 @@ export class StorageManager extends ApiClient {
|
||||
);
|
||||
}
|
||||
|
||||
/** Patch local article detail name if already cached; no-op otherwise. */
|
||||
/** Patch cached article detail name if already cached; no-op otherwise. */
|
||||
setArticleName(sku, name) {
|
||||
const current = this.#articlesBySku.get(String(sku));
|
||||
const current = this.getArticle(sku);
|
||||
if (!current) return;
|
||||
this.setArticle({ ...current, name });
|
||||
}
|
||||
@@ -375,13 +386,6 @@ export class StorageManager extends ApiClient {
|
||||
|
||||
#initCaches() {
|
||||
const authMeCache = createCache('GET /auth/me', () => this.#loadAuthMe());
|
||||
this.#articleIndexCache = createCache('GET /articleIndex', () => this.#loadArticleIndex());
|
||||
const articleIndexCache = this.#articleIndexCache;
|
||||
const brandCache = createCache('GET /brand', () => this.#loadBrands());
|
||||
const unitCache = createCache('GET /unit', () => this.#loadUnits());
|
||||
const companyCache = createCache('GET /company', () => this.#loadCompanies());
|
||||
const categoryTreeCache = createCache('GET /category/tree', () => this.#loadCategoryTree());
|
||||
const posterminalCache = createCache('GET /posterminal', () => this.#loadPosterminals());
|
||||
const deliveryCache = createCache('GET /delivery', () => this.#loadDeliveries());
|
||||
const customergroupCache = createCache('GET /customergroup', () =>
|
||||
this.#loadCustomergroups(),
|
||||
@@ -391,6 +395,19 @@ export class StorageManager extends ApiClient {
|
||||
const quoteCache = createCache('GET /quote', () => this.#loadQuotes());
|
||||
const orderCache = createCache('GET /order', () => this.#loadOrders());
|
||||
|
||||
// articleIndex is auth-gated — create a deferred cache that only loads after auth
|
||||
this.#articleIndexCache = this.#createDeferredCache(
|
||||
'GET /articleIndex',
|
||||
() => this.#loadArticleIndex(),
|
||||
);
|
||||
const articleIndexCache = this.#articleIndexCache;
|
||||
|
||||
// category tree: deferred, reloaded via categoryAutomat
|
||||
const categoryTreeCache = this.#createDeferredCache(
|
||||
'GET /category/tree',
|
||||
() => this.#loadCategoryTree(),
|
||||
);
|
||||
|
||||
Object.defineProperties(this, {
|
||||
authMePromise: { get: () => authMeCache.promise },
|
||||
updateAuthMe: { value: authMeCache.update },
|
||||
@@ -400,29 +417,68 @@ export class StorageManager extends ApiClient {
|
||||
articleIndexPromise: { get: () => articleIndexCache.promise },
|
||||
updateArticleIndex: { value: articleIndexCache.update },
|
||||
|
||||
brandPromise: { get: () => brandCache.promise },
|
||||
updateBrand: { value: brandCache.update },
|
||||
/** Settled GET /brand list, or undefined. */
|
||||
brands: { get: () => brandCache.value },
|
||||
// ── Automat bridges (brand, unit, company, posterminal) ──────────────────
|
||||
/** Brand list from brandAutomat (may be empty until authed). */
|
||||
brands: { get: () => brandAutomat.state.brands },
|
||||
/** Promise that resolves when brands are first loaded. */
|
||||
brandPromise: {
|
||||
get: () => brandAutomat.state.status === 'succeeded'
|
||||
? Promise.resolve(brandAutomat.state.brands)
|
||||
: new Promise((resolve) => {
|
||||
const unsub = brandAutomat.subscribe((s) => {
|
||||
if (s.status === 'succeeded') { unsub(); resolve(s.brands); }
|
||||
});
|
||||
}),
|
||||
},
|
||||
/** Reload brands from API. */
|
||||
updateBrand: { value: () => brandAutomat.actions.load() },
|
||||
|
||||
unitPromise: { get: () => unitCache.promise },
|
||||
updateUnit: { value: unitCache.update },
|
||||
/** Settled GET /unit list, or undefined. */
|
||||
units: { get: () => unitCache.value },
|
||||
/** Unit list from unitAutomat. */
|
||||
units: { get: () => unitAutomat.state.units },
|
||||
/** Promise that resolves when units are first loaded. */
|
||||
unitPromise: {
|
||||
get: () => unitAutomat.state.status === 'succeeded'
|
||||
? Promise.resolve(unitAutomat.state.units)
|
||||
: new Promise((resolve) => {
|
||||
const unsub = unitAutomat.subscribe((s) => {
|
||||
if (s.status === 'succeeded') { unsub(); resolve(s.units); }
|
||||
});
|
||||
}),
|
||||
},
|
||||
/** Reload units from API. */
|
||||
updateUnit: { value: () => unitAutomat.actions.load() },
|
||||
|
||||
companyPromise: { get: () => companyCache.promise },
|
||||
updateCompany: { value: companyCache.update },
|
||||
/** Settled GET /company list, or undefined. */
|
||||
companies: { get: () => companyCache.value },
|
||||
/**
|
||||
* Current company object from companyAutomat, or null.
|
||||
* Previously: companies array from GET /api/company.
|
||||
* Consumers that used companies.find(c => c.id === companyId) can use .company directly.
|
||||
*/
|
||||
company: { get: () => companyAutomat.state.current ?? null },
|
||||
/** Promise that resolves when company data is loaded. */
|
||||
companyPromise: {
|
||||
get: () => companyAutomat.state.status === 'succeeded'
|
||||
? Promise.resolve(companyAutomat.state.current)
|
||||
: new Promise((resolve, reject) => {
|
||||
const unsub = companyAutomat.subscribe((s) => {
|
||||
if (s.status === 'succeeded') { unsub(); resolve(s.current); }
|
||||
else if (s.status === 'failed') { unsub(); reject(new Error(s.error)); }
|
||||
});
|
||||
}),
|
||||
},
|
||||
/** Reload company data from API. */
|
||||
updateCompany: { value: () => companyAutomat.actions.load() },
|
||||
|
||||
// Legacy compat: some components call store.companies.find(c => c.id === companyId).
|
||||
// Return a single-element array so .find() still works.
|
||||
companies: { get: () => companyAutomat.state.current ? [companyAutomat.state.current] : [] },
|
||||
|
||||
// ── Category tree bridge ─────────────────────────────────────────────────
|
||||
categoryTreePromise: { get: () => categoryTreeCache.promise },
|
||||
updateCategoryTree: { value: categoryTreeCache.update },
|
||||
/** Settled GET /category/tree body, or undefined. */
|
||||
categoryTree: { get: () => categoryTreeCache.value },
|
||||
|
||||
posterminalPromise: { get: () => posterminalCache.promise },
|
||||
updatePosterminal: { value: posterminalCache.update },
|
||||
|
||||
// ── Remaining non-auth-gated caches ─────────────────────────────────────
|
||||
deliveryPromise: { get: () => deliveryCache.promise },
|
||||
updateDelivery: { value: deliveryCache.update },
|
||||
/** Settled GET /delivery list, or undefined. */
|
||||
@@ -456,7 +512,62 @@ export class StorageManager extends ApiClient {
|
||||
/** Close and reopen GET /api/events (required after selected-company change). */
|
||||
reconnectEvents: { value: () => this.#reconnectEvents() },
|
||||
});
|
||||
|
||||
// Trigger articleIndex load once auth is established
|
||||
authAutomat.subscribe((auth) => {
|
||||
if (auth.status === 'authed' && auth.user?.selectedCompanyId) {
|
||||
if (!articleIndexCache.value) {
|
||||
void articleIndexCache.update?.().catch(() => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a cache that does NOT load immediately but waits for an explicit trigger.
|
||||
* Differs from createCache in that the initial load promise is not started.
|
||||
*/
|
||||
#createDeferredCache(label, load) {
|
||||
let current;
|
||||
let resolveInitial;
|
||||
let rejectInitial;
|
||||
let promise = new Promise((res, rej) => {
|
||||
resolveInitial = res;
|
||||
rejectInitial = rej;
|
||||
});
|
||||
|
||||
async function update() {
|
||||
try {
|
||||
const data = await load();
|
||||
current = data;
|
||||
promise = Promise.resolve(data);
|
||||
resolveInitial?.(data);
|
||||
resolveInitial = null;
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error(`[storageMgr] update ${label} failed`, err);
|
||||
rejectInitial?.(err);
|
||||
rejectInitial = null;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function replace(data) {
|
||||
current = data;
|
||||
promise = Promise.resolve(data);
|
||||
resolveInitial?.(data);
|
||||
resolveInitial = null;
|
||||
return data;
|
||||
}
|
||||
|
||||
return {
|
||||
update,
|
||||
replace,
|
||||
get promise() { return promise; },
|
||||
get value() { return current; },
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* GET /api/events — SSE signals for the selected company.
|
||||
|
||||
190
src/automats/artikelAutomat.js
Normal file
190
src/automats/artikelAutomat.js
Normal file
@@ -0,0 +1,190 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { article as articleApi } from '../api';
|
||||
import { requireDefined, requireObject } from '../utils/apiShape';
|
||||
|
||||
/**
|
||||
* @typedef {Object} ArtikelState
|
||||
* @property {Object<string, object>} bySku Cached article detail keyed by SKU.
|
||||
* Missing keys mean "not loaded"; a value is the full `GET /api/article/{sku}`
|
||||
* detail payload (prices, photos, eans, brand, unit, categoryIds, …).
|
||||
*/
|
||||
|
||||
/** @type {ArtikelState} */
|
||||
const initialState = {
|
||||
bySku: {},
|
||||
};
|
||||
|
||||
/**
|
||||
* In-flight detail requests keyed by SKU. Concurrent consumers (view tiles,
|
||||
* route guards, SSE refreshes) share a single `GET /api/article/{sku}`.
|
||||
*
|
||||
* @type {Map<string, Promise<object>>}
|
||||
*/
|
||||
const inflight = new Map();
|
||||
|
||||
/** @type {Automat<ArtikelState>} */
|
||||
let artikelAutomat;
|
||||
|
||||
const actions = {
|
||||
/**
|
||||
* Loads an article into the shared cache, deduplicating concurrent callers.
|
||||
* Resolves with the cached article when it is already present.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {Promise<object>} Loaded article detail.
|
||||
*/
|
||||
loadArticle(sku) {
|
||||
const key = String(sku ?? '').trim();
|
||||
if (!key) {
|
||||
return Promise.reject(new Error('artikelAutomat.loadArticle: SKU fehlt'));
|
||||
}
|
||||
|
||||
const cached = artikelAutomat.state.bySku[key];
|
||||
if (cached) return Promise.resolve(cached);
|
||||
|
||||
const pending = inflight.get(key);
|
||||
if (pending) return pending;
|
||||
|
||||
const request = articleApi
|
||||
.getBySku(key)
|
||||
.then((res) => {
|
||||
requireObject(res, 'GET /api/article/:sku');
|
||||
requireObject(res.article, 'article');
|
||||
requireDefined(res.article.sku, 'article.sku');
|
||||
return artikelAutomat.actions.setArticle(res.article);
|
||||
})
|
||||
.finally(() => {
|
||||
inflight.delete(key);
|
||||
});
|
||||
|
||||
inflight.set(key, request);
|
||||
return request;
|
||||
},
|
||||
|
||||
/**
|
||||
* Silently re-fetches an article, keeping the cached copy until the new one
|
||||
* arrives. Use for SSE invalidation and pull-to-refresh.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {Promise<object>} Fresh article detail.
|
||||
*/
|
||||
async reloadArticle(sku) {
|
||||
const key = String(sku ?? '').trim();
|
||||
if (!key) throw new Error('artikelAutomat.reloadArticle: SKU fehlt');
|
||||
|
||||
const res = await articleApi.getBySku(key);
|
||||
requireObject(res, 'GET /api/article/:sku');
|
||||
requireObject(res.article, 'article');
|
||||
requireDefined(res.article.sku, 'article.sku');
|
||||
return artikelAutomat.actions.setArticle(res.article);
|
||||
},
|
||||
|
||||
/**
|
||||
* Stores an article detail payload in the cache. Call after any GET/PATCH/PUT
|
||||
* response so every subscriber sees the same object.
|
||||
*
|
||||
* @param {object} article Article detail with at least a `sku`.
|
||||
* @returns {object} The stored article.
|
||||
*/
|
||||
setArticle(article) {
|
||||
requireObject(article, 'article');
|
||||
requireDefined(article.sku, 'article.sku');
|
||||
const key = String(article.sku);
|
||||
artikelAutomat.setState({
|
||||
bySku: { ...artikelAutomat.state.bySku, [key]: article },
|
||||
});
|
||||
return article;
|
||||
},
|
||||
|
||||
/**
|
||||
* Patches the cached article name without a round-trip (optimistic update).
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @param {string} name New name.
|
||||
* @returns {object|null} Updated article, or `null` when not cached.
|
||||
*/
|
||||
setArticleName(sku, name) {
|
||||
const key = String(sku);
|
||||
const current = artikelAutomat.state.bySku[key];
|
||||
if (!current) return null;
|
||||
return artikelAutomat.actions.setArticle({ ...current, name });
|
||||
},
|
||||
|
||||
/**
|
||||
* Drops an article from the cache (e.g. after deletion), forcing the next
|
||||
* `loadArticle` to hit the backend.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {void}
|
||||
*/
|
||||
clearArticle(sku) {
|
||||
const key = String(sku);
|
||||
if (!(key in artikelAutomat.state.bySku)) return;
|
||||
const bySku = { ...artikelAutomat.state.bySku };
|
||||
delete bySku[key];
|
||||
artikelAutomat.setState({ bySku });
|
||||
},
|
||||
|
||||
/**
|
||||
* Forgets every cached article.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
clear() {
|
||||
artikelAutomat.setState({ bySku: {} });
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared cache for article detail payloads. State lives in module scope so
|
||||
* navigating between articles (and remounting the view) reuses the cache
|
||||
* instead of re-fetching.
|
||||
*
|
||||
* @type {Automat<ArtikelState>}
|
||||
*/
|
||||
artikelAutomat = new Automat(initialState, actions, { name: 'artikel' });
|
||||
|
||||
/**
|
||||
* Reads a cached article synchronously.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {object|null} Cached article detail, or `null`.
|
||||
*/
|
||||
export function getArticle(sku) {
|
||||
if (sku == null) return null;
|
||||
return artikelAutomat.state.bySku[String(sku)] ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether an article detail payload is currently cached.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {boolean} `true` when cached.
|
||||
*/
|
||||
export function hasArticle(sku) {
|
||||
return getArticle(sku) != null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a selector for one SKU, so a component can subscribe to just that
|
||||
* article instead of every cache change.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {(state: ArtikelState) => object|null} Selector function.
|
||||
*/
|
||||
export function createArticleSelector(sku) {
|
||||
const key = sku == null ? null : String(sku);
|
||||
return (state) => (key == null ? null : state.bySku[key] ?? null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shorthand for `artikelAutomat.select(createArticleSelector(sku))`.
|
||||
*
|
||||
* @param {string} sku Article SKU.
|
||||
* @returns {import('react-automat').ScopedSlice<object|null>} Scoped slice.
|
||||
*/
|
||||
export function selectArticle(sku) {
|
||||
return artikelAutomat.select(createArticleSelector(sku));
|
||||
}
|
||||
|
||||
export default artikelAutomat;
|
||||
81
src/automats/brandAutomat.js
Normal file
81
src/automats/brandAutomat.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { brand as brandApi } from '../api';
|
||||
import authAutomat from './authAutomat';
|
||||
|
||||
/**
|
||||
* @typedef {Object} BrandState
|
||||
* @property {Array<object>} brands
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} status
|
||||
* @property {string|null} error
|
||||
*/
|
||||
|
||||
/** @type {BrandState} */
|
||||
const initialState = {
|
||||
brands: [],
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
function sortBrands(brands) {
|
||||
return [...brands].sort((a, b) =>
|
||||
String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de'),
|
||||
);
|
||||
}
|
||||
|
||||
let brandAutomat;
|
||||
|
||||
const actions = {
|
||||
/** Load all brands for the selected company. */
|
||||
async load() {
|
||||
brandAutomat.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const res = await brandApi.list();
|
||||
const brands = sortBrands(Array.isArray(res.brands) ? res.brands : []);
|
||||
brandAutomat.setState({ brands, status: 'succeeded' });
|
||||
return brands;
|
||||
} catch (err) {
|
||||
brandAutomat.setState({ status: 'failed', error: err?.message ?? String(err) });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Upsert a brand (create or update by name).
|
||||
* @param {{ name: string, gsprpinfo?: string }} body
|
||||
*/
|
||||
async upsert(body) {
|
||||
const res = await brandApi.upsert(body);
|
||||
const row = res.brand;
|
||||
const brands = sortBrands([
|
||||
...brandAutomat.state.brands.filter((b) => b.id !== row.id),
|
||||
row,
|
||||
]);
|
||||
brandAutomat.setState({ brands });
|
||||
return row;
|
||||
},
|
||||
|
||||
/** Reset to idle state (called on logout / company switch). */
|
||||
reset() {
|
||||
brandAutomat.setState(initialState);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Global brand state container.
|
||||
* Loads automatically when authAutomat reaches 'authed' with a selectedCompanyId.
|
||||
*
|
||||
* @type {Automat<BrandState>}
|
||||
*/
|
||||
brandAutomat = new Automat(initialState, actions, { name: 'brand' });
|
||||
|
||||
// Subscribe to auth changes
|
||||
authAutomat.subscribe((auth) => {
|
||||
const companyId = auth.user?.selectedCompanyId;
|
||||
if (auth.status === 'authed' && companyId) {
|
||||
void brandAutomat.actions.load();
|
||||
} else if (auth.status === 'anon') {
|
||||
brandAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
export default brandAutomat;
|
||||
490
src/automats/categoryAutomat.js
Normal file
490
src/automats/categoryAutomat.js
Normal file
@@ -0,0 +1,490 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { category as categoryApi, article as articleApi } from '../api';
|
||||
import authAutomat from './authAutomat';
|
||||
import companyAutomat from './companyAutomat';
|
||||
import {
|
||||
parseCategoryTreeResponse,
|
||||
normalizeCategoryNode,
|
||||
getCategoryBreadcrumbs,
|
||||
getCategoryChildren,
|
||||
ROOT_CATEGORY_NAME,
|
||||
} from '../utils/categoryUtils';
|
||||
|
||||
/**
|
||||
* @typedef {Object} CategoryState
|
||||
* @property {number|string|null} companyId
|
||||
* @property {string|null} languageId
|
||||
* @property {Record<string,object>|null} categories id → node map
|
||||
* @property {number|string|null} rootCategoryId
|
||||
* @property {Array<object>} rootArticles
|
||||
* @property {number|string|null} currentCategoryId
|
||||
* @property {Array<object>} articles
|
||||
* @property {number} articlesTotal
|
||||
* @property {boolean} renameMode
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} treeStatus
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} articlesStatus
|
||||
* @property {string|null} error
|
||||
*/
|
||||
|
||||
/** @type {CategoryState} */
|
||||
const initialState = {
|
||||
companyId: null,
|
||||
languageId: null,
|
||||
categories: null,
|
||||
rootCategoryId: null,
|
||||
rootArticles: [],
|
||||
currentCategoryId: null,
|
||||
articles: [],
|
||||
articlesTotal: 0,
|
||||
renameMode: false,
|
||||
treeStatus: 'idle',
|
||||
articlesStatus: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
let categoryAutomat;
|
||||
|
||||
// ─── Pure helpers ──────────────────────────────────────────────────────────────
|
||||
|
||||
function articlesForCategory(state, categoryId) {
|
||||
if (String(categoryId) === String(state.rootCategoryId)) {
|
||||
return state.rootArticles;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// ─── Actions ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const actions = {
|
||||
/** Load the category tree for the currently selected company. */
|
||||
async loadTree() {
|
||||
const company = companyAutomat.state.current;
|
||||
if (!company) return;
|
||||
const { id: companyId, rootCategoryId: companyRootId } = company;
|
||||
if (!companyRootId) return;
|
||||
|
||||
categoryAutomat.setState({ treeStatus: 'loading', error: null });
|
||||
try {
|
||||
const data = await categoryApi.getTree();
|
||||
const parsed = parseCategoryTreeResponse(data, companyRootId);
|
||||
categoryAutomat.setState({
|
||||
treeStatus: 'succeeded',
|
||||
companyId,
|
||||
languageId: parsed.languageId,
|
||||
categories: parsed.categories,
|
||||
rootCategoryId: parsed.rootCategoryId,
|
||||
currentCategoryId: parsed.rootCategoryId,
|
||||
rootArticles: parsed.rootArticles,
|
||||
articles: parsed.rootArticles,
|
||||
articlesTotal: parsed.rootArticles.length,
|
||||
articlesStatus: 'succeeded',
|
||||
error: null,
|
||||
});
|
||||
} catch (err) {
|
||||
categoryAutomat.setState({
|
||||
treeStatus: 'failed',
|
||||
error: err?.message ?? String(err),
|
||||
});
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load articles for a non-root category.
|
||||
* @param {number|string} categoryId
|
||||
*/
|
||||
async loadArticles(categoryId) {
|
||||
categoryAutomat.setState({ articlesStatus: 'loading', error: null });
|
||||
try {
|
||||
const res = await categoryApi.getArticles(categoryId);
|
||||
const articles = Array.isArray(res.articles) ? res.articles : [];
|
||||
categoryAutomat.setState({
|
||||
articlesStatus: 'succeeded',
|
||||
articles,
|
||||
articlesTotal: articles.length,
|
||||
});
|
||||
} catch (err) {
|
||||
categoryAutomat.setState({
|
||||
articlesStatus: 'failed',
|
||||
articles: [],
|
||||
articlesTotal: 0,
|
||||
error: err?.message ?? String(err),
|
||||
});
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/** Navigate to a category by id. */
|
||||
navigateTo(categoryId) {
|
||||
const { rootCategoryId, rootArticles } = categoryAutomat.state;
|
||||
const isRoot = String(categoryId) === String(rootCategoryId);
|
||||
categoryAutomat.setState({
|
||||
currentCategoryId: categoryId,
|
||||
error: null,
|
||||
articles: isRoot ? rootArticles : [],
|
||||
articlesTotal: isRoot ? rootArticles.length : 0,
|
||||
articlesStatus: isRoot ? 'succeeded' : 'idle',
|
||||
});
|
||||
},
|
||||
|
||||
/** Navigate up to the parent category. */
|
||||
navigateBack() {
|
||||
const { categories, currentCategoryId, rootCategoryId, rootArticles } = categoryAutomat.state;
|
||||
const current = categories?.[String(currentCategoryId)];
|
||||
const parentId = current?.parentId;
|
||||
if (parentId == null || parentId === 0) return;
|
||||
if (String(parentId) === String(rootCategoryId) || categories?.[String(parentId)]) {
|
||||
const isRoot = String(parentId) === String(rootCategoryId);
|
||||
categoryAutomat.setState({
|
||||
currentCategoryId: parentId,
|
||||
error: null,
|
||||
articles: isRoot ? rootArticles : [],
|
||||
articlesTotal: isRoot ? rootArticles.length : 0,
|
||||
articlesStatus: isRoot ? 'succeeded' : 'idle',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/** Toggle rename/edit mode for the category grid. */
|
||||
setRenameMode(enabled) {
|
||||
categoryAutomat.setState({ renameMode: Boolean(enabled) });
|
||||
},
|
||||
|
||||
// ─── Category mutations ────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Create a single category.
|
||||
* @param {{ parentId: number|string, name: string }} param0
|
||||
*/
|
||||
async createCategory({ parentId, name }) {
|
||||
const res = await categoryApi.create({ parentId, name });
|
||||
const node = normalizeCategoryNode(res.category);
|
||||
const { categories } = categoryAutomat.state;
|
||||
categoryAutomat.setState({
|
||||
categories: { ...(categories ?? {}), [String(node.id)]: node },
|
||||
});
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create multiple categories under the same parent.
|
||||
* @param {{ parentId: number|string, names: string[] }} param0
|
||||
*/
|
||||
async createCategories({ parentId, names }) {
|
||||
const list = (names ?? []).map((n) => String(n ?? '').trim()).filter(Boolean);
|
||||
if (list.length === 0) throw new Error('Keine Namen übergeben.');
|
||||
const created = [];
|
||||
for (const name of list) {
|
||||
const res = await categoryApi.create({ parentId, name });
|
||||
created.push(normalizeCategoryNode(res.category));
|
||||
}
|
||||
const patch = Object.fromEntries(created.map((n) => [String(n.id), n]));
|
||||
categoryAutomat.setState({
|
||||
categories: { ...(categoryAutomat.state.categories ?? {}), ...patch },
|
||||
});
|
||||
return created;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a single article.
|
||||
* @param {{ parentId: number|string, name: string }} param0
|
||||
*/
|
||||
async createArticle({ parentId, name }) {
|
||||
const res = await articleApi.create({ parentId, name });
|
||||
const created = res.article;
|
||||
const { currentCategoryId, rootCategoryId, articles, rootArticles } = categoryAutomat.state;
|
||||
const patch = {};
|
||||
if (String(created.parentId) === String(currentCategoryId)) {
|
||||
patch.articles = [...articles, created];
|
||||
patch.articlesTotal = patch.articles.length;
|
||||
patch.articlesStatus = 'succeeded';
|
||||
}
|
||||
if (String(created.parentId) === String(rootCategoryId)) {
|
||||
patch.rootArticles = [...rootArticles, created];
|
||||
}
|
||||
if (Object.keys(patch).length) categoryAutomat.setState(patch);
|
||||
return created;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create multiple articles under the same parent.
|
||||
* @param {{ parentId: number|string, names: string[] }} param0
|
||||
*/
|
||||
async createArticles({ parentId, names }) {
|
||||
const list = (names ?? []).map((n) => String(n ?? '').trim()).filter(Boolean);
|
||||
if (list.length === 0) throw new Error('Keine Namen übergeben.');
|
||||
const created = [];
|
||||
for (const name of list) {
|
||||
const res = await articleApi.create({ parentId, name });
|
||||
if (res.article) created.push(res.article);
|
||||
}
|
||||
const { currentCategoryId, rootCategoryId, articles, rootArticles } = categoryAutomat.state;
|
||||
const patch = {};
|
||||
const forCurrent = created.filter((a) => String(a.parentId) === String(currentCategoryId));
|
||||
if (forCurrent.length > 0) {
|
||||
patch.articles = [...articles, ...forCurrent];
|
||||
patch.articlesTotal = patch.articles.length;
|
||||
patch.articlesStatus = 'succeeded';
|
||||
}
|
||||
const forRoot = created.filter((a) => String(a.parentId) === String(rootCategoryId));
|
||||
if (forRoot.length > 0) {
|
||||
patch.rootArticles = [...rootArticles, ...forRoot];
|
||||
}
|
||||
if (Object.keys(patch).length) categoryAutomat.setState(patch);
|
||||
return created;
|
||||
},
|
||||
|
||||
/**
|
||||
* Rename a category.
|
||||
* @param {{ categoryId: number|string, name: string }} param0
|
||||
*/
|
||||
async renameCategory({ categoryId, name }) {
|
||||
const trimmed = String(name ?? '').trim();
|
||||
if (!trimmed) throw new Error('Name required');
|
||||
const res = await categoryApi.updateName(categoryId, trimmed);
|
||||
const updated = normalizeCategoryNode(res.category);
|
||||
const key = String(updated.id);
|
||||
const { categories, rootArticles } = categoryAutomat.state;
|
||||
categoryAutomat.setState({
|
||||
categories: categories ? { ...categories, [key]: { ...categories[key], ...updated } } : null,
|
||||
rootArticles: rootArticles.map((row) =>
|
||||
row?.categoryId != null && String(row.categoryId) === key
|
||||
? { ...row, name: updated.name }
|
||||
: row,
|
||||
),
|
||||
});
|
||||
return updated;
|
||||
},
|
||||
|
||||
/**
|
||||
* Reorder sibling categories.
|
||||
* @param {{ categoryIds: number[] }} param0
|
||||
*/
|
||||
async reorderCategories({ categoryIds }) {
|
||||
const { currentCategoryId, categories } = categoryAutomat.state;
|
||||
const res = await categoryApi.reorder(currentCategoryId, categoryIds);
|
||||
const ordered = res.categoryIds;
|
||||
const parentKey = String(currentCategoryId);
|
||||
const idToSort = new Map(ordered.map((id, index) => [String(id), index]));
|
||||
const patched = { ...categories };
|
||||
for (const node of Object.values(patched)) {
|
||||
if (node.parentId != null && String(node.parentId) === parentKey && idToSort.has(String(node.id))) {
|
||||
patched[String(node.id)] = { ...node, sort: idToSort.get(String(node.id)) };
|
||||
}
|
||||
}
|
||||
categoryAutomat.setState({ categories: patched });
|
||||
return ordered;
|
||||
},
|
||||
|
||||
/**
|
||||
* Move a category under a new parent.
|
||||
* @param {{ categoryId: number|string, parentId: number|string }} param0
|
||||
*/
|
||||
async moveCategory({ categoryId, parentId }) {
|
||||
const res = await categoryApi.move(categoryId, parentId);
|
||||
const moved = res.category;
|
||||
const { categories } = categoryAutomat.state;
|
||||
if (!categories || !moved) return;
|
||||
const key = String(moved.id);
|
||||
categoryAutomat.setState({
|
||||
categories: {
|
||||
...categories,
|
||||
[key]: { ...categories[key], parentId: moved.parentId, sort: moved.sort },
|
||||
},
|
||||
});
|
||||
return moved;
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a category by id.
|
||||
* @param {number|string} categoryId
|
||||
*/
|
||||
async deleteCategory(categoryId) {
|
||||
await categoryApi.delete(categoryId);
|
||||
const { categories, currentCategoryId, rootCategoryId, rootArticles } = categoryAutomat.state;
|
||||
if (!categories) return;
|
||||
const next = { ...categories };
|
||||
delete next[String(categoryId)];
|
||||
const patch = { categories: next };
|
||||
if (String(currentCategoryId) === String(categoryId)) {
|
||||
patch.currentCategoryId = rootCategoryId;
|
||||
patch.articles = rootArticles;
|
||||
patch.articlesTotal = rootArticles.length;
|
||||
patch.articlesStatus = 'succeeded';
|
||||
}
|
||||
categoryAutomat.setState(patch);
|
||||
return categoryId;
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the POS flag on a category.
|
||||
* @param {{ categoryId: number|string, pos: boolean }} param0
|
||||
*/
|
||||
async toggleCategoryPos({ categoryId, pos }) {
|
||||
const res = await categoryApi.updatePos(categoryId, pos);
|
||||
const updated = normalizeCategoryNode(res.category);
|
||||
const { categories } = categoryAutomat.state;
|
||||
if (!categories) return;
|
||||
const key = String(updated.id);
|
||||
categoryAutomat.setState({
|
||||
categories: { ...categories, [key]: { ...categories[key], pos: updated.pos } },
|
||||
});
|
||||
return updated;
|
||||
},
|
||||
|
||||
/**
|
||||
* Upload an image for a category.
|
||||
* @param {{ categoryId: number|string, file: Blob }} param0
|
||||
*/
|
||||
async uploadCategoryImage({ categoryId, file }) {
|
||||
const res = await categoryApi.uploadImage(categoryId, file);
|
||||
const { id, fullHash, thumbW, thumbH, thumbHash } = res.category;
|
||||
const { categories } = categoryAutomat.state;
|
||||
if (!categories) return res.category;
|
||||
const key = String(id);
|
||||
categoryAutomat.setState({
|
||||
categories: { ...categories, [key]: { ...categories[key], fullHash, thumbW, thumbH, thumbHash } },
|
||||
});
|
||||
return res.category;
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete the image for a category.
|
||||
* @param {number|string} categoryId
|
||||
*/
|
||||
async deleteCategoryImage(categoryId) {
|
||||
const res = await categoryApi.deleteImage(categoryId);
|
||||
const { id } = res.category;
|
||||
const { categories } = categoryAutomat.state;
|
||||
if (!categories) return res.category;
|
||||
const key = String(id);
|
||||
categoryAutomat.setState({
|
||||
categories: {
|
||||
...categories,
|
||||
[key]: { ...categories[key], fullHash: null, thumbW: null, thumbH: null, thumbHash: null },
|
||||
},
|
||||
});
|
||||
return res.category;
|
||||
},
|
||||
|
||||
// ─── Local state patches ───────────────────────────────────────────────────
|
||||
|
||||
/** Remove an article from both article lists (used after article deletion). */
|
||||
removeArticleBySku(sku) {
|
||||
categoryAutomat.setState({
|
||||
articles: categoryAutomat.state.articles.filter((r) => r.sku !== sku),
|
||||
articlesTotal: categoryAutomat.state.articles.filter((r) => r.sku !== sku).length,
|
||||
rootArticles: categoryAutomat.state.rootArticles.filter((r) => r.sku !== sku),
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Patch article fields and category membership in local lists.
|
||||
* @param {{ sku: string, categoryIds?: number[], [key: string]: any }} payload
|
||||
*/
|
||||
patchArticleInLists({ sku, categoryIds, ...fields }) {
|
||||
if (sku == null) return;
|
||||
const { articles, rootArticles, rootCategoryId, currentCategoryId } = categoryAutomat.state;
|
||||
|
||||
const patchList = (list) =>
|
||||
list.map((row) => (row.sku !== sku ? row : { ...row, ...fields }));
|
||||
|
||||
let nextArticles = patchList(articles);
|
||||
let nextRoot = patchList(rootArticles);
|
||||
let nextArticlesTotal = nextArticles.length;
|
||||
|
||||
if (categoryIds !== undefined) {
|
||||
const newIds = categoryIds ?? [];
|
||||
const articleObj = nextArticles.find((r) => r.sku === sku) ?? nextRoot.find((r) => r.sku === sku);
|
||||
|
||||
if (rootCategoryId != null) {
|
||||
const inRoot = newIds.some((id) => String(id) === String(rootCategoryId));
|
||||
const wasInRoot = nextRoot.some((r) => r.sku === sku);
|
||||
if (!inRoot) nextRoot = nextRoot.filter((r) => r.sku !== sku);
|
||||
else if (!wasInRoot && articleObj) nextRoot = [...nextRoot, articleObj];
|
||||
}
|
||||
|
||||
if (currentCategoryId != null) {
|
||||
const inCurrent = newIds.some((id) => String(id) === String(currentCategoryId));
|
||||
const wasInCurrent = nextArticles.some((r) => r.sku === sku);
|
||||
if (!inCurrent) { nextArticles = nextArticles.filter((r) => r.sku !== sku); }
|
||||
else if (!wasInCurrent && articleObj) { nextArticles = [...nextArticles, articleObj]; }
|
||||
nextArticlesTotal = nextArticles.length;
|
||||
}
|
||||
}
|
||||
|
||||
categoryAutomat.setState({
|
||||
articles: nextArticles,
|
||||
articlesTotal: nextArticlesTotal,
|
||||
rootArticles: nextRoot,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Patch posterminalIds on a category node.
|
||||
* @param {{ categoryId: number|string, terminalId: number, enabled: boolean }} param0
|
||||
*/
|
||||
patchCategoryPosterminalIds({ categoryId, terminalId, enabled }) {
|
||||
const { categories } = categoryAutomat.state;
|
||||
const cat = categories?.[String(categoryId)];
|
||||
if (!cat) return;
|
||||
const current = Array.isArray(cat.posterminalIds) ? cat.posterminalIds : [];
|
||||
const next = enabled
|
||||
? current.includes(terminalId) ? current : [...current, terminalId]
|
||||
: current.filter((id) => id !== terminalId);
|
||||
categoryAutomat.setState({
|
||||
categories: {
|
||||
...categories,
|
||||
[String(categoryId)]: { ...cat, posterminalIds: next },
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/** Reset state to idle (logout / company switch). */
|
||||
reset() {
|
||||
categoryAutomat.setState(initialState);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Global category tree state container.
|
||||
* Loads automatically when companyAutomat has a company with a rootCategoryId.
|
||||
*
|
||||
* @type {Automat<CategoryState>}
|
||||
*/
|
||||
categoryAutomat = new Automat(initialState, actions, { name: 'category' });
|
||||
|
||||
// Load tree whenever the company data changes (or first becomes available)
|
||||
let _lastCompanyId = null;
|
||||
companyAutomat.subscribe((company) => {
|
||||
const id = company.current?.id ?? null;
|
||||
const rootCategoryId = company.current?.rootCategoryId ?? null;
|
||||
if (id && rootCategoryId && id !== _lastCompanyId) {
|
||||
_lastCompanyId = id;
|
||||
void categoryAutomat.actions.loadTree();
|
||||
}
|
||||
if (!id && _lastCompanyId) {
|
||||
_lastCompanyId = null;
|
||||
categoryAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
// Reset tree on logout
|
||||
authAutomat.subscribe((auth) => {
|
||||
if (auth.status === 'anon') {
|
||||
_lastCompanyId = null;
|
||||
categoryAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
// Re-export pure helpers for consumers that previously imported from categorySlice
|
||||
export {
|
||||
ROOT_CATEGORY_NAME,
|
||||
parseCategoryTreeResponse,
|
||||
normalizeCategoryNode,
|
||||
getCategoryBreadcrumbs,
|
||||
getCategoryChildren,
|
||||
} from '../utils/categoryUtils';
|
||||
export { categoryDisplayName, categorySlug, normalizeCategoryMap } from '../utils/categoryUtils';
|
||||
|
||||
export default categoryAutomat;
|
||||
96
src/automats/companyAutomat.js
Normal file
96
src/automats/companyAutomat.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { company as companyApi } from '../api';
|
||||
import authAutomat from './authAutomat';
|
||||
import { normalizeCompany } from '../utils/companyForm';
|
||||
|
||||
/**
|
||||
* @typedef {Object} CompanyState
|
||||
* @property {object|null} current Normalized company object for the selected company.
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} status
|
||||
* @property {string|null} error
|
||||
*/
|
||||
|
||||
/** @type {CompanyState} */
|
||||
const initialState = {
|
||||
current: null,
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
let companyAutomat;
|
||||
|
||||
const actions = {
|
||||
/**
|
||||
* Load the company data for the currently selected company.
|
||||
* @returns {Promise<object|null>}
|
||||
*/
|
||||
async load() {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (!companyId) return null;
|
||||
companyAutomat.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const data = await companyApi.getById(companyId);
|
||||
const normalized = normalizeCompany(data.company);
|
||||
companyAutomat.setState({ current: normalized, status: 'succeeded' });
|
||||
return normalized;
|
||||
} catch (err) {
|
||||
companyAutomat.setState({ status: 'failed', error: err?.message ?? String(err) });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update company details and refresh cached data.
|
||||
* @param {object} payload
|
||||
*/
|
||||
async update(payload) {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (!companyId) throw new Error('Kein Unternehmen ausgewählt.');
|
||||
companyAutomat.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
await companyApi.update(companyId, payload);
|
||||
const data = await companyApi.getById(companyId);
|
||||
const normalized = normalizeCompany(data.company, payload);
|
||||
companyAutomat.setState({ current: normalized, status: 'succeeded' });
|
||||
return normalized;
|
||||
} catch (err) {
|
||||
companyAutomat.setState({ status: 'failed', error: err?.message ?? String(err) });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/** Reset to idle (called on logout / company switch). */
|
||||
reset() {
|
||||
companyAutomat.setState(initialState);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Global company state container.
|
||||
* Loads automatically when authAutomat reaches 'authed' with a selectedCompanyId.
|
||||
*
|
||||
* @type {Automat<CompanyState>}
|
||||
*/
|
||||
companyAutomat = new Automat(initialState, actions, { name: 'company' });
|
||||
|
||||
// Subscribe to auth changes — load when authed, reset when logged out / anon
|
||||
authAutomat.subscribe((auth) => {
|
||||
const companyId = auth.user?.selectedCompanyId;
|
||||
if (auth.status === 'authed' && companyId) {
|
||||
void companyAutomat.actions.load();
|
||||
} else if (auth.status === 'anon') {
|
||||
companyAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
// Selectors (plain functions for use outside React)
|
||||
export const selectCurrentCompany = () => companyAutomat.state.current;
|
||||
export const selectCompanyId = () => companyAutomat.state.current?.id ?? null;
|
||||
export const selectCompanyStatus = () => companyAutomat.state.status;
|
||||
export const selectCompanyName = () => companyAutomat.state.current?.name;
|
||||
export const selectCompanyIso639 = () => companyAutomat.state.current?.iso639;
|
||||
export const selectCompanyTaxrate = () => companyAutomat.state.current?.taxrate ?? null;
|
||||
export const selectCompanyReducedTaxrate = () => companyAutomat.state.current?.reducedtaxrate ?? null;
|
||||
export const selectCompanyRootCategoryId = () => companyAutomat.state.current?.rootCategoryId ?? null;
|
||||
|
||||
export default companyAutomat;
|
||||
@@ -1,6 +1,54 @@
|
||||
export * from './deliveryEditorAutomat';
|
||||
|
||||
export { default as authAutomat } from './authAutomat';
|
||||
export * from './authAutomat';
|
||||
|
||||
export { default as navigationAutomat } from './navigationAutomat';
|
||||
export { setLastDeliveryPath, setLastArticleSku, clearNavigation } from './navigationAutomat';
|
||||
|
||||
export { default as userSettingsAutomat } from './userSettingsAutomat';
|
||||
export { setViewerPosition } from './userSettingsAutomat';
|
||||
|
||||
export { default as supplierAutomat } from './supplierAutomat';
|
||||
|
||||
export { default as artikelAutomat } from './artikelAutomat';
|
||||
export {
|
||||
getArticle,
|
||||
hasArticle,
|
||||
selectArticle,
|
||||
createArticleSelector,
|
||||
} from './artikelAutomat';
|
||||
|
||||
export { default as companyAutomat } from './companyAutomat';
|
||||
export {
|
||||
selectCurrentCompany,
|
||||
selectCompanyId,
|
||||
selectCompanyStatus,
|
||||
selectCompanyName,
|
||||
selectCompanyIso639,
|
||||
selectCompanyTaxrate,
|
||||
selectCompanyReducedTaxrate,
|
||||
selectCompanyRootCategoryId,
|
||||
} from './companyAutomat';
|
||||
|
||||
export { default as brandAutomat } from './brandAutomat';
|
||||
export { default as unitAutomat } from './unitAutomat';
|
||||
|
||||
export { default as posterminalAutomat } from './posterminalAutomat';
|
||||
export {
|
||||
selectPosterminals,
|
||||
selectPosterminalStatus,
|
||||
selectHasPosterminals,
|
||||
} from './posterminalAutomat';
|
||||
|
||||
export { default as categoryAutomat } from './categoryAutomat';
|
||||
export {
|
||||
ROOT_CATEGORY_NAME,
|
||||
parseCategoryTreeResponse,
|
||||
normalizeCategoryNode,
|
||||
getCategoryBreadcrumbs,
|
||||
getCategoryChildren,
|
||||
categoryDisplayName,
|
||||
categorySlug,
|
||||
normalizeCategoryMap,
|
||||
} from './categoryAutomat';
|
||||
|
||||
142
src/automats/posterminalAutomat.js
Normal file
142
src/automats/posterminalAutomat.js
Normal file
@@ -0,0 +1,142 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { posterminal as posterminalApi } from '../api';
|
||||
import authAutomat from './authAutomat';
|
||||
import companyAutomat from './companyAutomat';
|
||||
|
||||
/**
|
||||
* @typedef {Object} PosterminalState
|
||||
* @property {Array<object>} terminals
|
||||
* @property {number|string|null} companyId
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} status
|
||||
* @property {string|null} error
|
||||
*/
|
||||
|
||||
/** @type {PosterminalState} */
|
||||
const initialState = {
|
||||
terminals: [],
|
||||
companyId: null,
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
let posterminalAutomat;
|
||||
|
||||
const actions = {
|
||||
/** Load all posterminals for the selected company. */
|
||||
async load() {
|
||||
const companyId = companyAutomat.state.current?.id;
|
||||
if (!companyId) return [];
|
||||
posterminalAutomat.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const res = await posterminalApi.list();
|
||||
const terminals = Array.isArray(res.posterminals) ? res.posterminals : [];
|
||||
posterminalAutomat.setState({ terminals, companyId, status: 'succeeded' });
|
||||
return terminals;
|
||||
} catch (err) {
|
||||
posterminalAutomat.setState({ status: 'failed', error: err?.message ?? String(err) });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a new posterminal.
|
||||
* @param {{ name: string }} param0
|
||||
*/
|
||||
async create({ name }) {
|
||||
const res = await posterminalApi.create({ name });
|
||||
const terminal = res.posterminal;
|
||||
posterminalAutomat.setState({
|
||||
terminals: [...posterminalAutomat.state.terminals, terminal],
|
||||
});
|
||||
return terminal;
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a posterminal.
|
||||
* @param {number} terminalId
|
||||
*/
|
||||
async delete(terminalId) {
|
||||
await posterminalApi.delete(terminalId);
|
||||
posterminalAutomat.setState({
|
||||
terminals: posterminalAutomat.state.terminals.filter((t) => t.id !== terminalId),
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable all categories on a terminal.
|
||||
* @param {{ terminalId: number }} param0
|
||||
*/
|
||||
async enableAll({ terminalId }) {
|
||||
const res = await posterminalApi.enableAllCategories(terminalId);
|
||||
patchTerminalCategories(terminalId, res.categoryIds);
|
||||
return res;
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable all categories on a terminal.
|
||||
* @param {{ terminalId: number }} param0
|
||||
*/
|
||||
async disableAll({ terminalId }) {
|
||||
const res = await posterminalApi.disableAllCategories(terminalId);
|
||||
patchTerminalCategories(terminalId, res.categoryIds);
|
||||
return res;
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable a specific category on a terminal.
|
||||
* @param {{ terminalId: number, categoryId: number }} param0
|
||||
*/
|
||||
async enableCategory({ terminalId, categoryId }) {
|
||||
const res = await posterminalApi.enableCategory(terminalId, categoryId);
|
||||
patchTerminalCategories(terminalId, res.categoryIds);
|
||||
return res;
|
||||
},
|
||||
|
||||
/**
|
||||
* Disable a specific category on a terminal.
|
||||
* @param {{ terminalId: number, categoryId: number }} param0
|
||||
*/
|
||||
async disableCategory({ terminalId, categoryId }) {
|
||||
const res = await posterminalApi.disableCategory(terminalId, categoryId);
|
||||
patchTerminalCategories(terminalId, res.categoryIds);
|
||||
return res;
|
||||
},
|
||||
|
||||
/** Reset to idle state (called on logout / company switch). */
|
||||
reset() {
|
||||
posterminalAutomat.setState(initialState);
|
||||
},
|
||||
};
|
||||
|
||||
function patchTerminalCategories(terminalId, categoryIds) {
|
||||
posterminalAutomat.setState({
|
||||
terminals: posterminalAutomat.state.terminals.map((t) =>
|
||||
t.id === terminalId ? { ...t, categoryIds } : t,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Global posterminal state container.
|
||||
* Loads automatically when authAutomat reaches 'authed' with a selectedCompanyId.
|
||||
*
|
||||
* @type {Automat<PosterminalState>}
|
||||
*/
|
||||
posterminalAutomat = new Automat(initialState, actions, { name: 'posterminal' });
|
||||
|
||||
// Subscribe to auth changes
|
||||
authAutomat.subscribe((auth) => {
|
||||
const companyId = auth.user?.selectedCompanyId;
|
||||
if (auth.status === 'authed' && companyId) {
|
||||
void posterminalAutomat.actions.load();
|
||||
} else if (auth.status === 'anon') {
|
||||
posterminalAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
// Selectors
|
||||
export const selectPosterminals = () => posterminalAutomat.state.terminals;
|
||||
export const selectPosterminalStatus = () => posterminalAutomat.state.status;
|
||||
export const selectHasPosterminals = () => posterminalAutomat.state.terminals.length > 0;
|
||||
|
||||
export default posterminalAutomat;
|
||||
94
src/automats/unitAutomat.js
Normal file
94
src/automats/unitAutomat.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import { Automat } from 'react-automat';
|
||||
import { unit as unitApi } from '../api';
|
||||
import authAutomat from './authAutomat';
|
||||
|
||||
/**
|
||||
* @typedef {Object} UnitState
|
||||
* @property {Array<object>} units
|
||||
* @property {'idle'|'loading'|'succeeded'|'failed'} status
|
||||
* @property {string|null} error
|
||||
*/
|
||||
|
||||
/** @type {UnitState} */
|
||||
const initialState = {
|
||||
units: [],
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
function sortUnits(units) {
|
||||
return [...units].sort((a, b) => {
|
||||
const left = a.symbol ?? a.si ?? '';
|
||||
const right = b.symbol ?? b.si ?? '';
|
||||
return String(left).localeCompare(String(right), 'de');
|
||||
});
|
||||
}
|
||||
|
||||
let unitAutomat;
|
||||
|
||||
const actions = {
|
||||
/** Load all units for the selected company. */
|
||||
async load() {
|
||||
unitAutomat.setState({ status: 'loading', error: null });
|
||||
try {
|
||||
const res = await unitApi.list();
|
||||
const units = sortUnits(Array.isArray(res.units) ? res.units : []);
|
||||
unitAutomat.setState({ units, status: 'succeeded' });
|
||||
return units;
|
||||
} catch (err) {
|
||||
unitAutomat.setState({ status: 'failed', error: err?.message ?? String(err) });
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Upsert (create or update) a unit.
|
||||
* @param {object} body
|
||||
*/
|
||||
async upsert(body) {
|
||||
const res = await unitApi.upsert(body);
|
||||
const row = res.unit;
|
||||
const units = sortUnits([
|
||||
...unitAutomat.state.units.filter((u) => u.si !== row.si),
|
||||
row,
|
||||
]);
|
||||
unitAutomat.setState({ units });
|
||||
return units;
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a unit by SI symbol.
|
||||
* @param {string} si
|
||||
*/
|
||||
async delete(si) {
|
||||
await unitApi.delete(si);
|
||||
unitAutomat.setState({
|
||||
units: unitAutomat.state.units.filter((u) => u.si !== si),
|
||||
});
|
||||
},
|
||||
|
||||
/** Reset to idle state (called on logout / company switch). */
|
||||
reset() {
|
||||
unitAutomat.setState(initialState);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Global unit state container.
|
||||
* Loads automatically when authAutomat reaches 'authed' with a selectedCompanyId.
|
||||
*
|
||||
* @type {Automat<UnitState>}
|
||||
*/
|
||||
unitAutomat = new Automat(initialState, actions, { name: 'unit' });
|
||||
|
||||
// Subscribe to auth changes
|
||||
authAutomat.subscribe((auth) => {
|
||||
const companyId = auth.user?.selectedCompanyId;
|
||||
if (auth.status === 'authed' && companyId) {
|
||||
void unitAutomat.actions.load();
|
||||
} else if (auth.status === 'anon') {
|
||||
unitAutomat.actions.reset();
|
||||
}
|
||||
});
|
||||
|
||||
export default unitAutomat;
|
||||
48
src/automats/userSettingsAutomat.js
Normal file
48
src/automats/userSettingsAutomat.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Automat } from 'react-automat';
|
||||
|
||||
/**
|
||||
* @typedef {'top'|'right'|'below'} ViewerPosition
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} UserSettingsState
|
||||
* @property {ViewerPosition} viewerPosition Preferred docking position of the
|
||||
* attachment viewer (text editor / PDF preview) relative to the article list.
|
||||
*/
|
||||
|
||||
/** @type {UserSettingsState} */
|
||||
const initialState = {
|
||||
viewerPosition: 'top',
|
||||
};
|
||||
|
||||
/**
|
||||
* Persisted per-user UI preferences. Unlike the other automats this one is
|
||||
* backed by IndexedDB (`persist: true`) so settings survive reloads and
|
||||
* sessions.
|
||||
*
|
||||
* @type {Automat<UserSettingsState>}
|
||||
*/
|
||||
const userSettingsAutomat = new Automat(
|
||||
initialState,
|
||||
{
|
||||
/**
|
||||
* Set the docking position of the attachment viewer.
|
||||
*
|
||||
* @param {ViewerPosition} position One of `'top'`, `'right'` or `'below'`.
|
||||
* @returns {void}
|
||||
*/
|
||||
setViewerPosition(position) {
|
||||
if (position !== 'top' && position !== 'right' && position !== 'below') {
|
||||
return;
|
||||
}
|
||||
userSettingsAutomat.setState({ viewerPosition: position });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'userSettings',
|
||||
persist: true,
|
||||
}
|
||||
);
|
||||
|
||||
export default userSettingsAutomat;
|
||||
export const { setViewerPosition } = userSettingsAutomat.actions;
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Outlet, useLocation } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Box from '@mui/material/Box';
|
||||
import Popover from '@mui/material/Popover';
|
||||
import MenuList from '@mui/material/MenuList';
|
||||
@@ -14,13 +13,7 @@ import { enqueueSnackbar } from 'notistack';
|
||||
import PageLayout from './PageLayout';
|
||||
import { NAV_ITEMS, SUB_NAV, resolveActiveSub } from '../nav';
|
||||
import { isKategorienPath } from '../pages/artikel/categoryRoute';
|
||||
import {
|
||||
selectRenameMode,
|
||||
setRenameMode,
|
||||
selectCategoryMap,
|
||||
selectCategoryRootId,
|
||||
loadCategoryTree,
|
||||
} from '../store/categorySlice';
|
||||
import categoryAutomat from '../automats/categoryAutomat';
|
||||
import { ActionElevatedPill, ToggleElevatedPill } from 'dashgui/ElevatedPill';
|
||||
import { article, category } from '../api';
|
||||
import { importArtikelCsv } from '../utils/importArtikel';
|
||||
@@ -37,15 +30,31 @@ function triggerDownload(blob, filename) {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function selectCatSlice(s) {
|
||||
return {
|
||||
renameMode: s.renameMode,
|
||||
categories: s.categories,
|
||||
rootCategoryId: s.rootCategoryId,
|
||||
};
|
||||
}
|
||||
|
||||
export default function SectionLayout({ sectionPath }) {
|
||||
const { pathname } = useLocation();
|
||||
const dispatch = useDispatch();
|
||||
const renameMode = useSelector(selectRenameMode);
|
||||
const categories = useSelector(selectCategoryMap);
|
||||
const rootCategoryId = useSelector(selectCategoryRootId);
|
||||
const importInputRef = useRef(null);
|
||||
const [extrasAnchor, setExtrasAnchor] = useState(null);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [catState, setCatState] = useState(() => selectCatSlice(categoryAutomat.state));
|
||||
|
||||
useEffect(() => {
|
||||
// Automat supports callback subscriptions: (state, partial) => void
|
||||
const unsub = categoryAutomat.subscribe((state) => {
|
||||
setCatState(selectCatSlice(state));
|
||||
}, selectCatSlice);
|
||||
return unsub;
|
||||
}, []);
|
||||
|
||||
const { renameMode, categories, rootCategoryId } = catState;
|
||||
|
||||
const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
|
||||
const subNav = SUB_NAV[sectionPath];
|
||||
const subSegment = resolveActiveSub(pathname, sectionPath);
|
||||
@@ -109,7 +118,7 @@ export default function SectionLayout({ sectionPath }) {
|
||||
},
|
||||
});
|
||||
if (result.ok > 0 && rootCategoryId != null) {
|
||||
await dispatch(loadCategoryTree()).unwrap();
|
||||
await categoryAutomat.actions.loadTree();
|
||||
}
|
||||
if (result.ok > 0) {
|
||||
enqueueSnackbar(
|
||||
@@ -136,7 +145,7 @@ export default function SectionLayout({ sectionPath }) {
|
||||
<ToggleElevatedPill
|
||||
label="Edit"
|
||||
checked={renameMode}
|
||||
onToggle={(checked) => dispatch(setRenameMode(checked))}
|
||||
onToggle={(checked) => categoryAutomat.actions.setRenameMode(checked)}
|
||||
/>
|
||||
<ActionElevatedPill
|
||||
label="Extras"
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
buildCategoryPath,
|
||||
defaultCategoryPath,
|
||||
} from '../../pages/artikel/categoryRoute';
|
||||
import articleAutomat, { createArticleSelector } from '../../store/articleAutomat';
|
||||
import artikelAutomat, { createArticleSelector, getArticle } from '../../automats/artikelAutomat';
|
||||
|
||||
import ArticleTileTab from './ArticleTileTab';
|
||||
import ArticlePhotoTile from './ArticlePhotoTile';
|
||||
@@ -26,17 +26,10 @@ class ArticleView extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const sku = props.sku;
|
||||
const currentArticle = articleAutomat.state[sku] ?? null;
|
||||
|
||||
this.state = { article: currentArticle };
|
||||
this.state = { article: getArticle(props.sku) };
|
||||
this.handleArticleDeleted = this.handleArticleDeleted.bind(this);
|
||||
|
||||
if (!currentArticle) {
|
||||
articleAutomat.actions.loadArticle(sku).catch((err) => {
|
||||
console.error('Failed to load article:', err);
|
||||
});
|
||||
}
|
||||
this.ensureArticle(props.sku);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@@ -45,23 +38,24 @@ class ArticleView extends PureComponent {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.sku !== this.props.sku) {
|
||||
const currentArticle = articleAutomat.state[this.props.sku] ?? null;
|
||||
this.setState({ article: currentArticle });
|
||||
|
||||
if (!currentArticle) {
|
||||
articleAutomat.actions.loadArticle(this.props.sku).catch((err) => {
|
||||
console.error('Failed to load article:', err);
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({ article: getArticle(this.props.sku) });
|
||||
this.ensureArticle(this.props.sku);
|
||||
this.subscribeToArticle();
|
||||
}
|
||||
}
|
||||
|
||||
/** Loads through the shared cache; resolves instantly when already cached. */
|
||||
ensureArticle(sku) {
|
||||
if (!sku) return;
|
||||
artikelAutomat.actions.loadArticle(sku).catch((err) => {
|
||||
console.error('Failed to load article:', err);
|
||||
});
|
||||
}
|
||||
|
||||
subscribeToArticle() {
|
||||
if (this.unsub) this.unsub();
|
||||
const selector = createArticleSelector(this.props.sku);
|
||||
this.unsub = articleAutomat.subscribe(this, (state) => ({
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: selector(state),
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import CheckIcon from '@mui/icons-material/Check';
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
|
||||
import Box from '@mui/material/Box';
|
||||
import { getCategoryChildren, categoryDisplayName } from '../../store/categorySlice';
|
||||
import { getCategoryChildren, categoryDisplayName } from '../../utils/categoryUtils';
|
||||
function CategoryNode({
|
||||
categories,
|
||||
categoryId,
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { ActionTile } from '../tiles';
|
||||
import {
|
||||
createArticles as createArticlesThunk,
|
||||
createArticle as createArticleThunk,
|
||||
} from '../../store/categorySlice';
|
||||
import categoryAutomat from '../../automats/categoryAutomat';
|
||||
import ArticleNameDialog from './ArticleNameDialog';
|
||||
|
||||
class NewArticleTile extends Component {
|
||||
@@ -28,15 +24,16 @@ class NewArticleTile extends Component {
|
||||
const { parentId } = this.props;
|
||||
const list = (names ?? []).filter(Boolean);
|
||||
if (list.length <= 1) {
|
||||
const article = await this.props
|
||||
.createArticle({ parentId, name: list[0] ?? '' })
|
||||
.unwrap();
|
||||
const article = await categoryAutomat.actions.createArticle({
|
||||
parentId,
|
||||
name: list[0] ?? '',
|
||||
});
|
||||
if (article) {
|
||||
this.props.onOpenArticle?.(article);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const created = await this.props.createArticles({ parentId, names: list }).unwrap();
|
||||
const created = await categoryAutomat.actions.createArticles({ parentId, names: list });
|
||||
if (created?.[0]) {
|
||||
this.props.onOpenArticle?.(created[0]);
|
||||
}
|
||||
@@ -62,9 +59,4 @@ class NewArticleTile extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
createArticle: createArticleThunk,
|
||||
createArticles: createArticlesThunk,
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(NewArticleTile);
|
||||
export default NewArticleTile;
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Component, PureComponent } from 'react';
|
||||
import { EditablePanelTile } from 'dashgui/panels';
|
||||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||
import { StorageManagerContext } from '../../../api/storageManagerContext';
|
||||
import { getCategoryBreadcrumbs } from '../../../store/categorySlice';
|
||||
import { getCategoryBreadcrumbs } from '../../../utils/categoryUtils';
|
||||
import { Box, Chip, IconButton } from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import CategoryPickerDialog from '../CategoryPickerDialog';
|
||||
|
||||
@@ -169,12 +169,7 @@ function priceDraftValid(draft) {
|
||||
|
||||
function companyFromStore(store) {
|
||||
if (!store) return null;
|
||||
const companies = store.companies;
|
||||
const session = store.authMe;
|
||||
if (companies == null || session == null) return null;
|
||||
const companyId = session.user?.selectedCompanyId;
|
||||
if (companyId == null) return null;
|
||||
return companies.find((c) => c.id === companyId) ?? null;
|
||||
return store.company ?? null;
|
||||
}
|
||||
|
||||
class PriceAmountField extends Component {
|
||||
@@ -395,18 +390,12 @@ export default class ArticleViewPrice extends PureComponent {
|
||||
async load() {
|
||||
const store = this.context;
|
||||
try {
|
||||
const [unitList, companies, session] = await Promise.all([
|
||||
const [unitList, company] = await Promise.all([
|
||||
store.unitPromise,
|
||||
store.companyPromise,
|
||||
store.authMePromise,
|
||||
]);
|
||||
const companyId = requireDefined(session.user?.selectedCompanyId, 'selectedCompanyId');
|
||||
const current = requireDefined(
|
||||
companies.find((c) => c.id === companyId),
|
||||
'company',
|
||||
);
|
||||
if (!this._cancelled) {
|
||||
this.setState({ units: unitList, company: current });
|
||||
this.setState({ units: unitList, company: company ?? null });
|
||||
}
|
||||
} catch (err) {
|
||||
if (!this._cancelled) notifyError(err);
|
||||
|
||||
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import { StorageManagerContext } from '../../../api/storageManagerContext';
|
||||
import { artikelAutomat } from '../../../automats';
|
||||
import { notifyError } from '../../../utils/notify';
|
||||
|
||||
export default class ArticleSettingsTab extends Component {
|
||||
@@ -24,6 +25,7 @@ export default class ArticleSettingsTab extends Component {
|
||||
this.setState({ busy: true });
|
||||
try {
|
||||
await this.context.article.delete(articleData.sku);
|
||||
artikelAutomat.actions.clearArticle(articleData.sku);
|
||||
onArticleDeleted?.(articleData);
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { ActionTile } from '../tiles';
|
||||
import {
|
||||
createCategories as createCategoriesThunk,
|
||||
createCategory as createCategoryThunk,
|
||||
} from '../../store/categorySlice';
|
||||
import categoryAutomat from '../../automats/categoryAutomat';
|
||||
import CategoryNameDialog from './CategoryNameDialog';
|
||||
|
||||
class NewCategoryTile extends Component {
|
||||
@@ -28,10 +24,10 @@ class NewCategoryTile extends Component {
|
||||
const { parentId } = this.props;
|
||||
const list = (names ?? []).filter(Boolean);
|
||||
if (list.length <= 1) {
|
||||
await this.props.createCategory({ parentId, name: list[0] ?? '' }).unwrap();
|
||||
await categoryAutomat.actions.createCategory({ parentId, name: list[0] ?? '' });
|
||||
return;
|
||||
}
|
||||
await this.props.createCategories({ parentId, names: list }).unwrap();
|
||||
await categoryAutomat.actions.createCategories({ parentId, names: list });
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -55,9 +51,4 @@ class NewCategoryTile extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
createCategory: createCategoryThunk,
|
||||
createCategories: createCategoriesThunk,
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(NewCategoryTile);
|
||||
export default NewCategoryTile;
|
||||
|
||||
@@ -8,8 +8,43 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import SyncIcon from '@mui/icons-material/Sync';
|
||||
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
|
||||
import { tileBaseSx, TILE_SIZE } from 'dashgui/tiles';
|
||||
import { generateTextThumbnail } from '../../utils/textThumbnail';
|
||||
|
||||
export class Attachment extends PureComponent {
|
||||
state = {
|
||||
generatedThumbnail: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.ensureThumbnail();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.attachment !== prevProps.attachment) {
|
||||
this.ensureThumbnail();
|
||||
}
|
||||
}
|
||||
|
||||
async ensureThumbnail() {
|
||||
const { attachment } = this.props;
|
||||
if (!attachment || attachment.thumbnail) return;
|
||||
const isCsv = attachment.type === 'text/csv' || attachment.name?.toLowerCase().endsWith('.csv');
|
||||
const isText = attachment.type?.startsWith('text/') || attachment.name?.toLowerCase().endsWith('.txt') || isCsv;
|
||||
if (!isText) return;
|
||||
|
||||
const source = attachment.text || attachment.file;
|
||||
if (!source) return;
|
||||
|
||||
try {
|
||||
const thumb = await generateTextThumbnail(source);
|
||||
if (thumb && this.props.attachment === attachment) {
|
||||
this.setState({ generatedThumbnail: thumb });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Generieren des Text-Thumbnails:', err);
|
||||
}
|
||||
}
|
||||
|
||||
handleRescan = (e) => {
|
||||
e?.stopPropagation?.();
|
||||
const { attachment, onRescan } = this.props;
|
||||
@@ -56,7 +91,7 @@ export class Attachment extends PureComponent {
|
||||
|
||||
render() {
|
||||
const { attachment, disabled, sx } = this.props;
|
||||
const thumbnail = attachment?.thumbnail;
|
||||
const thumbnail = attachment?.thumbnail || this.state.generatedThumbnail;
|
||||
const name = attachment?.name || 'Dokument';
|
||||
const size = attachment?.size;
|
||||
const isPdf = attachment?.type === 'application/pdf' || name.toLowerCase().endsWith('.pdf');
|
||||
|
||||
@@ -33,10 +33,11 @@ class ManifestLines extends PureComponent {
|
||||
onSearchArticle,
|
||||
onRemoveSupplierArticle,
|
||||
busySupplierArticleLineKeys = {},
|
||||
wide = 3,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<PanelTile wide={3} minHeight={280} color={linesColor} title="Artikel">
|
||||
<PanelTile wide={wide} minHeight={280} color={linesColor} title="Artikel">
|
||||
<Stack spacing={1.5}>
|
||||
<TableContainer>
|
||||
<Table size="small" stickyHeader>
|
||||
|
||||
296
src/components/manifest/PdfViewerPanel.jsx
Normal file
296
src/components/manifest/PdfViewerPanel.jsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
||||
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
|
||||
import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
|
||||
import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { PanelTile } from 'dashgui/panels';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { delivery as deliveryApi } from '../../api';
|
||||
|
||||
/**
|
||||
* Inline PDF viewer rendered as a panel tile, mirroring TextEditorPanel's
|
||||
* "window" behaviour: it can sit above, right of, or below the article list,
|
||||
* and stays sticky when docked to the right. Mount it only while a PDF
|
||||
* attachment is selected; unmounting closes it.
|
||||
*/
|
||||
export class PdfViewerPanel extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
url: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
this.handleOpenExternal = this.handleOpenExternal.bind(this);
|
||||
this.handleDownload = this.handleDownload.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadUrl();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.attachment !== prevProps.attachment) {
|
||||
this.revokeUrl();
|
||||
this.loadUrl();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.revokeUrl();
|
||||
}
|
||||
|
||||
revokeUrl() {
|
||||
if (this._objectUrl) {
|
||||
URL.revokeObjectURL(this._objectUrl);
|
||||
this._objectUrl = null;
|
||||
}
|
||||
}
|
||||
|
||||
async loadUrl() {
|
||||
const { attachment, docId } = this.props;
|
||||
if (!attachment) return;
|
||||
|
||||
if (
|
||||
(attachment.file instanceof Blob || attachment.file instanceof File) &&
|
||||
attachment.file.size > 0
|
||||
) {
|
||||
this._objectUrl = URL.createObjectURL(attachment.file);
|
||||
this.setState({ url: this._objectUrl, loading: false, error: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const effectiveDocId = docId ?? attachment.manifestId;
|
||||
const fileId = attachment.fileId ?? attachment.id;
|
||||
if (effectiveDocId != null && fileId != null) {
|
||||
this.setState({ loading: true, error: null });
|
||||
try {
|
||||
const getFile =
|
||||
this.context?.delivery?.getFile?.bind(this.context.delivery) ||
|
||||
deliveryApi.getFile;
|
||||
const blob = await getFile(effectiveDocId, fileId);
|
||||
this._objectUrl = URL.createObjectURL(blob);
|
||||
this.setState({ url: this._objectUrl, loading: false, error: null });
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden der PDF-Datei:', err);
|
||||
enqueueSnackbar('Fehler beim Laden der Datei', { variant: 'error' });
|
||||
this.setState({ loading: false, error: 'Fehler beim Laden der Datei' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ url: null, loading: false, error: null });
|
||||
}
|
||||
|
||||
handleOpenExternal() {
|
||||
const { url } = this.state;
|
||||
if (!url) return;
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
handleDownload() {
|
||||
const { attachment } = this.props;
|
||||
const { url } = this.state;
|
||||
if (!url) return;
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = attachment?.name || 'Dokument.pdf';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
onClose,
|
||||
attachment,
|
||||
wide = 3,
|
||||
position = 'top',
|
||||
onPositionChange,
|
||||
height = '60vh',
|
||||
} = this.props;
|
||||
if (!attachment) return null;
|
||||
|
||||
const { url, loading, error } = this.state;
|
||||
const filename = attachment?.name || 'Dokument.pdf';
|
||||
|
||||
return (
|
||||
<PanelTile
|
||||
wide={wide}
|
||||
minHeight={320}
|
||||
color="#f8fafc"
|
||||
sx={{ height, minHeight: 320 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 1.5,
|
||||
mb: 1.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, minWidth: 0 }}>
|
||||
<PictureAsPdfIcon color="error" />
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} noWrap>
|
||||
{filename}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
PDF-Vorschau
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
|
||||
<Tooltip title="Über der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'top' ? 'primary' : 'default'}
|
||||
aria-label="Über der Artikelliste"
|
||||
onClick={() => onPositionChange?.('top')}
|
||||
>
|
||||
<VerticalAlignTopIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Rechts neben der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'right' ? 'primary' : 'default'}
|
||||
aria-label="Rechts neben der Artikelliste"
|
||||
onClick={() => onPositionChange?.('right')}
|
||||
>
|
||||
<ViewSidebarIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Unter der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'below' ? 'primary' : 'default'}
|
||||
aria-label="Unter der Artikelliste"
|
||||
onClick={() => onPositionChange?.('below')}
|
||||
>
|
||||
<VerticalAlignBottomIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<IconButton size="small" onClick={onClose} sx={{ color: 'text.secondary' }}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: 0,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
borderRadius: 1,
|
||||
bgcolor: '#ffffff',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{loading && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'rgba(248, 250, 252, 0.7)',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={36} />
|
||||
</Box>
|
||||
)}
|
||||
{error ? (
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary">{error}</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
url && (
|
||||
<Box
|
||||
component="iframe"
|
||||
title={filename}
|
||||
src={url}
|
||||
sx={{ flex: 1, width: '100%', border: 'none' }}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: 1,
|
||||
mt: 1.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<OpenInNewIcon />}
|
||||
onClick={this.handleOpenExternal}
|
||||
disabled={loading || !url}
|
||||
>
|
||||
In neuem Tab
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<DownloadOutlinedIcon />}
|
||||
onClick={this.handleDownload}
|
||||
disabled={loading || !url}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
<Button size="small" onClick={onClose}>
|
||||
Schließen
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</PanelTile>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfViewerPanel;
|
||||
@@ -1,340 +0,0 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
||||
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { delivery as deliveryApi } from '../../api';
|
||||
|
||||
export class TextEditorDialog extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
content: '',
|
||||
initialContent: '',
|
||||
loading: false,
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleCopy = this.handleCopy.bind(this);
|
||||
this.handleDownload = this.handleDownload.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadContent();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.attachment !== prevProps.attachment || (this.props.open && !prevProps.open)) {
|
||||
if (this.props.open) {
|
||||
this.loadContent();
|
||||
} else {
|
||||
this.setState({ content: '', initialContent: '', loading: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async loadContent() {
|
||||
const { attachment, open, docId, onContentLoad } = this.props;
|
||||
if (!open || !attachment) return;
|
||||
|
||||
if (typeof attachment.text === 'string') {
|
||||
this.setState({
|
||||
content: attachment.text,
|
||||
initialContent: attachment.text,
|
||||
loading: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
(attachment.file instanceof Blob || attachment.file instanceof File) &&
|
||||
attachment.file.size > 0
|
||||
) {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const text = await attachment.file.text();
|
||||
this.setState({
|
||||
content: text,
|
||||
initialContent: text,
|
||||
loading: false,
|
||||
});
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Lesen der Textdatei:', err);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
// Attachment has no text and empty file — load from API (GET /delivery/{id}/file/{fileId})
|
||||
const effectiveDocId = docId ?? attachment.manifestId;
|
||||
const fileId = attachment.fileId ?? attachment.id;
|
||||
if (effectiveDocId != null && fileId != null) {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const getFile =
|
||||
this.context?.delivery?.getFile?.bind(this.context.delivery) ||
|
||||
deliveryApi.getFile;
|
||||
const blob = await getFile(effectiveDocId, fileId);
|
||||
const text = await blob.text();
|
||||
this.setState({
|
||||
content: text,
|
||||
initialContent: text,
|
||||
loading: false,
|
||||
});
|
||||
onContentLoad?.(attachment, text, blob);
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden der Textdatei:', err);
|
||||
enqueueSnackbar('Fehler beim Laden der Datei', { variant: 'error' });
|
||||
this.setState({ loading: false });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
content: '',
|
||||
initialContent: '',
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ content: e.target.value });
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
const { onSave, onClose } = this.props;
|
||||
const { content } = this.state;
|
||||
onSave?.(content);
|
||||
enqueueSnackbar('Textdatei gespeichert', { variant: 'success' });
|
||||
onClose?.();
|
||||
}
|
||||
|
||||
async handleCopy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.state.content);
|
||||
enqueueSnackbar('In die Zwischenablage kopiert', { variant: 'info' });
|
||||
} catch {
|
||||
enqueueSnackbar('Kopieren fehlgeschlagen', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
|
||||
handleDownload() {
|
||||
const { attachment } = this.props;
|
||||
const { content } = this.state;
|
||||
if (!content) return;
|
||||
const filename = attachment?.name || 'Dokument.txt';
|
||||
const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open, onClose, attachment, readOnly = false } = this.props;
|
||||
if (!open) return null;
|
||||
|
||||
const { content, initialContent, loading } = this.state;
|
||||
const filename = attachment?.name || 'Dokument.txt';
|
||||
const isDirty = content !== initialContent;
|
||||
const linesCount = content ? content.split('\n').length : 0;
|
||||
const charCount = content ? content.length : 0;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="lg"
|
||||
fullWidth
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
height: '85vh',
|
||||
maxHeight: 850,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
py: 1.5,
|
||||
px: 2.5,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, minWidth: 0 }}>
|
||||
<TextSnippetOutlinedIcon color="primary" />
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} noWrap>
|
||||
{filename}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{linesCount} Zeilen · {charCount} Zeichen
|
||||
</Typography>
|
||||
</Box>
|
||||
{isDirty && (
|
||||
<Chip label="Ungespeichert" size="small" color="warning" sx={{ height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
<IconButton size="small" onClick={onClose} sx={{ color: 'text.secondary' }}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent
|
||||
sx={{
|
||||
p: 2,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: '#fafafa',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{loading && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'rgba(250, 250, 250, 0.7)',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={36} />
|
||||
</Box>
|
||||
)}
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
value={content}
|
||||
disabled={loading}
|
||||
onChange={this.handleChange}
|
||||
inputProps={{
|
||||
wrap: 'off',
|
||||
spellCheck: false,
|
||||
}}
|
||||
slotProps={{
|
||||
htmlInput: {
|
||||
wrap: 'off',
|
||||
spellCheck: false,
|
||||
},
|
||||
input: {
|
||||
readOnly,
|
||||
sx: {
|
||||
height: '100%',
|
||||
alignItems: 'flex-start',
|
||||
fontFamily: '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
fontSize: '0.72rem',
|
||||
lineHeight: 1.45,
|
||||
tabSize: 4,
|
||||
bgcolor: '#ffffff',
|
||||
p: 1.5,
|
||||
'& textarea': {
|
||||
height: '100% !important',
|
||||
whiteSpace: 'pre !important',
|
||||
overflowWrap: 'normal !important',
|
||||
wordWrap: 'normal !important',
|
||||
wordBreak: 'normal !important',
|
||||
overflowX: 'auto !important',
|
||||
overflowY: 'auto !important',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& .MuiInputBase-root': {
|
||||
flex: 1,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
px: 2.5,
|
||||
py: 1.5,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopyIcon />}
|
||||
onClick={this.handleCopy}
|
||||
disabled={loading || !content}
|
||||
>
|
||||
Kopieren
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<DownloadOutlinedIcon />}
|
||||
onClick={this.handleDownload}
|
||||
disabled={loading || !content}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button size="small" onClick={onClose}>
|
||||
{readOnly ? 'Schließen' : 'Abbrechen'}
|
||||
</Button>
|
||||
{!readOnly && (
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<SaveOutlinedIcon />}
|
||||
onClick={this.handleSave}
|
||||
disabled={loading || !isDirty}
|
||||
>
|
||||
Speichern
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TextEditorDialog;
|
||||
381
src/components/manifest/TextEditorPanel.jsx
Normal file
381
src/components/manifest/TextEditorPanel.jsx
Normal file
@@ -0,0 +1,381 @@
|
||||
import { PureComponent } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
|
||||
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
||||
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
|
||||
import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
|
||||
import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { PanelTile } from 'dashgui/panels';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import { delivery as deliveryApi } from '../../api';
|
||||
|
||||
/**
|
||||
* Inline text-file viewer/editor rendered as a full-width panel tile below the
|
||||
* manifest header ("Kopfdaten"). Mount it only while a text attachment is
|
||||
* selected; unmounting closes it.
|
||||
*/
|
||||
export class TextEditorPanel extends PureComponent {
|
||||
static contextType = StorageManagerContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
content: '',
|
||||
initialContent: '',
|
||||
loading: false,
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
this.handleCopy = this.handleCopy.bind(this);
|
||||
this.handleDownload = this.handleDownload.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadContent();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.attachment !== prevProps.attachment) {
|
||||
this.loadContent();
|
||||
}
|
||||
}
|
||||
|
||||
async loadContent() {
|
||||
const { attachment, docId, onContentLoad } = this.props;
|
||||
if (!attachment) return;
|
||||
|
||||
if (typeof attachment.text === 'string') {
|
||||
this.setState({
|
||||
content: attachment.text,
|
||||
initialContent: attachment.text,
|
||||
loading: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
(attachment.file instanceof Blob || attachment.file instanceof File) &&
|
||||
attachment.file.size > 0
|
||||
) {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const text = await attachment.file.text();
|
||||
this.setState({
|
||||
content: text,
|
||||
initialContent: text,
|
||||
loading: false,
|
||||
});
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Lesen der Textdatei:', err);
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
// Attachment has no text and empty file — load from API (GET /delivery/{id}/file/{fileId})
|
||||
const effectiveDocId = docId ?? attachment.manifestId;
|
||||
const fileId = attachment.fileId ?? attachment.id;
|
||||
if (effectiveDocId != null && fileId != null) {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const getFile =
|
||||
this.context?.delivery?.getFile?.bind(this.context.delivery) ||
|
||||
deliveryApi.getFile;
|
||||
const blob = await getFile(effectiveDocId, fileId);
|
||||
const text = await blob.text();
|
||||
this.setState({
|
||||
content: text,
|
||||
initialContent: text,
|
||||
loading: false,
|
||||
});
|
||||
onContentLoad?.(attachment, text, blob);
|
||||
return;
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden der Textdatei:', err);
|
||||
enqueueSnackbar('Fehler beim Laden der Datei', { variant: 'error' });
|
||||
this.setState({ loading: false });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
content: '',
|
||||
initialContent: '',
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ content: e.target.value });
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
const { onSave, onClose } = this.props;
|
||||
const { content } = this.state;
|
||||
onSave?.(content);
|
||||
enqueueSnackbar('Textdatei gespeichert', { variant: 'success' });
|
||||
onClose?.();
|
||||
}
|
||||
|
||||
async handleCopy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.state.content);
|
||||
enqueueSnackbar('In die Zwischenablage kopiert', { variant: 'info' });
|
||||
} catch {
|
||||
enqueueSnackbar('Kopieren fehlgeschlagen', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
|
||||
handleDownload() {
|
||||
const { attachment } = this.props;
|
||||
const { content } = this.state;
|
||||
if (!content) return;
|
||||
const filename = attachment?.name || 'Dokument.txt';
|
||||
const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
onClose,
|
||||
attachment,
|
||||
readOnly = false,
|
||||
wide = 3,
|
||||
position = 'top',
|
||||
onPositionChange,
|
||||
height = '60vh',
|
||||
} = this.props;
|
||||
if (!attachment) return null;
|
||||
|
||||
const { content, initialContent, loading } = this.state;
|
||||
const filename = attachment?.name || 'Dokument.txt';
|
||||
const isDirty = content !== initialContent;
|
||||
const linesCount = content ? content.split('\n').length : 0;
|
||||
const charCount = content ? content.length : 0;
|
||||
|
||||
return (
|
||||
<PanelTile
|
||||
wide={wide}
|
||||
minHeight={320}
|
||||
color="#f8fafc"
|
||||
sx={{ height, minHeight: 320 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 1.5,
|
||||
mb: 1.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, minWidth: 0 }}>
|
||||
<TextSnippetOutlinedIcon color="primary" />
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="subtitle1" fontWeight={600} noWrap>
|
||||
{filename}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{linesCount} Zeilen · {charCount} Zeichen
|
||||
</Typography>
|
||||
</Box>
|
||||
{isDirty && (
|
||||
<Chip
|
||||
label="Ungespeichert"
|
||||
size="small"
|
||||
color="warning"
|
||||
sx={{ height: 20, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
|
||||
<Tooltip title="Über der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'top' ? 'primary' : 'default'}
|
||||
aria-label="Über der Artikelliste"
|
||||
onClick={() => onPositionChange?.('top')}
|
||||
>
|
||||
<VerticalAlignTopIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Rechts neben der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'right' ? 'primary' : 'default'}
|
||||
aria-label="Rechts neben der Artikelliste"
|
||||
onClick={() => onPositionChange?.('right')}
|
||||
>
|
||||
<ViewSidebarIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Unter der Artikelliste">
|
||||
<IconButton
|
||||
size="small"
|
||||
color={position === 'below' ? 'primary' : 'default'}
|
||||
aria-label="Unter der Artikelliste"
|
||||
onClick={() => onPositionChange?.('below')}
|
||||
>
|
||||
<VerticalAlignBottomIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<IconButton size="small" onClick={onClose} sx={{ color: 'text.secondary' }}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: 0,
|
||||
}}
|
||||
>
|
||||
{loading && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: 'rgba(248, 250, 252, 0.7)',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<CircularProgress size={36} />
|
||||
</Box>
|
||||
)}
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
value={content}
|
||||
disabled={loading}
|
||||
onChange={this.handleChange}
|
||||
slotProps={{
|
||||
htmlInput: {
|
||||
wrap: 'off',
|
||||
spellCheck: false,
|
||||
},
|
||||
input: {
|
||||
readOnly,
|
||||
sx: {
|
||||
height: '100%',
|
||||
alignItems: 'flex-start',
|
||||
fontFamily:
|
||||
'"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
fontSize: '0.72rem',
|
||||
lineHeight: 1.45,
|
||||
tabSize: 4,
|
||||
bgcolor: '#ffffff',
|
||||
p: 1.5,
|
||||
'& textarea': {
|
||||
height: '100% !important',
|
||||
whiteSpace: 'pre !important',
|
||||
overflowWrap: 'normal !important',
|
||||
wordWrap: 'normal !important',
|
||||
wordBreak: 'normal !important',
|
||||
overflowX: 'auto !important',
|
||||
overflowY: 'auto !important',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& .MuiInputBase-root': {
|
||||
flex: 1,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: 1,
|
||||
mt: 1.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopyIcon />}
|
||||
onClick={this.handleCopy}
|
||||
disabled={loading || !content}
|
||||
>
|
||||
Kopieren
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<DownloadOutlinedIcon />}
|
||||
onClick={this.handleDownload}
|
||||
disabled={loading || !content}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button size="small" onClick={onClose}>
|
||||
{readOnly ? 'Schließen' : 'Abbrechen'}
|
||||
</Button>
|
||||
{!readOnly && (
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<SaveOutlinedIcon />}
|
||||
onClick={this.handleSave}
|
||||
disabled={loading || !isDirty}
|
||||
>
|
||||
Speichern
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</PanelTile>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TextEditorPanel;
|
||||
@@ -5,7 +5,8 @@ export { default as ManifestLines } from './ManifestLines';
|
||||
export { default as ManifestFormLine } from './ManifestFormLine';
|
||||
export { default as Attachment } from './Attachment';
|
||||
export { default as AttachmentList } from './AttachmentList';
|
||||
export { default as TextEditorDialog } from './TextEditorDialog';
|
||||
export { default as TextEditorPanel } from './TextEditorPanel';
|
||||
export { default as PdfViewerPanel } from './PdfViewerPanel';
|
||||
export { default as ArticleSearchDialog } from './ArticleSearchDialog';
|
||||
export { withManifestId } from './withManifestId';
|
||||
export {
|
||||
|
||||
@@ -341,10 +341,18 @@ export function collectFilesForUpload(attachments = [], { onlyNew = false } = {}
|
||||
}
|
||||
}
|
||||
|
||||
let thumbavif = null;
|
||||
if (attachment.thumbnail) {
|
||||
thumbavif = attachment.thumbnail.includes(',')
|
||||
? attachment.thumbnail.split(',')[1]
|
||||
: attachment.thumbnail;
|
||||
}
|
||||
|
||||
files.push({
|
||||
file: fileToUpload,
|
||||
name: attachment.name || fileToUpload.name,
|
||||
mimetype: attachment.type || fileToUpload.type,
|
||||
thumbavif,
|
||||
});
|
||||
}
|
||||
return files;
|
||||
@@ -389,6 +397,10 @@ export async function buildManifestBody(
|
||||
const filesToUpload = collectFilesForUpload(form.attachments, { onlyNew: isUpdate });
|
||||
if (filesToUpload.length > 0) {
|
||||
const formData = new FormData();
|
||||
body.filesMeta = filesToUpload.map((item) => ({
|
||||
name: item.name,
|
||||
thumbavif: item.thumbavif ?? null,
|
||||
}));
|
||||
formData.append('data', JSON.stringify(body));
|
||||
for (const item of filesToUpload) {
|
||||
formData.append('files', item.file, item.name);
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { PureComponent } from 'react';
|
||||
import { PureComponent, createRef } from 'react';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import Box from '@mui/material/Box';
|
||||
import ButtonBase from '@mui/material/ButtonBase';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import Fab from '@mui/material/Fab';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Stack from '@mui/material/Stack';
|
||||
@@ -12,6 +11,7 @@ import Tooltip from '@mui/material/Tooltip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import BugReportIcon from '@mui/icons-material/BugReport';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
@@ -162,11 +162,175 @@ export function formatState(value) {
|
||||
}
|
||||
}
|
||||
|
||||
/** Maximum number of retained action log entries (ring buffer). */
|
||||
const MAX_LOG = 300;
|
||||
|
||||
/** Marks action functions that already carry the logging proxy. */
|
||||
const LOGGED = Symbol('automatInspectorLogged');
|
||||
|
||||
/** Compact single-line rendering limit for args/results in the log. */
|
||||
const LOG_VALUE_LIMIT = 240;
|
||||
|
||||
/**
|
||||
* Floating dev button plus overlay listing all registered Automats with live
|
||||
* state, readiness flags, subscriber counts and available actions.
|
||||
* Ring buffer of captured action calls, oldest first. Kept at module scope so
|
||||
* entries survive component re-renders (and are shared by every inspector).
|
||||
*
|
||||
* @augments {PureComponent<{}, {open: boolean, names: Array<string>, expanded: Object<string, boolean>, query: string, revision: number}>}
|
||||
* @type {Array<{id: number, time: Date, automat: string, action: string, args: string, status: string, duration: number|null, result: string, error: string|null}>}
|
||||
*/
|
||||
const actionLog = [];
|
||||
|
||||
/** Monotonic id source for log entries. */
|
||||
let logSeq = 0;
|
||||
|
||||
/** @type {Set<() => void>} Listeners notified when the log buffer changes. */
|
||||
const logListeners = new Set();
|
||||
|
||||
/** Notifies every log listener, swallowing individual errors. */
|
||||
function notifyLog() {
|
||||
for (const listener of logListeners) {
|
||||
try {
|
||||
listener();
|
||||
} catch {
|
||||
/* listeners are dev-only; never let one break logging */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends an entry to the ring buffer and notifies listeners.
|
||||
*
|
||||
* @param {object} entry Log entry.
|
||||
*/
|
||||
function pushLog(entry) {
|
||||
actionLog.push(entry);
|
||||
if (actionLog.length > MAX_LOG) actionLog.splice(0, actionLog.length - MAX_LOG);
|
||||
notifyLog();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a value as a compact single-line string for the log.
|
||||
*
|
||||
* @param {*} value Value to summarize.
|
||||
* @param {number} [limit] Maximum length before truncation.
|
||||
* @returns {string} Compact representation.
|
||||
*/
|
||||
function compact(value, limit = LOG_VALUE_LIMIT) {
|
||||
const text = formatState(value).replace(/\s+/g, ' ').trim();
|
||||
return text.length > limit ? `${text.slice(0, limit)} …` : text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a timestamp as `HH:MM:SS.mmm`.
|
||||
*
|
||||
* @param {Date} date Timestamp.
|
||||
* @returns {string} Formatted time.
|
||||
*/
|
||||
function formatTime(date) {
|
||||
const pad = (n, len = 2) => String(n).padStart(len, '0');
|
||||
return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wraps every action of an automat with a logging proxy that records call
|
||||
* arguments, duration, return value and errors. Idempotent: already wrapped
|
||||
* actions are left untouched, and the original function is always invoked with
|
||||
* the caller's `this` and arguments.
|
||||
*
|
||||
* @param {import('react-automat').Automat} automat Automat instance.
|
||||
*/
|
||||
function installActionLogging(automat) {
|
||||
const actions = automat.actions;
|
||||
if (!actions) return;
|
||||
for (const key of Object.keys(actions)) {
|
||||
const original = actions[key];
|
||||
if (typeof original !== 'function' || original[LOGGED]) continue;
|
||||
|
||||
const wrapped = function loggedAction(...args) {
|
||||
const started = performance.now();
|
||||
const entry = {
|
||||
id: ++logSeq,
|
||||
time: new Date(),
|
||||
automat: automat.name ?? '(anonym)',
|
||||
action: key,
|
||||
args: compact(args),
|
||||
status: 'running',
|
||||
duration: null,
|
||||
result: '',
|
||||
error: null,
|
||||
};
|
||||
pushLog(entry);
|
||||
|
||||
const settle = (status, payload, err) => {
|
||||
entry.status = status;
|
||||
entry.duration = performance.now() - started;
|
||||
if (status === 'error') entry.error = err?.message ?? String(err);
|
||||
else entry.result = compact(payload);
|
||||
notifyLog();
|
||||
};
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = original.apply(this, args);
|
||||
} catch (err) {
|
||||
settle('error', undefined, err);
|
||||
throw err;
|
||||
}
|
||||
|
||||
if (result && typeof result.then === 'function') {
|
||||
return result.then(
|
||||
(value) => {
|
||||
settle('ok', value);
|
||||
return value;
|
||||
},
|
||||
(err) => {
|
||||
settle('error', undefined, err);
|
||||
throw err;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
settle('ok', result);
|
||||
return result;
|
||||
};
|
||||
|
||||
try {
|
||||
Object.defineProperty(wrapped, 'name', { value: key });
|
||||
} catch {
|
||||
/* name is cosmetic */
|
||||
}
|
||||
wrapped[LOGGED] = true;
|
||||
actions[key] = wrapped;
|
||||
}
|
||||
}
|
||||
|
||||
/** Marks the registry Map once its `set` has been wrapped. */
|
||||
const WATCHED = Symbol('automatInspectorWatched');
|
||||
|
||||
/**
|
||||
* Wraps the live registry's `set` so automats created after mount get their
|
||||
* actions instrumented immediately instead of on the next poll tick.
|
||||
*/
|
||||
function watchRegistry() {
|
||||
const registry = window.__AUTOMATS__;
|
||||
if (!(registry instanceof Map) || registry[WATCHED]) return;
|
||||
const originalSet = registry.set.bind(registry);
|
||||
registry.set = (name, automat) => {
|
||||
const result = originalSet(name, automat);
|
||||
installActionLogging(automat);
|
||||
return result;
|
||||
};
|
||||
registry[WATCHED] = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Floating dev button plus a docked side panel listing all registered Automats
|
||||
* with live state, readiness flags, subscriber counts and available actions.
|
||||
*
|
||||
* The panel is rendered in-flow (not as an overlay), so the page stays fully
|
||||
* interactive while the action log is watched live. It relies on being placed
|
||||
* as a flex sibling of the app content (see `main.jsx`).
|
||||
*
|
||||
* @augments {PureComponent<{}, {open: boolean, names: Array<string>, expanded: Object<string, boolean>, query: string, revision: number, logOpen: boolean, log: Array<object>}>}
|
||||
*/
|
||||
class AutomatInspector extends PureComponent {
|
||||
constructor(props) {
|
||||
@@ -177,11 +341,15 @@ class AutomatInspector extends PureComponent {
|
||||
expanded: {},
|
||||
query: '',
|
||||
revision: 0,
|
||||
logOpen: false,
|
||||
log: [],
|
||||
};
|
||||
|
||||
/** @type {Map<string, () => void>} Unsubscribe functions per automat name. */
|
||||
this.unsubs = new Map();
|
||||
this.frame = null;
|
||||
this.logFrame = null;
|
||||
this.logRef = createRef();
|
||||
|
||||
this.handleToggle = this.handleToggle.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
@@ -193,24 +361,35 @@ class AutomatInspector extends PureComponent {
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this);
|
||||
this.syncRegistry = this.syncRegistry.bind(this);
|
||||
this.scheduleUpdate = this.scheduleUpdate.bind(this);
|
||||
this.scheduleLogUpdate = this.scheduleLogUpdate.bind(this);
|
||||
this.handleToggleLog = this.handleToggleLog.bind(this);
|
||||
this.handleClearLog = this.handleClearLog.bind(this);
|
||||
this.handleCopyLog = this.handleCopyLog.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.syncRegistry();
|
||||
this.registryTimer = window.setInterval(this.syncRegistry, REGISTRY_POLL_MS);
|
||||
window.addEventListener('keydown', this.handleKeyDown);
|
||||
logListeners.add(this.scheduleLogUpdate);
|
||||
this.scheduleLogUpdate();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this.registryTimer);
|
||||
window.removeEventListener('keydown', this.handleKeyDown);
|
||||
logListeners.delete(this.scheduleLogUpdate);
|
||||
this.unsubscribeAll();
|
||||
if (this.frame) cancelAnimationFrame(this.frame);
|
||||
if (this.logFrame) cancelAnimationFrame(this.logFrame);
|
||||
}
|
||||
|
||||
/** Mirrors the registry keys into state and keeps subscriptions in sync. */
|
||||
syncRegistry() {
|
||||
const names = Array.from(getRegistry().keys()).sort((a, b) => a.localeCompare(b));
|
||||
watchRegistry();
|
||||
const registry = getRegistry();
|
||||
for (const automat of registry.values()) installActionLogging(automat);
|
||||
const names = Array.from(registry.keys()).sort((a, b) => a.localeCompare(b));
|
||||
const changed =
|
||||
names.length !== this.state.names.length || names.some((name, i) => name !== this.state.names[i]);
|
||||
if (changed) this.setState({ names });
|
||||
@@ -249,6 +428,58 @@ class AutomatInspector extends PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies the module-level log ring buffer into state, coalesced per frame so
|
||||
* bursts of action calls do not cause a render each. Skipped while the drawer
|
||||
* is closed; opening it re-syncs via `handleToggle`.
|
||||
*/
|
||||
scheduleLogUpdate() {
|
||||
if (!this.state.open || this.logFrame) return;
|
||||
this.logFrame = requestAnimationFrame(() => {
|
||||
this.logFrame = null;
|
||||
this.setState({ log: actionLog.slice() });
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const grew = this.state.log.length > prevState.log.length;
|
||||
const opened = this.state.logOpen && !prevState.logOpen;
|
||||
if (this.state.logOpen && (grew || opened)) {
|
||||
const node = this.logRef.current;
|
||||
if (node) node.scrollTop = node.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleLog() {
|
||||
this.setState((prev) => ({ logOpen: !prev.logOpen, log: actionLog.slice() }));
|
||||
}
|
||||
|
||||
handleClearLog() {
|
||||
actionLog.length = 0;
|
||||
notifyLog();
|
||||
}
|
||||
|
||||
/** Copies the whole log buffer to the clipboard as plain text. */
|
||||
async handleCopyLog() {
|
||||
try {
|
||||
if (!navigator.clipboard?.writeText) {
|
||||
throw new Error('Clipboard API nicht verfügbar (sichere Origin erforderlich).');
|
||||
}
|
||||
const text = actionLog
|
||||
.map(
|
||||
(entry) =>
|
||||
`${formatTime(entry.time)} ${entry.automat}.${entry.action}(${entry.args})` +
|
||||
`${entry.status === 'error' ? ` ! ${entry.error}` : ` → ${entry.result}`}` +
|
||||
`${entry.duration != null ? ` [${Math.round(entry.duration)}ms]` : ''}`,
|
||||
)
|
||||
.join('\n');
|
||||
await navigator.clipboard.writeText(text);
|
||||
enqueueSnackbar(`Log kopiert (${actionLog.length} Einträge)`, { variant: 'success' });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown(event) {
|
||||
if (!event.altKey || !event.shiftKey) return;
|
||||
if (event.key?.toLowerCase() !== 'a') return;
|
||||
@@ -262,6 +493,7 @@ class AutomatInspector extends PureComponent {
|
||||
if (open) {
|
||||
this.syncRegistry();
|
||||
this.subscribeToAll();
|
||||
this.scheduleLogUpdate();
|
||||
} else {
|
||||
this.unsubscribeAll();
|
||||
}
|
||||
@@ -434,8 +666,116 @@ class AutomatInspector extends PureComponent {
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open, names, expanded, query } = this.state;
|
||||
/**
|
||||
* Renders one captured action call as a single log line.
|
||||
*
|
||||
* @param {object} entry Log entry.
|
||||
* @returns {React.ReactElement} Log line.
|
||||
*/
|
||||
renderLogLine(entry) {
|
||||
const color =
|
||||
entry.status === 'error' ? 'error.main' : entry.status === 'running' ? 'text.secondary' : 'success.main';
|
||||
return (
|
||||
<Box key={entry.id} component="div">
|
||||
<Box component="span" sx={{ color: 'text.disabled' }}>
|
||||
{formatTime(entry.time)}{' '}
|
||||
</Box>
|
||||
<Box component="span" sx={{ fontWeight: 600 }}>
|
||||
{entry.automat}.{entry.action}
|
||||
</Box>
|
||||
<Box component="span" sx={{ color: 'text.secondary' }}>
|
||||
({entry.args})
|
||||
</Box>
|
||||
{entry.status === 'error' ? (
|
||||
<Box component="span" sx={{ color: 'error.main' }}>
|
||||
{' '}
|
||||
✗ {entry.error}
|
||||
</Box>
|
||||
) : entry.status === 'ok' ? (
|
||||
<Box component="span" sx={{ color: 'text.disabled' }}>
|
||||
{' '}
|
||||
→ {entry.result}
|
||||
</Box>
|
||||
) : null}{' '}
|
||||
<Box component="span" sx={{ color, ml: 0.5 }}>
|
||||
{entry.status === 'running'
|
||||
? '…'
|
||||
: `${entry.status === 'error' ? '✗' : '✓'} ${Math.round(entry.duration)}ms`}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/** Bottom-docked, collapsible log of every captured automat action call. */
|
||||
renderLog() {
|
||||
const { logOpen, log } = this.state;
|
||||
const errorCount = log.filter((entry) => entry.status === 'error').length;
|
||||
|
||||
return (
|
||||
<Box sx={{ borderTop: '1px solid', borderColor: 'divider', flexShrink: 0 }}>
|
||||
<Stack direction="row" alignItems="center" spacing={0.5} sx={{ px: 1.5, py: 0.5 }}>
|
||||
<ButtonBase
|
||||
component="div"
|
||||
onClick={this.handleToggleLog}
|
||||
sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', gap: 0.5, justifyContent: 'flex-start', py: 0.5 }}
|
||||
>
|
||||
{logOpen ? <ExpandMoreIcon fontSize="small" /> : <ChevronRightIcon fontSize="small" />}
|
||||
<Typography variant="caption" sx={{ fontWeight: 600 }}>
|
||||
Action-Log
|
||||
</Typography>
|
||||
<Chip size="small" variant="outlined" label={log.length} />
|
||||
{errorCount > 0 ? <Chip size="small" color="error" label={`${errorCount} Fehler`} /> : null}
|
||||
</ButtonBase>
|
||||
<Tooltip title="Log als Text kopieren">
|
||||
<span>
|
||||
<IconButton size="small" onClick={this.handleCopyLog} disabled={log.length === 0}>
|
||||
<ContentCopyIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="Log leeren">
|
||||
<span>
|
||||
<IconButton size="small" onClick={this.handleClearLog} disabled={log.length === 0}>
|
||||
<ClearIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
|
||||
{logOpen ? (
|
||||
<Box
|
||||
ref={this.logRef}
|
||||
component="div"
|
||||
sx={{
|
||||
m: 0,
|
||||
mx: 1.5,
|
||||
mb: 1,
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
bgcolor: 'action.hover',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 11,
|
||||
lineHeight: 1.6,
|
||||
maxHeight: '40vh',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
{log.length === 0 ? (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Noch keine Action-Aufrufe protokolliert.
|
||||
</Typography>
|
||||
) : (
|
||||
log.map((entry) => this.renderLogLine(entry))
|
||||
)}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/** Docked side panel with the automat list, filter and action log. */
|
||||
renderPanel() {
|
||||
const { names, expanded, query } = this.state;
|
||||
const registry = getRegistry();
|
||||
const needle = query.trim().toLowerCase();
|
||||
const entries = names
|
||||
@@ -444,41 +784,23 @@ class AutomatInspector extends PureComponent {
|
||||
const allExpanded = names.length > 0 && names.every((name) => expanded[name]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge
|
||||
badgeContent={names.length}
|
||||
color="secondary"
|
||||
overlap="circular"
|
||||
invisible={names.length === 0}
|
||||
sx={{ position: 'fixed', right: 16, bottom: 16, zIndex: (theme) => theme.zIndex.modal + 1 }}
|
||||
>
|
||||
<Tooltip title="Automat-Inspector (Alt+Shift+A)">
|
||||
<Fab
|
||||
size="small"
|
||||
color="primary"
|
||||
aria-label="Automat-Inspector umschalten"
|
||||
aria-pressed={open}
|
||||
onClick={this.handleToggle}
|
||||
>
|
||||
<BugReportIcon fontSize="small" />
|
||||
</Fab>
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={open}
|
||||
onClose={this.handleClose}
|
||||
slotProps={{
|
||||
transition: { timeout: 0 },
|
||||
paper: {
|
||||
sx: {
|
||||
<Box
|
||||
component="aside"
|
||||
aria-label="Automat-Inspector"
|
||||
sx={{
|
||||
width: { xs: '100%', sm: 560 },
|
||||
maxWidth: '100%',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
alignSelf: 'flex-start',
|
||||
height: '100vh',
|
||||
borderLeft: '1px solid',
|
||||
borderColor: 'divider',
|
||||
bgcolor: 'background.paper',
|
||||
zIndex: (theme) => theme.zIndex.appBar,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
@@ -525,10 +847,45 @@ class AutomatInspector extends PureComponent {
|
||||
{names.length === 0 ? 'Kein Automat registriert.' : 'Kein Automat passt zum Filter.'}
|
||||
</Typography>
|
||||
) : (
|
||||
<Stack spacing={1}>{entries.map((automat) => this.renderEntry(automat, Boolean(expanded[automat.name])))}</Stack>
|
||||
<Stack spacing={1}>
|
||||
{entries.map((automat) => this.renderEntry(automat, Boolean(expanded[automat.name])))}
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
{this.renderLog()}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open, names } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
{open ? null : (
|
||||
<Badge
|
||||
badgeContent={names.length}
|
||||
color="secondary"
|
||||
overlap="circular"
|
||||
invisible={names.length === 0}
|
||||
sx={{ position: 'fixed', right: 16, bottom: 16, zIndex: (theme) => theme.zIndex.modal + 1 }}
|
||||
>
|
||||
<Tooltip title="Automat-Inspector (Alt+Shift+A)">
|
||||
<Fab
|
||||
size="small"
|
||||
color="primary"
|
||||
aria-label="Automat-Inspector umschalten"
|
||||
aria-pressed={open}
|
||||
onClick={this.handleToggle}
|
||||
>
|
||||
<BugReportIcon fontSize="small" />
|
||||
</Fab>
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{open ? this.renderPanel() : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
13
src/main.jsx
13
src/main.jsx
@@ -1,13 +1,12 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import { Provider } from 'react-redux';
|
||||
import { SnackbarProvider } from 'notistack';
|
||||
import AuthBootstrap from './components/AuthBootstrap';
|
||||
import { StorageManagerProvider } from './api/storageManagerContext';
|
||||
import App from './App';
|
||||
import { store } from './store';
|
||||
import { getActiveTheme } from './theme';
|
||||
import './automats/supplierAutomat';
|
||||
import './index.css';
|
||||
@@ -33,7 +32,6 @@ if (import.meta.env.DEV) {
|
||||
}
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={getActiveTheme()}>
|
||||
<CssBaseline />
|
||||
<SnackbarProvider
|
||||
@@ -43,15 +41,20 @@ createRoot(document.getElementById('root')).render(
|
||||
>
|
||||
<StorageManagerProvider>
|
||||
<AuthBootstrap>
|
||||
{/* Flex row so the dev inspector docks beside the app instead of
|
||||
overlaying it; the app content shrinks while the panel is open. */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', minHeight: '100vh' }}>
|
||||
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
||||
<App />
|
||||
</Box>
|
||||
{AutomatInspector ? (
|
||||
<Suspense fallback={null}>
|
||||
<AutomatInspector />
|
||||
</Suspense>
|
||||
) : null}
|
||||
</Box>
|
||||
</AuthBootstrap>
|
||||
</StorageManagerProvider>
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</Provider>,
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
categorySlug,
|
||||
getCategoryBreadcrumbs,
|
||||
getCategoryChildren,
|
||||
} from '../../store/categorySlice';
|
||||
} from '../../utils/categoryUtils';
|
||||
|
||||
export { ROOT_CATEGORY_NAME, categorySlug };
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Component, createRef } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Component, PureComponent, createRef } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import TextField from '@mui/material/TextField';
|
||||
@@ -19,41 +18,49 @@ import {
|
||||
import { TILE_SIZE } from 'dashgui/tiles';
|
||||
import withCategoryRoute from './withCategoryRoute';
|
||||
import { artikelDetailPath, articleSku } from './articleRoute';
|
||||
import { selectCompanyId } from '../../store/companySlice';
|
||||
import { selectPosterminals, loadPosterminals } from '../../store/posterminalSlice';
|
||||
import {
|
||||
buildCategoryPath,
|
||||
defaultCategoryPath,
|
||||
resolveCategoryIdFromSlugPath,
|
||||
ROOT_CATEGORY_NAME,
|
||||
} from './categoryRoute';
|
||||
import {
|
||||
categoryDisplayName,
|
||||
deleteCategory,
|
||||
moveCategory,
|
||||
loadCategoryArticles,
|
||||
loadCategoryTree,
|
||||
navigateToCategory,
|
||||
renameCategory,
|
||||
reorderCategories,
|
||||
selectCanNavigateBack,
|
||||
selectCategoryArticles,
|
||||
selectCategoryArticlesStatus,
|
||||
selectCategoryBreadcrumbs,
|
||||
selectCategoryMap,
|
||||
selectCategoryError,
|
||||
selectCategoryTreeStatus,
|
||||
selectChildCategories,
|
||||
selectRenameMode,
|
||||
patchCategoryPosterminalIds,
|
||||
uploadCategoryImage,
|
||||
deleteCategoryImage,
|
||||
} from '../../store/categorySlice';
|
||||
import {
|
||||
enableTerminalCategory,
|
||||
disableTerminalCategory,
|
||||
} from '../../store/posterminalSlice';
|
||||
import categoryAutomat from '../../automats/categoryAutomat';
|
||||
import posterminalAutomat from '../../automats/posterminalAutomat';
|
||||
import companyAutomat from '../../automats/companyAutomat';
|
||||
import { setLastArticleSku } from '../../automats';
|
||||
import { categoryDisplayName, getCategoryBreadcrumbs, getCategoryChildren } from '../../utils/categoryUtils';
|
||||
|
||||
// ─── Helper selectors for this page ────────────────────────────────────────────
|
||||
function selectFromCategory(s) {
|
||||
const { categories, rootCategoryId, currentCategoryId, articles, articlesTotal, renameMode, treeStatus, articlesStatus, error } = s;
|
||||
const breadcrumbs = getCategoryBreadcrumbs(categories, currentCategoryId, rootCategoryId);
|
||||
const childCategories = getCategoryChildren(categories, currentCategoryId);
|
||||
const canGoBack =
|
||||
currentCategoryId != null &&
|
||||
rootCategoryId != null &&
|
||||
String(currentCategoryId) !== String(rootCategoryId) &&
|
||||
categories?.[String(currentCategoryId)]?.parentId != null &&
|
||||
categories[String(currentCategoryId)].parentId !== 0;
|
||||
|
||||
return {
|
||||
categories,
|
||||
rootCategoryId,
|
||||
treeStatus,
|
||||
articlesStatus,
|
||||
error,
|
||||
currentCategoryId,
|
||||
breadcrumbs,
|
||||
childCategories,
|
||||
articles,
|
||||
articlesTotal,
|
||||
canGoBack,
|
||||
renameMode,
|
||||
};
|
||||
}
|
||||
|
||||
function selectTerminals(s) {
|
||||
return { terminals: s.terminals };
|
||||
}
|
||||
|
||||
const gridSx = {
|
||||
display: 'grid',
|
||||
@@ -61,10 +68,15 @@ const gridSx = {
|
||||
gap: 2,
|
||||
};
|
||||
|
||||
class ArtikelKategorienPage extends Component {
|
||||
class ArtikelKategorienPage extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { drafts: {} };
|
||||
this.state = {
|
||||
drafts: {},
|
||||
...selectFromCategory(categoryAutomat.state),
|
||||
...selectTerminals(posterminalAutomat.state),
|
||||
companyId: companyAutomat.state.current?.id ?? null,
|
||||
};
|
||||
this.gridRef = createRef();
|
||||
this.sortableModule = null;
|
||||
this.droppableModule = null;
|
||||
@@ -74,6 +86,11 @@ class ArtikelKategorienPage extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
setLastArticleSku(null);
|
||||
this._unsubCat = categoryAutomat.subscribe(this, selectFromCategory);
|
||||
this._unsubTerm = posterminalAutomat.subscribe(this, selectTerminals);
|
||||
this._unsubCompany = companyAutomat.subscribe(this, (s) => ({
|
||||
companyId: s.current?.id ?? null,
|
||||
}));
|
||||
this.ensureTreeLoaded();
|
||||
this.ensurePosterminalsLoaded();
|
||||
this.syncCategoryFromUrl();
|
||||
@@ -82,37 +99,36 @@ class ArtikelKategorienPage extends Component {
|
||||
this.syncDroppable();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.companyId !== prevProps.companyId) {
|
||||
componentDidUpdate(prevState) {
|
||||
// Note: PureComponent — comparisons use this.state not this.props
|
||||
if (this.state.companyId !== prevState.companyId) {
|
||||
this.ensureTreeLoaded();
|
||||
}
|
||||
|
||||
if (
|
||||
this.props.treeStatus === 'succeeded' &&
|
||||
prevProps.treeStatus !== 'succeeded'
|
||||
) {
|
||||
if (this.state.treeStatus === 'succeeded' && prevState.treeStatus !== 'succeeded') {
|
||||
this.syncCategoryFromUrl();
|
||||
this.ensureArticlesLoaded();
|
||||
}
|
||||
|
||||
if (
|
||||
this.props.treeStatus === 'succeeded' &&
|
||||
this.props.categorySlugPath !== prevProps.categorySlugPath
|
||||
this.state.treeStatus === 'succeeded' &&
|
||||
this.props.categorySlugPath !== (this._prevSlugPath ?? this.props.categorySlugPath)
|
||||
) {
|
||||
this.syncCategoryFromUrl();
|
||||
}
|
||||
this._prevSlugPath = this.props.categorySlugPath;
|
||||
|
||||
if (this.props.currentCategoryId !== prevProps.currentCategoryId) {
|
||||
if (this.state.currentCategoryId !== prevState.currentCategoryId) {
|
||||
this.ensureArticlesLoaded();
|
||||
}
|
||||
|
||||
if (this.props.renameMode !== prevProps.renameMode) {
|
||||
if (this.state.renameMode !== prevState.renameMode) {
|
||||
this.syncSortable();
|
||||
this.syncDroppable();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._unsubCat?.();
|
||||
this._unsubTerm?.();
|
||||
this._unsubCompany?.();
|
||||
this.sortableModule?.destroy();
|
||||
this.droppableModule?.destroy();
|
||||
}
|
||||
@@ -122,19 +138,21 @@ class ArtikelKategorienPage extends Component {
|
||||
if (!el) return;
|
||||
if (!this.sortableModule) {
|
||||
this.sortableModule = new CategorySortable(el, {
|
||||
onReorder: this.props.reorderCategories,
|
||||
onReorder: ({ categoryIds }) =>
|
||||
categoryAutomat.actions.reorderCategories({ categoryIds }),
|
||||
});
|
||||
}
|
||||
if (!this.droppableModule) {
|
||||
this.droppableModule = new CategoryDroppable(el, {
|
||||
onMove: this.props.moveCategory,
|
||||
onMove: ({ categoryId, parentId }) =>
|
||||
categoryAutomat.actions.moveCategory({ categoryId, parentId }),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
syncSortable = () => {
|
||||
this.#ensureModules();
|
||||
if (this.props.renameMode) {
|
||||
if (this.state.renameMode) {
|
||||
this.sortableModule?.destroy();
|
||||
this.sortableModule?.activate();
|
||||
} else {
|
||||
@@ -144,7 +162,7 @@ class ArtikelKategorienPage extends Component {
|
||||
|
||||
syncDroppable = () => {
|
||||
this.#ensureModules();
|
||||
if (this.props.renameMode) {
|
||||
if (this.state.renameMode) {
|
||||
this.droppableModule?.destroy();
|
||||
this.droppableModule?.activate();
|
||||
} else {
|
||||
@@ -157,33 +175,32 @@ class ArtikelKategorienPage extends Component {
|
||||
};
|
||||
|
||||
ensureTreeLoaded = () => {
|
||||
const { companyId, treeStatus } = this.props;
|
||||
const { companyId, treeStatus } = this.state;
|
||||
if (!companyId || treeStatus !== 'idle') return;
|
||||
this.props.loadCategoryTree();
|
||||
void categoryAutomat.actions.loadTree();
|
||||
};
|
||||
|
||||
ensurePosterminalsLoaded = () => {
|
||||
const { companyId } = this.props;
|
||||
const { companyId } = this.state;
|
||||
if (!companyId) return;
|
||||
this.props.loadPosterminals();
|
||||
void posterminalAutomat.actions.load();
|
||||
};
|
||||
|
||||
ensureArticlesLoaded = () => {
|
||||
const { currentCategoryId, articlesStatus, rootCategoryId, treeStatus } = this.props;
|
||||
const { currentCategoryId, articlesStatus, rootCategoryId, treeStatus } = this.state;
|
||||
if (treeStatus !== 'succeeded' || !currentCategoryId || articlesStatus !== 'idle') return;
|
||||
if (String(currentCategoryId) === String(rootCategoryId)) return;
|
||||
this.props.loadCategoryArticles(currentCategoryId);
|
||||
void categoryAutomat.actions.loadArticles(currentCategoryId);
|
||||
};
|
||||
|
||||
syncCategoryFromUrl = () => {
|
||||
const {
|
||||
categories,
|
||||
rootCategoryId,
|
||||
categorySlugPath,
|
||||
currentCategoryId,
|
||||
treeStatus,
|
||||
navigate,
|
||||
} = this.props;
|
||||
} = this.state;
|
||||
const { categorySlugPath, navigate } = this.props;
|
||||
|
||||
if (treeStatus !== 'succeeded' || !categories || rootCategoryId == null) return;
|
||||
|
||||
@@ -206,13 +223,13 @@ class ArtikelKategorienPage extends Component {
|
||||
}
|
||||
|
||||
if (resolvedId !== currentCategoryId) {
|
||||
this.props.navigateToCategory(resolvedId);
|
||||
categoryAutomat.actions.navigateTo(resolvedId);
|
||||
}
|
||||
};
|
||||
|
||||
navigateToCategoryById = (categoryId) => {
|
||||
const { categories, rootCategoryId, navigate } = this.props;
|
||||
navigate(buildCategoryPath(categories, rootCategoryId, categoryId));
|
||||
const { categories, rootCategoryId } = this.state;
|
||||
this.props.navigate(buildCategoryPath(categories, rootCategoryId, categoryId));
|
||||
};
|
||||
|
||||
handleDraftChange(categoryId, value) {
|
||||
@@ -228,10 +245,7 @@ class ArtikelKategorienPage extends Component {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await this.props.renameCategory({
|
||||
categoryId,
|
||||
name: trimmed,
|
||||
}).unwrap();
|
||||
await categoryAutomat.actions.renameCategory({ categoryId, name: trimmed });
|
||||
enqueueSnackbar('Kategorie umbenannt.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
@@ -240,7 +254,7 @@ class ArtikelKategorienPage extends Component {
|
||||
|
||||
handleDeleteCategory = async (category) => {
|
||||
try {
|
||||
await this.props.deleteCategory(category.id).unwrap();
|
||||
await categoryAutomat.actions.deleteCategory(category.id);
|
||||
enqueueSnackbar('Kategorie gelöscht.', { variant: 'success' });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
@@ -248,18 +262,18 @@ class ArtikelKategorienPage extends Component {
|
||||
};
|
||||
|
||||
handleRetryTree = () => {
|
||||
if (this.props.companyId) this.props.loadCategoryTree();
|
||||
if (this.state.companyId) void categoryAutomat.actions.loadTree();
|
||||
};
|
||||
|
||||
handleRetryArticles = () => {
|
||||
const { currentCategoryId } = this.props;
|
||||
const { currentCategoryId } = this.state;
|
||||
if (currentCategoryId) {
|
||||
this.props.loadCategoryArticles(currentCategoryId);
|
||||
void categoryAutomat.actions.loadArticles(currentCategoryId);
|
||||
}
|
||||
};
|
||||
|
||||
handleNavigateBack = () => {
|
||||
const { breadcrumbs } = this.props;
|
||||
const { breadcrumbs } = this.state;
|
||||
if (breadcrumbs.length < 2) return;
|
||||
this.navigateToCategoryById(breadcrumbs[breadcrumbs.length - 2].id);
|
||||
};
|
||||
@@ -283,7 +297,8 @@ class ArtikelKategorienPage extends Component {
|
||||
articles,
|
||||
renameMode,
|
||||
terminals,
|
||||
} = this.props;
|
||||
drafts,
|
||||
} = this.state;
|
||||
|
||||
if (!companyId) {
|
||||
return (
|
||||
@@ -347,8 +362,8 @@ class ArtikelKategorienPage extends Component {
|
||||
{childCategories.map((item, index) => {
|
||||
const label = categoryDisplayName(item.name, item.id, rootCategoryId);
|
||||
const draftName =
|
||||
this.state.drafts[item.id] !== undefined
|
||||
? this.state.drafts[item.id]
|
||||
drafts[item.id] !== undefined
|
||||
? drafts[item.id]
|
||||
: label;
|
||||
const editProps = renameMode
|
||||
? {
|
||||
@@ -359,13 +374,12 @@ class ArtikelKategorienPage extends Component {
|
||||
terminals,
|
||||
categoryPosterminalIds: item.posterminalIds || [],
|
||||
onTerminalToggle: (terminalId, enabled) => {
|
||||
const thunk = enabled
|
||||
? this.props.enableTerminalCategory
|
||||
: this.props.disableTerminalCategory;
|
||||
void thunk({ terminalId, categoryId: item.id })
|
||||
.unwrap()
|
||||
const action = enabled
|
||||
? posterminalAutomat.actions.enableCategory
|
||||
: posterminalAutomat.actions.disableCategory;
|
||||
void action({ terminalId, categoryId: item.id })
|
||||
.then(() => {
|
||||
this.props.patchCategoryPosterminalIds({
|
||||
categoryAutomat.actions.patchCategoryPosterminalIds({
|
||||
categoryId: item.id,
|
||||
terminalId,
|
||||
enabled,
|
||||
@@ -382,10 +396,9 @@ class ArtikelKategorienPage extends Component {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
try {
|
||||
// Prepare image (resize and encode to AVIF)
|
||||
const { prepareArticlePhoto } = await import('../../utils/prepareArticlePhoto');
|
||||
const avifFile = await prepareArticlePhoto(file);
|
||||
await this.props.uploadCategoryImage({
|
||||
await categoryAutomat.actions.uploadCategoryImage({
|
||||
categoryId: item.id,
|
||||
file: avifFile,
|
||||
});
|
||||
@@ -396,7 +409,7 @@ class ArtikelKategorienPage extends Component {
|
||||
input.click();
|
||||
},
|
||||
onPhotoDelete: () => {
|
||||
void this.props.deleteCategoryImage(item.id)
|
||||
void categoryAutomat.actions.deleteCategoryImage(item.id)
|
||||
.catch(notifyError);
|
||||
},
|
||||
nameInput: (
|
||||
@@ -478,36 +491,4 @@ class ArtikelKategorienPage extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
companyId: selectCompanyId(state),
|
||||
categories: selectCategoryMap(state),
|
||||
rootCategoryId: state.category.rootCategoryId,
|
||||
treeStatus: selectCategoryTreeStatus(state),
|
||||
articlesStatus: selectCategoryArticlesStatus(state),
|
||||
error: selectCategoryError(state),
|
||||
currentCategoryId: state.category.currentCategoryId,
|
||||
breadcrumbs: selectCategoryBreadcrumbs(state),
|
||||
childCategories: selectChildCategories(state),
|
||||
articles: selectCategoryArticles(state),
|
||||
canGoBack: selectCanNavigateBack(state),
|
||||
renameMode: selectRenameMode(state),
|
||||
terminals: selectPosterminals(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
loadCategoryTree,
|
||||
loadCategoryArticles,
|
||||
loadPosterminals,
|
||||
navigateToCategory,
|
||||
renameCategory,
|
||||
deleteCategory,
|
||||
moveCategory,
|
||||
reorderCategories,
|
||||
enableTerminalCategory,
|
||||
disableTerminalCategory,
|
||||
patchCategoryPosterminalIds,
|
||||
uploadCategoryImage,
|
||||
deleteCategoryImage,
|
||||
};
|
||||
|
||||
export default withCategoryRoute(connect(mapStateToProps, mapDispatchToProps)(ArtikelKategorienPage));
|
||||
export default withCategoryRoute(ArtikelKategorienPage);
|
||||
|
||||
@@ -1,8 +1,25 @@
|
||||
import { Component } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { StorageManagerContext } from '../../api/storageManagerContext';
|
||||
import BackendError from '../../components/BackendError';
|
||||
import { ArticleView } from '../../components/article';
|
||||
import {
|
||||
artikelAutomat,
|
||||
createArticleSelector,
|
||||
getArticle,
|
||||
setLastArticleSku,
|
||||
} from '../../automats';
|
||||
import withSkuRoute from './withSkuRoute';
|
||||
import { setLastArticleSku } from '../../automats';
|
||||
|
||||
/** Full-screen loading state while the shared article cache resolves. */
|
||||
function ArticleLoading() {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||
<CircularProgress size={32} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
class ArtikelSkuPage extends Component {
|
||||
static contextType = StorageManagerContext;
|
||||
@@ -10,42 +27,65 @@ class ArtikelSkuPage extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
ready:
|
||||
context.getArticle(props.sku) != null &&
|
||||
context.getCategoryState() != null,
|
||||
article: getArticle(props.sku),
|
||||
ready: context.getCategoryState() != null,
|
||||
error: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._mounted = true;
|
||||
this.installEscape();
|
||||
setLastArticleSku(this.props.sku);
|
||||
if (!this.state.ready) void this.ensureArticle();
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: createArticleSelector(this.props.sku)(state),
|
||||
}));
|
||||
void this.ensureArticle();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.sku !== this.props.sku) {
|
||||
setLastArticleSku(this.props.sku);
|
||||
const ready =
|
||||
this.context.getArticle(this.props.sku) != null &&
|
||||
this.context.getCategoryState() != null;
|
||||
if (ready !== this.state.ready) this.setState({ ready });
|
||||
if (!ready) void this.ensureArticle();
|
||||
this.setState({ article: getArticle(this.props.sku), error: null });
|
||||
this.unsub?.();
|
||||
this.unsub = artikelAutomat.subscribe(this, (state) => ({
|
||||
article: createArticleSelector(this.props.sku)(state),
|
||||
}));
|
||||
void this.ensureArticle();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._mounted = false;
|
||||
this.removeEscape();
|
||||
this.unsub?.();
|
||||
this.unsub = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delegates the article fetch to the shared artikelAutomat cache; also waits
|
||||
* for the category tree/company/session the view tiles depend on.
|
||||
*/
|
||||
async ensureArticle() {
|
||||
const sku = this.props.sku;
|
||||
if (!sku) return;
|
||||
try {
|
||||
await Promise.all([
|
||||
this.context.loadArticle(this.props.sku),
|
||||
artikelAutomat.actions.loadArticle(sku),
|
||||
this.context.categoryTreePromise,
|
||||
this.context.companyPromise,
|
||||
this.context.authMePromise,
|
||||
]);
|
||||
this.setState({ ready: true });
|
||||
if (this._mounted) this.setState({ ready: true });
|
||||
} catch (error) {
|
||||
if (this._mounted) this.setState({ error });
|
||||
}
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({ error: null });
|
||||
void this.ensureArticle();
|
||||
};
|
||||
|
||||
installEscape() {
|
||||
this._onKeyDown = (e) => {
|
||||
@@ -65,7 +105,12 @@ class ArtikelSkuPage extends Component {
|
||||
|
||||
render() {
|
||||
const { sku } = this.props;
|
||||
if (!this.state.ready) return null;
|
||||
const { article, ready, error } = this.state;
|
||||
|
||||
if (error) {
|
||||
return <BackendError error={error} sx={{ mt: 2 }} onRetry={this.handleRetry} />;
|
||||
}
|
||||
if (!article || !ready) return <ArticleLoading />;
|
||||
return <ArticleView sku={sku} />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,8 @@ import {
|
||||
emptyLine,
|
||||
lineFromApi,
|
||||
manifestConfig,
|
||||
TextEditorDialog,
|
||||
TextEditorPanel,
|
||||
PdfViewerPanel,
|
||||
ArticleSearchDialog,
|
||||
} from '../../components/manifest';
|
||||
import ManifestPdfDialog from '../../components/manifest/ManifestPdfDialog';
|
||||
@@ -30,9 +31,10 @@ import { requireArray, requireDefined, requireObject } from '../../utils/apiShap
|
||||
import { backendErrorFrom } from '../../utils/backendError';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
import { generatePdfThumbnail } from '../../utils/pdfThumbnail';
|
||||
import { generateTextThumbnail } from '../../utils/textThumbnail';
|
||||
import { extractPdfText } from '../../utils/pdfText';
|
||||
import { getDeliveryEditorAutomat } from '../../automats/deliveryEditorAutomat';
|
||||
import { setLastDeliveryPath } from '../../automats';
|
||||
import { setLastDeliveryPath, userSettingsAutomat, setViewerPosition } from '../../automats';
|
||||
import { delivery as deliveryApi } from '../../api';
|
||||
|
||||
class LieferungNeuPage extends PureComponent {
|
||||
@@ -54,6 +56,9 @@ class LieferungNeuPage extends PureComponent {
|
||||
pdfFileName: '',
|
||||
textEditorOpen: false,
|
||||
textEditorAttachment: null,
|
||||
viewerPosition: userSettingsAutomat.state.viewerPosition,
|
||||
pdfViewerOpen: false,
|
||||
pdfViewerAttachment: null,
|
||||
articleSearchDialogOpen: false,
|
||||
articleSearchLine: null,
|
||||
unmatchedSupplierName: null,
|
||||
@@ -77,6 +82,8 @@ class LieferungNeuPage extends PureComponent {
|
||||
this.handleAbortParse = this.handleAbortParse.bind(this);
|
||||
this.handleAttachmentClick = this.handleAttachmentClick.bind(this);
|
||||
this.handleCloseTextEditor = this.handleCloseTextEditor.bind(this);
|
||||
this.handleTextEditorPositionChange = this.handleTextEditorPositionChange.bind(this);
|
||||
this.handleClosePdfViewer = this.handleClosePdfViewer.bind(this);
|
||||
this.handleSaveTextEditor = this.handleSaveTextEditor.bind(this);
|
||||
this.handleTextEditorContentLoaded = this.handleTextEditorContentLoaded.bind(this);
|
||||
this.ensureAttachmentFile = this.ensureAttachmentFile.bind(this);
|
||||
@@ -90,6 +97,9 @@ class LieferungNeuPage extends PureComponent {
|
||||
|
||||
componentDidMount() {
|
||||
this.unsubscribe = this.automat.subscribe(this);
|
||||
this._settingsUnsub = userSettingsAutomat.subscribe(this, (state) => ({
|
||||
viewerPosition: state.viewerPosition,
|
||||
}));
|
||||
this._cancelled = false;
|
||||
if (this.props.docId != null) {
|
||||
setLastDeliveryPath(`/lieferung/${this.props.docId}`);
|
||||
@@ -131,6 +141,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
this._skuDebounceTimers = null;
|
||||
}
|
||||
this.unsubscribe?.();
|
||||
this._settingsUnsub?.();
|
||||
}
|
||||
|
||||
async loadPartiesOnly() {
|
||||
@@ -467,12 +478,19 @@ class LieferungNeuPage extends PureComponent {
|
||||
const text = await extractPdfText(file, { layout: true });
|
||||
const txtName = file.name.replace(/\.pdf$/i, '') + '.txt';
|
||||
const txtFile = new File([text], txtName, { type: 'text/plain;charset=utf-8' });
|
||||
let txtThumbnail = null;
|
||||
try {
|
||||
txtThumbnail = await generateTextThumbnail(text);
|
||||
} catch (thumbErr) {
|
||||
console.error('Fehler beim Erstellen des Text-Thumbnails:', thumbErr);
|
||||
}
|
||||
const txtAttachment = {
|
||||
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
file: txtFile,
|
||||
name: txtFile.name,
|
||||
size: txtFile.size,
|
||||
type: 'text/plain',
|
||||
thumbnail: txtThumbnail,
|
||||
text,
|
||||
parentPdfId: pdfId,
|
||||
uploadedAt: new Date().toISOString(),
|
||||
@@ -489,6 +507,12 @@ class LieferungNeuPage extends PureComponent {
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Lesen der Datei:', err);
|
||||
}
|
||||
let thumbnail = null;
|
||||
try {
|
||||
thumbnail = await generateTextThumbnail(text || file);
|
||||
} catch (thumbErr) {
|
||||
console.error('Fehler beim Erstellen des Text-Thumbnails:', thumbErr);
|
||||
}
|
||||
const attachmentId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
const textAttachment = {
|
||||
id: attachmentId,
|
||||
@@ -496,6 +520,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: isCsv ? 'text/csv' : 'text/plain',
|
||||
thumbnail,
|
||||
text,
|
||||
uploadedAt: new Date().toISOString(),
|
||||
};
|
||||
@@ -527,6 +552,13 @@ class LieferungNeuPage extends PureComponent {
|
||||
const txtName = attachment.name.replace(/\.pdf$/i, '') + '.txt';
|
||||
const txtFile = new File([text], txtName, { type: 'text/plain;charset=utf-8' });
|
||||
|
||||
let txtThumbnail = null;
|
||||
try {
|
||||
txtThumbnail = await generateTextThumbnail(text);
|
||||
} catch (thumbErr) {
|
||||
console.error('Fehler beim Aktualisieren des Text-Thumbnails:', thumbErr);
|
||||
}
|
||||
|
||||
const existingTxt = this.state.attachments?.find(
|
||||
(a) => a.parentPdfId === attachment.id || a.name === txtName,
|
||||
);
|
||||
@@ -536,6 +568,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
file: txtFile,
|
||||
size: txtFile.size,
|
||||
text,
|
||||
thumbnail: txtThumbnail || existingTxt.thumbnail,
|
||||
isDirty: true,
|
||||
});
|
||||
} else {
|
||||
@@ -545,6 +578,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
name: txtFile.name,
|
||||
size: txtFile.size,
|
||||
type: 'text/plain',
|
||||
thumbnail: txtThumbnail,
|
||||
text,
|
||||
parentPdfId: attachment.id,
|
||||
uploadedAt: new Date().toISOString(),
|
||||
@@ -862,31 +896,22 @@ class LieferungNeuPage extends PureComponent {
|
||||
this.setState({
|
||||
textEditorOpen: true,
|
||||
textEditorAttachment: attachment,
|
||||
pdfViewerOpen: false,
|
||||
pdfViewerAttachment: null,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isPdf) {
|
||||
if (
|
||||
(attachment.file instanceof Blob || attachment.file instanceof File) &&
|
||||
attachment.file.size > 0
|
||||
) {
|
||||
const url = URL.createObjectURL(attachment.file);
|
||||
window.open(url, '_blank');
|
||||
return;
|
||||
}
|
||||
|
||||
const docId = this.props.docId ?? attachment.manifestId ?? this.state.id;
|
||||
const fileId = attachment.fileId ?? attachment.id;
|
||||
if (docId != null && fileId != null) {
|
||||
window.open(
|
||||
`/api/delivery/${encodeURIComponent(docId)}/file/${encodeURIComponent(fileId)}`,
|
||||
'_blank',
|
||||
);
|
||||
this.setState({
|
||||
pdfViewerOpen: true,
|
||||
pdfViewerAttachment: attachment,
|
||||
textEditorOpen: false,
|
||||
textEditorAttachment: null,
|
||||
});
|
||||
void this.ensureAttachmentFile(attachment);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (attachment.file instanceof Blob || attachment.file instanceof File) {
|
||||
if (attachment.file.size > 0) {
|
||||
@@ -913,7 +938,89 @@ class LieferungNeuPage extends PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
handleSaveTextEditor(newText) {
|
||||
handleClosePdfViewer() {
|
||||
this.setState({
|
||||
pdfViewerOpen: false,
|
||||
pdfViewerAttachment: null,
|
||||
});
|
||||
}
|
||||
|
||||
handleTextEditorPositionChange(position) {
|
||||
setViewerPosition(position);
|
||||
}
|
||||
|
||||
renderViewerPanels(wide) {
|
||||
const {
|
||||
textEditorOpen,
|
||||
textEditorAttachment,
|
||||
pdfViewerOpen,
|
||||
pdfViewerAttachment,
|
||||
viewerPosition,
|
||||
} = this.state;
|
||||
const docId = this.props.docId ?? this.state.id;
|
||||
|
||||
const panels = [];
|
||||
|
||||
if (textEditorOpen && textEditorAttachment) {
|
||||
panels.push(
|
||||
<TextEditorPanel
|
||||
key="text"
|
||||
docId={docId}
|
||||
attachment={textEditorAttachment}
|
||||
position={viewerPosition}
|
||||
wide={wide}
|
||||
height={panels.length === 0 ? '60vh' : '40vh'}
|
||||
onPositionChange={this.handleTextEditorPositionChange}
|
||||
onClose={this.handleCloseTextEditor}
|
||||
onSave={this.handleSaveTextEditor}
|
||||
onContentLoad={this.handleTextEditorContentLoaded}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (pdfViewerOpen && pdfViewerAttachment) {
|
||||
panels.push(
|
||||
<PdfViewerPanel
|
||||
key="pdf"
|
||||
docId={docId}
|
||||
attachment={pdfViewerAttachment}
|
||||
position={viewerPosition}
|
||||
wide={wide}
|
||||
height={panels.length === 0 ? '60vh' : '40vh'}
|
||||
onPositionChange={this.handleTextEditorPositionChange}
|
||||
onClose={this.handleClosePdfViewer}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (panels.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
gridColumn: { xs: '1 / -1', sm: wide >= 2 ? 'span 2' : 'span 1', md: `span ${wide}` },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
minWidth: 0,
|
||||
...(viewerPosition === 'right'
|
||||
? { position: 'sticky', top: 16, alignSelf: 'flex-start' }
|
||||
: {}),
|
||||
}}
|
||||
>
|
||||
{panels}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
isViewerOpen() {
|
||||
return Boolean(
|
||||
(this.state.textEditorOpen && this.state.textEditorAttachment) ||
|
||||
(this.state.pdfViewerOpen && this.state.pdfViewerAttachment),
|
||||
);
|
||||
}
|
||||
|
||||
async handleSaveTextEditor(newText) {
|
||||
const attachment = this.state.textEditorAttachment;
|
||||
if (!attachment) return;
|
||||
|
||||
@@ -921,11 +1028,19 @@ class LieferungNeuPage extends PureComponent {
|
||||
type: 'text/plain;charset=utf-8',
|
||||
});
|
||||
|
||||
let thumbnail = attachment.thumbnail;
|
||||
try {
|
||||
thumbnail = await generateTextThumbnail(newText);
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Aktualisieren des Text-Thumbnails:', err);
|
||||
}
|
||||
|
||||
this.automat.actions.updateAttachment({
|
||||
id: attachment.id,
|
||||
file: newFile,
|
||||
size: newFile.size,
|
||||
text: newText,
|
||||
thumbnail,
|
||||
isDirty: true,
|
||||
});
|
||||
|
||||
@@ -1067,6 +1182,7 @@ class LieferungNeuPage extends PureComponent {
|
||||
onNumberChange={this.handleNumberChange}
|
||||
onExternalNumberChange={this.handleExternalNumberChange}
|
||||
/>
|
||||
{this.state.viewerPosition === 'top' && this.renderViewerPanels(3)}
|
||||
{partyId == null && (!lines || lines.length === 0) ? (
|
||||
<PanelTile wide={3} minHeight={160} color="#e2e8f0">
|
||||
{this.state.unmatchedSupplierName ? (
|
||||
@@ -1120,6 +1236,11 @@ class LieferungNeuPage extends PureComponent {
|
||||
columns={DELIVERY_LINE_COLUMNS}
|
||||
lines={lines}
|
||||
saving={saving}
|
||||
wide={
|
||||
this.state.viewerPosition === 'right' && this.isViewerOpen()
|
||||
? 2
|
||||
: 3
|
||||
}
|
||||
linesColor={cfg.linesColor}
|
||||
supplierArticlesMap={this.state.supplierArticlesMap}
|
||||
supplierArticlesByLineKey={this.state.supplierArticlesByLineKey}
|
||||
@@ -1137,6 +1258,8 @@ class LieferungNeuPage extends PureComponent {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{this.state.viewerPosition === 'right' && this.renderViewerPanels(2)}
|
||||
{this.state.viewerPosition === 'below' && this.renderViewerPanels(3)}
|
||||
{notes && notes.length > 0 && (
|
||||
<PanelTile wide={3} color="#fffbeb">
|
||||
<Typography variant="subtitle2" fontWeight={700} color="warning.dark" sx={{ mb: 1.5 }}>
|
||||
@@ -1162,14 +1285,6 @@ class LieferungNeuPage extends PureComponent {
|
||||
onAbort={this.handleAbortParse}
|
||||
/>
|
||||
|
||||
<TextEditorDialog
|
||||
open={this.state.textEditorOpen}
|
||||
docId={this.props.docId ?? this.state.id}
|
||||
attachment={this.state.textEditorAttachment}
|
||||
onClose={this.handleCloseTextEditor}
|
||||
onSave={this.handleSaveTextEditor}
|
||||
onContentLoad={this.handleTextEditorContentLoaded}
|
||||
/>
|
||||
<ArticleSearchDialog
|
||||
open={this.state.articleSearchDialogOpen}
|
||||
line={this.state.articleSearchLine}
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Automat, fetchJson } from 'react-automat';
|
||||
import { article } from '../api/index';
|
||||
import { requireObject, requireDefined } from '../utils/apiShape';
|
||||
|
||||
/**
|
||||
* Article automat store.
|
||||
* Registered as window.artikel via the name option.
|
||||
* State shape: { [sku: string]: article | null }
|
||||
*
|
||||
* Usage in PureComponent:
|
||||
* ```jsx
|
||||
* import articleAutomat, { createArticleSelector } from '../../store/articleAutomat';
|
||||
*
|
||||
* class ArticleView extends PureComponent {
|
||||
* constructor(props) {
|
||||
* super(props);
|
||||
* const sku = props.sku;
|
||||
* const currentArticle = articleAutomat.state[sku] ?? null;
|
||||
* this.state = { article: currentArticle };
|
||||
*
|
||||
* if (!currentArticle) {
|
||||
* articleAutomat.actions.loadArticle(sku).catch(console.error);
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* componentDidMount() {
|
||||
* this.subscribeToArticle();
|
||||
* }
|
||||
*
|
||||
* componentDidUpdate(prevProps) {
|
||||
* if (prevProps.sku !== this.props.sku) {
|
||||
* const currentArticle = articleAutomat.state[this.props.sku] ?? null;
|
||||
* this.setState({ article: currentArticle });
|
||||
*
|
||||
* if (!currentArticle) {
|
||||
* articleAutomat.actions.loadArticle(this.props.sku).catch(console.error);
|
||||
* }
|
||||
*
|
||||
* this.subscribeToArticle();
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* subscribeToArticle() {
|
||||
* if (this.unsub) this.unsub();
|
||||
* const selector = createArticleSelector(this.props.sku);
|
||||
* this.unsub = articleAutomat.subscribe(this, (state) => ({
|
||||
* article: selector(state),
|
||||
* }));
|
||||
* }
|
||||
*
|
||||
* componentWillUnmount() {
|
||||
* if (this.unsub) {
|
||||
* this.unsub();
|
||||
* this.unsub = null;
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* render() {
|
||||
* const { article } = this.state;
|
||||
* if (!article) return null;
|
||||
* return <div>{article.name}</div>;
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
const articleAutomat = new Automat(
|
||||
{},
|
||||
{
|
||||
/**
|
||||
* Load article by SKU and update the store.
|
||||
* @param {string} sku
|
||||
*/
|
||||
async loadArticle(sku) {
|
||||
const res = await article.getBySku(sku);
|
||||
requireObject(res, 'GET /api/article/:sku');
|
||||
requireObject(res.article, 'article');
|
||||
requireDefined(res.article.sku, 'article.sku');
|
||||
|
||||
articleAutomat.setState({
|
||||
[sku]: res.article,
|
||||
});
|
||||
|
||||
return res.article;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update article state after a successful mutation.
|
||||
* @param {object} article
|
||||
*/
|
||||
setArticle(article) {
|
||||
requireObject(article, 'article');
|
||||
requireDefined(article.sku, 'article.sku');
|
||||
|
||||
articleAutomat.setState({
|
||||
[article.sku]: article,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear article from store (e.g., after deletion).
|
||||
* @param {string} sku
|
||||
*/
|
||||
clearArticle(sku) {
|
||||
articleAutomat.setState({
|
||||
[sku]: null,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'artikel',
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Create a selector function for a specific SKU.
|
||||
* This avoids closure issues when the SKU changes.
|
||||
* @param {string} sku - The article SKU
|
||||
* @returns {(state: object) => object|null} Selector function
|
||||
*/
|
||||
export function createArticleSelector(sku) {
|
||||
return (state) => state[sku] ?? null;
|
||||
}
|
||||
|
||||
export default articleAutomat;
|
||||
@@ -1,94 +0,0 @@
|
||||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { brand as brandApi } from '../api';
|
||||
import authAutomat, {
|
||||
AUTH_COMPANY_CHANGED,
|
||||
AUTH_LOGGED_OUT,
|
||||
AUTH_SESSION_ESTABLISHED,
|
||||
} from '../automats/authAutomat';
|
||||
import { requireArray, requireObject } from '../utils/apiShape';
|
||||
import { catchBackendError } from '../utils/backendError';
|
||||
|
||||
function sortBrands(brands) {
|
||||
return [...brands].sort((a, b) =>
|
||||
String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de'),
|
||||
);
|
||||
}
|
||||
|
||||
export const loadBrands = createAsyncThunk('brand/load', async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
const res = await brandApi.list();
|
||||
requireObject(res, 'GET /api/brand');
|
||||
return requireArray(res.brands, 'brands');
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
});
|
||||
|
||||
export const upsertBrand = createAsyncThunk(
|
||||
'brand/upsert',
|
||||
async (body, { rejectWithValue }) => {
|
||||
try {
|
||||
const res = await brandApi.upsert(body);
|
||||
requireObject(res, 'PUT /api/brand');
|
||||
requireObject(res.brand, 'brand');
|
||||
return res.brand;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const initialState = {
|
||||
brands: [],
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
const brandSlice = createSlice({
|
||||
name: 'brand',
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(loadBrands.pending, (state) => {
|
||||
state.status = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadBrands.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.brands = sortBrands(action.payload);
|
||||
})
|
||||
.addCase(loadBrands.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.error.message;
|
||||
})
|
||||
.addCase(upsertBrand.fulfilled, (state, action) => {
|
||||
const row = action.payload;
|
||||
state.brands = sortBrands([
|
||||
...state.brands.filter((b) => b.id !== row.id),
|
||||
row,
|
||||
]);
|
||||
})
|
||||
.addCase(AUTH_COMPANY_CHANGED, () => initialState)
|
||||
.addCase(AUTH_LOGGED_OUT, () => initialState);
|
||||
},
|
||||
});
|
||||
|
||||
export const selectBrands = (state) => state.brand.brands;
|
||||
export const selectBrandsStatus = (state) => state.brand.status;
|
||||
export const selectBrandsError = (state) => state.brand.error;
|
||||
|
||||
export function brandLoadListener(listenerMiddleware) {
|
||||
listenerMiddleware.startListening({
|
||||
matcher: (action) =>
|
||||
action.type === AUTH_SESSION_ESTABLISHED || action.type === AUTH_COMPANY_CHANGED,
|
||||
effect: async (_action, api) => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (companyId) {
|
||||
api.dispatch(loadBrands());
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default brandSlice.reducer;
|
||||
@@ -1,696 +0,0 @@
|
||||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { category, article } from '../api';
|
||||
import { requireArray, requireDefined, requireObject } from '../utils/apiShape';
|
||||
import { catchBackendError, resolveBackendError } from '../utils/backendError';
|
||||
import { AUTH_LOGGED_OUT } from '../automats/authAutomat';
|
||||
import { loadCurrentCompany } from './companySlice';
|
||||
|
||||
export const ROOT_CATEGORY_NAME = 'Home';
|
||||
|
||||
export function normalizeCategoryNode(item) {
|
||||
requireObject(item, 'category');
|
||||
requireDefined(item.id, 'category.id');
|
||||
return {
|
||||
...item,
|
||||
id: item.id,
|
||||
parentId: item.parentId,
|
||||
name: item.name == null ? null : String(item.name).trim() || null,
|
||||
posterminalIds: Array.isArray(item.posterminalIds) ? item.posterminalIds : [],
|
||||
};
|
||||
}
|
||||
|
||||
/** Backend: { languageId, tree: [...], articles: [] } — rootCategoryId aus Company */
|
||||
export function parseCategoryTreeResponse(data, companyRootCategoryId) {
|
||||
requireObject(data, 'category/tree');
|
||||
const list = requireArray(data.tree, 'category/tree.tree');
|
||||
requireArray(data.articles, 'category/tree.articles');
|
||||
|
||||
const rootCategoryId = data.rootCategoryId != null ? data.rootCategoryId : companyRootCategoryId;
|
||||
requireDefined(rootCategoryId, 'rootCategoryId');
|
||||
|
||||
const categories = Object.fromEntries(
|
||||
list.map((item) => [String(item.id), normalizeCategoryNode(item)]),
|
||||
);
|
||||
|
||||
return {
|
||||
rootCategoryId,
|
||||
categories,
|
||||
rootArticles: data.articles,
|
||||
languageId: data.languageId,
|
||||
};
|
||||
}
|
||||
|
||||
export function categoryDisplayName(name, categoryId, rootCategoryId) {
|
||||
if (rootCategoryId != null && String(categoryId) === String(rootCategoryId)) {
|
||||
return ROOT_CATEGORY_NAME;
|
||||
}
|
||||
return name?.trim() || '';
|
||||
}
|
||||
|
||||
export function categorySlug(node, rootCategoryId) {
|
||||
if (rootCategoryId != null && String(node.id) === String(rootCategoryId)) {
|
||||
return ROOT_CATEGORY_NAME;
|
||||
}
|
||||
return node.slug || null;
|
||||
}
|
||||
|
||||
export function normalizeCategoryMap(data, companyRootCategoryId) {
|
||||
return parseCategoryTreeResponse(data, companyRootCategoryId).categories;
|
||||
}
|
||||
|
||||
export function getCategoryChildren(categories, parentId) {
|
||||
if (!categories) return [];
|
||||
const parentKey = String(parentId);
|
||||
return Object.values(categories)
|
||||
.filter((item) => item.parentId != null && String(item.parentId) === parentKey)
|
||||
.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0) || a.id - b.id);
|
||||
}
|
||||
|
||||
export function getCategoryBreadcrumbs(categories, currentCategoryId, rootCategoryId) {
|
||||
if (!categories || currentCategoryId == null) return [];
|
||||
|
||||
const crumbs = [];
|
||||
const seen = new Set();
|
||||
let id = currentCategoryId;
|
||||
|
||||
while (id != null && !seen.has(String(id))) {
|
||||
seen.add(String(id));
|
||||
const node = categories[String(id)];
|
||||
if (!node) break;
|
||||
|
||||
crumbs.unshift({
|
||||
id: node.id,
|
||||
name: categoryDisplayName(node.name, node.id, rootCategoryId),
|
||||
slug: categorySlug(node, rootCategoryId),
|
||||
});
|
||||
|
||||
const parentId = node.parentId;
|
||||
if (parentId == null || parentId === 0) break;
|
||||
if (String(parentId) === String(id)) break;
|
||||
id = parentId;
|
||||
}
|
||||
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
export const loadCategoryTree = createAsyncThunk(
|
||||
'category/loadTree',
|
||||
async (_, { rejectWithValue, getState }) => {
|
||||
try {
|
||||
const companyId = getState().company.current?.id;
|
||||
const companyRootId = getState().company.current?.rootCategoryId;
|
||||
requireDefined(companyRootId, 'company.rootCategoryId');
|
||||
const data = await category.getTree();
|
||||
const parsed = parseCategoryTreeResponse(data, companyRootId);
|
||||
return {
|
||||
companyId,
|
||||
...parsed,
|
||||
};
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const loadCategoryArticles = createAsyncThunk(
|
||||
'category/loadArticles',
|
||||
async (categoryId, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.getArticles(categoryId);
|
||||
requireObject(data, `category/${categoryId}/articles`);
|
||||
const articles = requireArray(data.articles, `category/${categoryId}/articles.articles`);
|
||||
return { categoryId, articles };
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const createCategory = createAsyncThunk(
|
||||
'category/create',
|
||||
async ({ parentId, name }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.create({ parentId, name });
|
||||
requireObject(data.category, 'POST /api/category.category');
|
||||
return normalizeCategoryNode(data.category);
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Create several categories under the same parent in one go (bulk add).
|
||||
* Runs the single-create API sequentially so every category is created
|
||||
* even if a later one fails; the first error is reported.
|
||||
* Returns the array of created (normalized) categories.
|
||||
*/
|
||||
export const createCategories = createAsyncThunk(
|
||||
'category/createCategories',
|
||||
async ({ parentId, names }, { rejectWithValue }) => {
|
||||
const list = (names ?? [])
|
||||
.map((n) => String(n ?? '').trim())
|
||||
.filter(Boolean);
|
||||
if (list.length === 0) {
|
||||
return rejectWithValue({ message: 'Keine Namen übergeben.' });
|
||||
}
|
||||
const created = [];
|
||||
try {
|
||||
for (const name of list) {
|
||||
const data = await category.create({ parentId, name });
|
||||
requireObject(data.category, 'POST /api/category.category');
|
||||
created.push(normalizeCategoryNode(data.category));
|
||||
}
|
||||
return created;
|
||||
} catch (err) {
|
||||
const normalized = catchBackendError(rejectWithValue)(err);
|
||||
// Attach already-created categories so the UI can still update optimistically.
|
||||
return normalized && created.length > 0
|
||||
? rejectWithValue({ ...normalized, created })
|
||||
: normalized;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const createArticle = createAsyncThunk(
|
||||
'category/createArticle',
|
||||
async ({ parentId, name }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await article.create({ parentId, name });
|
||||
requireObject(data.article, 'POST /api/article.article');
|
||||
requireDefined(data.article.id, 'article.id');
|
||||
return data.article;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Create several articles under the same parent in one go (bulk add).
|
||||
* Runs the single-create API sequentially so every article is created
|
||||
* even if a later one fails; the first error is reported.
|
||||
* Returns the array of created articles.
|
||||
*/
|
||||
export const createArticles = createAsyncThunk(
|
||||
'category/createArticles',
|
||||
async ({ parentId, names }, { rejectWithValue }) => {
|
||||
const list = (names ?? [])
|
||||
.map((n) => String(n ?? '').trim())
|
||||
.filter(Boolean);
|
||||
if (list.length === 0) {
|
||||
return rejectWithValue({ message: 'Keine Namen übergeben.' });
|
||||
}
|
||||
const created = [];
|
||||
try {
|
||||
for (const name of list) {
|
||||
const data = await article.create({ parentId, name });
|
||||
requireObject(data.article, 'POST /api/article.article');
|
||||
requireDefined(data.article.id, 'article.id');
|
||||
created.push(data.article);
|
||||
}
|
||||
return created;
|
||||
} catch (err) {
|
||||
const normalized = catchBackendError(rejectWithValue)(err);
|
||||
// Attach already-created articles so the UI can still update optimistically.
|
||||
return normalized && created.length > 0
|
||||
? rejectWithValue({ ...normalized, created })
|
||||
: normalized;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const renameCategory = createAsyncThunk(
|
||||
'category/rename',
|
||||
async ({ categoryId, name }, { rejectWithValue }) => {
|
||||
try {
|
||||
const trimmed = String(name ?? '').trim();
|
||||
if (!trimmed) throw new Error('Name required');
|
||||
const data = await category.updateName(categoryId, trimmed);
|
||||
requireObject(data.category, 'PATCH /api/category/:id.category');
|
||||
return normalizeCategoryNode(data.category);
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Reorder sibling categories (new order of children under the current parent).
|
||||
* `PUT /api/category/order` → 200 { categoryIds: number[] }
|
||||
*/
|
||||
export const reorderCategories = createAsyncThunk(
|
||||
'category/reorder',
|
||||
async ({ categoryIds }, { rejectWithValue, getState }) => {
|
||||
try {
|
||||
const ids = requireArray(categoryIds, 'categoryIds');
|
||||
const parentId = getState().category.currentCategoryId;
|
||||
requireDefined(parentId, 'currentCategoryId');
|
||||
const data = await category.reorder(parentId, ids);
|
||||
requireObject(data, 'PUT /api/category/order');
|
||||
requireArray(data.categoryIds, 'categoryIds');
|
||||
return { parentId, categoryIds: requireArray(data.categoryIds, 'categoryIds') };
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Move a category under a new parent (drop into subcategory).
|
||||
* Backend: PATCH /api/category/:id Body: { parentId } → { category }.
|
||||
* (Vorschlag — Route fehlt noch in dashback; siehe TODO.md.)
|
||||
*/
|
||||
export const moveCategory = createAsyncThunk(
|
||||
'category/move',
|
||||
async ({ categoryId, parentId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.move(categoryId, parentId);
|
||||
requireObject(data.category, 'PATCH /api/category/:id.category');
|
||||
return normalizeCategoryNode(data.category);
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const deleteCategory = createAsyncThunk(
|
||||
'category/delete',
|
||||
async (categoryId, { rejectWithValue }) => {
|
||||
try {
|
||||
await category.delete(categoryId);
|
||||
return categoryId;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Toggle the POS (Point of Sale) flag on a category.
|
||||
* Backend: PATCH /api/category/:id Body: { pos: boolean } → { category }.
|
||||
* PROPOSED — backend needs to implement this field.
|
||||
*/
|
||||
export const toggleCategoryPos = createAsyncThunk(
|
||||
'category/togglePos',
|
||||
async ({ categoryId, pos }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.updatePos(categoryId, pos);
|
||||
requireObject(data.category, 'PATCH /api/category/:id.category (pos)');
|
||||
return normalizeCategoryNode(data.category);
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* POST /api/category/:id/image → 201 { category: { id, fullHash, thumbW, thumbH, thumbHash } }
|
||||
*/
|
||||
export const uploadCategoryImage = createAsyncThunk(
|
||||
'category/uploadImage',
|
||||
async ({ categoryId, file }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.uploadImage(categoryId, file);
|
||||
requireObject(data.category, 'POST /api/category/:id/image');
|
||||
return data.category;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* DELETE /api/category/:id/image → 200 { category: { id, thumbW: null, thumbH: null, thumbHash: null } }
|
||||
*/
|
||||
export const deleteCategoryImage = createAsyncThunk(
|
||||
'category/deleteImage',
|
||||
async (categoryId, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await category.deleteImage(categoryId);
|
||||
requireObject(data.category, 'DELETE /api/category/:id/image');
|
||||
return data.category;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const initialState = {
|
||||
companyId: null,
|
||||
languageId: null,
|
||||
categories: null,
|
||||
rootCategoryId: null,
|
||||
rootArticles: [],
|
||||
currentCategoryId: null,
|
||||
articles: [],
|
||||
articlesTotal: 0,
|
||||
renameMode: false,
|
||||
treeStatus: 'idle',
|
||||
articlesStatus: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
const categorySlice = createSlice({
|
||||
name: 'category',
|
||||
initialState,
|
||||
reducers: {
|
||||
navigateToCategory(state, action) {
|
||||
state.currentCategoryId = action.payload;
|
||||
state.error = null;
|
||||
if (String(action.payload) === String(state.rootCategoryId)) {
|
||||
state.articles = state.rootArticles;
|
||||
state.articlesTotal = state.rootArticles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
} else {
|
||||
state.articles = [];
|
||||
state.articlesTotal = 0;
|
||||
state.articlesStatus = 'idle';
|
||||
}
|
||||
},
|
||||
navigateBack(state) {
|
||||
const current = state.categories?.[String(state.currentCategoryId)];
|
||||
const parentId = current?.parentId;
|
||||
if (parentId == null || parentId === 0) return;
|
||||
if (String(parentId) === String(state.rootCategoryId) || state.categories?.[String(parentId)]) {
|
||||
state.currentCategoryId = parentId;
|
||||
state.error = null;
|
||||
if (String(parentId) === String(state.rootCategoryId)) {
|
||||
state.articles = state.rootArticles;
|
||||
state.articlesTotal = state.rootArticles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
} else {
|
||||
state.articles = [];
|
||||
state.articlesTotal = 0;
|
||||
state.articlesStatus = 'idle';
|
||||
}
|
||||
}
|
||||
},
|
||||
resetCategoryState() {
|
||||
return initialState;
|
||||
},
|
||||
patchCategoryPosterminalIds(state, action) {
|
||||
const { categoryId, terminalId, enabled } = action.payload;
|
||||
const cat = state.categories?.[String(categoryId)];
|
||||
if (!cat) return;
|
||||
if (!Array.isArray(cat.posterminalIds)) cat.posterminalIds = [];
|
||||
if (enabled && !cat.posterminalIds.includes(terminalId)) {
|
||||
cat.posterminalIds.push(terminalId);
|
||||
} else if (!enabled) {
|
||||
cat.posterminalIds = cat.posterminalIds.filter((id) => id !== terminalId);
|
||||
}
|
||||
},
|
||||
setRenameMode(state, action) {
|
||||
state.renameMode = Boolean(action.payload);
|
||||
},
|
||||
removeArticleBySku(state, action) {
|
||||
const sku = action.payload;
|
||||
state.articles = state.articles.filter((row) => row.sku !== sku);
|
||||
state.articlesTotal = state.articles.length;
|
||||
state.rootArticles = state.rootArticles.filter((row) => row.sku !== sku);
|
||||
},
|
||||
/** Keep category tile list in sync with article detail (e.g. after photo upload or category change). */
|
||||
patchArticleInLists(state, action) {
|
||||
const { sku, categoryIds, ...fields } = action.payload;
|
||||
if (sku == null) return;
|
||||
|
||||
// Merge fields into existing article in both lists
|
||||
const patchList = (list) =>
|
||||
list.map((row) => {
|
||||
if (row.sku !== sku) return row;
|
||||
return { ...row, ...fields };
|
||||
});
|
||||
state.articles = patchList(state.articles);
|
||||
state.rootArticles = patchList(state.rootArticles);
|
||||
|
||||
if (categoryIds === undefined) return;
|
||||
const newCategoryIds = categoryIds ?? [];
|
||||
|
||||
// Helper: find the article object in either list
|
||||
const findArticle = (list) => list.find((row) => row.sku === sku);
|
||||
const articleObj = findArticle(state.articles) || findArticle(state.rootArticles);
|
||||
if (!articleObj) return;
|
||||
|
||||
// Handle root category membership
|
||||
if (state.rootCategoryId != null) {
|
||||
const inRootCategory = newCategoryIds.some(
|
||||
(id) => String(id) === String(state.rootCategoryId),
|
||||
);
|
||||
const alreadyInRoot = state.rootArticles.some((row) => row.sku === sku);
|
||||
if (!inRootCategory) {
|
||||
state.rootArticles = state.rootArticles.filter((row) => row.sku !== sku);
|
||||
} else if (!alreadyInRoot) {
|
||||
state.rootArticles = [...state.rootArticles, articleObj];
|
||||
}
|
||||
}
|
||||
|
||||
// Handle current category membership
|
||||
if (state.currentCategoryId != null) {
|
||||
const inCurrentCategory = newCategoryIds.some(
|
||||
(id) => String(id) === String(state.currentCategoryId),
|
||||
);
|
||||
const alreadyInCurrent = state.articles.some((row) => row.sku === sku);
|
||||
if (!inCurrentCategory) {
|
||||
state.articles = state.articles.filter((row) => row.sku !== sku);
|
||||
state.articlesTotal = state.articles.length;
|
||||
} else if (!alreadyInCurrent) {
|
||||
state.articles = [...state.articles, articleObj];
|
||||
state.articlesTotal = state.articles.length;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(loadCategoryTree.pending, (state) => {
|
||||
state.treeStatus = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadCategoryTree.fulfilled, (state, action) => {
|
||||
state.treeStatus = 'succeeded';
|
||||
state.companyId = action.payload.companyId;
|
||||
state.languageId = action.payload.languageId;
|
||||
state.categories = action.payload.categories;
|
||||
state.rootCategoryId = action.payload.rootCategoryId;
|
||||
state.currentCategoryId = action.payload.rootCategoryId;
|
||||
state.rootArticles = action.payload.rootArticles;
|
||||
state.articles = state.rootArticles;
|
||||
state.articlesTotal = state.rootArticles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
})
|
||||
.addCase(loadCategoryTree.rejected, (state, action) => {
|
||||
state.treeStatus = 'failed';
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
.addCase(loadCategoryArticles.pending, (state) => {
|
||||
state.articlesStatus = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadCategoryArticles.fulfilled, (state, action) => {
|
||||
state.articlesStatus = 'succeeded';
|
||||
state.articles = action.payload.articles;
|
||||
state.articlesTotal = action.payload.articles.length;
|
||||
})
|
||||
.addCase(loadCategoryArticles.rejected, (state, action) => {
|
||||
state.articlesStatus = 'failed';
|
||||
state.articles = [];
|
||||
state.articlesTotal = 0;
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
.addCase(createCategory.fulfilled, (state, action) => {
|
||||
if (!state.categories) state.categories = {};
|
||||
state.categories[String(action.payload.id)] = action.payload;
|
||||
})
|
||||
.addCase(createCategories.fulfilled, (state, action) => {
|
||||
const createdList = action.payload;
|
||||
if (!Array.isArray(createdList)) return;
|
||||
if (!state.categories) state.categories = {};
|
||||
for (const item of createdList) {
|
||||
if (item == null || item.id == null) continue;
|
||||
state.categories[String(item.id)] = item;
|
||||
}
|
||||
})
|
||||
.addCase(renameCategory.fulfilled, (state, action) => {
|
||||
const { id, name } = action.payload;
|
||||
if (id == null || name == null) return;
|
||||
const key = String(id);
|
||||
const existing = state.categories?.[key];
|
||||
if (existing) {
|
||||
state.categories[key] = { ...existing, name };
|
||||
} else if (state.categories) {
|
||||
state.categories[key] = action.payload;
|
||||
}
|
||||
state.rootArticles = state.rootArticles.map((row) =>
|
||||
row?.categoryId != null && String(row.categoryId) === key
|
||||
? { ...row, name }
|
||||
: row,
|
||||
);
|
||||
})
|
||||
.addCase(reorderCategories.fulfilled, (state, action) => {
|
||||
const { parentId, categoryIds } = action.payload;
|
||||
if (!state.categories) return;
|
||||
const parentKey = String(parentId);
|
||||
const idToSort = new Map(
|
||||
categoryIds.map((id, index) => [String(id), index]),
|
||||
);
|
||||
for (const node of Object.values(state.categories)) {
|
||||
if (
|
||||
node.parentId != null &&
|
||||
String(node.parentId) === parentKey &&
|
||||
idToSort.has(String(node.id))
|
||||
) {
|
||||
state.categories[String(node.id)] = {
|
||||
...node,
|
||||
sort: idToSort.get(String(node.id)),
|
||||
};
|
||||
}
|
||||
}
|
||||
})
|
||||
.addCase(moveCategory.fulfilled, (state, action) => {
|
||||
const moved = action.payload;
|
||||
if (moved == null || state.categories == null) return;
|
||||
const existing = state.categories[String(moved.id)] ?? {};
|
||||
// Der Move-Response enthält nur { id, parentId, sort } — keinen Namen.
|
||||
// parentId/sort werden übernommen, der bestehende Name bleibt erhalten
|
||||
// (das Backend hat ihn beim Move nicht verändert).
|
||||
state.categories[String(moved.id)] = {
|
||||
...existing,
|
||||
parentId: moved.parentId,
|
||||
sort: moved.sort,
|
||||
};
|
||||
})
|
||||
.addCase(createArticle.fulfilled, (state, action) => {
|
||||
const created = action.payload;
|
||||
if (created == null) return;
|
||||
if (String(created.parentId) === String(state.currentCategoryId)) {
|
||||
state.articles = [...state.articles, created];
|
||||
state.articlesTotal = state.articles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
}
|
||||
if (String(created.parentId) === String(state.rootCategoryId)) {
|
||||
state.rootArticles = [...state.rootArticles, created];
|
||||
}
|
||||
})
|
||||
.addCase(createArticles.fulfilled, (state, action) => {
|
||||
const createdList = action.payload;
|
||||
if (!Array.isArray(createdList)) return;
|
||||
const added = createdList.filter((item) => item != null);
|
||||
if (added.length === 0) return;
|
||||
if (added.some((item) => String(item.parentId) === String(state.currentCategoryId))) {
|
||||
state.articles = [
|
||||
...state.articles,
|
||||
...added.filter((item) =>
|
||||
String(item.parentId) === String(state.currentCategoryId),
|
||||
),
|
||||
];
|
||||
state.articlesTotal = state.articles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
}
|
||||
const rootAdded = added.filter((item) =>
|
||||
String(item.parentId) === String(state.rootCategoryId),
|
||||
);
|
||||
if (rootAdded.length > 0) {
|
||||
state.rootArticles = [...state.rootArticles, ...rootAdded];
|
||||
}
|
||||
})
|
||||
.addCase(deleteCategory.fulfilled, (state, action) => {
|
||||
if (!state.categories) return;
|
||||
delete state.categories[String(action.payload)];
|
||||
if (String(state.currentCategoryId) === String(action.payload)) {
|
||||
state.currentCategoryId = state.rootCategoryId;
|
||||
state.articles = state.rootArticles;
|
||||
state.articlesTotal = state.rootArticles.length;
|
||||
state.articlesStatus = 'succeeded';
|
||||
}
|
||||
})
|
||||
.addCase(toggleCategoryPos.fulfilled, (state, action) => {
|
||||
const updated = action.payload;
|
||||
if (updated == null || state.categories == null) return;
|
||||
const key = String(updated.id);
|
||||
const existing = state.categories[key];
|
||||
if (existing) {
|
||||
state.categories[key] = { ...existing, pos: updated.pos };
|
||||
}
|
||||
})
|
||||
.addCase(uploadCategoryImage.fulfilled, (state, action) => {
|
||||
const { id, fullHash, thumbW, thumbH, thumbHash } = action.payload;
|
||||
if (id == null || state.categories == null) return;
|
||||
const key = String(id);
|
||||
const existing = state.categories[key];
|
||||
if (existing) {
|
||||
state.categories[key] = { ...existing, fullHash, thumbW, thumbH, thumbHash };
|
||||
}
|
||||
})
|
||||
.addCase(deleteCategoryImage.fulfilled, (state, action) => {
|
||||
const { id } = action.payload;
|
||||
if (id == null || state.categories == null) return;
|
||||
const key = String(id);
|
||||
const existing = state.categories[key];
|
||||
if (existing) {
|
||||
state.categories[key] = {
|
||||
...existing,
|
||||
fullHash: null,
|
||||
thumbW: null,
|
||||
thumbH: null,
|
||||
thumbHash: null,
|
||||
};
|
||||
}
|
||||
})
|
||||
.addCase(loadCurrentCompany.fulfilled, (state, action) => {
|
||||
const nextCompanyId = action.payload?.id ?? null;
|
||||
if (nextCompanyId != null && nextCompanyId !== state.companyId) {
|
||||
return {
|
||||
...initialState,
|
||||
companyId: nextCompanyId,
|
||||
};
|
||||
}
|
||||
})
|
||||
.addCase(AUTH_LOGGED_OUT, () => initialState);
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
navigateToCategory,
|
||||
navigateBack,
|
||||
resetCategoryState,
|
||||
setRenameMode,
|
||||
removeArticleBySku,
|
||||
patchArticleInLists,
|
||||
patchCategoryPosterminalIds,
|
||||
} = categorySlice.actions;
|
||||
|
||||
export const selectRenameMode = (state) => state.category.renameMode;
|
||||
|
||||
export const selectCategoryMap = (state) => state.category.categories;
|
||||
export const selectCurrentCategoryId = (state) => state.category.currentCategoryId;
|
||||
export const selectCategoryRootId = (state) => state.category.rootCategoryId;
|
||||
export const selectCategoryTreeStatus = (state) => state.category.treeStatus;
|
||||
export const selectCategoryArticles = (state) => state.category.articles;
|
||||
export const selectCategoryArticlesStatus = (state) => state.category.articlesStatus;
|
||||
export const selectCategoryError = (state) => state.category.error;
|
||||
|
||||
export const selectCurrentCategory = (state) => {
|
||||
const id = state.category.currentCategoryId;
|
||||
if (id == null) return null;
|
||||
return state.category.categories?.[String(id)] ?? null;
|
||||
};
|
||||
|
||||
export const selectChildCategories = (state) =>
|
||||
getCategoryChildren(state.category.categories, state.category.currentCategoryId);
|
||||
|
||||
export const selectCategoryBreadcrumbs = (state) =>
|
||||
getCategoryBreadcrumbs(
|
||||
state.category.categories,
|
||||
state.category.currentCategoryId,
|
||||
state.category.rootCategoryId,
|
||||
);
|
||||
|
||||
export const selectCanNavigateBack = (state) => {
|
||||
const { currentCategoryId, rootCategoryId, categories } = state.category;
|
||||
if (currentCategoryId == null || rootCategoryId == null) return false;
|
||||
if (String(currentCategoryId) === String(rootCategoryId)) return false;
|
||||
const parentId = categories?.[String(currentCategoryId)]?.parentId;
|
||||
return parentId != null && parentId !== 0;
|
||||
};
|
||||
|
||||
export default categorySlice.reducer;
|
||||
@@ -1,98 +0,0 @@
|
||||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { company } from '../api';
|
||||
import authAutomat, {
|
||||
AUTH_COMPANY_CHANGED,
|
||||
AUTH_LOGGED_OUT,
|
||||
AUTH_SESSION_ESTABLISHED,
|
||||
} from '../automats/authAutomat';
|
||||
import { normalizeCompany } from '../utils/companyForm';
|
||||
|
||||
export const loadCurrentCompany = createAsyncThunk(
|
||||
'company/loadCurrent',
|
||||
async () => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (!companyId) return null;
|
||||
const data = await company.getById(companyId);
|
||||
return normalizeCompany(data.company);
|
||||
},
|
||||
);
|
||||
|
||||
export const updateCompany = createAsyncThunk(
|
||||
'company/update',
|
||||
async (payload) => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (!companyId) throw new Error('Kein Unternehmen ausgewählt.');
|
||||
await company.update(companyId, payload);
|
||||
const data = await company.getById(companyId);
|
||||
return normalizeCompany(data.company, payload);
|
||||
},
|
||||
);
|
||||
|
||||
const initialState = {
|
||||
current: null,
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
const companySlice = createSlice({
|
||||
name: 'company',
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(loadCurrentCompany.pending, (state) => {
|
||||
state.status = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadCurrentCompany.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.current = action.payload;
|
||||
})
|
||||
.addCase(loadCurrentCompany.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.error.message;
|
||||
})
|
||||
.addCase(updateCompany.pending, (state) => {
|
||||
state.status = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(updateCompany.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.current = action.payload;
|
||||
})
|
||||
.addCase(updateCompany.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.error.message;
|
||||
})
|
||||
.addCase(AUTH_LOGGED_OUT, (state) => {
|
||||
state.current = null;
|
||||
state.status = 'idle';
|
||||
state.error = null;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const selectCurrentCompany = (state) => state.company.current;
|
||||
export const selectCompanyId = (state) => state.company.current?.id ?? null;
|
||||
export const selectCompanyStatus = (state) => state.company.status;
|
||||
export const selectCompanyError = (state) => state.company.error;
|
||||
export const selectCompanyName = (state) => state.company.current?.name;
|
||||
export const selectCompanyIso639 = (state) => state.company.current?.iso639;
|
||||
export const selectCompanyTaxrate = (state) => state.company.current?.taxrate ?? null;
|
||||
export const selectCompanyReducedTaxrate = (state) => state.company.current?.reducedtaxrate ?? null;
|
||||
export const selectCompanyRootCategoryId = (state) => state.company.current?.rootCategoryId ?? null;
|
||||
|
||||
export function companyLoadListener(listenerMiddleware) {
|
||||
listenerMiddleware.startListening({
|
||||
matcher: (action) =>
|
||||
action.type === AUTH_SESSION_ESTABLISHED || action.type === AUTH_COMPANY_CHANGED,
|
||||
effect: async (_action, api) => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (companyId) {
|
||||
api.dispatch(loadCurrentCompany());
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default companySlice.reducer;
|
||||
@@ -1,55 +0,0 @@
|
||||
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
|
||||
import { setAuthEventDispatcher } from '../automats/authAutomat';
|
||||
import brandReducer, { brandLoadListener } from './brandSlice';
|
||||
import categoryReducer from './categorySlice';
|
||||
import companyReducer, { companyLoadListener } from './companySlice';
|
||||
import posterminalReducer, { posterminalLoadListener } from './posterminalSlice';
|
||||
import unitReducer, { unitLoadListener } from './unitSlice';
|
||||
|
||||
const listenerMiddleware = createListenerMiddleware();
|
||||
companyLoadListener(listenerMiddleware);
|
||||
unitLoadListener(listenerMiddleware);
|
||||
brandLoadListener(listenerMiddleware);
|
||||
posterminalLoadListener(listenerMiddleware);
|
||||
|
||||
function reduxDevLogger() {
|
||||
return (storeApi) => (next) => (action) => {
|
||||
if (
|
||||
!import.meta.env.DEV ||
|
||||
(!action.type?.startsWith('auth/') &&
|
||||
!action.type?.startsWith('company/') &&
|
||||
!action.type?.startsWith('category/') &&
|
||||
!action.type?.startsWith('brand/') &&
|
||||
!action.type?.startsWith('posterminal/') &&
|
||||
!action.type?.startsWith('unit/'))
|
||||
) {
|
||||
return next(action);
|
||||
}
|
||||
const result = next(action);
|
||||
const after = storeApi.getState();
|
||||
console.log('[redux]', action.type, {
|
||||
payload: action.payload,
|
||||
company: after.company.current,
|
||||
brands: after.brand.brands.length,
|
||||
posterminals: after.posterminal.terminals.length,
|
||||
units: after.unit.units.length,
|
||||
});
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
company: companyReducer,
|
||||
category: categoryReducer,
|
||||
brand: brandReducer,
|
||||
posterminal: posterminalReducer,
|
||||
unit: unitReducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware()
|
||||
.concat(listenerMiddleware.middleware)
|
||||
.concat(import.meta.env.DEV ? reduxDevLogger() : []),
|
||||
});
|
||||
|
||||
setAuthEventDispatcher(store.dispatch);
|
||||
@@ -1,267 +0,0 @@
|
||||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { posterminal } from '../api';
|
||||
import authAutomat, {
|
||||
AUTH_COMPANY_CHANGED,
|
||||
AUTH_LOGGED_OUT,
|
||||
AUTH_SESSION_ESTABLISHED,
|
||||
} from '../automats/authAutomat';
|
||||
import { requireArray, requireDefined, requireObject } from '../utils/apiShape';
|
||||
import { catchBackendError, resolveBackendError } from '../utils/backendError';
|
||||
import { loadCurrentCompany } from './companySlice';
|
||||
|
||||
/**
|
||||
* Load all posterminals for the selected company.
|
||||
* GET /api/posterminal → { posterminals: [...] }
|
||||
*/
|
||||
export const loadPosterminals = createAsyncThunk(
|
||||
'posterminal/load',
|
||||
async (_, { rejectWithValue, getState }) => {
|
||||
try {
|
||||
const companyId = getState().company.current?.id;
|
||||
requireDefined(companyId, 'company.id');
|
||||
const data = await posterminal.list();
|
||||
requireObject(data, 'GET /api/posterminal');
|
||||
const list = requireArray(data.posterminals, 'posterminals');
|
||||
return { companyId, terminals: list };
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Create a new posterminal.
|
||||
* PUT /api/posterminal → { posterminal: { id, name, token, pairingpin } }
|
||||
*/
|
||||
export const createPosterminal = createAsyncThunk(
|
||||
'posterminal/create',
|
||||
async ({ name }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await posterminal.create({ name });
|
||||
requireObject(data, 'PUT /api/posterminal');
|
||||
requireObject(data.posterminal, 'posterminal');
|
||||
requireDefined(data.posterminal.id, 'posterminal.id');
|
||||
return data.posterminal;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Delete a posterminal.
|
||||
* DELETE /api/posterminal/:id → 204
|
||||
*/
|
||||
export const deletePosterminal = createAsyncThunk(
|
||||
'posterminal/delete',
|
||||
async ({ terminalId }, { rejectWithValue }) => {
|
||||
try {
|
||||
await posterminal.delete(terminalId);
|
||||
return terminalId;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Enable all categories on a terminal.
|
||||
* PUT /api/posterminal/:id/all → { id, categoryIds }
|
||||
*/
|
||||
export const enableAllTerminalCategories = createAsyncThunk(
|
||||
'posterminal/enableAll',
|
||||
async ({ terminalId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await posterminal.enableAllCategories(terminalId);
|
||||
requireObject(data, 'PUT /api/posterminal/:id/all');
|
||||
return data;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Disable all categories on a terminal.
|
||||
* DELETE /api/posterminal/:id/all → { id, categoryIds }
|
||||
*/
|
||||
export const disableAllTerminalCategories = createAsyncThunk(
|
||||
'posterminal/disableAll',
|
||||
async ({ terminalId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await posterminal.disableAllCategories(terminalId);
|
||||
requireObject(data, 'DELETE /api/posterminal/:id/all');
|
||||
return data;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Enable a specific category on a terminal.
|
||||
* PUT /api/posterminal/:id/category/:categoryId → { id, categoryIds }
|
||||
*/
|
||||
export const enableTerminalCategory = createAsyncThunk(
|
||||
'posterminal/enableCategory',
|
||||
async ({ terminalId, categoryId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await posterminal.enableCategory(terminalId, categoryId);
|
||||
requireObject(data, 'PUT /api/posterminal/:id/category/:categoryId');
|
||||
return data;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Disable a specific category on a terminal.
|
||||
* DELETE /api/posterminal/:id/category/:categoryId → { id, categoryIds }
|
||||
*/
|
||||
export const disableTerminalCategory = createAsyncThunk(
|
||||
'posterminal/disableCategory',
|
||||
async ({ terminalId, categoryId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const data = await posterminal.disableCategory(terminalId, categoryId);
|
||||
requireObject(data, 'DELETE /api/posterminal/:id/category/:categoryId');
|
||||
return data;
|
||||
} catch (err) {
|
||||
return catchBackendError(rejectWithValue)(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const initialState = {
|
||||
companyId: null,
|
||||
terminals: [],
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
const posterminalSlice = createSlice({
|
||||
name: 'posterminal',
|
||||
initialState,
|
||||
reducers: {
|
||||
resetPosterminalState() {
|
||||
return initialState;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// Load
|
||||
.addCase(loadPosterminals.pending, (state) => {
|
||||
state.status = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadPosterminals.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.companyId = action.payload.companyId;
|
||||
state.terminals = action.payload.terminals;
|
||||
})
|
||||
.addCase(loadPosterminals.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Create
|
||||
.addCase(createPosterminal.pending, (state) => {
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(createPosterminal.fulfilled, (state, action) => {
|
||||
state.terminals.push(action.payload);
|
||||
})
|
||||
.addCase(createPosterminal.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Delete
|
||||
.addCase(deletePosterminal.fulfilled, (state, action) => {
|
||||
state.terminals = state.terminals.filter(
|
||||
(t) => t.id !== action.payload,
|
||||
);
|
||||
})
|
||||
.addCase(deletePosterminal.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Enable all categories
|
||||
.addCase(enableAllTerminalCategories.fulfilled, (state, action) => {
|
||||
const { id, categoryIds } = action.payload;
|
||||
const terminal = state.terminals.find((t) => t.id === id);
|
||||
if (terminal) {
|
||||
terminal.categoryIds = categoryIds;
|
||||
}
|
||||
})
|
||||
.addCase(enableAllTerminalCategories.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Disable all categories
|
||||
.addCase(disableAllTerminalCategories.fulfilled, (state, action) => {
|
||||
const { id, categoryIds } = action.payload;
|
||||
const terminal = state.terminals.find((t) => t.id === id);
|
||||
if (terminal) {
|
||||
terminal.categoryIds = categoryIds;
|
||||
}
|
||||
})
|
||||
.addCase(disableAllTerminalCategories.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Enable single category
|
||||
.addCase(enableTerminalCategory.fulfilled, (state, action) => {
|
||||
const { id, categoryIds } = action.payload;
|
||||
const terminal = state.terminals.find((t) => t.id === id);
|
||||
if (terminal) {
|
||||
terminal.categoryIds = categoryIds;
|
||||
}
|
||||
})
|
||||
.addCase(enableTerminalCategory.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Disable single category
|
||||
.addCase(disableTerminalCategory.fulfilled, (state, action) => {
|
||||
const { id, categoryIds } = action.payload;
|
||||
const terminal = state.terminals.find((t) => t.id === id);
|
||||
if (terminal) {
|
||||
terminal.categoryIds = categoryIds;
|
||||
}
|
||||
})
|
||||
.addCase(disableTerminalCategory.rejected, (state, action) => {
|
||||
state.error = resolveBackendError(action);
|
||||
})
|
||||
// Reset on company change
|
||||
.addCase(loadCurrentCompany.fulfilled, (state, action) => {
|
||||
const nextCompanyId = action.payload?.id ?? null;
|
||||
if (nextCompanyId != null && nextCompanyId !== state.companyId) {
|
||||
return { ...initialState, companyId: nextCompanyId, status: 'idle' };
|
||||
}
|
||||
})
|
||||
// Reset on logout
|
||||
.addCase(AUTH_LOGGED_OUT, () => initialState);
|
||||
},
|
||||
});
|
||||
|
||||
export const { resetPosterminalState } = posterminalSlice.actions;
|
||||
|
||||
/**
|
||||
* Auto-load posterminals when the session/company is established.
|
||||
* Mirrors brandLoadListener / unitLoadListener pattern.
|
||||
*/
|
||||
export function posterminalLoadListener(listenerMiddleware) {
|
||||
listenerMiddleware.startListening({
|
||||
matcher: (action) =>
|
||||
action.type === AUTH_SESSION_ESTABLISHED || action.type === AUTH_COMPANY_CHANGED,
|
||||
effect: async (action, api) => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
console.log('[posterminalLoadListener]', action.type, { companyId });
|
||||
if (companyId) {
|
||||
api.dispatch(loadPosterminals());
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Selectors
|
||||
export const selectPosterminals = (state) => state.posterminal.terminals;
|
||||
export const selectPosterminalStatus = (state) => state.posterminal.status;
|
||||
export const selectPosterminalError = (state) => state.posterminal.error;
|
||||
export const selectHasPosterminals = (state) => state.posterminal.terminals.length > 0;
|
||||
|
||||
export default posterminalSlice.reducer;
|
||||
@@ -1,92 +0,0 @@
|
||||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { unit as unitApi } from '../api';
|
||||
import authAutomat, {
|
||||
AUTH_COMPANY_CHANGED,
|
||||
AUTH_LOGGED_OUT,
|
||||
AUTH_SESSION_ESTABLISHED,
|
||||
} from '../automats/authAutomat';
|
||||
import { requireArray, requireObject } from '../utils/apiShape';
|
||||
|
||||
function sortUnits(units) {
|
||||
return [...units].sort((a, b) => {
|
||||
const left = a.symbol ?? a.si ?? '';
|
||||
const right = b.symbol ?? b.si ?? '';
|
||||
return String(left).localeCompare(String(right), 'de');
|
||||
});
|
||||
}
|
||||
|
||||
export const loadUnits = createAsyncThunk('unit/load', async () => {
|
||||
const res = await unitApi.list();
|
||||
requireObject(res, 'GET /api/unit');
|
||||
return requireArray(res.units, 'units');
|
||||
});
|
||||
|
||||
export const upsertUnit = createAsyncThunk('unit/upsert', async (body) => {
|
||||
const res = await unitApi.upsert(body);
|
||||
requireObject(res, 'PUT /api/unit');
|
||||
requireObject(res.unit, 'unit');
|
||||
return res.unit;
|
||||
});
|
||||
|
||||
export const deleteUnit = createAsyncThunk('unit/delete', async (si) => {
|
||||
await unitApi.delete(si);
|
||||
return si;
|
||||
});
|
||||
|
||||
const initialState = {
|
||||
units: [],
|
||||
status: 'idle',
|
||||
error: null,
|
||||
};
|
||||
|
||||
const unitSlice = createSlice({
|
||||
name: 'unit',
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(loadUnits.pending, (state) => {
|
||||
state.status = 'loading';
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(loadUnits.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.units = sortUnits(action.payload);
|
||||
})
|
||||
.addCase(loadUnits.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.error.message;
|
||||
})
|
||||
.addCase(upsertUnit.fulfilled, (state, action) => {
|
||||
const row = action.payload;
|
||||
state.units = sortUnits([
|
||||
...state.units.filter((u) => u.si !== row.si),
|
||||
row,
|
||||
]);
|
||||
})
|
||||
.addCase(deleteUnit.fulfilled, (state, action) => {
|
||||
state.units = state.units.filter((u) => u.si !== action.payload);
|
||||
})
|
||||
.addCase(AUTH_COMPANY_CHANGED, () => initialState)
|
||||
.addCase(AUTH_LOGGED_OUT, () => initialState);
|
||||
},
|
||||
});
|
||||
|
||||
export const selectUnits = (state) => state.unit.units;
|
||||
export const selectUnitsStatus = (state) => state.unit.status;
|
||||
export const selectUnitsError = (state) => state.unit.error;
|
||||
|
||||
export function unitLoadListener(listenerMiddleware) {
|
||||
listenerMiddleware.startListening({
|
||||
matcher: (action) =>
|
||||
action.type === AUTH_SESSION_ESTABLISHED || action.type === AUTH_COMPANY_CHANGED,
|
||||
effect: async (_action, api) => {
|
||||
const companyId = authAutomat.state.user?.selectedCompanyId;
|
||||
if (companyId) {
|
||||
api.dispatch(loadUnits());
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default unitSlice.reducer;
|
||||
111
src/utils/categoryUtils.js
Normal file
111
src/utils/categoryUtils.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Pure category tree helper functions.
|
||||
* These operate on plain category maps and have no side-effects.
|
||||
*/
|
||||
|
||||
export const ROOT_CATEGORY_NAME = 'Home';
|
||||
|
||||
/**
|
||||
* @param {object} item
|
||||
* @returns {object}
|
||||
*/
|
||||
export function normalizeCategoryNode(item) {
|
||||
return {
|
||||
...item,
|
||||
id: item.id,
|
||||
parentId: item.parentId,
|
||||
name: item.name == null ? null : String(item.name).trim() || null,
|
||||
posterminalIds: Array.isArray(item.posterminalIds) ? item.posterminalIds : [],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse the raw GET /api/category/tree response body into normalized state.
|
||||
* @param {object} data
|
||||
* @param {number|string|null} companyRootCategoryId
|
||||
*/
|
||||
export function parseCategoryTreeResponse(data, companyRootCategoryId) {
|
||||
const list = Array.isArray(data.tree) ? data.tree : [];
|
||||
const rootCategoryId = data.rootCategoryId != null ? data.rootCategoryId : companyRootCategoryId;
|
||||
|
||||
const categories = Object.fromEntries(
|
||||
list.map((item) => [String(item.id), normalizeCategoryNode(item)]),
|
||||
);
|
||||
|
||||
return {
|
||||
rootCategoryId,
|
||||
categories,
|
||||
rootArticles: Array.isArray(data.articles) ? data.articles : [],
|
||||
languageId: data.languageId,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Display name for a category node (root → "Home").
|
||||
*/
|
||||
export function categoryDisplayName(name, categoryId, rootCategoryId) {
|
||||
if (rootCategoryId != null && String(categoryId) === String(rootCategoryId)) {
|
||||
return ROOT_CATEGORY_NAME;
|
||||
}
|
||||
return name?.trim() || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* URL slug for a category node (root → "Home").
|
||||
*/
|
||||
export function categorySlug(node, rootCategoryId) {
|
||||
if (rootCategoryId != null && String(node.id) === String(rootCategoryId)) {
|
||||
return ROOT_CATEGORY_NAME;
|
||||
}
|
||||
return node.slug || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Direct children of `parentId`, sorted by `sort` then `id`.
|
||||
*/
|
||||
export function getCategoryChildren(categories, parentId) {
|
||||
if (!categories) return [];
|
||||
const parentKey = String(parentId);
|
||||
return Object.values(categories)
|
||||
.filter((item) => item.parentId != null && String(item.parentId) === parentKey)
|
||||
.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0) || a.id - b.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumb trail from root to `currentCategoryId`.
|
||||
*/
|
||||
export function getCategoryBreadcrumbs(categories, currentCategoryId, rootCategoryId) {
|
||||
if (!categories || currentCategoryId == null) return [];
|
||||
|
||||
const crumbs = [];
|
||||
const seen = new Set();
|
||||
let id = currentCategoryId;
|
||||
|
||||
while (id != null && !seen.has(String(id))) {
|
||||
seen.add(String(id));
|
||||
const node = categories[String(id)];
|
||||
if (!node) break;
|
||||
|
||||
crumbs.unshift({
|
||||
id: node.id,
|
||||
name: categoryDisplayName(node.name, node.id, rootCategoryId),
|
||||
slug: categorySlug(node, rootCategoryId),
|
||||
});
|
||||
|
||||
const parentId = node.parentId;
|
||||
if (parentId == null || parentId === 0) break;
|
||||
if (String(parentId) === String(id)) break;
|
||||
id = parentId;
|
||||
}
|
||||
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map of category.id → category node from a raw tree response.
|
||||
* @param {object} data
|
||||
* @param {number|string|null} companyRootCategoryId
|
||||
*/
|
||||
export function normalizeCategoryMap(data, companyRootCategoryId) {
|
||||
return parseCategoryTreeResponse(data, companyRootCategoryId).categories;
|
||||
}
|
||||
144
src/utils/textThumbnail.js
Normal file
144
src/utils/textThumbnail.js
Normal file
@@ -0,0 +1,144 @@
|
||||
let encodeAvif = null;
|
||||
|
||||
async function getAvifEncoder() {
|
||||
if (!encodeAvif) {
|
||||
const { default: encode } = await import('@jsquash/avif/encode');
|
||||
encodeAvif = encode;
|
||||
}
|
||||
return encodeAvif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts an ArrayBuffer to a base64 string safely without stack overflow.
|
||||
* @param {ArrayBuffer} buffer
|
||||
* @returns {string}
|
||||
*/
|
||||
function arrayBufferToBase64(buffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let binary = '';
|
||||
const chunkSize = 8192;
|
||||
for (let i = 0; i < bytes.length; i += chunkSize) {
|
||||
binary += String.fromCharCode.apply(
|
||||
null,
|
||||
bytes.subarray(i, i + chunkSize),
|
||||
);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders text onto a 2D canvas styled like a document page thumbnail.
|
||||
* @param {string} text
|
||||
* @param {number} [width=200]
|
||||
* @param {number} [height=280]
|
||||
* @returns {HTMLCanvasElement}
|
||||
*/
|
||||
export function renderTextToCanvas(text = '', width = 200, height = 280) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return canvas;
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// Subtle border
|
||||
ctx.strokeStyle = '#e2e8f0';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(0.5, 0.5, width - 1, height - 1);
|
||||
|
||||
// Top header accent line
|
||||
ctx.fillStyle = '#cbd5e1';
|
||||
ctx.fillRect(10, 8, 30, 2);
|
||||
|
||||
// Render text lines
|
||||
ctx.fillStyle = '#334155';
|
||||
ctx.font = '8px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
|
||||
|
||||
const paddingX = 10;
|
||||
const startY = 22;
|
||||
const lineHeight = 11;
|
||||
const maxLines = Math.floor((height - startY - 8) / lineHeight);
|
||||
const maxWidth = width - paddingX * 2;
|
||||
|
||||
const rawLines = String(text || '').split(/\r?\n/);
|
||||
const formattedLines = [];
|
||||
|
||||
for (const line of rawLines) {
|
||||
if (formattedLines.length >= maxLines) break;
|
||||
const clean = line.replace(/\t/g, ' ');
|
||||
if (!clean.trim()) {
|
||||
formattedLines.push('');
|
||||
continue;
|
||||
}
|
||||
|
||||
// Wrap or clip long lines
|
||||
let current = '';
|
||||
for (let i = 0; i < clean.length; i++) {
|
||||
const candidate = current + clean[i];
|
||||
if (ctx.measureText(candidate).width > maxWidth) {
|
||||
formattedLines.push(current);
|
||||
current = clean[i];
|
||||
if (formattedLines.length >= maxLines) break;
|
||||
} else {
|
||||
current = candidate;
|
||||
}
|
||||
}
|
||||
if (current && formattedLines.length < maxLines) {
|
||||
formattedLines.push(current);
|
||||
}
|
||||
}
|
||||
|
||||
for (let idx = 0; idx < formattedLines.length; idx++) {
|
||||
const y = startY + idx * lineHeight;
|
||||
ctx.fillText(formattedLines[idx], paddingX, y);
|
||||
}
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates an AVIF thumbnail data URL for text content.
|
||||
* @param {string|File|Blob} textSource
|
||||
* @param {{ width?: number, height?: number, quality?: number }} [options]
|
||||
* @returns {Promise<string|null>} Base64 Data URL (data:image/avif;base64,... or data:image/png;base64,...)
|
||||
*/
|
||||
export async function generateTextThumbnail(textSource, { width = 200, height = 280, quality = 70 } = {}) {
|
||||
let text = '';
|
||||
if (textSource instanceof Blob) {
|
||||
text = await textSource.text();
|
||||
} else if (typeof textSource === 'string') {
|
||||
text = textSource;
|
||||
} else if (textSource != null) {
|
||||
text = String(textSource);
|
||||
}
|
||||
|
||||
if (typeof document === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const canvas = renderTextToCanvas(text, width, height);
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return null;
|
||||
|
||||
try {
|
||||
const imageData = ctx.getImageData(0, 0, width, height);
|
||||
const encoder = await getAvifEncoder();
|
||||
const avifBuffer = await encoder(imageData, {
|
||||
quality,
|
||||
speed: 9,
|
||||
});
|
||||
const base64 = arrayBufferToBase64(avifBuffer);
|
||||
return `data:image/avif;base64,${base64}`;
|
||||
} catch (err) {
|
||||
console.warn('generateTextThumbnail: @jsquash/avif encode failed, falling back to PNG:', err);
|
||||
try {
|
||||
return canvas.toDataURL('image/png');
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user