From a0a40b243a6b8c1ad44289642d7c99fcfa031adb Mon Sep 17 00:00:00 2001 From: seb Date: Mon, 12 Oct 2026 18:10:26 +0200 Subject: [PATCH] u --- .agents/skills/backend/SKILL.md | 302 +++---- src/components/PicturesDialog.jsx | 831 ++++++++++++++++++ .../article/ArticlePhotosDialog.jsx | 381 +------- src/components/brand/ArtikelMarke.jsx | 10 +- .../brand/BrandLogoPreviewDialog.jsx | 173 +--- src/components/chat/ChatDrawer.jsx | 66 +- 6 files changed, 1065 insertions(+), 698 deletions(-) create mode 100644 src/components/PicturesDialog.jsx diff --git a/.agents/skills/backend/SKILL.md b/.agents/skills/backend/SKILL.md index d7a720b..12840a8 100644 --- a/.agents/skills/backend/SKILL.md +++ b/.agents/skills/backend/SKILL.md @@ -7,7 +7,7 @@ description: >- # Dash API Routes Overview (All) -Overview of all 209 API endpoints across all modules. +Overview of all 210 API endpoints across all modules. ### Notation @@ -17,50 +17,53 @@ Params: path values first, then `query:` and `body:` (`body?` = optional body). ### Reusable types - `T1` = `{ article: T2 }` -- `T2` = `{ id: int, sku: str, name: str, slug: str, desc: str|null, seo: str|null, track_stock: bool, unitamount: num|null, weight: num|null, unit: T31, brand: T28|null, categoryIds: int[], photos: T26[], eans: str[], prices: T37[], suppliers: T12[] }` -- `T3` = `{ delivery: T4 }` -- `T4` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T21[], files: T9[], externalNumber?: str|null, createdAt?: str, ledger?: T41 }` -- `T5` = `{ labeltemplate: T6 }` -- `T6` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T17, thumb?: str|null }` -- `T7` = `{ order: T11 }` -- `T8` = `{ quote: T11 }` -- `T9` = `{ id: int, manifestId: int, fileId: int, sort: int, hash: str, mimetype: str, name: str, size: int, created?: str, modified?: str, thumbavif?: str|null, thumbx?: int|null, thumby?: int|null, meta?: { [k]: str }|null }` -- `T10` = `{ id: int, name: str, pairingpin?: str|null, token?: str|null, pairedAt?: str|null, clientserial?: str|null, rootCategoryId?: int|null, syncRootArticles?: bool, lastseenAt?: str|null, updatedAt?: str|null, categoryIds?: int[] }` -- `T11` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T21[], createdAt?: str }` -- `T12` = `{ id: int, articleId: int, entityId: int, pu: num, sort: int, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }` -- `T13` = `{ id: int, entityId: int, addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }` -- `T14` = `{ ledger: T15[] }` -- `T15` = `{ id: int, manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str, hash_version: int, prev_hash?: str, sku?: str|null, created_at?: str }` -- `T16` = `{ id: int, name: str, sort: int, exclusive: bool, values: T32[], articleCount?: int }` -- `T17` = `{ objects: T22[] }` -- `T18` = `{ objects: T23[] }` -- `T19` = `{ printer: T24 }` -- `T20` = `{ entity: T27 }` -- `T21` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }` -- `T22` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }` -- `T23` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }` -- `T24` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }` -- `T25` = `{ amount: num, net: num, taxrate: num, sku?: str|null, name?: str|null, pu?: num, rebate?: num, comment?: str|null }` -- `T26` = `{ sort: int, fullHash: str, fullW: int, fullH: int, fullSize: int, thumbW: int, thumbH: int, thumbHash: str }` -- `T27` = `{ id: int, customergroupId: int, firstName: str|null, name: str, number: str|null, createdAt: str, updatedAt: str }` -- `T28` = `{ name: str, id?: int|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }` -- `T29` = `{ id: int, companyuser_id: int, provider: str, model: str, created_at: str, updated_at: str, state: str }` -- `T30` = `{ article: T35 }` -- `T31` = `{ si: str, basesi: str, basesifactor: num, symbol?: str|null, name?: str|null }` -- `T32` = `{ id: int, attributeId: int, value: str, sort: int, articleCount?: int }` -- `T33` = `{ id: int, name: str, sort: int, exclusive: bool, articleCount?: int }` -- `T34` = `{ id: int, iso639: str, name: str, taxrate: num, reducedtaxrate: num }` -- `T35` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }` -- `T36` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }` -- `T37` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }` -- `T38` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }` -- `T39` = `{ id: int, entityId: int, contactType: str, contact: str }` -- `T40` = `{ id: int, name: str, createdAt: str, updatedAt: str }` -- `T41` = `{ totalPositions: int, completelyOnLedgerPositions: int }` -- `T42` = `{ warehouse: T44 }` -- `T43` = `{ net: num, taxId: int, taxRate?: num|null }` -- `T44` = `{ id: int, name: str, sort: int }` -- `T45` = `{ id: int, categoryIds: int[] }` +- `T2` = `{ id: int, sku: str, name: str, slug: str, desc: str|null, seo: str|null, track_stock: bool, unitamount: num|null, weight: num|null, unit: T32, brand: T30|null, categoryIds: int[], photos: T28[], eans: str[], prices: T40[], suppliers: T13[] }` +- `T3` = `{ order: T4 }` +- `T4` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T23[], createdAt?: str, shipping?: T39|null, shippings?: T39[], payment?: T35|null, payments?: T35[], paid?: bool, delivered?: bool }` +- `T5` = `{ delivery: T6 }` +- `T6` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T23[], files: T10[], externalNumber?: str|null, createdAt?: str, ledger?: T44 }` +- `T7` = `{ labeltemplate: T8 }` +- `T8` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T19, thumb?: str|null }` +- `T9` = `{ quote: T12 }` +- `T10` = `{ id: int, manifestId: int, fileId: int, sort: int, hash: str, mimetype: str, name: str, size: int, created?: str, modified?: str, thumbavif?: str|null, thumbx?: int|null, thumby?: int|null, meta?: { [k]: str }|null }` +- `T11` = `{ id: int, name: str, pairingpin?: str|null, token?: str|null, pairedAt?: str|null, clientserial?: str|null, rootCategoryId?: int|null, syncRootArticles?: bool, lastseenAt?: str|null, updatedAt?: str|null, categoryIds?: int[] }` +- `T12` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T23[], createdAt?: str }` +- `T13` = `{ id: int, articleId: int, entityId: int, pu: num, sort: int, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T46|null }` +- `T14` = `{ id: int, entityId: int, addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }` +- `T15` = `{ ledger: T16[] }` +- `T16` = `{ id: int, manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str, hash_version: int, prev_hash?: str, sku?: str|null, created_at?: str }` +- `T17` = `{ id: int, name: str, sort: int, exclusive: bool, values: T33[], articleCount?: int }` +- `T18` = `{ id: int, companyuser_id: int, provider: str, model: str, created_at: str, updated_at: str, state: str, started_by?: integer,null, first_message?: string,null }` +- `T19` = `{ objects: T24[] }` +- `T20` = `{ objects: T25[] }` +- `T21` = `{ printer: T26 }` +- `T22` = `{ entity: T29 }` +- `T23` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }` +- `T24` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }` +- `T25` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }` +- `T26` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }` +- `T27` = `{ amount: num, net: num, taxrate: num, sku?: str|null, name?: str|null, pu?: num, rebate?: num, comment?: str|null }` +- `T28` = `{ sort: int, fullHash: str, fullW: int, fullH: int, fullSize: int, thumbW: int, thumbH: int, thumbHash: str }` +- `T29` = `{ id: int, customergroupId: int, firstName: str|null, name: str, number: str|null, createdAt: str, updatedAt: str }` +- `T30` = `{ name: str, id?: int|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }` +- `T31` = `{ article: T37 }` +- `T32` = `{ si: str, basesi: str, basesifactor: num, symbol?: str|null, name?: str|null }` +- `T33` = `{ id: int, attributeId: int, value: str, sort: int, articleCount?: int }` +- `T34` = `{ id: int, name: str, sort: int, exclusive: bool, articleCount?: int }` +- `T35` = `{ id: int, accountId: int, manifestId: int, type: str, amount: num }` +- `T36` = `{ id: int, iso639: str, name: str, taxrate: num, reducedtaxrate: num }` +- `T37` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }` +- `T38` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }` +- `T39` = `{ id: int, manifestId: int, number: str, type: str, state: str }` +- `T40` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }` +- `T41` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }` +- `T42` = `{ id: int, entityId: int, contactType: str, contact: str }` +- `T43` = `{ id: int, name: str, createdAt: str, updatedAt: str }` +- `T44` = `{ totalPositions: int, completelyOnLedgerPositions: int }` +- `T45` = `{ warehouse: T47 }` +- `T46` = `{ net: num, taxId: int, taxRate?: num|null }` +- `T47` = `{ id: int, name: str, sort: int }` +- `T48` = `{ id: int, categoryIds: int[] }` ### Routes @@ -81,7 +84,7 @@ _none_ #### Create article in category — `POST /article` - Params: `body: { categoryId: int, name: str, desc?: str, seo?: str, track_stock?: bool }` -- Returns: `201 T30` +- Returns: `201 T31` #### Export articles as ZIP — `GET /article/export.zip` - Params: `query: categoryId?: int` - Returns: `200 zip` @@ -117,10 +120,10 @@ _none_ - Returns: `200 { children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }` #### Create and attach a new child article to a parent article — `POST /article/{sku}/children` - Params: `sku: str, body: { attributeValueId?: int, value?: str, name?: str }` -- Returns: `201 T30` +- Returns: `201 T31` #### Attach an existing article as a child to a parent article — `PUT /article/{sku}/children` - Params: `sku: str, body: { sku: str, attributeValueId?: int, value?: str, reparent?: bool }` -- Returns: `200 { article: T35, children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }` +- Returns: `200 { article: T37, children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }` #### Remove a child article from a parent article — `DELETE /article/{sku}/children/{childSku}` - Params: `sku: str, childSku: str, query: deleteArticle?: bool` - Returns: `200 { success: bool, deleted: bool }` @@ -147,7 +150,7 @@ _none_ - Returns: `200 { options: { id: int, articleId: int, sku: str, name: str, count: int, sort: int, mandated: bool }[] }` #### Toggle parent mode for an article — `POST /article/{sku}/parent` - Params: `sku: str, body: { isParent: bool, attributeNameId?: int }` -- Returns: `200 T30` +- Returns: `200 T31` #### Replace POS prices by SKU (net > gross; price=net, tax=taxRate %) — `PUT /article/{sku}/prices` - Params: `sku: str, body: { prices: { net?: num, gross?: num, price?: num, taxRate?: num, tax?: num, minmultiplier?: num }[] }` - Returns: `200 T1` @@ -165,10 +168,10 @@ _none_ - Returns: `200 { ok: bool }` #### List article suppliers — `GET /article/{sku}/supplier` - Params: `sku: str` -- Returns: `200 { suppliers: T12[] }` +- Returns: `200 { suppliers: T13[] }` #### Assign supplier to article — `POST /article/{sku}/supplier` - Params: `sku: str, body: { entityId: int, sku?: str|null, pu?: num, stock?: num|null, sort?: int|null, netPrice?: num|null, taxId?: int|null, taxRate?: num|null }` -- Returns: `201 { supplier: T12 }` +- Returns: `201 { supplier: T13 }` #### Reorder article suppliers — `PUT /article/{sku}/supplier/order` - Params: `sku: str, body: { ids: int[] }` - Returns: `200 { ids: int[] }` @@ -177,7 +180,7 @@ _none_ - Returns: `204 void` #### Update article supplier assignment — `PATCH /article/{sku}/supplier/{id}` - Params: `sku: str, id: int, body: { sku?: str|null, pu?: num, stock?: num|null, sort?: int, netPrice?: num|null, taxId?: int|null, taxRate?: num|null }` -- Returns: `200 { supplier: T12 }` +- Returns: `200 { supplier: T13 }` #### Set article track_stock flag by SKU — `PUT /article/{sku}/track_stock` - Params: `sku: str, body: { track_stock: bool }` - Returns: `200 T1` @@ -189,19 +192,19 @@ _none_ #### List attribute names — `GET /attributename` _none_ -- Returns: `200 { attributenames: T16[] }` +- Returns: `200 { attributenames: T17[] }` #### Create attribute name — `POST /attributename` - Params: `body: { name: str, sort?: int, exclusive?: bool }` -- Returns: `201 { attributename: T16 }` +- Returns: `201 { attributename: T17 }` #### Reorder attribute names — `PUT /attributename/order` - Params: `body: { attributenameIds: int[] }` - Returns: `200 { ok: bool }` #### List values for an attribute — `GET /attributename/{attributeId}/value` - Params: `attributeId: int` -- Returns: `200 { values: T32[] }` +- Returns: `200 { values: T33[] }` #### Create value for an attribute — `POST /attributename/{attributeId}/value` - Params: `attributeId: int, body: { value: str, sort?: int }` -- Returns: `201 { attributevalue: T32 }` +- Returns: `201 { attributevalue: T33 }` #### Reorder values of an attribute — `PUT /attributename/{attributeId}/value/order` - Params: `attributeId: int, body: { attributevalueIds: int[] }` - Returns: `200 { ok: bool }` @@ -210,7 +213,7 @@ _none_ - Returns: `200 { ok: bool }` #### Update attribute name — `PATCH /attributename/{id}` - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }` -- Returns: `200 { attributename: T16 }` +- Returns: `200 { attributename: T17 }` ### Section: /attributevalue @@ -219,28 +222,28 @@ _none_ - Returns: `200 { ok: bool }` #### Update attribute value — `PATCH /attributevalue/{id}` - Params: `id: int, body: { value?: str, sort?: int }` -- Returns: `200 { attributevalue: T32 }` +- Returns: `200 { attributevalue: T33 }` #### Delete attribute value image — `DELETE /attributevalue/{id}/image` - Params: `id: int` -- Returns: `200 { attributevalue: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T38[] } }` +- Returns: `200 { attributevalue: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T41[] } }` #### Add or replace attribute value image — `POST /attributevalue/{id}/image` - Params: `id: int, image/avif` -- Returns: `201 { attributevalue: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T38[] } }` +- Returns: `201 { attributevalue: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T41[] } }` ### Section: /auth #### Login with Google ID token — `POST /auth/login` - Params: `body: { idToken: str }` -- Returns: `200 { message: str, user: T36 }` +- Returns: `200 { message: str, user: T38 }` #### Logout — `POST /auth/logout` _none_ - Returns: `200 { message: str }` #### Current user — `GET /auth/me` _none_ -- Returns: `200 { user: T36, googleClientId: str }` +- Returns: `200 { user: T38, googleClientId: str }` #### Set selected company — `PUT /auth/selected-company` - Params: `body: { companyId: int }` -- Returns: `200 { user: T36 }` +- Returns: `200 { user: T38 }` ### Section: /brand @@ -249,7 +252,7 @@ _none_ - Returns: `200 { brands: { id: int, name: str, articleCount: int, pics: { fullHash: str, thumbW: int, thumbH: int, thumbHash: str, smallThumbW?: int|null, smallThumbH?: int|null, smallThumbBinary?: str|null }[], gsprpinfo?: str|null }[], total: int, offset: int, limit: int }` #### Create brand — `POST /brand` - Params: `body: { name: str, gsprpinfo?: str }` -- Returns: `201 { brand: { id: int, name: str, pics: T38[], gsprpinfo?: str|null } }` +- Returns: `201 { brand: { id: int, name: str, pics: T41[], gsprpinfo?: str|null } }` #### Delete brand — `DELETE /brand/{id}` - Params: `id: int` - Returns: `204 void` @@ -258,10 +261,10 @@ _none_ - Returns: `200 { brand: { id: int, name: str, touchedArticleCount: int, gsprpinfo?: str|null } }` #### Delete brand image — `DELETE /brand/{id}/image` - Params: `id: int` -- Returns: `200 { brand: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T38[] } }` +- Returns: `200 { brand: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T41[] } }` #### Add or replace brand image — `POST /brand/{id}/image` - Params: `id: int, image/avif` -- Returns: `201 { brand: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T38[] } }` +- Returns: `201 { brand: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T41[] } }` ### Section: /category @@ -276,7 +279,7 @@ _none_ - Returns: `200 { categoryIds: int[] }` #### Category tree — `GET /category/tree` _none_ -- Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }[], articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }` +- Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }[], articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T30|null }[] }` #### Delete category — `DELETE /category/{id}` - Params: `id: int, query: recursive?: bool` - Returns: `204 void` @@ -285,7 +288,7 @@ _none_ - Returns: `200 { category: { id: int, name: str, slug: str, parentId: int, sort: int } }` #### Articles in category — `GET /category/{id}/articles` - Params: `id: int` -- Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }` +- Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T30|null }[] }` #### List category attribute values — `GET /category/{id}/attributevalue` - Params: `id: int` - Returns: `200 { attributevalues: { id: int, attributeId: int, attributeName: str, attributeValueId: int, value: str, sort: int, categoryId?: int, exclusive?: bool }[] }` @@ -312,10 +315,10 @@ _none_ #### List companies — `GET /company` _none_ -- Returns: `200 { companies: T34[] }` +- Returns: `200 { companies: T36[] }` #### Create company — `POST /company` - Params: `body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }` -- Returns: `201 { company: T34, user: T36 }` +- Returns: `201 { company: T36, user: T38 }` #### Get company history — `GET /company/history` - Params: `query: limit?: int` - Returns: `200 { history: { id: int, date: str, text: str, companyuserId?: int|null }[], truncated: bool }` @@ -339,7 +342,7 @@ _none_ - Returns: `204 void` #### Update company — `PUT /company/{id}` - Params: `id: int, body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }` -- Returns: `200 { company: T34 }` +- Returns: `200 { company: T36 }` ### Section: /customergroup @@ -348,7 +351,7 @@ _none_ - Returns: `200 { customergroups: { id: int, name: str, sort: int, editable: bool }[] }` #### Create customer group — `POST /customergroup` - Params: `body: { name: str }` -- Returns: `201 { customergroup: T44 }` +- Returns: `201 { customergroup: T47 }` #### Reorder customer groups — `PUT /customergroup/order` - Params: `body: { customergroupIds: int[] }` - Returns: `200 { customergroupIds: int[] }` @@ -357,16 +360,16 @@ _none_ - Returns: `204 void` #### Update customer group — `PATCH /customergroup/{id}` - Params: `id: int, body: { name: str }` -- Returns: `200 { customergroup: T44 }` +- Returns: `200 { customergroup: T47 }` ### Section: /delivery #### List deliveries — `GET /delivery` _none_ -- Returns: `200 { deliveries: { id: int, number: str, type: str, supplierId: int|null, date: str, externalNumber?: str|null, createdAt?: str, ledger?: T41 }[] }` +- Returns: `200 { deliveries: { id: int, number: str, type: str, supplierId: int|null, date: str, externalNumber?: str|null, createdAt?: str, ledger?: T44 }[] }` #### Create delivery — `POST /delivery` -- Params: `body: { externalNumber: str, date: str, lines: T25[], supplierId?: int|null, files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }` -- Returns: `201 T3` +- Params: `body: { externalNumber: str, date: str, lines: T27[], supplierId?: int|null, files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }` +- Returns: `201 T5` #### Parse document (SSE) — `POST /delivery/parse` - Params: `form: { file: str }` - Returns: `200 SSE` @@ -384,10 +387,10 @@ _none_ - Returns: `204 void` #### Get delivery — `GET /delivery/{id}` - Params: `id: int` -- Returns: `200 T3` +- Returns: `200 T5` #### Update delivery — `PATCH /delivery/{id}` -- Params: `id: int, body: { externalNumber?: str|null, date?: str, supplierId?: int|null, lines?: T25[], files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }` -- Returns: `200 T3` +- Params: `id: int, body: { externalNumber?: str|null, date?: str, supplierId?: int|null, lines?: T27[], files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }` +- Returns: `200 T5` #### Get delivery attachment file content — `GET /delivery/{id}/file/{fileId}` - Params: `id: int, fileId: int, query: download?: bool` - Returns: `200 str` @@ -396,46 +399,46 @@ _none_ #### List entities — `GET /entity` - Params: `query: customergroupId?: int, role?: str` -- Returns: `200 { entities: T27[] }` +- Returns: `200 { entities: T29[] }` #### Create entity — `POST /entity` - Params: `body: { customergroupId: int, name: str, firstName?: str|null, number?: str }` -- Returns: `201 T20` +- Returns: `201 T22` #### Peek next customer number — `GET /entity/next-number` _none_ - Returns: `200 { number: str }` #### List entity addresses — `GET /entity/{entityId}/address` - Params: `entityId: int` -- Returns: `200 { addresses: T13[] }` +- Returns: `200 { addresses: T14[] }` #### Create entity address — `POST /entity/{entityId}/address` - Params: `entityId: int, body: { addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }` -- Returns: `201 { address: T13 }` +- Returns: `201 { address: T14 }` #### Delete entity address — `DELETE /entity/{entityId}/address/{id}` - Params: `entityId: int, id: int` - Returns: `204 void` #### Update entity address — `PATCH /entity/{entityId}/address/{id}` - Params: `entityId: int, id: int, body: { addressType?: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }` -- Returns: `200 { address: T13 }` +- Returns: `200 { address: T14 }` #### List entity contacts — `GET /entity/{entityId}/contact` - Params: `entityId: int` -- Returns: `200 { contacts: T39[] }` +- Returns: `200 { contacts: T42[] }` #### Create entity contact — `POST /entity/{entityId}/contact` - Params: `entityId: int, body: { contactType: str, contact: str }` -- Returns: `201 { contact: T39 }` +- Returns: `201 { contact: T42 }` #### Delete entity contact — `DELETE /entity/{entityId}/contact/{id}` - Params: `entityId: int, id: int` - Returns: `204 void` #### Update entity contact — `PATCH /entity/{entityId}/contact/{id}` - Params: `entityId: int, id: int, body: { contactType?: str, contact?: str }` -- Returns: `200 { contact: T39 }` +- Returns: `200 { contact: T42 }` #### Delete entity — `DELETE /entity/{id}` - Params: `id: int` - Returns: `204 void` #### Get entity — `GET /entity/{id}` - Params: `id: int` -- Returns: `200 T20` +- Returns: `200 T22` #### Update entity — `PATCH /entity/{id}` - Params: `id: int, body: { name?: str, firstName?: str|null, number?: str|null }` -- Returns: `200 T20` +- Returns: `200 T22` ### Section: /events @@ -477,50 +480,50 @@ _none_ _none_ - Returns: `200 { labeltemplates: { id: int, name: str, width: num, height: num, dpi: int, type: str, thumb?: str|null }[] }` #### Create label template — `POST /labeltemplate` -- Params: `body: { name: str, width: num, height: num, dpi: int, type: str, content: T18 }` -- Returns: `201 T5` +- Params: `body: { name: str, width: num, height: num, dpi: int, type: str, content: T20 }` +- Returns: `201 T7` #### Delete label template — `DELETE /labeltemplate/{id}` - Params: `id: int` - Returns: `204 void` #### Get label template by ID — `GET /labeltemplate/{id}` - Params: `id: int` -- Returns: `200 T5` +- Returns: `200 T7` #### Update label template (partial) — `PATCH /labeltemplate/{id}` -- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }` -- Returns: `200 T5` +- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T20 }` +- Returns: `200 T7` #### Update label template — `PUT /labeltemplate/{id}` -- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }` -- Returns: `200 T5` +- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T20 }` +- Returns: `200 T7` ### Section: /ledger #### Query ledger by manifest article ID or SKU — `GET /ledger` - Params: `query: manifestarticle_id?: int, sku?: str, transaction_type?: str` -- Returns: `200 T14` +- Returns: `200 T15` #### Add ledger entry — `POST /ledger` - Params: `body: { manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str }` -- Returns: `201 { ledger: T15 }` +- Returns: `201 { ledger: T16 }` #### Query ledger by manifest article ID — `GET /ledger/manifestarticle/{manifestarticleId}` - Params: `manifestarticleId: int, query: transaction_type?: str` -- Returns: `200 T14` +- Returns: `200 T15` #### Query ledger by article SKU — `GET /ledger/sku/{sku}` - Params: `sku: str, query: transaction_type?: str` -- Returns: `200 T14` +- Returns: `200 T15` ### Section: /modelconversation #### List conversations — `GET /modelconversation` _none_ -- Returns: `200 { conversations: T29[] }` +- Returns: `200 { conversations: T18[] }` #### Create conversation — `POST /modelconversation` - Params: `body: { provider: str, model: str }` -- Returns: `201 { conversation: T29 }` +- Returns: `201 { conversation: T18 }` #### Delete conversation — `DELETE /modelconversation/{id}` - Params: `id: int` - Returns: `204 void` #### Get conversation — `GET /modelconversation/{id}` - Params: `id: int` -- Returns: `200 { conversation: T29 }` +- Returns: `200 { conversation: T18 }` #### List conversation messages — `GET /modelconversation/{id}/message` - Params: `id: int` - Returns: `200 { messages: { id: int, conversation_id: int, created_at: str, role: str, message: str }[] }` @@ -544,31 +547,31 @@ _none_ #### List orders — `GET /order` - Params: `query: offset?: int, limit?: int` -- Returns: `200 { orders: T11[], total: int, offset: int, limit: int }` +- Returns: `200 { orders: T4[], total: int, offset: int, limit: int }` #### Create order — `POST /order` -- Params: `body: { number: str, date: str, lines: T25[], entityId?: int|null }` -- Returns: `201 T7` +- Params: `body: { number: str, date: str, lines: T27[], entityId?: int|null }` +- Returns: `201 T3` #### Delete order — `DELETE /order/{id}` - Params: `id: int` - Returns: `204 void` #### Get order — `GET /order/{id}` - Params: `id: int` -- Returns: `200 T7` +- Returns: `200 T3` #### Update order — `PATCH /order/{id}` -- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T25[] }` -- Returns: `200 T7` +- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T27[] }` +- Returns: `200 T3` #### List payments of an order — `GET /order/{id}/payment` - Params: `id: int` -- Returns: `200 { payments: { id: int, accountId: int, manifestId: int, type: str, amount: num }[] }` +- Returns: `200 { payments: T35[] }` #### Add payment to an order — `POST /order/{id}/payment` - Params: `id: int, body: { accountId: int, type: str, amount: num }` -- Returns: `201 { payment: { id: int, accountId: int, manifestId: int, type: str, amount: num } }` +- Returns: `201 { payment: T35 }` #### List shippings of an order — `GET /order/{id}/shipping` - Params: `id: int` -- Returns: `200 { shippings: { id: int, manifestId: int, number: str, type: str, state: str }[] }` +- Returns: `200 { shippings: T39[] }` #### Create shipping for an order — `POST /order/{id}/shipping` -- Params: `id: int, body: { type: str, state: str }` -- Returns: `201 { shipping: { id: int, manifestId: int, number: str, type: str, state: str } }` +- Params: `id: int, body: { type: str, state: str, warehouseId?: int }` +- Returns: `201 { shipping: T39 }` ### Section: /package @@ -586,37 +589,37 @@ _none_ #### List POS terminals — `GET /posterminal` _none_ -- Returns: `200 { posterminals: T10[] }` +- Returns: `200 { posterminals: T11[] }` #### Create POS terminal — `PUT /posterminal` - Params: `body: { name: str, rootCategoryId?: int|null, syncRootArticles?: bool }` -- Returns: `200 { posterminal: T10 }` +- Returns: `200 { posterminal: T11 }` #### Delete POS terminal — `DELETE /posterminal/{id}` - Params: `id: int` - Returns: `204 void` #### Update POS terminal — `PATCH /posterminal/{id}` - Params: `id: int, body: { name?: str, rootCategoryId?: int|null, syncRootArticles?: bool, pairingpin?: str|null }` -- Returns: `200 { posterminal: T10 }` +- Returns: `200 { posterminal: T11 }` #### Disable all categories on terminal — `DELETE /posterminal/{id}/all` - Params: `id: int` -- Returns: `200 T45` +- Returns: `200 T48` #### Enable all categories on terminal — `PUT /posterminal/{id}/all` - Params: `id: int` -- Returns: `200 T45` +- Returns: `200 T48` #### Disable category on terminal — `DELETE /posterminal/{id}/category/{categoryId}` - Params: `id: int, categoryId: int` -- Returns: `200 T45` +- Returns: `200 T48` #### Enable category on terminal — `PUT /posterminal/{id}/category/{categoryId}` - Params: `id: int, categoryId: int` -- Returns: `200 T45` +- Returns: `200 T48` ### Section: /printer #### List printers — `GET /printer` _none_ -- Returns: `200 { printers: T24[] }` +- Returns: `200 { printers: T26[] }` #### Create printer — `POST /printer` - Params: `body: { address: str, type: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }` -- Returns: `201 T19` +- Returns: `201 T21` #### Reorder printers — `PUT /printer/order` - Params: `body: { printerIds: int[] }` - Returns: `200 { printerIds: int[] }` @@ -625,22 +628,22 @@ _none_ - Returns: `204 void` #### Get printer by ID — `GET /printer/{id}` - Params: `id: int` -- Returns: `200 T19` +- Returns: `200 T21` #### Update printer (partial) — `PATCH /printer/{id}` - Params: `id: int, body: { address?: str, type?: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }` -- Returns: `200 T19` +- Returns: `200 T21` #### Update printer — `PUT /printer/{id}` - Params: `id: int, body: { address?: str, type?: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }` -- Returns: `200 T19` +- Returns: `200 T21` ### Section: /propertyname #### List property names — `GET /propertyname` _none_ -- Returns: `200 { propertynames: T33[] }` +- Returns: `200 { propertynames: T34[] }` #### Create property name — `POST /propertyname` - Params: `body: { name: str, sort?: int, exclusive?: bool }` -- Returns: `201 { propertyname: T33 }` +- Returns: `201 { propertyname: T34 }` #### Reorder property names — `PUT /propertyname/order` - Params: `body: { propertynameIds: int[] }` - Returns: `200 { ok: bool }` @@ -649,7 +652,7 @@ _none_ - Returns: `200 { ok: bool }` #### Update property name — `PATCH /propertyname/{id}` - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }` -- Returns: `200 { propertyname: T33 }` +- Returns: `200 { propertyname: T34 }` ### Section: /public @@ -672,17 +675,17 @@ _none_ _none_ - Returns: `200 { quotes: { id: int, number: str, type: str, entityId: int|null, date: str, createdAt?: str }[] }` #### Create quote — `POST /quote` -- Params: `body: { number: str, date: str, lines: T25[], entityId?: int|null }` -- Returns: `201 T8` +- Params: `body: { number: str, date: str, lines: T27[], entityId?: int|null }` +- Returns: `201 T9` #### Delete quote — `DELETE /quote/{id}` - Params: `id: int` - Returns: `204 void` #### Get quote — `GET /quote/{id}` - Params: `id: int` -- Returns: `200 T8` +- Returns: `200 T9` #### Update quote — `PATCH /quote/{id}` -- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T25[] }` -- Returns: `200 T8` +- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T27[] }` +- Returns: `200 T9` ### Section: /serper @@ -704,6 +707,9 @@ _none_ #### Delete shipping — `DELETE /shipping/{id}` - Params: `id: int` - Returns: `204 void` +#### Update shipping — `PATCH /shipping/{id}` +- Params: `id: int, body: { type?: str, state?: str, warehouseId?: int }` +- Returns: `200 { shipping: T39 }` #### List packages of a shipping — `GET /shipping/{id}/package` - Params: `id: int` - Returns: `200 { packages: { id: int, shippingId: int, entityaddressId: int, number: str, type: str, state: str, details?: str|null }[] }` @@ -721,28 +727,28 @@ _none_ #### Adjust stock manually — `POST /stock/adjust` - Params: `body: { sku?: str, warehouseId?: int, amount?: num, text?: str|null, lines?: { sku: str, amount: num, warehouseId?: int, text?: str }[] }` -- Returns: `201 { manifest: { id: int, number: str, type: str, date: str, createdAt: str }, lines: { manifestarticle_id: int, sku: str, name: str, warehouse_id: int, amount: num, text: str }[], ledger: T15[] }` +- Returns: `201 { manifest: { id: int, number: str, type: str, date: str, createdAt: str }, lines: { manifestarticle_id: int, sku: str, name: str, warehouse_id: int, amount: num, text: str }[], ledger: T16[] }` ### Section: /supplier #### List suppliers — `GET /supplier` _none_ -- Returns: `200 { suppliers: T40[] }` +- Returns: `200 { suppliers: T43[] }` #### Create supplier — `POST /supplier` - Params: `body: { name: str }` -- Returns: `201 { supplier: T40 }` +- Returns: `201 { supplier: T43 }` #### Delete supplier — `DELETE /supplier/{id}` - Params: `id: int` - Returns: `204 void` #### Update supplier — `PATCH /supplier/{id}` - Params: `id: int, body: { name: str }` -- Returns: `200 { supplier: T40 }` +- Returns: `200 { supplier: T43 }` #### List supplier articles by SKUs — `GET /supplier/{id}/articles` - Params: `id: int, query: skus?: string` -- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }[] }` +- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T46|null }[] }` #### Query supplier articles by SKUs (bulk) — `POST /supplier/{id}/articles` - Params: `id: int, body?: { skus?: str[] }` -- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }[] }` +- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T46|null }[] }` ### Section: /thumb @@ -757,10 +763,10 @@ _none_ - Returns: `204 void` #### List units — `GET /unit` _none_ -- Returns: `200 { units: T31[] }` +- Returns: `200 { units: T32[] }` #### Upsert unit — `PUT /unit` - Params: `body: { si: str, basesi: str, basesifactor: num, symbol: str, name: str }` -- Returns: `200 { unit: T31 }` +- Returns: `200 { unit: T32 }` ### Section: /v1 @@ -802,7 +808,7 @@ _none_ - Returns: `200 str` #### Execute a virtual filesystem applet — `POST /vfs/{*path}` - Params: `path: str, body?: { input?: {}, timeout?: int, max_output?: int }` -- Returns: `200 { ok: bool, result: str, columns: { name: str, type: str }[], rows: int, stdout: str, consoleLines: int, durationMs: int, warnings?: str[], truncated?: bool, truncationNote?: str }` +- Returns: `200 { ok: bool, result: str, columns: { name: str, type: str }[], rows: int, stdout: str, consoleLines: int, durationMs: int, description?: str, warnings?: str[], truncated?: bool, truncationNote?: str }` #### Create or overwrite a virtual filesystem file — `PUT /vfs/{*path}` - Params: `path: str, body: { content: str, mime?: str }` - Returns: `200 { success: bool, file: { name: str, size: int, mime: str, updated_at: str } }` @@ -811,10 +817,10 @@ _none_ #### List warehouses — `GET /warehouse` _none_ -- Returns: `200 { warehouses: T44[] }` +- Returns: `200 { warehouses: T47[] }` #### Create warehouse — `POST /warehouse` - Params: `body: { name: str, sort?: int }` -- Returns: `201 T42` +- Returns: `201 T45` #### Reorder warehouses — `PUT /warehouse/order` - Params: `body: { warehouseIds: int[] }` - Returns: `200 { warehouseIds: int[] }` @@ -823,10 +829,10 @@ _none_ - Returns: `204 void` #### Get warehouse by ID — `GET /warehouse/{id}` - Params: `id: int` -- Returns: `200 T42` +- Returns: `200 T45` #### Update warehouse (partial) — `PATCH /warehouse/{id}` - Params: `id: int, body: { name?: str, sort?: int }` -- Returns: `200 T42` +- Returns: `200 T45` #### Update warehouse — `PUT /warehouse/{id}` - Params: `id: int, body: { name?: str, sort?: int }` -- Returns: `200 T42` +- Returns: `200 T45` diff --git a/src/components/PicturesDialog.jsx b/src/components/PicturesDialog.jsx new file mode 100644 index 0000000..d2a9f44 --- /dev/null +++ b/src/components/PicturesDialog.jsx @@ -0,0 +1,831 @@ +// #region imports +import { PureComponent, createRef } from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Chip from '@mui/material/Chip'; +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 Typography from '@mui/material/Typography'; +import CloseIcon from '@mui/icons-material/Close'; +import ContentPasteIcon from '@mui/icons-material/ContentPaste'; +import UploadFileIcon from '@mui/icons-material/UploadFile'; +import ImageSearchIcon from '@mui/icons-material/ImageSearch'; +import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; +import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; +import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import { enqueueSnackbar } from 'notistack'; +import AppDialog from './AppDialog'; +import { thumb, article as articleApi } from '../api'; +import artikelAutomat from '../automats/artikelAutomat'; +import brandAutomat from '../automats/brandAutomat'; +import categoryAutomat from '../automats/categoryAutomat'; +import chatAutomat from '../automats/chatAutomat'; +import { requireArray, requireObject } from '../utils/apiShape'; +import { + articleWithPhotoOrder, + articleWithUploadedPhoto, + articleWithoutPhoto, + formatPhotoDimensions, + formatPhotoSizeKb, + sortedPhotos, +} from '../utils/articleDetail'; +import { notifyError } from '../utils/notify'; +import { readClipboardImage } from '../utils/pasteImage'; +import { prepareArticlePhoto } from '../utils/prepareArticlePhoto'; +import ThumbHashImage from './article/ThumbHashImage'; +import ArticlePhoto from './article/ArticlePhoto'; +import BrandImageSearchDialog from './brand/BrandImageSearchDialog'; +import ArticleImageSearchDialog from './article/ArticleImageSearchDialog'; +import { + CHECKERBOARD, + SCRIM_BUTTON, + SCRIM_LABEL, + SCRIM_SOFT, + SCRIM_STRONG, + SHADOW_THUMB_RING, + VEIL_MUTED, + WHITE, +} from '../colors'; +// #endregion + +// #region constants & styles +/** Max edge (px) of the single-image preview inside the dialog. */ +const MAX_PREVIEW = 240; + +const overlayChipSx = { + height: 22, + bgcolor: SCRIM_LABEL, + color: WHITE, + '& .MuiChip-label': { px: 0.75, fontSize: 11 }, +}; + +const overlayIconSx = { + color: WHITE, + bgcolor: SCRIM_BUTTON, + '&:hover': { bgcolor: SCRIM_STRONG }, + '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT }, +}; +// #endregion + +// #region helper functions +function isSingleMode(props) { + if (typeof props.single === 'boolean') { + return props.single; + } + if (props.maxPictures === 1 || props.maxPhotos === 1) { + return true; + } + if (props.brand || props.category || props.attributeValue) { + return true; + } + if (props.article) { + return false; + } + return false; +} + +function resolvePictures(props, single) { + if (Array.isArray(props.pictures)) { + return single ? props.pictures.slice(0, 1) : props.pictures; + } + if (Array.isArray(props.pics)) { + return single ? props.pics.slice(0, 1) : props.pics; + } + + // Brands: only logo[0] with sort=0 fillable + if (props.brand) { + const rawPics = Array.isArray(props.brand.pics) ? props.brand.pics : []; + const firstPic = rawPics[0] || (props.brand.fullHash ? { + fullHash: props.brand.fullHash, + thumbHash: props.brand.thumbHash, + thumbW: props.brand.thumbW, + thumbH: props.brand.thumbH, + sort: 0, + } : null); + return firstPic ? [firstPic] : []; + } + + // Articles: multiple photos allowed + if (props.article) { + const list = sortedPhotos(props.article); + return single ? list.slice(0, 1) : list; + } + + // Categories: single photo + if (props.category) { + if (Array.isArray(props.category.pics) && props.category.pics.length > 0) { + return [props.category.pics[0]]; + } + if (props.category.fullHash) { + return [{ + fullHash: props.category.fullHash, + thumbHash: props.category.thumbHash, + thumbW: props.category.thumbW, + thumbH: props.category.thumbH, + sort: 0, + }]; + } + return []; + } + + // Attribute values: single photo + if (props.attributeValue) { + if (Array.isArray(props.attributeValue.pics) && props.attributeValue.pics.length > 0) { + return [props.attributeValue.pics[0]]; + } + if (props.attributeValue.fullHash) { + return [{ + fullHash: props.attributeValue.fullHash, + thumbHash: props.attributeValue.thumbHash, + thumbW: props.attributeValue.thumbW, + thumbH: props.attributeValue.thumbH, + sort: 0, + }]; + } + return []; + } + + if (props.pic) { + return [props.pic]; + } + + return []; +} + +function resolveTitle(props, single) { + if (props.title) { + return typeof props.title === 'function' ? props.title(props) : props.title; + } + if (props.brand) { + const name = props.brand.name ? ` ${props.brand.name}` : ''; + return `Logo:${name}`; + } + if (props.category) { + const name = props.category.name ? ` ${props.category.name}` : ''; + return `Kategoriebild:${name}`; + } + if (props.attributeValue) { + const name = props.attributeValue.value || props.attributeValue.name + ? ` ${props.attributeValue.value || props.attributeValue.name}` + : ''; + return `Bild:${name}`; + } + if (props.article) { + const name = props.article.name || props.article.sku + ? ` ${props.article.name || props.article.sku}` + : ''; + return `Bilder:${name}`; + } + return single ? 'Bild' : 'Bilder'; +} +// #endregion + +/** + * Unified class component for entity pictures and logos. + * Supports: + * - Single picture mode (Brand logo with sort=0, Category, AttributeValue) + * - Multi picture mode (Article photos with reorder & chat edit) + * - Actions: Löschen, Neues Suchen, Bild einfügen (clipboard), Bild hochladen (file), Schließen. + */ +// #region PicturesDialog +export default class PicturesDialog extends PureComponent { + constructor(props) { + super(props); + this.fileInputRef = createRef(); + this.state = { + busy: false, + searchOpen: false, + }; + } + + // #region dialog close + handleClose = () => { + if (this.state.busy) return; + this.props.onClose?.(); + }; + // #endregion + + // #region upload & paste operations + // MARK: prepares image and calls upload handler or automat action + uploadRawImage = async (rawBlob) => { + const { onUpload, brand, article, category, onArticleUpdated } = this.props; + this.setState({ busy: true }); + try { + const file = await prepareArticlePhoto(rawBlob); + + if (onUpload) { + await onUpload(file); + } else if (brand?.id) { + await brandAutomat.actions.addImage(brand.id, file); + enqueueSnackbar(`Markenlogo für „${brand.name || ''}“ gespeichert.`, { variant: 'success' }); + } else if (article?.sku) { + const uploadStarted = performance.now(); + const res = await articleApi.uploadImage(article.sku, file); + console.log('[article-photo] upload', { + uploadMs: Math.round(performance.now() - uploadStarted), + bytes: file.size, + sku: article.sku, + }); + requireObject(res, 'POST /api/article/:sku/image'); + requireObject(res.image, 'image'); + const updated = articleWithUploadedPhoto(article, res.image); + artikelAutomat.actions.setArticle(updated); + onArticleUpdated?.(updated); + enqueueSnackbar('Artikelbild gespeichert.', { variant: 'success' }); + } else if (category?.id) { + await categoryAutomat.actions.uploadCategoryImage({ + categoryId: category.id, + file, + }); + enqueueSnackbar('Kategoriebild gespeichert.', { variant: 'success' }); + } + } catch (err) { + notifyError(err); + } finally { + this.setState({ busy: false }); + } + }; + + // MARK: reads clipboard image and uploads + handlePasteClick = async () => { + if (this.state.busy || this.props.disabled) return; + try { + const image = await readClipboardImage(); + if (image) { + await this.uploadRawImage(image); + } else { + enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' }); + } + } catch (err) { + console.warn('Clipboard read error:', err); + enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' }); + } + }; + + handleUploadClick = () => { + if (this.state.busy || this.props.disabled) return; + this.fileInputRef.current?.click(); + }; + + handleFileChange = (event) => { + const file = event.target.files?.[0]; + event.target.value = ''; + if (!file) return; + void this.uploadRawImage(file); + }; + // #endregion + + // #region deletion operations + // MARK: deletes single image (brand, category, attributeValue) + handleDeleteSingle = async () => { + const { busy } = this.state; + const { disabled, brand, category, attributeValue, onDelete } = this.props; + if (busy || disabled) return; + + const single = isSingleMode(this.props); + const pics = resolvePictures(this.props, single); + const pic = pics[0]; + if (!pic) return; + + const targetName = brand?.name || category?.name || attributeValue?.name || 'dieses Bild'; + const label = brand ? `Logo von „${targetName}"` : `Bild von „${targetName}"`; + if (!window.confirm(`${label} wirklich löschen?`)) return; + + this.setState({ busy: true }); + try { + if (onDelete) { + await onDelete(pic, 0); + } else if (brand?.id) { + await brandAutomat.actions.deleteImage(brand.id); + enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' }); + } else if (category?.id) { + await categoryAutomat.actions.deleteCategoryImage(category.id); + enqueueSnackbar('Kategoriebild gelöscht.', { variant: 'success' }); + } + } catch (err) { + notifyError(err); + } finally { + this.setState({ busy: false }); + } + }; + + // MARK: deletes multi image (article photos) + handleDeleteMulti = async (fullHash) => { + const { busy } = this.state; + const { disabled, article, onDelete, onArticleUpdated } = this.props; + if (busy || disabled) return; + + this.setState({ busy: true }); + try { + if (onDelete) { + await onDelete(fullHash); + } else if (article?.sku) { + await articleApi.deleteImage(article.sku, fullHash); + const updated = articleWithoutPhoto(article, fullHash); + artikelAutomat.actions.setArticle(updated); + onArticleUpdated?.(updated); + enqueueSnackbar('Artikelbild gelöscht.', { variant: 'success' }); + } + } catch (err) { + notifyError(err); + } finally { + this.setState({ busy: false }); + } + }; + // #endregion + + // #region reordering & chat edit (multi mode) + // MARK: calls orderImages via articleApi + handleMoveMulti = async (fullHash, delta) => { + const { busy } = this.state; + const { disabled, article, onReorder, onArticleUpdated } = this.props; + if (busy || disabled) return; + + const photos = sortedPhotos(article); + const index = photos.findIndex((row) => row.fullHash === fullHash); + const target = index + delta; + if (index < 0 || target < 0 || target >= photos.length) return; + + const next = [...photos]; + const [row] = next.splice(index, 1); + next.splice(target, 0, row); + const fullHashes = next.map((item) => item.fullHash); + + this.setState({ busy: true }); + try { + if (onReorder) { + await onReorder(fullHashes); + } else if (article?.sku) { + const res = await articleApi.orderImages(article.sku, fullHashes); + requireObject(res, 'PUT /api/article/:sku/images/order'); + requireArray(res.fullHashes, 'fullHashes'); + const updated = articleWithPhotoOrder(article, res.fullHashes); + artikelAutomat.actions.setArticle(updated); + onArticleUpdated?.(updated); + } + } catch (err) { + notifyError(err); + } finally { + this.setState({ busy: false }); + } + }; + + handleEditInChat = (photo, index) => { + const { article, onEditInChat } = this.props; + if (onEditInChat) { + onEditInChat(photo, index); + return; + } + const sku = article?.sku ?? ''; + const imageNr = index + 1; + const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `; + chatAutomat.actions.openWithPrompt(prompt); + }; + // #endregion + + // #region search dialog handlers + handleSearchOpen = () => { + if (this.state.busy || this.props.disabled) return; + if (this.props.onSearchNew) { + this.props.onSearchNew(); + return; + } + this.setState({ searchOpen: true }); + }; + + handleSearchClose = () => { + this.setState({ searchOpen: false }); + }; + // #endregion + + // #region render helpers + renderSinglePreview(pic, title) { + const { brand, emptyText } = this.props; + const hasPic = Boolean(pic?.fullHash || pic?.thumbHash); + const { fullHash, thumbHash, thumbW, thumbH, fullW, fullH, fullSize } = pic ?? {}; + + const tw = Number(thumbW || fullW); + const th = Number(thumbH || fullH); + let w = MAX_PREVIEW; + let h = MAX_PREVIEW; + if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) { + const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th)); + w = Math.max(1, Math.round(tw * scale)); + h = Math.max(1, Math.round(th * scale)); + } + + const hasDimensions = (fullW != null && fullH != null) || (thumbW != null && thumbH != null); + const hasSize = fullSize != null; + + return ( + + + {thumbHash ? : null} + {fullHash ? ( + + ) : ( + + + {emptyText || (brand ? 'Kein Logo hinterlegt.' : 'Kein Bild hinterlegt.')} + + + )} + + {/* Dimension and size overlay chip */} + {hasPic && (hasDimensions || hasSize) ? ( + + {hasDimensions ? ( + + ) : null} + {hasSize ? ( + + ) : null} + + ) : null} + + + ); + } + + renderMultiPhotoTile(photo, index, total) { + const { busy } = this.state; + const { disabled } = this.props; + const hasDimensions = photo.fullW != null && photo.fullH != null; + const hasSize = photo.fullSize != null; + + return ( + + + + + {hasDimensions ? ( + + ) : null} + {hasSize ? ( + + ) : null} + + + this.handleEditInChat(photo, index)} + sx={overlayIconSx} + > + + + + void this.handleMoveMulti(photo.fullHash, -1)} + sx={overlayIconSx} + > + + + = total - 1} + onClick={() => void this.handleMoveMulti(photo.fullHash, 1)} + sx={overlayIconSx} + > + + + void this.handleDeleteMulti(photo.fullHash)} + sx={overlayIconSx} + > + + + + + + + ); + } + // #endregion + + // #region main render + render() { + const { open, disabled, brand, article, searchDialog: CustomSearchDialog } = this.props; + const { busy, searchOpen } = this.state; + const single = isSingleMode(this.props); + const pics = resolvePictures(this.props, single); + const title = resolveTitle(this.props, single); + const hasPic = Boolean(pics[0]?.fullHash || pics[0]?.thumbHash); + + return ( + <> + + + {title} + + + + {single ? ( + this.renderSinglePreview(pics[0], title) + ) : pics.length === 0 ? ( + Keine Bilder. + ) : ( + + {pics.map((photo, index) => + this.renderMultiPhotoTile(photo, index, pics.length), + )} + + )} + + + {single ? ( + + {/* Row 1: Insert from clipboard / Upload from file */} + + + + + + {/* Row 2: Delete, Search new, Close */} + + + + + + + ) : ( + + + + + + + + + )} + + + {/* Hidden file input for file uploads */} + + + {/* Optional embedded image search dialogs */} + {searchOpen && CustomSearchDialog ? ( + + ) : searchOpen && brand ? ( + + ) : searchOpen && article ? ( + + ) : null} + + ); + } + // #endregion +} +// #endregion diff --git a/src/components/article/ArticlePhotosDialog.jsx b/src/components/article/ArticlePhotosDialog.jsx index 3698eb8..13496fa 100644 --- a/src/components/article/ArticlePhotosDialog.jsx +++ b/src/components/article/ArticlePhotosDialog.jsx @@ -1,374 +1,17 @@ -import { Component, createRef } from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import AppDialog from '../AppDialog'; -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 ContentPasteIcon from '@mui/icons-material/ContentPaste'; -import UploadFileIcon from '@mui/icons-material/UploadFile'; -import ImageSearchIcon from '@mui/icons-material/ImageSearch'; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; -import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import { enqueueSnackbar } from 'notistack'; -import { article as articleApi } from '../../api'; -import artikelAutomat from '../../automats/artikelAutomat'; -import chatAutomat from '../../automats/chatAutomat'; -import { requireArray, requireObject } from '../../utils/apiShape'; -import { - articleWithPhotoOrder, - articleWithUploadedPhoto, - articleWithoutPhoto, - formatPhotoDimensions, - formatPhotoSizeKb, - sortedPhotos, -} from '../../utils/articleDetail'; -import { notifyError } from '../../utils/notify'; -import { readClipboardImage } from '../../utils/pasteImage'; -import { - SCRIM_BUTTON, - SCRIM_LABEL, - SCRIM_SOFT, - SCRIM_STRONG, - VEIL_MUTED, - WHITE, -} from '../../colors'; -import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto'; -import ArticlePhoto from './ArticlePhoto'; -import ArticleImageSearchDialog from './ArticleImageSearchDialog'; - -const overlayChipSx = { - height: 22, - bgcolor: SCRIM_LABEL, - color: WHITE, - '& .MuiChip-label': { px: 0.75, fontSize: 11 }, -}; - -const overlayIconSx = { - color: WHITE, - bgcolor: SCRIM_BUTTON, - '&:hover': { bgcolor: SCRIM_STRONG }, - '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT }, -}; - -class ArticlePhotosDialog extends Component { - constructor(props) { - super(props); - this.fileInputRef = createRef(); - this.state = { busy: false, searchOpen: false }; - this.handleClose = this.handleClose.bind(this); - this.handlePasteClick = this.handlePasteClick.bind(this); - this.handleUploadClick = this.handleUploadClick.bind(this); - this.handleSearchOpen = this.handleSearchOpen.bind(this); - this.handleSearchClose = this.handleSearchClose.bind(this); - this.handleFileChange = this.handleFileChange.bind(this); - this.uploadRawImage = this.uploadRawImage.bind(this); - this.handleEditInChat = this.handleEditInChat.bind(this); - } - - handleClose() { - if (this.state.busy) return; - this.props.onClose(); - } - - handleEditInChat(photo, index) { - const { article: articleData } = this.props; - const sku = articleData?.sku ?? ''; - const imageNr = index + 1; - const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `; - chatAutomat.actions.openWithPrompt(prompt); - } - - async uploadRawImage(rawBlob) { - const { article: articleData, onArticleUpdated } = this.props; - this.setState({ busy: true }); - try { - const file = await prepareArticlePhoto(rawBlob); - const uploadStarted = performance.now(); - const res = await articleApi.uploadImage(articleData.sku, file); - console.log('[article-photo] upload', { - uploadMs: Math.round(performance.now() - uploadStarted), - bytes: file.size, - sku: articleData.sku, - }); - requireObject(res, 'POST /api/article/:sku/image'); - requireObject(res.image, 'image'); - const updated = articleWithUploadedPhoto(articleData, res.image); - artikelAutomat.actions.setArticle(updated); - onArticleUpdated?.(updated); - } catch (err) { - notifyError(err); - } finally { - this.setState({ busy: false }); - } - } - - async handlePasteClick() { - if (this.state.busy) return; - try { - const image = await readClipboardImage(); - if (image) { - await this.uploadRawImage(image); - } else { - enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' }); - } - } catch (err) { - console.warn('Clipboard read error:', err); - enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' }); - } - } - - handleUploadClick() { - if (this.state.busy) return; - this.fileInputRef.current?.click(); - } - - handleSearchOpen() { - if (this.state.busy) return; - this.setState({ searchOpen: true }); - } - - handleSearchClose() { - this.setState({ searchOpen: false }); - } - - handleFileChange(event) { - const file = event.target.files?.[0]; - event.target.value = ''; - if (!file) return; - void this.uploadRawImage(file); - } - - async deletePhoto(fullHash) { - const { article: articleData, onArticleUpdated } = this.props; - this.setState({ busy: true }); - try { - await articleApi.deleteImage(articleData.sku, fullHash); - const updated = articleWithoutPhoto(articleData, fullHash); - artikelAutomat.actions.setArticle(updated); - onArticleUpdated?.(updated); - } catch (err) { - notifyError(err); - } finally { - this.setState({ busy: false }); - } - } - - async movePhoto(fullHash, delta) { - const { article: articleData, onArticleUpdated } = this.props; - const photos = sortedPhotos(articleData); - const index = photos.findIndex((row) => row.fullHash === fullHash); - const target = index + delta; - if (index < 0 || target < 0 || target >= photos.length) return; - - const next = [...photos]; - const [row] = next.splice(index, 1); - next.splice(target, 0, row); - const fullHashes = next.map((item) => item.fullHash); - - this.setState({ busy: true }); - try { - const res = await articleApi.orderImages(articleData.sku, fullHashes); - requireObject(res, 'PUT /api/article/:sku/images/order'); - requireArray(res.fullHashes, 'fullHashes'); - const updated = articleWithPhotoOrder(articleData, res.fullHashes); - artikelAutomat.actions.setArticle(updated); - onArticleUpdated?.(updated); - } catch (err) { - notifyError(err); - } finally { - this.setState({ busy: false }); - } - } - - renderPhotoTile(photo, index, total) { - const { busy } = this.state; - const hasDimensions = photo.fullW != null && photo.fullH != null; - const hasSize = photo.fullSize != null; - - return ( - - - - - {hasDimensions ? ( - - ) : null} - {hasSize ? ( - - ) : null} - - - this.handleEditInChat(photo, index)} - sx={overlayIconSx} - > - - - - void this.movePhoto(photo.fullHash, -1)} - sx={overlayIconSx} - > - - - = total - 1} - onClick={() => void this.movePhoto(photo.fullHash, 1)} - sx={overlayIconSx} - > - - - void this.deletePhoto(photo.fullHash)} - sx={overlayIconSx} - > - - - - - - - ); - } +import { PureComponent } from 'react'; +import PicturesDialog from '../PicturesDialog'; +/** + * Article photos dialog wrapping the unified PicturesDialog. + * Allows multiple photos with reordering, edit in chat, clipboard paste, upload, search, and delete. + * + * Props: open, article, onClose, onArticleUpdated + */ +// #region component +export default class ArticlePhotosDialog extends PureComponent { render() { - const { open, article: articleData } = this.props; - const { busy } = this.state; - const photos = sortedPhotos(articleData); - - return ( - <> - - Bilder - - {photos.length === 0 ? ( - Keine Bilder. - ) : ( - - {photos.map((photo, index) => - this.renderPhotoTile(photo, index, photos.length), - )} - - )} - - - - - - - - - - - - - - ); + return ; } } +// #endregion -export default ArticlePhotosDialog; diff --git a/src/components/brand/ArtikelMarke.jsx b/src/components/brand/ArtikelMarke.jsx index 2ac3163..f7abc6e 100644 --- a/src/components/brand/ArtikelMarke.jsx +++ b/src/components/brand/ArtikelMarke.jsx @@ -85,8 +85,8 @@ class ArtikelMarke extends PureComponent { this.setState({ logoOpen: false }); }; - handleThumbClick = () => { - if (this.props.disabled || !this.hasLogo()) return; + handleOpenLogo = () => { + if (this.props.disabled) return; this.setState({ previewOpen: true }); }; @@ -124,7 +124,7 @@ class ArtikelMarke extends PureComponent { {hasLogo ? ( ) : ( diff --git a/src/components/brand/BrandLogoPreviewDialog.jsx b/src/components/brand/BrandLogoPreviewDialog.jsx index 2b4775f..7fa42ba 100644 --- a/src/components/brand/BrandLogoPreviewDialog.jsx +++ b/src/components/brand/BrandLogoPreviewDialog.jsx @@ -1,176 +1,17 @@ import { PureComponent } from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import AppDialog from '../AppDialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogTitle from '@mui/material/DialogTitle'; -import Typography from '@mui/material/Typography'; -import CloseIcon from '@mui/icons-material/Close'; -import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; -import ImageSearchIcon from '@mui/icons-material/ImageSearch'; -import { enqueueSnackbar } from 'notistack'; -import { thumb } from '../../api'; -import brandAutomat from '../../automats/brandAutomat'; -import { notifyError } from '../../utils/notify'; -import ThumbHashImage from '../article/ThumbHashImage'; -import { - CHECKERBOARD, - SHADOW_THUMB_RING, - WHITE, -} from '../../colors'; - -/** Max edge (px) of the presized logo preview inside the dialog. */ -const MAX_PREVIEW = 240; +import PicturesDialog from '../PicturesDialog'; /** - * Small fixed-size brand logo preview. - * Shows the stored thumb presized with thumbW/thumbH and offers - * Löschen / Neues Suchen / Schließen. + * Brand logo dialog wrapping the unified PicturesDialog. + * Offers Löschen, Neues Suchen, Schließen, Bild einfügen (clipboard), Bild hochladen. * * Props: open, brand, onClose, onSearchNew, disabled? */ +// #region component export default class BrandLogoPreviewDialog extends PureComponent { - constructor(props) { - super(props); - this.state = { busy: false }; - } - - handleDelete = async () => { - const { brand } = this.props; - if (!brand?.id || this.state.busy) return; - if (!window.confirm(`Logo von „${brand.name ?? ''}" wirklich löschen?`)) return; - this.setState({ busy: true }); - try { - await brandAutomat.actions.deleteImage(brand.id); - enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' }); - this.props.onClose?.(); - } catch (err) { - notifyError(err); - } finally { - this.setState({ busy: false }); - } - }; - render() { - const { open, brand, disabled, onClose, onSearchNew } = this.props; - const { busy } = this.state; - const pic = brand?.pics?.[0]; - const { fullHash, thumbHash, thumbW, thumbH } = pic ?? {}; - const name = brand?.name ?? ''; - - // Presize the preview with thumbW/thumbH, capped to MAX_PREVIEW. - const tw = Number(thumbW); - const th = Number(thumbH); - let w = MAX_PREVIEW; - let h = MAX_PREVIEW; - if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) { - const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th)); - w = Math.max(1, Math.round(tw * scale)); - h = Math.max(1, Math.round(th * scale)); - } - - return ( - - - Logo: {name} - - - - - - {thumbHash ? : null} - {fullHash ? ( - - ) : ( - - - Kein Logo hinterlegt. - - - )} - - - - - - - - - - - ); + return ; } } +// #endregion + diff --git a/src/components/chat/ChatDrawer.jsx b/src/components/chat/ChatDrawer.jsx index d5e15f7..ea67567 100644 --- a/src/components/chat/ChatDrawer.jsx +++ b/src/components/chat/ChatDrawer.jsx @@ -46,6 +46,44 @@ import { } from '../../colors'; const DEFAULT_DRAWER_WIDTH = 460; + +/** Sort by updated_at desc; subagents (started_by set) directly below their parent. */ +function sortConversations(list) { + const ts = (c) => new Date(c.updated_at || c.created_at || 0).getTime() || 0; + const byUpdated = (a, b) => ts(b) - ts(a); + const ids = new Set(list.map((c) => c.id)); + const children = new Map(); + const roots = []; + for (const c of list) { + if (c.started_by != null && ids.has(c.started_by)) { + if (!children.has(c.started_by)) children.set(c.started_by, []); + children.get(c.started_by).push(c); + } else { + roots.push(c); + } + } + const out = []; + const walk = (c, depth) => { + out.push({ conv: c, depth }); + (children.get(c.id) || []).sort(byUpdated).forEach((k) => walk(k, depth + 1)); + }; + roots.sort(byUpdated).forEach((c) => walk(c, 0)); + return out; +} + +function formatUpdated(value) { + if (!value) return ''; + const d = new Date(value); + if (Number.isNaN(d.getTime())) return ''; + return d.toLocaleString('de-DE', { + day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit', + }); +} + +function conversationTitle(c) { + const msg = (c.first_message || '').replace(/\s+/g, ' ').trim(); + return msg || '…'; +} const MIN_DRAWER_WIDTH = 320; export default class ChatDrawer extends PureComponent { @@ -1085,24 +1123,32 @@ export default class ChatDrawer extends PureComponent { if (!conv) return ''; return ( - - #{conv.id} + + {conversationTitle(conv)} - - {conv.model || 'Standard'} + + {formatUpdated(conv.updated_at)} ); }} > - {conversations.map((c) => ( - + {sortConversations(conversations).map(({ conv: c, depth }) => ( + - - #{c.id} + {depth > 0 && ( + ↳ + )} + 0 ? 400 : 600} + noWrap + sx={{ flexGrow: 1, minWidth: 0 }} + > + {conversationTitle(c)} - - {c.model || 'Standard'} + + {formatUpdated(c.updated_at)}