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

Compare commits

base: seb:deb22d8b4f13ea0a44ef6637481d2a9061e6f05f
Branches Tags
seb:main
...
compare: seb:83dc69832211ee6e843c457d89f524b272a3b419
Branches Tags
seb:main

3 Commits
deb22d8b4f ... 83dc698322

Author SHA1 Message Date
seb
83dc698322 u 2026-10-11 04:21:26 +02:00
seb
5e8037d430 u 2026-10-11 03:37:06 +02:00
seb
45cc69730b u 2026-10-11 03:27:02 +02:00
15 changed files with 1372 additions and 1042 deletions
Expand all files Collapse all files

146
package-lock.json generated
View File

@@ -12,8 +12,8 @@
"@emotion/styled": "^11.14.1",
"@jsquash/avif": "^2.1.1",
"@jsquash/resize": "^2.1.1",
"@mui/icons-material": "^9.4.0",
"@mui/material": "^9.4.0",
"@mui/icons-material": "^9.5.0",
"@mui/material": "^9.5.0",
"@shopify/draggable": "^1.2.1",
"ag-grid-community": "^36.2.0",
"ag-grid-react": "^36.2.0",
@@ -28,7 +28,7 @@
"react-dom": "^19.3.0",
"react-router-dom": "^7.18.4",
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
"react-window": "^2.3.3",
"react-window": "^2.3.4",
"skelehash-wasm": "^0.1.0",
"sortablejs": "^1.15.7",
"thumbhash": "^0.1.1"
@@ -40,7 +40,7 @@
"eslint-plugin-react-hooks": "^7.1.1",
"globals": "^17.13.0",
"qrcode": "^1.5.4",
"vite": "^8.3.2",
"vite": "^8.3.4",
"vite-plugin-pwa": "^2.0.0"
}
},
@@ -2680,9 +2680,9 @@
"license": "MIT"
},
"node_modules/@mui/core-downloads-tracker": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.4.0.tgz",
"integrity": "sha512-d+gIYM1raJP87yrVQcVg+Q3vycVMArMkgu/TjJLi2vTvO9FHKWNRR1xs9nnN4eLpM9nGxxm02UMvc9BrmcUKvQ==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.5.0.tgz",
"integrity": "sha512-PErEpl3Lp+1ZqWYKI7GQU8XSiciAFmLbUAZ7IoaUL598HLy1UAFuEUMEJu8yAS1v8vkXYzWprMVZzky4UwXoOA==",
"license": "MIT",
"funding": {
"type": "opencollective",
@@ -2690,12 +2690,12 @@
}
},
"node_modules/@mui/icons-material": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.4.0.tgz",
"integrity": "sha512-5PVgBYtLOXTk6u0YUAjoV9GoTUQDbeZ8g+pus2h0GphLT/rpmftRnB5D/Kw6QCAovB7EyBX7UxKdZqPBBAHUKw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.5.0.tgz",
"integrity": "sha512-dahtVaqnRUIBgaZ4WC9EdP+LgJ5d2rslASYIX+nDFG6+ssUiM11jQ+Gd1wH8vhUGoNA9ES40MYics5BI8zJFXQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7"
"@babel/runtime": "^7.29.7 || ^8.0.5"
},
"engines": {
"node": ">=14.0.0"
@@ -2705,7 +2705,7 @@
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@mui/material": "^9.4.0",
"@mui/material": "^9.5.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
@@ -2716,22 +2716,22 @@
}
},
"node_modules/@mui/material": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-9.4.0.tgz",
"integrity": "sha512-6KKUIvkQ2r/s48s9VZV9JEZ1W2dRa7RndVsF+Ipx4CYxDOQeozeRsS5r9NiheFf8A5hpbqJJIGoX7hjg5X4XUw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-9.5.0.tgz",
"integrity": "sha512-QgqvdVjZoKxP8E8SBxYY6LrdV+kw00moXweZQWBbMMdifPKZAGfUaaXhGKIca6fjKnCL6HJIe/AWWCpqNvyHVw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7",
"@mui/core-downloads-tracker": "^9.4.0",
"@mui/system": "^9.4.0",
"@mui/types": "^9.4.0",
"@mui/utils": "^9.4.0",
"@babel/runtime": "^7.29.7 || ^8.0.5",
"@mui/core-downloads-tracker": "^9.5.0",
"@mui/system": "^9.5.0",
"@mui/types": "^9.5.0",
"@mui/utils": "^9.5.0",
"@popperjs/core": "^2.11.8",
"@types/react-transition-group": "^4.4.12",
"clsx": "^2.1.1",
"csstype": "^3.2.3",
"prop-types": "^15.8.1",
"react-is": "^19.2.8",
"react-is": "^19.3.0",
"react-transition-group": "^4.4.5"
},
"engines": {
@@ -2744,7 +2744,7 @@
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material-pigment-css": "^9.4.0",
"@mui/material-pigment-css": "^9.5.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2765,13 +2765,13 @@
}
},
"node_modules/@mui/private-theming": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.4.0.tgz",
"integrity": "sha512-qQpX/2XPGDz5F2OIWzo4kkorURlDeXGKytRQudXCdLS5TuwKsMKaZyx77LZEVSB73c7o3UrLWwQ/goRuHBdtjw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.5.0.tgz",
"integrity": "sha512-UHZKySlr4ZJeA5HEhe/Tq1fhsR5573ViKYn7JV80dCVJtgqRQIplRSer1DHPg2Yi22llX7QRhgM0Vtrx4kZHSA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7",
"@mui/utils": "^9.4.0",
"@babel/runtime": "^7.29.7 || ^8.0.5",
"@mui/utils": "^9.5.0",
"prop-types": "^15.8.1"
},
"engines": {
@@ -2792,12 +2792,12 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.4.0.tgz",
"integrity": "sha512-SlqVEYqnyEgXMFW4JuIDMelyhKzoWBJ85v2mNCQd0XtU0uk7U9E1zaJZ06XqodhA8oJrb+4Q+3E/JlwBe4jWkw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.5.0.tgz",
"integrity": "sha512-IX1ceHnZ0bJgzJRWO/Ayl4ME1rNmpWVYwV28yb089UAMR17rJkV1qfr7ApsWQXXPi1oi+2JapJrWQAiAnTlJHQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7",
"@babel/runtime": "^7.29.7 || ^8.0.5",
"@emotion/cache": "^11.14.0",
"@emotion/serialize": "^1.3.3",
"@emotion/sheet": "^1.4.0",
@@ -2826,16 +2826,16 @@
}
},
"node_modules/@mui/system": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-9.4.0.tgz",
"integrity": "sha512-AZz9z13oGS1J0BYeAFHTbV7PegCtPiE/uMEIi7TJ1kTx3Vkt+jUpLyXF/2uV8B6Y79iTh98kVeOH9fX3x3zXXg==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-9.5.0.tgz",
"integrity": "sha512-OZuAwvoiaaHpvn0a540VH1DUwwmojJubGfNmO2g+nb2ybNDP4/gF7t7aA6AMduELSuJ5yxwlzyFvUO3CfLv1Yg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7",
"@mui/private-theming": "^9.4.0",
"@mui/styled-engine": "^9.4.0",
"@mui/types": "^9.4.0",
"@mui/utils": "^9.4.0",
"@babel/runtime": "^7.29.7 || ^8.0.5",
"@mui/private-theming": "^9.5.0",
"@mui/styled-engine": "^9.5.0",
"@mui/types": "^9.5.0",
"@mui/utils": "^9.5.0",
"clsx": "^2.1.1",
"csstype": "^3.2.3",
"prop-types": "^15.8.1"
@@ -2866,12 +2866,12 @@
}
},
"node_modules/@mui/types": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-9.4.0.tgz",
"integrity": "sha512-13DH0Oniua4WmGqeYbQAZqmiN7r4nfd0zwIoGJ5QeJwyIHgEmf+LkRw/jV1HZb6AiUoHX8Oxf4xgalq3vYHcIw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-9.5.0.tgz",
"integrity": "sha512-O0S6xS80qEQqW2CYNrd4GlBEQ1xpMOHZ5b4zO/DaLu6NZmtthM6smEg0Gz/u9gX5vL+8NB3EiBIxmxSCcG590Q==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7"
"@babel/runtime": "^7.29.7 || ^8.0.5"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2883,17 +2883,17 @@
}
},
"node_modules/@mui/utils": {
"version": "9.4.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.4.0.tgz",
"integrity": "sha512-WkzY8uYtqUDyGKPShrRQRBomfMQHddlsyKu/gRRESYO24tDPD2z0xRE8CBoUsWqpBa+YrFs9KixiS7kQRjsPAQ==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.5.0.tgz",
"integrity": "sha512-8m0LfSgE2pj58znY3kZ+anwRKbnBkcu/7AJPA8L/77wEjN0QnpX4/zRAccyplp1VEUnMsUBADeTRin5Mkf7epA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.29.7",
"@mui/types": "^9.4.0",
"@babel/runtime": "^7.29.7 || ^8.0.5",
"@mui/types": "^9.5.0",
"@types/prop-types": "^15.7.15",
"clsx": "^2.1.1",
"prop-types": "^15.8.1",
"react-is": "^19.2.8"
"react-is": "^19.3.0"
},
"engines": {
"node": ">=14.0.0"
@@ -3796,6 +3796,16 @@
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
"license": "MIT"
},
"node_modules/@types/react": {
"version": "19.3.0",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
"integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.2.2"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.12",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -6849,9 +6859,9 @@
"license": "MIT"
},
"node_modules/nanoid": {
"version": "3.3.19",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
"integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
"version": "3.3.20",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
"integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
"dev": true,
"funding": [
{
@@ -7234,9 +7244,9 @@
}
},
"node_modules/postcss": {
"version": "8.5.28",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
"integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
"version": "8.5.29",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.29.tgz",
"integrity": "sha512-49cGhUbXj8Qenv0iTMxA1cFBzxXoctpC9Ujd77t1WcbJIr6nF/eI7g/8MgxrYldFRuAXvja7xQRwavoW7kgrxQ==",
"dev": true,
"funding": [
{
@@ -7254,9 +7264,9 @@
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.18",
"nanoid": "^3.3.19",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
"source-map-js": "^1.2.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -7505,9 +7515,9 @@
"link": true
},
"node_modules/react-window": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.3.3.tgz",
"integrity": "sha512-uu/dTwysXp+YL+i5GW/cC/3JrqyE7oE6DYXYVlTeMaDSDgCI+UGo+XCKwXfS8uoFPih8TJYTnikqjAnbDvn75Q==",
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.3.4.tgz",
"integrity": "sha512-CnRWoRg+ZnQkLcULSNdbgKJnfcexy9x+9ELOATmDlDv3ZoADyLJc22vN3JRvMV651A6gFwYBlxllU9X+H9dyhQ==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
@@ -8177,9 +8187,9 @@
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
"integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
"dev": true,
"license": "BSD-3-Clause",
"engines": {
@@ -8762,16 +8772,16 @@
"license": "MIT"
},
"node_modules/vite": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.2.tgz",
"integrity": "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w==",
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.4.tgz",
"integrity": "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"lightningcss": "^1.33.0",
"picomatch": "^4.0.7",
"postcss": "^8.5.28",
"rolldown": "~1.2.11",
"postcss": "^8.5.29",
"rolldown": "~1.2.12",
"tinyglobby": "^0.2.17"
},
"bin": {

8
package.json
View File

@@ -21,8 +21,8 @@
"@emotion/styled": "^11.14.1",
"@jsquash/avif": "^2.1.1",
"@jsquash/resize": "^2.1.1",
"@mui/icons-material": "^9.4.0",
"@mui/material": "^9.4.0",
"@mui/icons-material": "^9.5.0",
"@mui/material": "^9.5.0",
"@shopify/draggable": "^1.2.1",
"ag-grid-community": "^36.2.0",
"ag-grid-react": "^36.2.0",
@@ -37,7 +37,7 @@
"react-dom": "^19.3.0",
"react-router-dom": "^7.18.4",
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
"react-window": "^2.3.3",
"react-window": "^2.3.4",
"skelehash-wasm": "^0.1.0",
"sortablejs": "^1.15.7",
"thumbhash": "^0.1.1"
@@ -49,7 +49,7 @@
"eslint-plugin-react-hooks": "^7.1.1",
"globals": "^17.13.0",
"qrcode": "^1.5.4",
"vite": "^8.3.2",
"vite": "^8.3.4",
"vite-plugin-pwa": "^2.0.0"
},
"allowScripts": {

41
src/automats/warehouseAutomat.js
View File

@@ -23,6 +23,8 @@ import authAutomat from './authAutomat';
/**
* @typedef {Object} WarehouseState
* @property {Array<Warehouse>} warehouses Company-scoped warehouses.
* @property {Array<Warehouse>} filteredWarehouses Filtered warehouses according to active filter query.
* @property {string} filter Active search/filter string.
* @property {'idle'|'loading'|'ready'|'failed'} status Load lifecycle state.
* @property {Error|null} error Last load error.
*/
@@ -30,12 +32,26 @@ import authAutomat from './authAutomat';
/** @type {WarehouseState} */
const initialState = {
warehouses: [],
filteredWarehouses: [],
filter: '',
status: 'idle',
error: null,
};
let warehouseAutomat;
const applyFilter = (warehouses, filter) => {
const query = String(filter ?? '').trim().toLowerCase();
return query ? warehouses.filter((w) => String(w.name ?? '').toLowerCase().includes(query)) : warehouses;
};
const updateStateWithWarehouses = (warehouses, extra = {}) => {
const list = Array.isArray(warehouses) ? warehouses : [];
const filteredWarehouses = applyFilter(list, warehouseAutomat.state.filter);
warehouseAutomat.setState({ warehouses: list, filteredWarehouses, ...extra });
return list;
};
/**
* Fetches the company-scoped warehouse list.
*
@@ -61,7 +77,7 @@ function loadWarehouses() {
warehouseAutomat.setState({ status: 'loading', error: null });
try {
const warehouses = await fetchWarehouses();
warehouseAutomat.setState({ warehouses, status: 'ready', error: null });
updateStateWithWarehouses(warehouses, { status: 'ready', error: null });
return warehouses;
} catch (error) {
warehouseAutomat.setState({ status: 'failed', error });
@@ -74,6 +90,15 @@ function loadWarehouses() {
}
const actions = {
/** Sets the active warehouse search filter and updates filteredWarehouses. */
filter(query) {
const filter = String(query ?? '');
warehouseAutomat.setState({
filter,
filteredWarehouses: applyFilter(warehouseAutomat.state.warehouses, filter),
});
},
/**
* Loads the warehouse list, exposing a loading/failed lifecycle.
*
@@ -91,7 +116,7 @@ const actions = {
async reload() {
try {
const warehouses = await fetchWarehouses();
warehouseAutomat.setState({ warehouses, status: 'ready', error: null });
updateStateWithWarehouses(warehouses, { status: 'ready', error: null });
return warehouses;
} catch (error) {
warehouseAutomat.setState({ error });
@@ -130,6 +155,10 @@ const actions = {
return data.warehouse;
},
rename(id, body) {
return actions.update(id, body);
},
/**
* Deletes a warehouse and refreshes the cached list.
*
@@ -148,6 +177,11 @@ const actions = {
* @returns {Promise<void>}
*/
async reorder(warehouseIds) {
const byId = new Map(warehouseAutomat.state.warehouses.map((w) => [w.id, w]));
const reordered = warehouseIds.map((id) => byId.get(id)).filter(Boolean);
if (reordered.length === warehouseAutomat.state.warehouses.length) {
updateStateWithWarehouses(reordered);
}
await warehouseApi.order({ warehouseIds });
await warehouseAutomat.actions.reload();
},
@@ -159,8 +193,7 @@ const actions = {
* @returns {void}
*/
setWarehouses(warehouses) {
warehouseAutomat.setState({
warehouses: Array.isArray(warehouses) ? warehouses : [],
updateStateWithWarehouses(warehouses, {
status: 'ready',
error: null,
});

2
src/components/AppShell.jsx
View File

@@ -20,7 +20,6 @@ import {
NAV_SURFACE,
} from '../colors';
import { ChatFab, ChatDrawer } from './chat';
import PageMinimap from './PageMinimap';
const SIDEBAR_WIDTH = 144;
@@ -323,7 +322,6 @@ export default function AppShell() {
</Box>
<ChatFab />
<ChatDrawer />
<PageMinimap />
</Box>
);
}

19
src/components/PageMinimap.jsx
View File

@@ -1,10 +1,8 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { matchPath, useLocation } from 'react-router-dom';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import MapRoundedIcon from '@mui/icons-material/MapRounded';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import { ARTICLE_TAB, readPreferredArticleTab } from './article/articleRoute';
const MINIMAP_WIDTH = 220;
const MINIMAP_MAX_HEIGHT = 300;
@@ -42,16 +40,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
const idleTimerRef = useRef(null);
const metricsRef = useRef({ docH: 1, winH: 1, thumbH: 1 });
// SEO tab only: /artikel/:sku/seo, or /artikel/:sku when the preferred
// default tab resolves to seo.
const { pathname } = useLocation();
const articleMatch = matchPath('/artikel/:sku/:tab?', pathname);
const isSeoPage = Boolean(
articleMatch &&
(articleMatch.params?.tab === ARTICLE_TAB.seo ||
(!articleMatch.params?.tab &&
readPreferredArticleTab() === ARTICLE_TAB.seo)),
);
/** Move the viewport rectangle without re-rendering (called on scroll). */
const updateViewport = useCallback(() => {
@@ -160,11 +148,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
if (enabled && open) rebuild();
}, [enabled, open, rebuild]);
// Reset scroll visibility on navigation; the new page starts hidden
// until the user scrolls again.
useEffect(() => {
setScrollActive(false);
}, [pathname]);
useEffect(() => {
rebuild();
@@ -214,7 +197,7 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
// Stays mounted for fade-out; hidden unless scrolling/hovering/dragging.
const visible = scrollActive || hovering || dragging;
if (!enabled || !isSeoPage) return null;
if (!enabled) return null;
// Collapsed: a single centered pill to reopen the overview.
if (!open) {

8
src/components/article/tabs/ArticleSeoTab.jsx
View File

@@ -1,5 +1,6 @@
import { Component } from 'react';
import Box from '@mui/material/Box';
import PageMinimap from '../../PageMinimap';
function PanelHtmlValue({ html }) {
if (html == null || html === '') return null;
@@ -57,6 +58,11 @@ export default class ArticleSeoTab extends Component {
render() {
const { article: articleData } = this.props;
const desc = articleData.desc ?? articleData.description;
return <PanelHtmlValue html={desc} />;
return (
<>
<PanelHtmlValue html={desc} />
<PageMinimap />
</>
);
}
}

30
src/components/brand/ArtikelMarke.jsx
View File

@@ -1,7 +1,9 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
@@ -111,6 +113,8 @@ class ArtikelMarke extends PureComponent {
const name = brand?.name ?? '';
const hasLogo = this.hasLogo();
const articleCount = brand?.articleCount ?? 0;
return (
<>
<ListItem
@@ -142,8 +146,7 @@ class ArtikelMarke extends PureComponent {
</IconButton>
)}
{true ? (<SingleLineTextEdit
<SingleLineTextEdit
size="small"
label=""
value={draft}
@@ -153,7 +156,28 @@ class ArtikelMarke extends PureComponent {
onKeyDown={this.handleKeyDown}
sx={{ flex: 1, minWidth: 0 }}
/>
) : (<Typography sx={{ flex: 1, px: 1.6, py: 0.9, borderRadius: 1, border: '1px solid rgba(0, 0, 0, 0.23)' }}>{draft}</Typography>)}
<Chip
size="small"
label={articleCount}
sx={{
height: 24,
width: 52,
minWidth: 52,
maxWidth: 52,
fontSize: '0.75rem',
fontWeight: 600,
fontVariantNumeric: 'tabular-nums',
bgcolor: 'action.hover',
color: articleCount > 0 ? 'text.primary' : 'text.disabled',
flexShrink: 0,
'& .MuiChip-label': {
px: 0.5,
textAlign: 'center',
width: '100%',
},
}}
/>
<IconButton
aria-label={`„${name}" löschen`}

227
src/components/merkmale/ArtikelMerkmalAuswahl.jsx Normal file
View File

@@ -0,0 +1,227 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import attributeAutomat from '../../automats/attributeAutomat';
import { notifyError } from '../../utils/notify';
import {
SELECT_BG,
SELECT_BG_HOVER,
SELECT_BORDER,
TINT_SUBTLE,
} from '../../colors';
class ArtikelMerkmalAuswahl extends PureComponent {
constructor(props) {
super(props);
this.state = {
draft: props.attribute?.name ?? '',
busy: false,
};
}
componentDidUpdate(prevProps) {
if (prevProps.attribute?.name !== this.props.attribute?.name) {
this.setState({ draft: this.props.attribute?.name ?? '' });
} else if (prevProps.disabled && !this.props.disabled) {
if (this.state.draft !== this.props.attribute?.name) {
this.setState({ draft: this.props.attribute?.name ?? '' });
}
}
}
handleChange = (next) => {
this.setState({ draft: next });
this.props.onChange?.(next, this.props.attribute);
};
handleBlur = () => {
const { attribute } = this.props;
if (!attribute) return;
const draft = this.state.draft.trim();
if (!draft) {
this.setState({ draft: attribute.name ?? '' });
return;
}
if (draft !== attribute.name) {
void this.renameAttribute(attribute, draft);
}
};
async renameAttribute(attribute, name) {
this.setState({ busy: true });
try {
await attributeAutomat.actions.updateAttribute(attribute.id, { name });
enqueueSnackbar('Attribut gespeichert.', { variant: 'success' });
} catch (err) {
this.setState({ draft: attribute.name ?? '' });
notifyError(err);
} finally {
this.setState({ busy: false });
}
}
handleKeyDown = (event) => {
const { attribute } = this.props;
if (event.key === 'Enter') {
event.preventDefault();
event.target.blur();
}
if (event.key === 'Escape') {
event.preventDefault();
this.setState({ draft: attribute?.name ?? '' });
event.target.blur();
}
};
handleToggleExclusive = async (event) => {
event.stopPropagation();
const { attribute, disabled } = this.props;
if (!attribute || disabled || this.state.busy) return;
const nextExclusive = !attribute.exclusive;
this.setState({ busy: true });
try {
await attributeAutomat.actions.updateAttribute(attribute.id, { exclusive: nextExclusive });
enqueueSnackbar(
`Attribut „${attribute.name}“ auf ${nextExclusive ? 'Einzelauswahl' : 'Mehrfachauswahl'} gestellt.`,
{ variant: 'info' }
);
} catch (err) {
notifyError(err);
} finally {
this.setState({ busy: false });
}
};
handleDelete = (event) => {
event.stopPropagation();
const { attribute, disabled } = this.props;
if (!attribute || disabled || this.state.busy) return;
if (!window.confirm(`Attribut „${attribute.name}“ und alle zugehörigen Werte wirklich löschen?`)) {
return;
}
this.setState({ busy: true });
void (async () => {
try {
await attributeAutomat.actions.deleteAttribute(attribute.id);
enqueueSnackbar('Attribut gelöscht.', { variant: 'success' });
} catch (err) {
notifyError(err);
this.setState({ busy: false });
}
})();
};
render() {
const { attribute, isSelected, onSelect, disabled, sx } = this.props;
const { draft, busy } = this.state;
const name = attribute?.name ?? '';
const exclusive = attribute ? Boolean(attribute.exclusive) : true;
const isDisabled = disabled || busy;
return (
<ListItem
disableGutters
data-id={attribute?.id}
onClick={onSelect}
sx={{
gap: 1,
py: 0.75,
px: 0.5,
borderRadius: 1.5,
alignItems: 'center',
width: '100%',
minWidth: 0,
cursor: 'pointer',
bgcolor: isSelected ? SELECT_BG : 'transparent',
border: isSelected ? `1px solid ${SELECT_BORDER}` : '1px solid transparent',
transition: 'all 0.15s ease',
'&:hover': {
bgcolor: isSelected ? SELECT_BG_HOVER : TINT_SUBTLE,
},
...sx,
}}
>
<Box
className="drag-handle"
onClick={(e) => e.stopPropagation()}
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
flexShrink: 0,
color: 'text.disabled',
cursor: isDisabled ? 'default' : 'grab',
userSelect: 'none',
touchAction: 'none',
'&:hover': isDisabled ? undefined : { color: 'text.secondary' },
transition: 'color 0.15s',
}}
>
<DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
</Box>
<Box onClick={(e) => e.stopPropagation()} sx={{ flex: 1, minWidth: 0 }}>
<SingleLineTextEdit
size="small"
label=""
value={draft}
disabled={isDisabled || !attribute}
onChange={this.handleChange}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
sx={{ width: '100%' }}
/>
</Box>
<Chip
label="Multi"
size="small"
color={exclusive ? 'default' : 'success'}
variant="filled"
onClick={this.handleToggleExclusive}
aria-pressed={!exclusive}
sx={{
height: 24,
width: 52,
minWidth: 52,
maxWidth: 52,
fontSize: '0.75rem',
fontWeight: 600,
cursor: isDisabled ? 'default' : 'pointer',
flexShrink: 0,
...(exclusive
? { bgcolor: 'grey.300', color: 'text.secondary' }
: null),
'& .MuiChip-label': {
px: 0.5,
textAlign: 'center',
width: '100%',
},
}}
/>
<IconButton
aria-label={`„${name}“ löschen`}
disabled={isDisabled || !attribute}
onClick={this.handleDelete}
sx={{ width: 40, height: 40, flexShrink: 0 }}
>
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
</IconButton>
</ListItem>
);
}
}
export default ArtikelMerkmalAuswahl;

212
src/components/merkmale/ArtikelMerkmalText.jsx Normal file
View File

@@ -0,0 +1,212 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import propertyAutomat from '../../automats/propertyAutomat';
import { notifyError } from '../../utils/notify';
class ArtikelMerkmalText extends PureComponent {
constructor(props) {
super(props);
const item = props.property ?? props.item;
this.state = {
draft: item?.name ?? '',
busy: false,
};
}
componentDidUpdate(prevProps) {
const prevItem = prevProps.property ?? prevProps.item;
const item = this.props.property ?? this.props.item;
if (prevItem?.name !== item?.name) {
this.setState({ draft: item?.name ?? '' });
} else if (prevProps.disabled && !this.props.disabled) {
if (this.state.draft !== item?.name) {
this.setState({ draft: item?.name ?? '' });
}
}
}
handleChange = (next) => {
this.setState({ draft: next });
const item = this.props.property ?? this.props.item;
this.props.onChange?.(next, item);
};
handleBlur = () => {
const item = this.props.property ?? this.props.item;
if (!item) return;
const draft = this.state.draft.trim();
if (!draft) {
this.setState({ draft: item.name ?? '' });
return;
}
if (draft !== item.name) {
void this.renameProperty(item, draft);
}
};
async renameProperty(property, name) {
this.setState({ busy: true });
try {
await propertyAutomat.actions.updateProperty(property.id, { name });
enqueueSnackbar('Merkmal gespeichert.', { variant: 'success' });
} catch (err) {
this.setState({ draft: property.name ?? '' });
notifyError(err);
} finally {
this.setState({ busy: false });
}
}
handleKeyDown = (event) => {
const item = this.props.property ?? this.props.item;
if (event.key === 'Enter') {
event.preventDefault();
event.target.blur();
}
if (event.key === 'Escape') {
event.preventDefault();
this.setState({ draft: item?.name ?? '' });
event.target.blur();
}
};
handleToggleExclusive = async (event) => {
event.stopPropagation();
const item = this.props.property ?? this.props.item;
if (!item || this.props.disabled || this.state.busy) return;
const nextExclusive = !item.exclusive;
this.setState({ busy: true });
try {
await propertyAutomat.actions.updateProperty(item.id, { exclusive: nextExclusive });
enqueueSnackbar(
`Merkmal „${item.name}“ auf ${nextExclusive ? 'Einzelauswahl' : 'Mehrfachauswahl'} gestellt.`,
{ variant: 'info' }
);
} catch (err) {
notifyError(err);
} finally {
this.setState({ busy: false });
}
};
handleDelete = () => {
const item = this.props.property ?? this.props.item;
if (!item || this.props.disabled || this.state.busy) return;
if (!window.confirm(`Merkmal „${item.name}“ wirklich löschen?`)) {
return;
}
this.setState({ busy: true });
void (async () => {
try {
await propertyAutomat.actions.deleteProperty(item.id);
enqueueSnackbar('Merkmal gelöscht.', { variant: 'success' });
} catch (err) {
notifyError(err);
this.setState({ busy: false });
}
})();
};
render() {
const { disabled, sx } = this.props;
const item = this.props.property ?? this.props.item;
const { draft, busy } = this.state;
const name = item?.name ?? '';
const exclusive = item ? Boolean(item.exclusive) : true;
const isDisabled = disabled || busy;
return (
<ListItem
disableGutters
data-id={item?.id}
sx={{
gap: 1,
py: 0.75,
alignItems: 'center',
width: '100%',
minWidth: 0,
...sx,
}}
>
<Box
className="drag-handle"
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
flexShrink: 0,
color: 'text.disabled',
cursor: isDisabled ? 'default' : 'grab',
userSelect: 'none',
touchAction: 'none',
'&:hover': isDisabled ? undefined : { color: 'text.secondary' },
transition: 'color 0.15s',
}}
>
<DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
</Box>
<SingleLineTextEdit
size="small"
label=""
value={draft}
disabled={isDisabled || !item}
onChange={this.handleChange}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
sx={{ flex: 1, minWidth: 0 }}
/>
<Chip
label="Multi"
size="small"
color={exclusive ? 'default' : 'success'}
variant="filled"
onClick={this.handleToggleExclusive}
aria-pressed={!exclusive}
sx={{
height: 24,
width: 52,
minWidth: 52,
maxWidth: 52,
fontSize: '0.75rem',
fontWeight: 600,
cursor: isDisabled ? 'default' : 'pointer',
flexShrink: 0,
...(exclusive
? { bgcolor: 'grey.300', color: 'text.secondary' }
: null),
'& .MuiChip-label': {
px: 0.5,
textAlign: 'center',
width: '100%',
},
}}
/>
<IconButton
aria-label={`„${name}“ löschen`}
disabled={isDisabled || !item}
onClick={this.handleDelete}
sx={{ width: 40, height: 40, flexShrink: 0 }}
>
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
</IconButton>
</ListItem>
);
}
}
export default ArtikelMerkmalText;

163
src/components/merkmale/ArtikelMerkmalWert.jsx Normal file
View File

@@ -0,0 +1,163 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import attributeAutomat from '../../automats/attributeAutomat';
import { notifyError } from '../../utils/notify';
class ArtikelMerkmalWert extends PureComponent {
constructor(props) {
super(props);
const item = props.item ?? props.value;
this.state = {
draft: item?.value ?? '',
busy: false,
};
}
componentDidUpdate(prevProps) {
const prevItem = prevProps.item ?? prevProps.value;
const item = this.props.item ?? this.props.value;
if (prevItem?.value !== item?.value) {
this.setState({ draft: item?.value ?? '' });
} else if (prevProps.disabled && !this.props.disabled) {
if (this.state.draft !== item?.value) {
this.setState({ draft: item?.value ?? '' });
}
}
}
handleChange = (next) => {
this.setState({ draft: next });
const item = this.props.item ?? this.props.value;
this.props.onChange?.(next, item);
};
handleBlur = () => {
const item = this.props.item ?? this.props.value;
if (!item) return;
const draft = this.state.draft.trim();
if (!draft) {
this.setState({ draft: item.value ?? '' });
return;
}
if (draft !== item.value) {
void this.renameValue(item, draft);
}
};
async renameValue(item, val) {
this.setState({ busy: true });
try {
await attributeAutomat.actions.updateValue(item.id, { value: val });
enqueueSnackbar('Wert gespeichert.', { variant: 'success' });
} catch (err) {
this.setState({ draft: item.value ?? '' });
notifyError(err);
} finally {
this.setState({ busy: false });
}
}
handleKeyDown = (event) => {
const item = this.props.item ?? this.props.value;
if (event.key === 'Enter') {
event.preventDefault();
event.target.blur();
}
if (event.key === 'Escape') {
event.preventDefault();
this.setState({ draft: item?.value ?? '' });
event.target.blur();
}
};
handleDelete = () => {
const item = this.props.item ?? this.props.value;
if (!item || this.props.disabled || this.state.busy) return;
if (!window.confirm(`Wert „${item.value}“ wirklich löschen?`)) {
return;
}
this.setState({ busy: true });
void (async () => {
try {
await attributeAutomat.actions.deleteValue(item.id);
enqueueSnackbar('Wert gelöscht.', { variant: 'success' });
} catch (err) {
notifyError(err);
this.setState({ busy: false });
}
})();
};
render() {
const { disabled, sx } = this.props;
const item = this.props.item ?? this.props.value;
const { draft, busy } = this.state;
const valText = item?.value ?? '';
const isDisabled = disabled || busy;
return (
<ListItem
disableGutters
data-id={item?.id}
sx={{
gap: 1,
py: 0.75,
alignItems: 'center',
width: '100%',
minWidth: 0,
...sx,
}}
>
<Box
className="drag-handle"
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
flexShrink: 0,
color: 'text.disabled',
cursor: isDisabled ? 'default' : 'grab',
userSelect: 'none',
touchAction: 'none',
'&:hover': isDisabled ? undefined : { color: 'text.secondary' },
transition: 'color 0.15s',
}}
>
<DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
</Box>
<SingleLineTextEdit
size="small"
label=""
value={draft}
disabled={isDisabled || !item}
onChange={this.handleChange}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
sx={{ flex: 1, minWidth: 0 }}
/>
<IconButton
aria-label={`„${valText}“ löschen`}
disabled={isDisabled || !item}
onClick={this.handleDelete}
sx={{ width: 40, height: 40, flexShrink: 0 }}
>
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
</IconButton>
</ListItem>
);
}
}
export default ArtikelMerkmalWert;

3
src/components/merkmale/index.js Normal file
View File

@@ -0,0 +1,3 @@
export { default as ArtikelMerkmalAuswahl } from './ArtikelMerkmalAuswahl';
export { default as ArtikelMerkmalWert } from './ArtikelMerkmalWert';
export { default as ArtikelMerkmalText } from './ArtikelMerkmalText';

145
src/components/warehouse/ArtikelLager.jsx Normal file
View File

@@ -0,0 +1,145 @@
import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import warehouseAutomat from '../../automats/warehouseAutomat';
import { notifyError } from '../../utils/notify';
class ArtikelLager extends PureComponent {
constructor(props) {
super(props);
const item = props.warehouse ?? props.item;
this.state = {
draft: item?.name ?? '',
};
}
componentDidUpdate(prevProps) {
const prevItem = prevProps.warehouse ?? prevProps.item;
const item = this.props.warehouse ?? this.props.item;
if (prevItem?.name !== item?.name) {
this.setState({ draft: item?.name ?? '' });
} else if (prevProps.disabled && !this.props.disabled) {
if (this.state.draft !== item?.name) {
this.setState({ draft: item?.name ?? '' });
}
}
}
handleChange = (next) => {
this.setState({ draft: next });
const item = this.props.warehouse ?? this.props.item;
this.props.onChange?.(next, item);
};
handleBlur = () => {
const item = this.props.warehouse ?? this.props.item;
if (!item) return;
const draft = this.state.draft.trim();
if (!draft) {
this.setState({ draft: item.name ?? '' });
return;
}
if (draft !== item.name) {
void this.renameWarehouse(item, draft);
}
};
async renameWarehouse(item, name) {
try {
await warehouseAutomat.actions.update(item.id, { name });
enqueueSnackbar('Lager gespeichert.', { variant: 'success' });
} catch (err) {
this.setState({ draft: item.name ?? '' });
notifyError(err);
}
}
handleKeyDown = (event) => {
const item = this.props.warehouse ?? this.props.item;
if (event.key === 'Enter') {
event.preventDefault();
event.target.blur();
}
if (event.key === 'Escape') {
event.preventDefault();
this.setState({ draft: item?.name ?? '' });
event.target.blur();
}
};
handleDelete = () => {
const item = this.props.warehouse ?? this.props.item;
if (!item) return;
if (!window.confirm(`Lager „${item.name}" wirklich löschen?`)) return;
void (async () => {
try {
await warehouseAutomat.actions.remove(item.id);
enqueueSnackbar('Lager gelöscht.', { variant: 'success' });
} catch (err) {
notifyError(err);
}
})();
};
render() {
const { disabled, sx } = this.props;
const item = this.props.warehouse ?? this.props.item;
const { draft } = this.state;
const name = item?.name ?? '';
return (
<ListItem
disableGutters
data-id={item?.id}
sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
>
<Box
className="drag-handle"
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
flexShrink: 0,
color: 'text.disabled',
cursor: disabled ? 'default' : 'grab',
userSelect: 'none',
touchAction: 'none',
'&:hover': disabled ? undefined : { color: 'text.secondary' },
transition: 'color 0.15s',
}}
>
<DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
</Box>
<SingleLineTextEdit
size="small"
label=""
value={draft}
disabled={disabled || !item}
onChange={this.handleChange}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
sx={{ flex: 1, minWidth: 0 }}
/>
<IconButton
aria-label={`„${name}" löschen`}
disabled={disabled || !item}
onClick={this.handleDelete}
sx={{ width: 40, height: 40, flexShrink: 0 }}
>
<DeleteOutlinedIcon sx={{ fontSize: 24 }} />
</IconButton>
</ListItem>
);
}
}
export default ArtikelLager;

1
src/components/warehouse/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as ArtikelLager } from './ArtikelLager';

482
src/routes/artikel/lager.jsx
View File

@@ -3,14 +3,8 @@ import Alert from '@mui/material/Alert';
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 List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import WarehouseIcon from '@mui/icons-material/Warehouse';
import Sortable from 'sortablejs';
import { enqueueSnackbar } from 'notistack';
import BackendError from '../../components/BackendError';
@@ -21,13 +15,8 @@ import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';
import { setLastArticleSku } from '../../automats';
import warehouseAutomat from '../../automats/warehouseAutomat';
import {
GREEN_PANEL,
} from '../../colors';
function draftsFrom(warehouses) {
return Object.fromEntries(warehouses.map((row) => [row.id, row.name]));
}
import { ArtikelLager } from '../../components/warehouse';
import { GREEN_PANEL } from '../../colors';
function getInitialParams(props) {
const searchParams =
@@ -45,62 +34,173 @@ function getInitialParams(props) {
return { prefill: prefill.trim(), returnTo };
}
class ArtikelLagerSearchField extends PureComponent {
constructor(props) {
super(props);
const initial = warehouseAutomat.state.filter || props.prefill || '';
this.state = {
input: initial,
submitting: false,
};
if (props.prefill && !warehouseAutomat.state.filter) {
warehouseAutomat.actions.filter(props.prefill);
}
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.unsub = warehouseAutomat.subscribe(this, (state) => ({
input: state.filter,
}));
}
componentWillUnmount() {
this.unsub?.();
}
onInputChange(input) {
this.setState({ input });
warehouseAutomat.actions.filter(input);
}
async handleSubmit() {
const name = this.state.input.trim();
if (!name || this.state.submitting) return;
this.setState({ submitting: true });
try {
const row = await warehouseAutomat.actions.create({ name });
enqueueSnackbar(`Lager „${row.name || name}“ angelegt.`, { variant: 'success' });
this.setState({ input: '', submitting: false });
warehouseAutomat.actions.filter('');
if (this.props.returnTo && this.props.navigate) {
this.props.navigate(this.props.returnTo);
}
} catch (err) {
this.setState({ submitting: false });
notifyError(err);
}
}
render() {
const { inputRef, returnTo, navigate } = this.props;
const { input, submitting } = this.state;
const canSubmit = Boolean(input.trim()) && !submitting;
return (
<PanelTileGrid>
<Box
ref={inputRef}
sx={{
gridColumn: {
xs: '1 / -1',
sm: 'span 2',
md: 'span 2',
},
display: 'flex',
flexDirection: 'column',
gap: 1,
pb: 2,
}}
>
{returnTo ? (
<Alert
severity="info"
sx={{ py: 0.5, alignItems: 'center' }}
action={
<Button
color="inherit"
size="small"
onClick={() => navigate?.(returnTo)}
>
Zurück
</Button>
}
>
{input
? `Lagername „${input}“ übernommen.`
: 'Neues Lager anlegen.'}
</Alert>
) : null}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<SingleLineTextEdit
sx={{ flex: 1 }}
size="small"
search
clear
value={input}
disabled={submitting}
onChange={(next) => this.onInputChange(next)}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
void this.handleSubmit();
}
}}
/>
<Button
variant="contained"
disabled={!canSubmit}
onClick={() => void this.handleSubmit()}
>
Hinzufügen
</Button>
</Box>
</Box>
</PanelTileGrid>
);
}
}
class ArtikelLagerPage extends PureComponent {
constructor(props) {
super(props);
const { prefill } = getInitialParams(props);
const initialWarehouses = warehouseAutomat.state.warehouses || [];
const initialWarehouses =
warehouseAutomat.state.filteredWarehouses ?? warehouseAutomat.state.warehouses ?? [];
this.state = {
status: warehouseAutomat.state.status === 'ready' ? 'ready' : 'loading',
error: warehouseAutomat.state.error ? backendErrorFrom(warehouseAutomat.state.error) : null,
warehouses: initialWarehouses,
drafts: draftsFrom(initialWarehouses),
newName: prefill,
busyKey: null,
filter: warehouseAutomat.state.filter ?? '',
};
this._cancelled = false;
this.searchRef = createRef();
this.listRef = createRef();
this._sortable = null;
this.handleCreate = this.handleCreate.bind(this);
this._cancelled = false;
this.handleRetry = this.handleRetry.bind(this);
this.loadWarehouses = this.loadWarehouses.bind(this);
this._initSortable = this._initSortable.bind(this);
this._destroySortable = this._destroySortable.bind(this);
}
componentDidMount() {
setLastArticleSku(null);
const { prefill } = getInitialParams(this.props);
if (prefill && !this.state.newName) {
this.setState({ newName: prefill });
}
this._cancelled = false;
this.unsub = warehouseAutomat.subscribe((state) => {
if (this._cancelled) return;
if (state.status === 'ready') {
this.applyWarehouses(state.warehouses);
} else if (state.status === 'failed') {
this.setState({ status: 'failed', error: backendErrorFrom(state.error) });
}
});
this.unsub = warehouseAutomat.subscribe(this, (state) => ({
warehouses: state.filteredWarehouses ?? state.warehouses,
filter: state.filter ?? '',
status: state.status,
error: state.error ? backendErrorFrom(state.error) : null,
}));
void this.loadWarehouses();
if (warehouseAutomat.state.status !== 'ready') {
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
} else {
this._initSortable();
}
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.location !== this.props.location) {
const { prefill } = getInitialParams(this.props);
if (prefill && prefill !== this.state.newName) {
this.setState({ newName: prefill });
if (
prevState.status !== this.state.status ||
prevState.warehouses !== this.state.warehouses ||
prevState.filter !== this.state.filter
) {
if (this.state.status === 'ready') {
this._initSortable();
}
}
// Re-initialise Sortable when warehouses change or list mounts
if (prevState.warehouses !== this.state.warehouses && this.listRef.current) {
this._initSortable();
}
}
componentWillUnmount() {
@@ -114,24 +214,30 @@ class ArtikelLagerPage extends PureComponent {
const el = this.listRef.current;
if (!el) return;
const isFiltered = Boolean(this.state.filter?.trim());
this._sortable = Sortable.create(el, {
handle: '.drag-handle',
animation: 150,
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
disabled: isFiltered,
onEnd: (evt) => {
const { oldIndex, newIndex } = evt;
if (oldIndex === newIndex) return;
this.setState((prev) => {
const next = [...prev.warehouses];
const [moved] = next.splice(oldIndex, 1);
next.splice(newIndex, 0, moved);
return { warehouses: next };
}, () => {
const ids = this.state.warehouses.map((w) => w.id);
void this._persistOrder(ids);
});
this.setState(
(prev) => {
const next = [...prev.warehouses];
const [moved] = next.splice(oldIndex, 1);
next.splice(newIndex, 0, moved);
return { warehouses: next };
},
() => {
const ids = this.state.warehouses.map((w) => w.id);
void this._persistOrder(ids);
}
);
},
});
}
@@ -147,133 +253,19 @@ class ArtikelLagerPage extends PureComponent {
} catch (err) {
if (this._cancelled) return;
notifyError(err);
// Roll back optimistic reorder
void this.refreshFromServer();
}
}
applyWarehouses(warehouses) {
// Preserve order returned by the server (already sorted by sort/name from backend)
this.setState((prev) => {
const currentDrafts = prev.drafts || {};
const nextDrafts = { ...draftsFrom(warehouses) };
// Preserve unsaved in-progress edits for still-existing items if not busy
for (const wh of warehouses) {
if (prev.busyKey !== wh.id && currentDrafts[wh.id] !== undefined) {
nextDrafts[wh.id] = currentDrafts[wh.id];
}
}
return {
status: 'ready',
error: null,
warehouses,
drafts: nextDrafts,
};
});
}
async loadWarehouses() {
if (warehouseAutomat.state.status !== 'ready') {
this.setState({ status: 'loading', error: null });
}
try {
const list = await warehouseAutomat.actions.load();
if (this._cancelled) return;
this.applyWarehouses(list);
} catch (err) {
if (this._cancelled) return;
this.setState({ status: 'failed', error: backendErrorFrom(err) });
void warehouseAutomat.actions.reload();
}
}
handleRetry() {
void this.loadWarehouses();
}
async refreshFromServer() {
const list = await warehouseAutomat.actions.reload();
if (this._cancelled) return;
this.applyWarehouses(list);
}
async handleCreate() {
const name = this.state.newName.trim();
if (!name || this.state.busyKey != null) return;
const { returnTo } = getInitialParams(this.props);
this.setState({ busyKey: 'new' });
try {
const newWarehouse = await warehouseAutomat.actions.create({ name });
await this.refreshFromServer();
if (this._cancelled) return;
this.setState({ newName: '', busyKey: null });
enqueueSnackbar(`Lager „${newWarehouse.name || name}" angelegt.`, { variant: 'success' });
if (returnTo && this.props.navigate) {
this.props.navigate(returnTo);
}
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState({ busyKey: null });
}
}
async handleRename(wh) {
const draft = String(this.state.drafts[wh.id] ?? '').trim();
if (!draft) {
this.setState((prev) => ({
drafts: { ...prev.drafts, [wh.id]: wh.name },
}));
return;
}
if (draft === wh.name || this.state.busyKey != null) return;
this.setState({ busyKey: wh.id });
try {
await warehouseAutomat.actions.update(wh.id, { name: draft });
await this.refreshFromServer();
if (this._cancelled) return;
this.setState({ busyKey: null });
enqueueSnackbar('Lager gespeichert.', { variant: 'success' });
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState((prev) => ({
busyKey: null,
drafts: { ...prev.drafts, [wh.id]: wh.name },
}));
}
}
async handleDelete(wh) {
if (this.state.busyKey != null) return;
if (!window.confirm(`Lager „${wh.name}" wirklich löschen?`)) {
return;
}
this.setState({ busyKey: wh.id });
try {
await warehouseAutomat.actions.remove(wh.id);
await this.refreshFromServer();
if (this._cancelled) return;
this.setState({ busyKey: null });
enqueueSnackbar('Lager gelöscht.', { variant: 'success' });
} catch (err) {
if (this._cancelled) return;
notifyError(err);
this.setState({ busyKey: null });
}
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
}
render() {
const { status, error, warehouses, drafts, newName, busyKey } = this.state;
const busy = busyKey != null;
const { status, error, warehouses, filter } = this.state;
const { prefill, returnTo } = getInitialParams(this.props);
const { returnTo } = getInitialParams(this.props);
if (status === 'loading') {
if (status === 'loading' || status === 'idle') {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
<CircularProgress />
@@ -285,129 +277,34 @@ class ArtikelLagerPage extends PureComponent {
return <BackendError error={error} onRetry={this.handleRetry} />;
}
const trimmedFilter = filter?.trim() ?? '';
return (
<>
{/* SortableJS ghost / chosen styling */}
<ArtikelLagerSearchField
inputRef={this.searchRef}
prefill={prefill}
returnTo={returnTo}
navigate={this.props.navigate}
/>
<PanelTileGrid>
<PanelTile wide={2} minHeight={280} color={GREEN_PANEL}>
<Stack spacing={2}>
{returnTo ? (
<Alert
severity="info"
sx={{ py: 0.5, alignItems: 'center' }}
action={
<Button
color="inherit"
size="small"
onClick={() => this.props.navigate?.(returnTo)}
>
Zurück
</Button>
}
>
{newName
? `Lagername „${newName}" übernommen.`
: 'Neues Lager anlegen.'}
</Alert>
) : null}
<Typography variant="body2" color="text.secondary">
Reihenfolge per Drag &amp; Drop anpassen.
</Typography>
<List dense disablePadding ref={this.listRef}>
{warehouses.length === 0 ? (
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
Noch keine Lager angelegt.
</Typography>
) : (
warehouses.map((wh) => (
<ListItem
key={wh.id}
disableGutters
sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
data-id={wh.id}
>
<Box
className="drag-handle"
sx={{
display: 'flex',
alignItems: 'center',
color: 'text.disabled',
flexShrink: 0,
'&:hover': { color: 'text.secondary' },
transition: 'color 0.15s',
}}
>
<DragIndicatorIcon fontSize="small" />
</Box>
<WarehouseIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
<SingleLineTextEdit
size="small"
label=""
value={drafts[wh.id] ?? ''}
disabled={busy}
onChange={(next) =>
this.setState((prev) => ({
drafts: { ...prev.drafts, [wh.id]: next },
}))
}
onBlur={() => void this.handleRename(wh)}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
event.target.blur();
}
if (event.key === 'Escape') {
event.preventDefault();
this.setState((prev) => ({
drafts: { ...prev.drafts, [wh.id]: wh.name },
}));
event.target.blur();
}
}}
sx={{ flex: 1 }}
/>
<IconButton
edge="end"
size="small"
aria-label={`„${wh.name}" löschen`}
disabled={busy}
onClick={() => void this.handleDelete(wh)}
>
<DeleteOutlinedIcon fontSize="small" />
</IconButton>
</ListItem>
))
)}
</List>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<SingleLineTextEdit
size="small"
label="Neues Lager"
value={newName}
disabled={busy}
onChange={(next) => this.setState({ newName: next })}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
void this.handleCreate();
}
}}
sx={{ flex: 1 }}
/>
<Button
variant="contained"
size="small"
disabled={busy || !newName.trim()}
onClick={() => void this.handleCreate()}
>
{busyKey === 'new' ? '…' : 'Hinzufügen'}
</Button>
</Box>
</Stack>
<PanelTile wide={2} minHeight={0} color={GREEN_PANEL}>
<List dense disablePadding ref={this.listRef} sx={{ width: '100%' }}>
{warehouses.length === 0 ? (
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
{trimmedFilter
? `Keine Treffer für „${trimmedFilter}“.`
: 'Noch keine Lager angelegt.'}
</Typography>
) : (
warehouses.map((wh) => (
<ArtikelLager
key={wh.id}
warehouse={wh}
/>
))
)}
</List>
</PanelTile>
</PanelTileGrid>
</>
@@ -415,4 +312,5 @@ class ArtikelLagerPage extends PureComponent {
}
}
export { ArtikelLager, ArtikelLagerSearchField };
export default withNavigate(ArtikelLagerPage);

927
src/routes/artikel/merkmale.jsx
View File

File diff suppressed because it is too large Load Diff