Compare commits
3 Commits
deb22d8b4f
...
83dc698322
| Author | SHA1 | Date | |
|---|---|---|---|
|
83dc698322 | ||
|
|
5e8037d430 | ||
|
|
45cc69730b |
146
package-lock.json
generated
146
package-lock.json
generated
@@ -12,8 +12,8 @@
|
|||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@jsquash/avif": "^2.1.1",
|
"@jsquash/avif": "^2.1.1",
|
||||||
"@jsquash/resize": "^2.1.1",
|
"@jsquash/resize": "^2.1.1",
|
||||||
"@mui/icons-material": "^9.4.0",
|
"@mui/icons-material": "^9.5.0",
|
||||||
"@mui/material": "^9.4.0",
|
"@mui/material": "^9.5.0",
|
||||||
"@shopify/draggable": "^1.2.1",
|
"@shopify/draggable": "^1.2.1",
|
||||||
"ag-grid-community": "^36.2.0",
|
"ag-grid-community": "^36.2.0",
|
||||||
"ag-grid-react": "^36.2.0",
|
"ag-grid-react": "^36.2.0",
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
"react-dom": "^19.3.0",
|
"react-dom": "^19.3.0",
|
||||||
"react-router-dom": "^7.18.4",
|
"react-router-dom": "^7.18.4",
|
||||||
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
|
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
|
||||||
"react-window": "^2.3.3",
|
"react-window": "^2.3.4",
|
||||||
"skelehash-wasm": "^0.1.0",
|
"skelehash-wasm": "^0.1.0",
|
||||||
"sortablejs": "^1.15.7",
|
"sortablejs": "^1.15.7",
|
||||||
"thumbhash": "^0.1.1"
|
"thumbhash": "^0.1.1"
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
"eslint-plugin-react-hooks": "^7.1.1",
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
"globals": "^17.13.0",
|
"globals": "^17.13.0",
|
||||||
"qrcode": "^1.5.4",
|
"qrcode": "^1.5.4",
|
||||||
"vite": "^8.3.2",
|
"vite": "^8.3.4",
|
||||||
"vite-plugin-pwa": "^2.0.0"
|
"vite-plugin-pwa": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2680,9 +2680,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@mui/core-downloads-tracker": {
|
"node_modules/@mui/core-downloads-tracker": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.5.0.tgz",
|
||||||
"integrity": "sha512-d+gIYM1raJP87yrVQcVg+Q3vycVMArMkgu/TjJLi2vTvO9FHKWNRR1xs9nnN4eLpM9nGxxm02UMvc9BrmcUKvQ==",
|
"integrity": "sha512-PErEpl3Lp+1ZqWYKI7GQU8XSiciAFmLbUAZ7IoaUL598HLy1UAFuEUMEJu8yAS1v8vkXYzWprMVZzky4UwXoOA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "opencollective",
|
"type": "opencollective",
|
||||||
@@ -2690,12 +2690,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/icons-material": {
|
"node_modules/@mui/icons-material": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.5.0.tgz",
|
||||||
"integrity": "sha512-5PVgBYtLOXTk6u0YUAjoV9GoTUQDbeZ8g+pus2h0GphLT/rpmftRnB5D/Kw6QCAovB7EyBX7UxKdZqPBBAHUKw==",
|
"integrity": "sha512-dahtVaqnRUIBgaZ4WC9EdP+LgJ5d2rslASYIX+nDFG6+ssUiM11jQ+Gd1wH8vhUGoNA9ES40MYics5BI8zJFXQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7"
|
"@babel/runtime": "^7.29.7 || ^8.0.5"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
@@ -2705,7 +2705,7 @@
|
|||||||
"url": "https://opencollective.com/mui-org"
|
"url": "https://opencollective.com/mui-org"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@mui/material": "^9.4.0",
|
"@mui/material": "^9.5.0",
|
||||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
"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": {
|
"node_modules/@mui/material": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-9.5.0.tgz",
|
||||||
"integrity": "sha512-6KKUIvkQ2r/s48s9VZV9JEZ1W2dRa7RndVsF+Ipx4CYxDOQeozeRsS5r9NiheFf8A5hpbqJJIGoX7hjg5X4XUw==",
|
"integrity": "sha512-QgqvdVjZoKxP8E8SBxYY6LrdV+kw00moXweZQWBbMMdifPKZAGfUaaXhGKIca6fjKnCL6HJIe/AWWCpqNvyHVw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7",
|
"@babel/runtime": "^7.29.7 || ^8.0.5",
|
||||||
"@mui/core-downloads-tracker": "^9.4.0",
|
"@mui/core-downloads-tracker": "^9.5.0",
|
||||||
"@mui/system": "^9.4.0",
|
"@mui/system": "^9.5.0",
|
||||||
"@mui/types": "^9.4.0",
|
"@mui/types": "^9.5.0",
|
||||||
"@mui/utils": "^9.4.0",
|
"@mui/utils": "^9.5.0",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
"@types/react-transition-group": "^4.4.12",
|
"@types/react-transition-group": "^4.4.12",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"csstype": "^3.2.3",
|
"csstype": "^3.2.3",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react-is": "^19.2.8",
|
"react-is": "^19.3.0",
|
||||||
"react-transition-group": "^4.4.5"
|
"react-transition-group": "^4.4.5"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -2744,7 +2744,7 @@
|
|||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@emotion/react": "^11.5.0",
|
"@emotion/react": "^11.5.0",
|
||||||
"@emotion/styled": "^11.3.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",
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
"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"
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
@@ -2765,13 +2765,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/private-theming": {
|
"node_modules/@mui/private-theming": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.5.0.tgz",
|
||||||
"integrity": "sha512-qQpX/2XPGDz5F2OIWzo4kkorURlDeXGKytRQudXCdLS5TuwKsMKaZyx77LZEVSB73c7o3UrLWwQ/goRuHBdtjw==",
|
"integrity": "sha512-UHZKySlr4ZJeA5HEhe/Tq1fhsR5573ViKYn7JV80dCVJtgqRQIplRSer1DHPg2Yi22llX7QRhgM0Vtrx4kZHSA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7",
|
"@babel/runtime": "^7.29.7 || ^8.0.5",
|
||||||
"@mui/utils": "^9.4.0",
|
"@mui/utils": "^9.5.0",
|
||||||
"prop-types": "^15.8.1"
|
"prop-types": "^15.8.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -2792,12 +2792,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/styled-engine": {
|
"node_modules/@mui/styled-engine": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.5.0.tgz",
|
||||||
"integrity": "sha512-SlqVEYqnyEgXMFW4JuIDMelyhKzoWBJ85v2mNCQd0XtU0uk7U9E1zaJZ06XqodhA8oJrb+4Q+3E/JlwBe4jWkw==",
|
"integrity": "sha512-IX1ceHnZ0bJgzJRWO/Ayl4ME1rNmpWVYwV28yb089UAMR17rJkV1qfr7ApsWQXXPi1oi+2JapJrWQAiAnTlJHQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7",
|
"@babel/runtime": "^7.29.7 || ^8.0.5",
|
||||||
"@emotion/cache": "^11.14.0",
|
"@emotion/cache": "^11.14.0",
|
||||||
"@emotion/serialize": "^1.3.3",
|
"@emotion/serialize": "^1.3.3",
|
||||||
"@emotion/sheet": "^1.4.0",
|
"@emotion/sheet": "^1.4.0",
|
||||||
@@ -2826,16 +2826,16 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/system": {
|
"node_modules/@mui/system": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/system/-/system-9.5.0.tgz",
|
||||||
"integrity": "sha512-AZz9z13oGS1J0BYeAFHTbV7PegCtPiE/uMEIi7TJ1kTx3Vkt+jUpLyXF/2uV8B6Y79iTh98kVeOH9fX3x3zXXg==",
|
"integrity": "sha512-OZuAwvoiaaHpvn0a540VH1DUwwmojJubGfNmO2g+nb2ybNDP4/gF7t7aA6AMduELSuJ5yxwlzyFvUO3CfLv1Yg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7",
|
"@babel/runtime": "^7.29.7 || ^8.0.5",
|
||||||
"@mui/private-theming": "^9.4.0",
|
"@mui/private-theming": "^9.5.0",
|
||||||
"@mui/styled-engine": "^9.4.0",
|
"@mui/styled-engine": "^9.5.0",
|
||||||
"@mui/types": "^9.4.0",
|
"@mui/types": "^9.5.0",
|
||||||
"@mui/utils": "^9.4.0",
|
"@mui/utils": "^9.5.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"csstype": "^3.2.3",
|
"csstype": "^3.2.3",
|
||||||
"prop-types": "^15.8.1"
|
"prop-types": "^15.8.1"
|
||||||
@@ -2866,12 +2866,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/types": {
|
"node_modules/@mui/types": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/types/-/types-9.5.0.tgz",
|
||||||
"integrity": "sha512-13DH0Oniua4WmGqeYbQAZqmiN7r4nfd0zwIoGJ5QeJwyIHgEmf+LkRw/jV1HZb6AiUoHX8Oxf4xgalq3vYHcIw==",
|
"integrity": "sha512-O0S6xS80qEQqW2CYNrd4GlBEQ1xpMOHZ5b4zO/DaLu6NZmtthM6smEg0Gz/u9gX5vL+8NB3EiBIxmxSCcG590Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7"
|
"@babel/runtime": "^7.29.7 || ^8.0.5"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
@@ -2883,17 +2883,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/utils": {
|
"node_modules/@mui/utils": {
|
||||||
"version": "9.4.0",
|
"version": "9.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.5.0.tgz",
|
||||||
"integrity": "sha512-WkzY8uYtqUDyGKPShrRQRBomfMQHddlsyKu/gRRESYO24tDPD2z0xRE8CBoUsWqpBa+YrFs9KixiS7kQRjsPAQ==",
|
"integrity": "sha512-8m0LfSgE2pj58znY3kZ+anwRKbnBkcu/7AJPA8L/77wEjN0QnpX4/zRAccyplp1VEUnMsUBADeTRin5Mkf7epA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.29.7",
|
"@babel/runtime": "^7.29.7 || ^8.0.5",
|
||||||
"@mui/types": "^9.4.0",
|
"@mui/types": "^9.5.0",
|
||||||
"@types/prop-types": "^15.7.15",
|
"@types/prop-types": "^15.7.15",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react-is": "^19.2.8"
|
"react-is": "^19.3.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
@@ -3796,6 +3796,16 @@
|
|||||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@types/react-transition-group": {
|
||||||
"version": "4.4.12",
|
"version": "4.4.12",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
|
||||||
@@ -6849,9 +6859,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.19",
|
"version": "3.3.20",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
|
||||||
"integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
|
"integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@@ -7234,9 +7244,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/postcss": {
|
"node_modules/postcss": {
|
||||||
"version": "8.5.28",
|
"version": "8.5.29",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.29.tgz",
|
||||||
"integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
|
"integrity": "sha512-49cGhUbXj8Qenv0iTMxA1cFBzxXoctpC9Ujd77t1WcbJIr6nF/eI7g/8MgxrYldFRuAXvja7xQRwavoW7kgrxQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@@ -7254,9 +7264,9 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"nanoid": "^3.3.18",
|
"nanoid": "^3.3.19",
|
||||||
"picocolors": "^1.1.1",
|
"picocolors": "^1.1.1",
|
||||||
"source-map-js": "^1.2.1"
|
"source-map-js": "^1.2.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^10 || ^12 || >=14"
|
"node": "^10 || ^12 || >=14"
|
||||||
@@ -7505,9 +7515,9 @@
|
|||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
"node_modules/react-window": {
|
"node_modules/react-window": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.3.4.tgz",
|
||||||
"integrity": "sha512-uu/dTwysXp+YL+i5GW/cC/3JrqyE7oE6DYXYVlTeMaDSDgCI+UGo+XCKwXfS8uoFPih8TJYTnikqjAnbDvn75Q==",
|
"integrity": "sha512-CnRWoRg+ZnQkLcULSNdbgKJnfcexy9x+9ELOATmDlDv3ZoADyLJc22vN3JRvMV651A6gFwYBlxllU9X+H9dyhQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^18.0.0 || ^19.0.0",
|
"react": "^18.0.0 || ^19.0.0",
|
||||||
@@ -8177,9 +8187,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/source-map-js": {
|
"node_modules/source-map-js": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
|
||||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
"integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "BSD-3-Clause",
|
"license": "BSD-3-Clause",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -8762,16 +8772,16 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "8.3.2",
|
"version": "8.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.4.tgz",
|
||||||
"integrity": "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w==",
|
"integrity": "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lightningcss": "^1.33.0",
|
"lightningcss": "^1.33.0",
|
||||||
"picomatch": "^4.0.7",
|
"picomatch": "^4.0.7",
|
||||||
"postcss": "^8.5.28",
|
"postcss": "^8.5.29",
|
||||||
"rolldown": "~1.2.11",
|
"rolldown": "~1.2.12",
|
||||||
"tinyglobby": "^0.2.17"
|
"tinyglobby": "^0.2.17"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|||||||
@@ -21,8 +21,8 @@
|
|||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@jsquash/avif": "^2.1.1",
|
"@jsquash/avif": "^2.1.1",
|
||||||
"@jsquash/resize": "^2.1.1",
|
"@jsquash/resize": "^2.1.1",
|
||||||
"@mui/icons-material": "^9.4.0",
|
"@mui/icons-material": "^9.5.0",
|
||||||
"@mui/material": "^9.4.0",
|
"@mui/material": "^9.5.0",
|
||||||
"@shopify/draggable": "^1.2.1",
|
"@shopify/draggable": "^1.2.1",
|
||||||
"ag-grid-community": "^36.2.0",
|
"ag-grid-community": "^36.2.0",
|
||||||
"ag-grid-react": "^36.2.0",
|
"ag-grid-react": "^36.2.0",
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
"react-dom": "^19.3.0",
|
"react-dom": "^19.3.0",
|
||||||
"react-router-dom": "^7.18.4",
|
"react-router-dom": "^7.18.4",
|
||||||
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
|
"react-virtual-aggridautomat": "file:../react-virtual-aggridautomat",
|
||||||
"react-window": "^2.3.3",
|
"react-window": "^2.3.4",
|
||||||
"skelehash-wasm": "^0.1.0",
|
"skelehash-wasm": "^0.1.0",
|
||||||
"sortablejs": "^1.15.7",
|
"sortablejs": "^1.15.7",
|
||||||
"thumbhash": "^0.1.1"
|
"thumbhash": "^0.1.1"
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
"eslint-plugin-react-hooks": "^7.1.1",
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
"globals": "^17.13.0",
|
"globals": "^17.13.0",
|
||||||
"qrcode": "^1.5.4",
|
"qrcode": "^1.5.4",
|
||||||
"vite": "^8.3.2",
|
"vite": "^8.3.4",
|
||||||
"vite-plugin-pwa": "^2.0.0"
|
"vite-plugin-pwa": "^2.0.0"
|
||||||
},
|
},
|
||||||
"allowScripts": {
|
"allowScripts": {
|
||||||
|
|||||||
@@ -23,6 +23,8 @@ import authAutomat from './authAutomat';
|
|||||||
/**
|
/**
|
||||||
* @typedef {Object} WarehouseState
|
* @typedef {Object} WarehouseState
|
||||||
* @property {Array<Warehouse>} warehouses Company-scoped warehouses.
|
* @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 {'idle'|'loading'|'ready'|'failed'} status Load lifecycle state.
|
||||||
* @property {Error|null} error Last load error.
|
* @property {Error|null} error Last load error.
|
||||||
*/
|
*/
|
||||||
@@ -30,12 +32,26 @@ import authAutomat from './authAutomat';
|
|||||||
/** @type {WarehouseState} */
|
/** @type {WarehouseState} */
|
||||||
const initialState = {
|
const initialState = {
|
||||||
warehouses: [],
|
warehouses: [],
|
||||||
|
filteredWarehouses: [],
|
||||||
|
filter: '',
|
||||||
status: 'idle',
|
status: 'idle',
|
||||||
error: null,
|
error: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
let warehouseAutomat;
|
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.
|
* Fetches the company-scoped warehouse list.
|
||||||
*
|
*
|
||||||
@@ -61,7 +77,7 @@ function loadWarehouses() {
|
|||||||
warehouseAutomat.setState({ status: 'loading', error: null });
|
warehouseAutomat.setState({ status: 'loading', error: null });
|
||||||
try {
|
try {
|
||||||
const warehouses = await fetchWarehouses();
|
const warehouses = await fetchWarehouses();
|
||||||
warehouseAutomat.setState({ warehouses, status: 'ready', error: null });
|
updateStateWithWarehouses(warehouses, { status: 'ready', error: null });
|
||||||
return warehouses;
|
return warehouses;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
warehouseAutomat.setState({ status: 'failed', error });
|
warehouseAutomat.setState({ status: 'failed', error });
|
||||||
@@ -74,6 +90,15 @@ function loadWarehouses() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const actions = {
|
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.
|
* Loads the warehouse list, exposing a loading/failed lifecycle.
|
||||||
*
|
*
|
||||||
@@ -91,7 +116,7 @@ const actions = {
|
|||||||
async reload() {
|
async reload() {
|
||||||
try {
|
try {
|
||||||
const warehouses = await fetchWarehouses();
|
const warehouses = await fetchWarehouses();
|
||||||
warehouseAutomat.setState({ warehouses, status: 'ready', error: null });
|
updateStateWithWarehouses(warehouses, { status: 'ready', error: null });
|
||||||
return warehouses;
|
return warehouses;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
warehouseAutomat.setState({ error });
|
warehouseAutomat.setState({ error });
|
||||||
@@ -130,6 +155,10 @@ const actions = {
|
|||||||
return data.warehouse;
|
return data.warehouse;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
rename(id, body) {
|
||||||
|
return actions.update(id, body);
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Deletes a warehouse and refreshes the cached list.
|
* Deletes a warehouse and refreshes the cached list.
|
||||||
*
|
*
|
||||||
@@ -148,6 +177,11 @@ const actions = {
|
|||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
async reorder(warehouseIds) {
|
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 warehouseApi.order({ warehouseIds });
|
||||||
await warehouseAutomat.actions.reload();
|
await warehouseAutomat.actions.reload();
|
||||||
},
|
},
|
||||||
@@ -159,8 +193,7 @@ const actions = {
|
|||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
setWarehouses(warehouses) {
|
setWarehouses(warehouses) {
|
||||||
warehouseAutomat.setState({
|
updateStateWithWarehouses(warehouses, {
|
||||||
warehouses: Array.isArray(warehouses) ? warehouses : [],
|
|
||||||
status: 'ready',
|
status: 'ready',
|
||||||
error: null,
|
error: null,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -20,7 +20,6 @@ import {
|
|||||||
NAV_SURFACE,
|
NAV_SURFACE,
|
||||||
} from '../colors';
|
} from '../colors';
|
||||||
import { ChatFab, ChatDrawer } from './chat';
|
import { ChatFab, ChatDrawer } from './chat';
|
||||||
import PageMinimap from './PageMinimap';
|
|
||||||
|
|
||||||
|
|
||||||
const SIDEBAR_WIDTH = 144;
|
const SIDEBAR_WIDTH = 144;
|
||||||
@@ -323,7 +322,6 @@ export default function AppShell() {
|
|||||||
</Box>
|
</Box>
|
||||||
<ChatFab />
|
<ChatFab />
|
||||||
<ChatDrawer />
|
<ChatDrawer />
|
||||||
<PageMinimap />
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { matchPath, useLocation } from 'react-router-dom';
|
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import IconButton from '@mui/material/IconButton';
|
import IconButton from '@mui/material/IconButton';
|
||||||
import MapRoundedIcon from '@mui/icons-material/MapRounded';
|
import MapRoundedIcon from '@mui/icons-material/MapRounded';
|
||||||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||||
import { ARTICLE_TAB, readPreferredArticleTab } from './article/articleRoute';
|
|
||||||
|
|
||||||
const MINIMAP_WIDTH = 220;
|
const MINIMAP_WIDTH = 220;
|
||||||
const MINIMAP_MAX_HEIGHT = 300;
|
const MINIMAP_MAX_HEIGHT = 300;
|
||||||
@@ -42,16 +40,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
|
|||||||
const idleTimerRef = useRef(null);
|
const idleTimerRef = useRef(null);
|
||||||
const metricsRef = useRef({ docH: 1, winH: 1, thumbH: 1 });
|
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). */
|
/** Move the viewport rectangle without re-rendering (called on scroll). */
|
||||||
const updateViewport = useCallback(() => {
|
const updateViewport = useCallback(() => {
|
||||||
@@ -160,11 +148,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
|
|||||||
if (enabled && open) rebuild();
|
if (enabled && open) rebuild();
|
||||||
}, [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(() => {
|
useEffect(() => {
|
||||||
rebuild();
|
rebuild();
|
||||||
@@ -214,7 +197,7 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
|
|||||||
// Stays mounted for fade-out; hidden unless scrolling/hovering/dragging.
|
// Stays mounted for fade-out; hidden unless scrolling/hovering/dragging.
|
||||||
const visible = scrollActive || 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.
|
// Collapsed: a single centered pill to reopen the overview.
|
||||||
if (!open) {
|
if (!open) {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
|
import PageMinimap from '../../PageMinimap';
|
||||||
|
|
||||||
function PanelHtmlValue({ html }) {
|
function PanelHtmlValue({ html }) {
|
||||||
if (html == null || html === '') return null;
|
if (html == null || html === '') return null;
|
||||||
@@ -57,6 +58,11 @@ export default class ArticleSeoTab extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const { article: articleData } = this.props;
|
const { article: articleData } = this.props;
|
||||||
const desc = articleData.desc ?? articleData.description;
|
const desc = articleData.desc ?? articleData.description;
|
||||||
return <PanelHtmlValue html={desc} />;
|
return (
|
||||||
|
<>
|
||||||
|
<PanelHtmlValue html={desc} />
|
||||||
|
<PageMinimap />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
import { PureComponent } from 'react';
|
import { PureComponent } from 'react';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
|
import Chip from '@mui/material/Chip';
|
||||||
import IconButton from '@mui/material/IconButton';
|
import IconButton from '@mui/material/IconButton';
|
||||||
import ListItem from '@mui/material/ListItem';
|
import ListItem from '@mui/material/ListItem';
|
||||||
|
import Tooltip from '@mui/material/Tooltip';
|
||||||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||||||
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
|
||||||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||||||
@@ -111,6 +113,8 @@ class ArtikelMarke extends PureComponent {
|
|||||||
const name = brand?.name ?? '';
|
const name = brand?.name ?? '';
|
||||||
const hasLogo = this.hasLogo();
|
const hasLogo = this.hasLogo();
|
||||||
|
|
||||||
|
const articleCount = brand?.articleCount ?? 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ListItem
|
<ListItem
|
||||||
@@ -142,8 +146,7 @@ class ArtikelMarke extends PureComponent {
|
|||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<SingleLineTextEdit
|
||||||
{true ? (<SingleLineTextEdit
|
|
||||||
size="small"
|
size="small"
|
||||||
label=""
|
label=""
|
||||||
value={draft}
|
value={draft}
|
||||||
@@ -153,7 +156,28 @@ class ArtikelMarke extends PureComponent {
|
|||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
sx={{ flex: 1, minWidth: 0 }}
|
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
|
<IconButton
|
||||||
aria-label={`„${name}" löschen`}
|
aria-label={`„${name}" löschen`}
|
||||||
|
|||||||
227
src/components/merkmale/ArtikelMerkmalAuswahl.jsx
Normal file
227
src/components/merkmale/ArtikelMerkmalAuswahl.jsx
Normal 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
212
src/components/merkmale/ArtikelMerkmalText.jsx
Normal 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
163
src/components/merkmale/ArtikelMerkmalWert.jsx
Normal 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
3
src/components/merkmale/index.js
Normal 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
145
src/components/warehouse/ArtikelLager.jsx
Normal 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
1
src/components/warehouse/index.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as ArtikelLager } from './ArtikelLager';
|
||||||
@@ -3,14 +3,8 @@ import Alert from '@mui/material/Alert';
|
|||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import CircularProgress from '@mui/material/CircularProgress';
|
import CircularProgress from '@mui/material/CircularProgress';
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import List from '@mui/material/List';
|
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 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 Sortable from 'sortablejs';
|
||||||
import { enqueueSnackbar } from 'notistack';
|
import { enqueueSnackbar } from 'notistack';
|
||||||
import BackendError from '../../components/BackendError';
|
import BackendError from '../../components/BackendError';
|
||||||
@@ -21,13 +15,8 @@ import { backendErrorFrom } from '../../utils/backendError';
|
|||||||
import { notifyError } from '../../utils/notify';
|
import { notifyError } from '../../utils/notify';
|
||||||
import { setLastArticleSku } from '../../automats';
|
import { setLastArticleSku } from '../../automats';
|
||||||
import warehouseAutomat from '../../automats/warehouseAutomat';
|
import warehouseAutomat from '../../automats/warehouseAutomat';
|
||||||
import {
|
import { ArtikelLager } from '../../components/warehouse';
|
||||||
GREEN_PANEL,
|
import { GREEN_PANEL } from '../../colors';
|
||||||
} from '../../colors';
|
|
||||||
|
|
||||||
function draftsFrom(warehouses) {
|
|
||||||
return Object.fromEntries(warehouses.map((row) => [row.id, row.name]));
|
|
||||||
}
|
|
||||||
|
|
||||||
function getInitialParams(props) {
|
function getInitialParams(props) {
|
||||||
const searchParams =
|
const searchParams =
|
||||||
@@ -45,63 +34,174 @@ function getInitialParams(props) {
|
|||||||
return { prefill: prefill.trim(), returnTo };
|
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 {
|
class ArtikelLagerPage extends PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
const { prefill } = getInitialParams(props);
|
const initialWarehouses =
|
||||||
const initialWarehouses = warehouseAutomat.state.warehouses || [];
|
warehouseAutomat.state.filteredWarehouses ?? warehouseAutomat.state.warehouses ?? [];
|
||||||
this.state = {
|
this.state = {
|
||||||
status: warehouseAutomat.state.status === 'ready' ? 'ready' : 'loading',
|
status: warehouseAutomat.state.status === 'ready' ? 'ready' : 'loading',
|
||||||
error: warehouseAutomat.state.error ? backendErrorFrom(warehouseAutomat.state.error) : null,
|
error: warehouseAutomat.state.error ? backendErrorFrom(warehouseAutomat.state.error) : null,
|
||||||
warehouses: initialWarehouses,
|
warehouses: initialWarehouses,
|
||||||
drafts: draftsFrom(initialWarehouses),
|
filter: warehouseAutomat.state.filter ?? '',
|
||||||
newName: prefill,
|
|
||||||
busyKey: null,
|
|
||||||
};
|
};
|
||||||
this._cancelled = false;
|
this.searchRef = createRef();
|
||||||
this.listRef = createRef();
|
this.listRef = createRef();
|
||||||
this._sortable = null;
|
this._sortable = null;
|
||||||
|
this._cancelled = false;
|
||||||
this.handleCreate = this.handleCreate.bind(this);
|
|
||||||
this.handleRetry = this.handleRetry.bind(this);
|
this.handleRetry = this.handleRetry.bind(this);
|
||||||
this.loadWarehouses = this.loadWarehouses.bind(this);
|
|
||||||
this._initSortable = this._initSortable.bind(this);
|
this._initSortable = this._initSortable.bind(this);
|
||||||
this._destroySortable = this._destroySortable.bind(this);
|
this._destroySortable = this._destroySortable.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
setLastArticleSku(null);
|
setLastArticleSku(null);
|
||||||
const { prefill } = getInitialParams(this.props);
|
|
||||||
if (prefill && !this.state.newName) {
|
|
||||||
this.setState({ newName: prefill });
|
|
||||||
}
|
|
||||||
this._cancelled = false;
|
this._cancelled = false;
|
||||||
|
|
||||||
this.unsub = warehouseAutomat.subscribe((state) => {
|
this.unsub = warehouseAutomat.subscribe(this, (state) => ({
|
||||||
if (this._cancelled) return;
|
warehouses: state.filteredWarehouses ?? state.warehouses,
|
||||||
if (state.status === 'ready') {
|
filter: state.filter ?? '',
|
||||||
this.applyWarehouses(state.warehouses);
|
status: state.status,
|
||||||
} else if (state.status === 'failed') {
|
error: state.error ? backendErrorFrom(state.error) : null,
|
||||||
this.setState({ status: 'failed', error: backendErrorFrom(state.error) });
|
}));
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
void this.loadWarehouses();
|
if (warehouseAutomat.state.status !== 'ready') {
|
||||||
|
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
|
||||||
|
} else {
|
||||||
|
this._initSortable();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
componentDidUpdate(prevProps, prevState) {
|
||||||
if (prevProps.location !== this.props.location) {
|
if (
|
||||||
const { prefill } = getInitialParams(this.props);
|
prevState.status !== this.state.status ||
|
||||||
if (prefill && prefill !== this.state.newName) {
|
prevState.warehouses !== this.state.warehouses ||
|
||||||
this.setState({ newName: prefill });
|
prevState.filter !== this.state.filter
|
||||||
}
|
) {
|
||||||
}
|
if (this.state.status === 'ready') {
|
||||||
|
|
||||||
// Re-initialise Sortable when warehouses change or list mounts
|
|
||||||
if (prevState.warehouses !== this.state.warehouses && this.listRef.current) {
|
|
||||||
this._initSortable();
|
this._initSortable();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this._cancelled = true;
|
this._cancelled = true;
|
||||||
@@ -114,24 +214,30 @@ class ArtikelLagerPage extends PureComponent {
|
|||||||
const el = this.listRef.current;
|
const el = this.listRef.current;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
|
const isFiltered = Boolean(this.state.filter?.trim());
|
||||||
|
|
||||||
this._sortable = Sortable.create(el, {
|
this._sortable = Sortable.create(el, {
|
||||||
handle: '.drag-handle',
|
handle: '.drag-handle',
|
||||||
animation: 150,
|
animation: 150,
|
||||||
ghostClass: 'sortable-ghost',
|
ghostClass: 'sortable-ghost',
|
||||||
chosenClass: 'sortable-chosen',
|
chosenClass: 'sortable-chosen',
|
||||||
|
disabled: isFiltered,
|
||||||
onEnd: (evt) => {
|
onEnd: (evt) => {
|
||||||
const { oldIndex, newIndex } = evt;
|
const { oldIndex, newIndex } = evt;
|
||||||
if (oldIndex === newIndex) return;
|
if (oldIndex === newIndex) return;
|
||||||
|
|
||||||
this.setState((prev) => {
|
this.setState(
|
||||||
|
(prev) => {
|
||||||
const next = [...prev.warehouses];
|
const next = [...prev.warehouses];
|
||||||
const [moved] = next.splice(oldIndex, 1);
|
const [moved] = next.splice(oldIndex, 1);
|
||||||
next.splice(newIndex, 0, moved);
|
next.splice(newIndex, 0, moved);
|
||||||
return { warehouses: next };
|
return { warehouses: next };
|
||||||
}, () => {
|
},
|
||||||
|
() => {
|
||||||
const ids = this.state.warehouses.map((w) => w.id);
|
const ids = this.state.warehouses.map((w) => w.id);
|
||||||
void this._persistOrder(ids);
|
void this._persistOrder(ids);
|
||||||
});
|
}
|
||||||
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -147,133 +253,19 @@ class ArtikelLagerPage extends PureComponent {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (this._cancelled) return;
|
if (this._cancelled) return;
|
||||||
notifyError(err);
|
notifyError(err);
|
||||||
// Roll back optimistic reorder
|
void warehouseAutomat.actions.reload();
|
||||||
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) });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRetry() {
|
handleRetry() {
|
||||||
void this.loadWarehouses();
|
void warehouseAutomat.actions.load().catch((err) => notifyError(err));
|
||||||
}
|
|
||||||
|
|
||||||
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 });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { status, error, warehouses, drafts, newName, busyKey } = this.state;
|
const { status, error, warehouses, filter } = this.state;
|
||||||
const busy = busyKey != null;
|
const { prefill, returnTo } = getInitialParams(this.props);
|
||||||
|
|
||||||
const { returnTo } = getInitialParams(this.props);
|
if (status === 'loading' || status === 'idle') {
|
||||||
|
|
||||||
if (status === 'loading') {
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||||||
<CircularProgress />
|
<CircularProgress />
|
||||||
@@ -285,129 +277,34 @@ class ArtikelLagerPage extends PureComponent {
|
|||||||
return <BackendError error={error} onRetry={this.handleRetry} />;
|
return <BackendError error={error} onRetry={this.handleRetry} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const trimmedFilter = filter?.trim() ?? '';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* SortableJS ghost / chosen styling */}
|
<ArtikelLagerSearchField
|
||||||
|
inputRef={this.searchRef}
|
||||||
|
prefill={prefill}
|
||||||
|
returnTo={returnTo}
|
||||||
|
navigate={this.props.navigate}
|
||||||
|
/>
|
||||||
<PanelTileGrid>
|
<PanelTileGrid>
|
||||||
<PanelTile wide={2} minHeight={280} color={GREEN_PANEL}>
|
<PanelTile wide={2} minHeight={0} color={GREEN_PANEL}>
|
||||||
<Stack spacing={2}>
|
<List dense disablePadding ref={this.listRef} sx={{ width: '100%' }}>
|
||||||
{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 & Drop anpassen.
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<List dense disablePadding ref={this.listRef}>
|
|
||||||
{warehouses.length === 0 ? (
|
{warehouses.length === 0 ? (
|
||||||
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
|
||||||
Noch keine Lager angelegt.
|
{trimmedFilter
|
||||||
|
? `Keine Treffer für „${trimmedFilter}“.`
|
||||||
|
: 'Noch keine Lager angelegt.'}
|
||||||
</Typography>
|
</Typography>
|
||||||
) : (
|
) : (
|
||||||
warehouses.map((wh) => (
|
warehouses.map((wh) => (
|
||||||
<ListItem
|
<ArtikelLager
|
||||||
key={wh.id}
|
key={wh.id}
|
||||||
disableGutters
|
warehouse={wh}
|
||||||
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>
|
</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>
|
</PanelTile>
|
||||||
</PanelTileGrid>
|
</PanelTileGrid>
|
||||||
</>
|
</>
|
||||||
@@ -415,4 +312,5 @@ class ArtikelLagerPage extends PureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { ArtikelLager, ArtikelLagerSearchField };
|
||||||
export default withNavigate(ArtikelLagerPage);
|
export default withNavigate(ArtikelLagerPage);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user