Merge branch 'feat/demo-system-readieness' of https://github.com/valueonag/frontend_nyla into feat/demo-system-readieness
This commit is contained in:
ValueOn AG
commit
d814a76660
16 changed files with 1307 additions and 596 deletions
308
package-lock.json
generated
308
package-lock.json
generated
|
|
@ -14,6 +14,7 @@
|
||||||
"@types/leaflet": "^1.9.21",
|
"@types/leaflet": "^1.9.21",
|
||||||
"@xstate/react": "^5.0.0",
|
"@xstate/react": "^5.0.0",
|
||||||
"axios": "^1.8.3",
|
"axios": "^1.8.3",
|
||||||
|
"docx-preview": "^0.3.7",
|
||||||
"dotenv": "^16.0.3",
|
"dotenv": "^16.0.3",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"framer-motion": "^12.7.3",
|
"framer-motion": "^12.7.3",
|
||||||
|
|
@ -22,6 +23,7 @@
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
"jwt-decode": "^4.0.0",
|
"jwt-decode": "^4.0.0",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
|
"mammoth": "^1.12.0",
|
||||||
"motion": "^12.7.3",
|
"motion": "^12.7.3",
|
||||||
"pg": "^8.8.0",
|
"pg": "^8.8.0",
|
||||||
"proj4": "^2.20.2",
|
"proj4": "^2.20.2",
|
||||||
|
|
@ -34,6 +36,7 @@
|
||||||
"react-router-dom": "^7.7.1",
|
"react-router-dom": "^7.7.1",
|
||||||
"recharts": "^3.7.0",
|
"recharts": "^3.7.0",
|
||||||
"remark-gfm": "^4.0.1",
|
"remark-gfm": "^4.0.1",
|
||||||
|
"xlsx": "^0.18.5",
|
||||||
"xstate": "^5.20.1"
|
"xstate": "^5.20.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -1980,6 +1983,14 @@
|
||||||
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
|
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@xmldom/xmldom": {
|
||||||
|
"version": "0.8.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.12.tgz",
|
||||||
|
"integrity": "sha512-9k/gHF6n/pAi/9tqr3m3aqkuiNosYTurLLUtc7xQ9sxB/wm7WPygCv8GYa6mS0fLJEHhqMC1ATYhz++U/lRHqg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@xstate/react": {
|
"node_modules/@xstate/react": {
|
||||||
"version": "5.0.5",
|
"version": "5.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/@xstate/react/-/react-5.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/@xstate/react/-/react-5.0.5.tgz",
|
||||||
|
|
@ -2035,6 +2046,14 @@
|
||||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/adler-32": {
|
||||||
|
"version": "1.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
|
||||||
|
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ajv": {
|
"node_modules/ajv": {
|
||||||
"version": "6.12.6",
|
"version": "6.12.6",
|
||||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||||
|
|
@ -2131,6 +2150,30 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/base64-js": {
|
||||||
|
"version": "1.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||||
|
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "patreon",
|
||||||
|
"url": "https://www.patreon.com/feross"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "consulting",
|
||||||
|
"url": "https://feross.org/support"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"node_modules/bluebird": {
|
||||||
|
"version": "3.4.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
|
||||||
|
"integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
|
||||||
|
},
|
||||||
"node_modules/body-parser": {
|
"node_modules/body-parser": {
|
||||||
"version": "1.20.3",
|
"version": "1.20.3",
|
||||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
|
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
|
||||||
|
|
@ -2337,6 +2380,18 @@
|
||||||
"url": "https://github.com/sponsors/wooorm"
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/cfb": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"crc-32": "~1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/chalk": {
|
"node_modules/chalk": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
|
@ -2415,6 +2470,14 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/codepage": {
|
||||||
|
"version": "1.15.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
|
||||||
|
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
|
@ -2541,6 +2604,22 @@
|
||||||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
|
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/core-util-is": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
|
||||||
|
},
|
||||||
|
"node_modules/crc-32": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
|
||||||
|
"bin": {
|
||||||
|
"crc32": "bin/crc32.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
|
|
@ -2794,6 +2873,19 @@
|
||||||
"url": "https://github.com/sponsors/wooorm"
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dingbat-to-unicode": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-98l0sW87ZT58pU4i61wa2OHwxbiYSbuxsCBozaVnYX2iCnr3bLM3fIes1/ej7h1YdOKuKt/MLs706TVnALA65w=="
|
||||||
|
},
|
||||||
|
"node_modules/docx-preview": {
|
||||||
|
"version": "0.3.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/docx-preview/-/docx-preview-0.3.7.tgz",
|
||||||
|
"integrity": "sha512-Lav69CTA/IYZPJTsKH7oYeoZjyg96N0wEJMNslGJnZJ+dMUZK85Lt5ASC79yUlD48ecWjuv+rkcmFt6EVPV0Xg==",
|
||||||
|
"dependencies": {
|
||||||
|
"jszip": ">=3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dom-serializer": {
|
"node_modules/dom-serializer": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
|
||||||
|
|
@ -2895,6 +2987,14 @@
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/duck": {
|
||||||
|
"version": "0.1.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/duck/-/duck-0.1.12.tgz",
|
||||||
|
"integrity": "sha512-wkctla1O6VfP89gQ+J/yDesM0S7B7XLXjKGzXxMDVFg7uEn706niAtyYovKbyq1oT9YwDcly721/iUWoc8MVRg==",
|
||||||
|
"dependencies": {
|
||||||
|
"underscore": "^1.13.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dunder-proto": {
|
"node_modules/dunder-proto": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||||
|
|
@ -3608,6 +3708,14 @@
|
||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/frac": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/framer-motion": {
|
"node_modules/framer-motion": {
|
||||||
"version": "12.23.9",
|
"version": "12.23.9",
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz",
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz",
|
||||||
|
|
@ -3957,6 +4065,11 @@
|
||||||
"node": ">= 4"
|
"node": ">= 4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/immediate": {
|
||||||
|
"version": "3.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||||
|
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
|
||||||
|
},
|
||||||
"node_modules/immer": {
|
"node_modules/immer": {
|
||||||
"version": "10.2.0",
|
"version": "10.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||||
|
|
@ -4111,6 +4224,11 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/isarray": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
|
||||||
|
},
|
||||||
"node_modules/isexe": {
|
"node_modules/isexe": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||||
|
|
@ -4258,6 +4376,17 @@
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/jszip": {
|
||||||
|
"version": "3.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||||
|
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||||
|
"dependencies": {
|
||||||
|
"lie": "~3.3.0",
|
||||||
|
"pako": "~1.0.2",
|
||||||
|
"readable-stream": "~2.3.6",
|
||||||
|
"setimmediate": "^1.0.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/jwa": {
|
"node_modules/jwa": {
|
||||||
"version": "1.4.2",
|
"version": "1.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
|
||||||
|
|
@ -4318,6 +4447,14 @@
|
||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lie": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"immediate": "~3.0.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/locate-path": {
|
"node_modules/locate-path": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
||||||
|
|
@ -4405,6 +4542,16 @@
|
||||||
"loose-envify": "cli.js"
|
"loose-envify": "cli.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lop": {
|
||||||
|
"version": "0.4.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
|
||||||
|
"integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
|
||||||
|
"dependencies": {
|
||||||
|
"duck": "^0.1.12",
|
||||||
|
"option": "~0.2.1",
|
||||||
|
"underscore": "^1.13.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/lower-case": {
|
"node_modules/lower-case": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
||||||
|
|
@ -4425,6 +4572,37 @@
|
||||||
"yallist": "^3.0.2"
|
"yallist": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mammoth": {
|
||||||
|
"version": "1.12.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.12.0.tgz",
|
||||||
|
"integrity": "sha512-cwnK1RIcRdDMi2HRx2EXGYlxqIEh0Oo3bLhorgnsVJi2UkbX1+jKxuBNR9PC5+JaX7EkmJxFPmo6mjLpqShI2w==",
|
||||||
|
"dependencies": {
|
||||||
|
"@xmldom/xmldom": "^0.8.6",
|
||||||
|
"argparse": "~1.0.3",
|
||||||
|
"base64-js": "^1.5.1",
|
||||||
|
"bluebird": "~3.4.0",
|
||||||
|
"dingbat-to-unicode": "^1.0.1",
|
||||||
|
"jszip": "^3.7.1",
|
||||||
|
"lop": "^0.4.2",
|
||||||
|
"path-is-absolute": "^1.0.0",
|
||||||
|
"underscore": "^1.13.1",
|
||||||
|
"xmlbuilder": "^10.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"mammoth": "bin/mammoth"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/mammoth/node_modules/argparse": {
|
||||||
|
"version": "1.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||||
|
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||||
|
"dependencies": {
|
||||||
|
"sprintf-js": "~1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/markdown-table": {
|
"node_modules/markdown-table": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
|
||||||
|
|
@ -5571,6 +5749,11 @@
|
||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/option": {
|
||||||
|
"version": "0.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/option/-/option-0.2.4.tgz",
|
||||||
|
"integrity": "sha512-pkEqbDyl8ou5cpq+VsnQbe/WlEy5qS7xPzMS1U55OCG9KPvwFD46zDbxQIj3egJSFc3D+XhYOPUzz49zQAVy7A=="
|
||||||
|
},
|
||||||
"node_modules/optionator": {
|
"node_modules/optionator": {
|
||||||
"version": "0.9.4",
|
"version": "0.9.4",
|
||||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
|
||||||
|
|
@ -5621,6 +5804,11 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/pako": {
|
||||||
|
"version": "1.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||||
|
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
|
||||||
|
},
|
||||||
"node_modules/param-case": {
|
"node_modules/param-case": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
|
||||||
|
|
@ -5700,6 +5888,14 @@
|
||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/path-is-absolute": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/path-key": {
|
"node_modules/path-key": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||||
|
|
@ -5910,6 +6106,11 @@
|
||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/process-nextick-args": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
|
||||||
|
},
|
||||||
"node_modules/proj4": {
|
"node_modules/proj4": {
|
||||||
"version": "2.20.2",
|
"version": "2.20.2",
|
||||||
"resolved": "https://registry.npmjs.org/proj4/-/proj4-2.20.2.tgz",
|
"resolved": "https://registry.npmjs.org/proj4/-/proj4-2.20.2.tgz",
|
||||||
|
|
@ -6206,6 +6407,25 @@
|
||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/readable-stream": {
|
||||||
|
"version": "2.3.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||||
|
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||||
|
"dependencies": {
|
||||||
|
"core-util-is": "~1.0.0",
|
||||||
|
"inherits": "~2.0.3",
|
||||||
|
"isarray": "~1.0.0",
|
||||||
|
"process-nextick-args": "~2.0.0",
|
||||||
|
"safe-buffer": "~5.1.1",
|
||||||
|
"string_decoder": "~1.1.1",
|
||||||
|
"util-deprecate": "~1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/readable-stream/node_modules/safe-buffer": {
|
||||||
|
"version": "5.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||||
|
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
|
||||||
|
},
|
||||||
"node_modules/recharts": {
|
"node_modules/recharts": {
|
||||||
"version": "3.7.0",
|
"version": "3.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
|
||||||
|
|
@ -6522,6 +6742,11 @@
|
||||||
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/setimmediate": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
|
||||||
|
},
|
||||||
"node_modules/setprototypeof": {
|
"node_modules/setprototypeof": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||||
|
|
@ -6673,6 +6898,22 @@
|
||||||
"node": ">= 10.x"
|
"node": ">= 10.x"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/sprintf-js": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
|
||||||
|
},
|
||||||
|
"node_modules/ssf": {
|
||||||
|
"version": "0.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
|
||||||
|
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
|
||||||
|
"dependencies": {
|
||||||
|
"frac": "~1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/state-local": {
|
"node_modules/state-local": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
|
||||||
|
|
@ -6687,6 +6928,19 @@
|
||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/string_decoder": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||||
|
"dependencies": {
|
||||||
|
"safe-buffer": "~5.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/string_decoder/node_modules/safe-buffer": {
|
||||||
|
"version": "5.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||||
|
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
|
||||||
|
},
|
||||||
"node_modules/stringify-entities": {
|
"node_modules/stringify-entities": {
|
||||||
"version": "4.0.4",
|
"version": "4.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
|
||||||
|
|
@ -6901,6 +7155,11 @@
|
||||||
"typescript": ">=4.8.4 <5.9.0"
|
"typescript": ">=4.8.4 <5.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/underscore": {
|
||||||
|
"version": "1.13.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.8.tgz",
|
||||||
|
"integrity": "sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ=="
|
||||||
|
},
|
||||||
"node_modules/undici-types": {
|
"node_modules/undici-types": {
|
||||||
"version": "7.14.0",
|
"version": "7.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
|
||||||
|
|
@ -7078,6 +7337,11 @@
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/util-deprecate": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
|
||||||
|
},
|
||||||
"node_modules/utils-merge": {
|
"node_modules/utils-merge": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
||||||
|
|
@ -7251,6 +7515,22 @@
|
||||||
"integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==",
|
"integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/wmf": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/word": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/word-wrap": {
|
"node_modules/word-wrap": {
|
||||||
"version": "1.2.5",
|
"version": "1.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
||||||
|
|
@ -7261,6 +7541,34 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/xlsx": {
|
||||||
|
"version": "0.18.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
|
||||||
|
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"cfb": "~1.2.1",
|
||||||
|
"codepage": "~1.15.0",
|
||||||
|
"crc-32": "~1.2.1",
|
||||||
|
"ssf": "~0.11.2",
|
||||||
|
"wmf": "~1.0.1",
|
||||||
|
"word": "~0.3.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"xlsx": "bin/xlsx.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/xmlbuilder": {
|
||||||
|
"version": "10.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-10.1.1.tgz",
|
||||||
|
"integrity": "sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/xstate": {
|
"node_modules/xstate": {
|
||||||
"version": "5.20.1",
|
"version": "5.20.1",
|
||||||
"resolved": "https://registry.npmjs.org/xstate/-/xstate-5.20.1.tgz",
|
"resolved": "https://registry.npmjs.org/xstate/-/xstate-5.20.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
"@types/leaflet": "^1.9.21",
|
"@types/leaflet": "^1.9.21",
|
||||||
"@xstate/react": "^5.0.0",
|
"@xstate/react": "^5.0.0",
|
||||||
"axios": "^1.8.3",
|
"axios": "^1.8.3",
|
||||||
|
"docx-preview": "^0.3.7",
|
||||||
"dotenv": "^16.0.3",
|
"dotenv": "^16.0.3",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"framer-motion": "^12.7.3",
|
"framer-motion": "^12.7.3",
|
||||||
|
|
@ -28,6 +29,7 @@
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
"jwt-decode": "^4.0.0",
|
"jwt-decode": "^4.0.0",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
|
"mammoth": "^1.12.0",
|
||||||
"motion": "^12.7.3",
|
"motion": "^12.7.3",
|
||||||
"pg": "^8.8.0",
|
"pg": "^8.8.0",
|
||||||
"proj4": "^2.20.2",
|
"proj4": "^2.20.2",
|
||||||
|
|
@ -40,6 +42,7 @@
|
||||||
"react-router-dom": "^7.7.1",
|
"react-router-dom": "^7.7.1",
|
||||||
"recharts": "^3.7.0",
|
"recharts": "^3.7.0",
|
||||||
"remark-gfm": "^4.0.1",
|
"remark-gfm": "^4.0.1",
|
||||||
|
"xlsx": "^0.18.5",
|
||||||
"xstate": "^5.20.1"
|
"xstate": "^5.20.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -845,3 +845,121 @@
|
||||||
/* Popup-specific styles if needed */
|
/* Popup-specific styles if needed */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Word (docx-preview) ────────────────────────────────────────────── */
|
||||||
|
.docxContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background: #e5e5e5;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docxContainer * {
|
||||||
|
background-color: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docxLoading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The docx-preview library creates a wrapper with .docx-wrapper containing
|
||||||
|
section elements that are sized and styled like real pages. */
|
||||||
|
.docxContainer :global(.docx-wrapper) {
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docxContainer :global(.docx-wrapper > section.docx) {
|
||||||
|
background: #fff !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
|
||||||
|
margin: 0 auto 1.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docxContainer :global(section.docx) * {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Excel (manual table) ───────────────────────────────────────────── */
|
||||||
|
.excelTabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelTab {
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-bottom: none;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
background: var(--color-background);
|
||||||
|
color: var(--color-text);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelTabActive {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--color-on-primary, #fff);
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelSheet {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--color-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelTable {
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-family: Calibri, "Segoe UI", Arial, sans-serif;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelTable td,
|
||||||
|
.excelTable th {
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
padding: 2px 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelCorner,
|
||||||
|
.excelColHeader,
|
||||||
|
.excelRowHeader {
|
||||||
|
background: var(--color-surface, #f3f4f6) !important;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-secondary, #4b5563);
|
||||||
|
text-align: center !important;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelColHeader {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelRowHeader {
|
||||||
|
left: 0;
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelCorner {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excelCell {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,24 @@
|
||||||
import { useState, useEffect } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { IoIosDownload, IoIosCopy } from 'react-icons/io';
|
import { IoIosDownload, IoIosCopy } from 'react-icons/io';
|
||||||
|
|
||||||
import { Popup, PopupAction } from '../UiComponents/Popup/Popup';
|
import { Popup, PopupAction } from '../UiComponents/Popup/Popup';
|
||||||
import { useLanguage } from '../../providers/language/LanguageContext';
|
import { useLanguage } from '../../providers/language/LanguageContext';
|
||||||
import { useFileOperations } from '../../hooks/useFiles';
|
import { useFileOperations } from '../../hooks/useFiles';
|
||||||
import {
|
import {
|
||||||
JsonRenderer,
|
JsonRenderer,
|
||||||
ImageRenderer,
|
ImageRenderer,
|
||||||
TextRenderer,
|
TextRenderer,
|
||||||
PdfRenderer,
|
PdfRenderer,
|
||||||
HtmlRenderer,
|
HtmlRenderer,
|
||||||
ApplicationRenderer,
|
ApplicationRenderer,
|
||||||
UnsupportedRenderer,
|
UnsupportedRenderer,
|
||||||
LoadingRenderer,
|
LoadingRenderer,
|
||||||
ErrorRenderer
|
ErrorRenderer,
|
||||||
|
WordRenderer,
|
||||||
|
ExcelRenderer,
|
||||||
|
isWordMimeType,
|
||||||
|
isExcelMimeType,
|
||||||
} from './renderers';
|
} from './renderers';
|
||||||
import styles from './ContentPreview.module.css';
|
import styles from './ContentPreview.module.css';
|
||||||
|
|
||||||
|
|
@ -26,98 +30,91 @@ export interface ContentPreviewProps {
|
||||||
mimeType?: string;
|
mimeType?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ContentPreview({
|
export function ContentPreview({
|
||||||
isOpen,
|
isOpen,
|
||||||
onClose,
|
onClose,
|
||||||
fileId,
|
fileId,
|
||||||
fileName,
|
fileName,
|
||||||
mimeType
|
mimeType,
|
||||||
}: ContentPreviewProps) {
|
}: ContentPreviewProps) {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
const { handleFilePreview, handleFileDownload, previewingFiles, previewError, downloadingFiles } = useFileOperations();
|
const {
|
||||||
|
handleFilePreview,
|
||||||
// Debug logging to see what data we're receiving
|
handleFileDownload,
|
||||||
useEffect(() => {
|
previewingFiles,
|
||||||
if (isOpen && import.meta.env.DEV) {
|
previewError,
|
||||||
console.log('ContentPreview received:', { fileId, fileName, mimeType });
|
downloadingFiles,
|
||||||
}
|
} = useFileOperations();
|
||||||
}, [isOpen, fileId, fileName, mimeType]);
|
|
||||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||||
const [previewContent, setPreviewContent] = useState<string | null>(null);
|
const [blob, setBlob] = useState<Blob | null>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [textContent, setTextContent] = useState<string | null>(null);
|
||||||
const [copySuccess, setCopySuccess] = useState<boolean>(false);
|
const [resolvedMime, setResolvedMime] = useState<string | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [copySuccess, setCopySuccess] = useState(false);
|
||||||
|
|
||||||
|
const cleanup = useCallback(() => {
|
||||||
|
setPreviewUrl(prev => {
|
||||||
|
if (prev) window.URL.revokeObjectURL(prev);
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
setBlob(null);
|
||||||
|
setTextContent(null);
|
||||||
|
setResolvedMime(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadPreview = useCallback(async () => {
|
||||||
|
setError(null);
|
||||||
|
cleanup();
|
||||||
|
|
||||||
|
const result = await handleFilePreview(fileId, fileName, mimeType);
|
||||||
|
if (!result.success) {
|
||||||
|
setError(result.error || t('Vorschau konnte nicht geladen werden.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPreviewUrl(result.previewUrl ?? null);
|
||||||
|
setBlob(result.blob ?? null);
|
||||||
|
setTextContent(result.textContent ?? null);
|
||||||
|
setResolvedMime(result.mimeType ?? mimeType ?? null);
|
||||||
|
}, [cleanup, fileId, fileName, handleFilePreview, mimeType, t]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen || !fileId) {
|
||||||
|
cleanup();
|
||||||
|
setError(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fileId === 'undefined' || fileId === 'null') {
|
||||||
|
setError(t('Ungültige Datei-ID'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!fileName || fileName === 'Unknown Item' || fileName === 'Unbekanntes Element') {
|
||||||
|
setError(t('Dateiname nicht verfügbar'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadPreview();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isOpen, fileId, fileName]);
|
||||||
|
|
||||||
// Clean up blob URL when component unmounts or preview changes
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
if (previewUrl) {
|
if (previewUrl) window.URL.revokeObjectURL(previewUrl);
|
||||||
window.URL.revokeObjectURL(previewUrl);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}, [previewUrl]);
|
}, [previewUrl]);
|
||||||
|
|
||||||
// Load preview when modal opens
|
const effectiveMime = resolvedMime ?? mimeType;
|
||||||
useEffect(() => {
|
const isPreviewing = previewingFiles.has(fileId);
|
||||||
if (isOpen && fileId) {
|
const hasError = error || previewError;
|
||||||
// Check if we have valid data
|
|
||||||
if (!fileId || fileId === 'undefined' || fileId === 'null') {
|
|
||||||
setError(t('Ungültige Datei-ID'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!fileName || fileName === 'Unknown Item' || fileName === 'Unbekanntes Element') {
|
|
||||||
setError(t('Dateiname nicht verfügbar'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
loadPreview();
|
|
||||||
} else {
|
|
||||||
// Clean up when modal closes
|
|
||||||
if (previewUrl) {
|
|
||||||
window.URL.revokeObjectURL(previewUrl);
|
|
||||||
setPreviewUrl(null);
|
|
||||||
}
|
|
||||||
setError(null);
|
|
||||||
}
|
|
||||||
}, [isOpen, fileId, fileName, t]);
|
|
||||||
|
|
||||||
|
|
||||||
const loadPreview = async () => {
|
|
||||||
try {
|
|
||||||
setError(null);
|
|
||||||
setPreviewContent(null);
|
|
||||||
const result = await handleFilePreview(fileId, fileName, mimeType);
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
if (result.previewUrl) {
|
|
||||||
setPreviewUrl(result.previewUrl);
|
|
||||||
}
|
|
||||||
if (result.decodedContent) {
|
|
||||||
setPreviewContent(result.decodedContent);
|
|
||||||
}
|
|
||||||
// If it's text content but MIME type says PDF, we'll handle it in renderPreview
|
|
||||||
} else {
|
|
||||||
setError(result.error || t('Vorschau konnte nicht geladen werden.'));
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError(t('Ein unerwarteter Fehler ist aufgetreten, während'));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopyContent = async () => {
|
const handleCopyContent = async () => {
|
||||||
|
if (!textContent) return;
|
||||||
try {
|
try {
|
||||||
if (previewContent) {
|
await navigator.clipboard.writeText(textContent);
|
||||||
await navigator.clipboard.writeText(previewContent);
|
setCopySuccess(true);
|
||||||
setCopySuccess(true);
|
setTimeout(() => setCopySuccess(false), 2000);
|
||||||
setTimeout(() => setCopySuccess(false), 2000);
|
|
||||||
} else {
|
|
||||||
// Fallback: try to copy from preview URL if it's a text file
|
|
||||||
if (previewUrl && mimeType?.startsWith('text/')) {
|
|
||||||
const response = await fetch(previewUrl);
|
|
||||||
const text = await response.text();
|
|
||||||
await navigator.clipboard.writeText(text);
|
|
||||||
setCopySuccess(true);
|
|
||||||
setTimeout(() => setCopySuccess(false), 2000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Failed to copy content:', err);
|
console.error('Failed to copy content:', err);
|
||||||
}
|
}
|
||||||
|
|
@ -131,160 +128,123 @@ export function ContentPreview({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const isPreviewing = previewingFiles.has(fileId);
|
|
||||||
const hasError = error || previewError;
|
|
||||||
|
|
||||||
// Check if this is a corrupted PDF (text content instead of PDF)
|
|
||||||
const isCorruptedPdf = mimeType === 'application/pdf' && previewContent && !previewUrl;
|
|
||||||
|
|
||||||
// Create action buttons for the popup header
|
|
||||||
const actions: PopupAction[] = [
|
const actions: PopupAction[] = [
|
||||||
// Copy Content Button - only show for text-based files (exclude PDFs and images) or corrupted PDFs
|
...(textContent
|
||||||
...(mimeType !== 'application/pdf' && !mimeType?.startsWith('image/') && (mimeType?.startsWith('text/') || mimeType === 'application/json' || previewContent) ? [{
|
? [
|
||||||
label: copySuccess ? t('In die Zwischenablage kopiert') : t(''),
|
{
|
||||||
icon: copySuccess ? '✓' : <IoIosCopy />,
|
label: copySuccess ? t('In die Zwischenablage kopiert') : '',
|
||||||
onClick: handleCopyContent,
|
icon: copySuccess ? '✓' : <IoIosCopy />,
|
||||||
disabled: !previewContent && !previewUrl,
|
onClick: handleCopyContent,
|
||||||
variant: 'primary' as const
|
disabled: !textContent,
|
||||||
}] : []),
|
variant: 'primary' as const,
|
||||||
|
},
|
||||||
// Download Button - hide for corrupted PDFs
|
]
|
||||||
...(isCorruptedPdf ? [] : [{
|
: []),
|
||||||
label: String(''),
|
{
|
||||||
|
label: '',
|
||||||
icon: downloadingFiles.has(fileId) ? undefined : <IoIosDownload />,
|
icon: downloadingFiles.has(fileId) ? undefined : <IoIosDownload />,
|
||||||
onClick: handleDownloadFile,
|
onClick: handleDownloadFile,
|
||||||
disabled: downloadingFiles.has(fileId),
|
disabled: downloadingFiles.has(fileId),
|
||||||
loading: downloadingFiles.has(fileId),
|
loading: downloadingFiles.has(fileId),
|
||||||
variant: 'success' as const
|
variant: 'success' as const,
|
||||||
}])
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const renderPreview = () => {
|
const renderPreview = () => {
|
||||||
// Handle text content in PDF files (corrupted files) - check this first
|
if (isPreviewing) return <LoadingRenderer />;
|
||||||
if (previewContent && !previewUrl && mimeType === 'application/pdf') {
|
if (hasError) return <ErrorRenderer error={hasError} onRetry={loadPreview} />;
|
||||||
console.log('🔍 ContentPreview: Rendering corrupted PDF with text content');
|
if (!blob || !effectiveMime) return null;
|
||||||
|
|
||||||
|
if (effectiveMime === 'application/json' && textContent) {
|
||||||
|
return <JsonRenderer previewContent={textContent} fileName={fileName} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isWordMimeType(effectiveMime, fileName)) {
|
||||||
return (
|
return (
|
||||||
<PdfRenderer
|
<WordRenderer
|
||||||
previewUrl={undefined}
|
blob={blob}
|
||||||
previewContent={previewContent}
|
fileName={fileName}
|
||||||
fileName={fileName}
|
mimeType={effectiveMime}
|
||||||
onError={() => setError(t('PDF-Vorschau konnte nicht geladen werden'))}
|
onError={msg => setError(msg)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!previewUrl) {
|
if (isExcelMimeType(effectiveMime, fileName)) {
|
||||||
if (isPreviewing) {
|
|
||||||
return <LoadingRenderer />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasError) {
|
|
||||||
return <ErrorRenderer error={hasError} onRetry={loadPreview} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// For JSON files with decoded content, use JsonRenderer
|
|
||||||
if (previewContent && mimeType === 'application/json') {
|
|
||||||
return <JsonRenderer previewContent={previewContent} fileName={fileName} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mimeType === 'application/json') {
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.jsonContainer}>
|
<ExcelRenderer
|
||||||
<div className={styles.jsonHeader}>
|
blob={blob}
|
||||||
<span className={styles.jsonTitle}>{t('JSON-Vorschau als Fallback')}</span>
|
fileName={fileName}
|
||||||
<div className={styles.jsonHeaderRight}>
|
onError={msg => setError(msg)}
|
||||||
<span className={styles.jsonSize}>{t('Rohinhalt')}</span>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pre className={styles.jsonPreview}>
|
|
||||||
<code className={styles.jsonCode}>
|
|
||||||
{previewContent || t('Kein Inhalt verfügbar')}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine preview type based on MIME type
|
const mimePrefix = effectiveMime.split('/')[0];
|
||||||
const mimePrefix = mimeType?.split('/')[0];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
switch (mimePrefix) {
|
switch (mimePrefix) {
|
||||||
case 'image':
|
case 'image':
|
||||||
|
if (!previewUrl) return null;
|
||||||
return (
|
return (
|
||||||
<ImageRenderer
|
<ImageRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl}
|
||||||
fileName={fileName}
|
fileName={fileName}
|
||||||
onError={() => setError(t('Bildvorschau konnte nicht geladen werden'))}
|
onError={() => setError(t('Bildvorschau konnte nicht geladen werden'))}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'text':
|
case 'text':
|
||||||
// Special handling for HTML files
|
if (effectiveMime === 'text/html' && previewUrl) {
|
||||||
if (mimeType === 'text/html') {
|
|
||||||
return (
|
return (
|
||||||
<HtmlRenderer
|
<HtmlRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl}
|
||||||
fileName={fileName}
|
fileName={fileName}
|
||||||
onError={() => setError(t('HTML-Vorschau konnte nicht geladen werden'))}
|
onError={() => setError(t('HTML-Vorschau konnte nicht geladen werden'))}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TextRenderer
|
<TextRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl ?? undefined}
|
||||||
fileName={fileName}
|
previewContent={textContent ?? undefined}
|
||||||
mimeType={mimeType}
|
fileName={fileName}
|
||||||
|
mimeType={effectiveMime}
|
||||||
onError={() => setError(t('Textvorschau konnte nicht geladen werden'))}
|
onError={() => setError(t('Textvorschau konnte nicht geladen werden'))}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'application':
|
case 'application':
|
||||||
if (mimeType === 'application/pdf') {
|
if (effectiveMime === 'application/pdf' && previewUrl) {
|
||||||
console.log('🔍 ContentPreview passing normal PDF to PdfRenderer:', {
|
|
||||||
previewUrl,
|
|
||||||
previewContent: previewContent ? `${previewContent.substring(0, 50)}...` : null,
|
|
||||||
fileName,
|
|
||||||
mimeType
|
|
||||||
});
|
|
||||||
return (
|
return (
|
||||||
<PdfRenderer
|
<PdfRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl}
|
||||||
previewContent={previewContent || undefined}
|
fileName={fileName}
|
||||||
fileName={fileName}
|
|
||||||
onError={() => setError(t('PDF-Vorschau konnte nicht geladen werden'))}
|
onError={() => setError(t('PDF-Vorschau konnte nicht geladen werden'))}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
if (effectiveMime === 'application/html' && previewUrl) {
|
||||||
if (mimeType === 'application/html') {
|
|
||||||
return (
|
return (
|
||||||
<HtmlRenderer
|
<HtmlRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl}
|
||||||
fileName={fileName}
|
fileName={fileName}
|
||||||
onError={() => setError(t('HTML-Vorschau konnte nicht geladen werden'))}
|
onError={() => setError(t('HTML-Vorschau konnte nicht geladen werden'))}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ApplicationRenderer
|
<ApplicationRenderer
|
||||||
previewUrl={previewUrl}
|
previewUrl={previewUrl ?? ''}
|
||||||
fileName={fileName}
|
fileName={fileName}
|
||||||
mimeType={mimeType}
|
mimeType={effectiveMime}
|
||||||
onError={() => setError(t('Vorschau wird für dieses Format nicht unterstützt'))}
|
onError={() =>
|
||||||
|
setError(t('Vorschau wird für dieses Format nicht unterstützt'))
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return <UnsupportedRenderer previewUrl={previewUrl} fileName={fileName} />;
|
return <UnsupportedRenderer previewUrl={previewUrl ?? ''} fileName={fileName} />;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -297,12 +257,9 @@ export function ContentPreview({
|
||||||
className={styles.contentPreviewPopup}
|
className={styles.contentPreviewPopup}
|
||||||
actions={actions}
|
actions={actions}
|
||||||
>
|
>
|
||||||
<div className={styles.previewContainer}>
|
<div className={styles.previewContainer}>{renderPreview()}</div>
|
||||||
{renderPreview()}
|
|
||||||
</div>
|
|
||||||
</Popup>
|
</Popup>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ContentPreview;
|
export default ContentPreview;
|
||||||
|
|
||||||
|
|
|
||||||
281
src/components/ContentPreview/renderers/ExcelRenderer.tsx
Normal file
281
src/components/ContentPreview/renderers/ExcelRenderer.tsx
Normal file
|
|
@ -0,0 +1,281 @@
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import { useLanguage } from '../../../providers/language/LanguageContext';
|
||||||
|
import styles from '../ContentPreview.module.css';
|
||||||
|
|
||||||
|
interface ExcelRendererProps {
|
||||||
|
blob: Blob;
|
||||||
|
fileName: string;
|
||||||
|
onError: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EXCEL_MIME_TYPES = new Set([
|
||||||
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||||
|
'application/vnd.ms-excel',
|
||||||
|
'text/csv',
|
||||||
|
'application/csv',
|
||||||
|
]);
|
||||||
|
|
||||||
|
export function isExcelMimeType(mimeType?: string, fileName?: string): boolean {
|
||||||
|
if (mimeType && EXCEL_MIME_TYPES.has(mimeType)) return true;
|
||||||
|
if (fileName && /\.(xlsx|xls|xlsm|xlsb|ods|csv)$/i.test(fileName)) return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RenderedCell {
|
||||||
|
display: string;
|
||||||
|
rawType: 'n' | 's' | 'b' | 'd' | 'e' | 'z' | string;
|
||||||
|
rowspan: number;
|
||||||
|
colspan: number;
|
||||||
|
skip: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RenderedSheet {
|
||||||
|
name: string;
|
||||||
|
cols: number;
|
||||||
|
rows: number;
|
||||||
|
colWidthsPx: number[];
|
||||||
|
rowHeightsPx: (number | null)[];
|
||||||
|
cells: RenderedCell[][];
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSheet(ws: XLSX.WorkSheet, name: string): RenderedSheet {
|
||||||
|
const ref = ws['!ref'];
|
||||||
|
if (!ref) {
|
||||||
|
return { name, cols: 0, rows: 0, colWidthsPx: [], rowHeightsPx: [], cells: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
const range = XLSX.utils.decode_range(ref);
|
||||||
|
const rows = range.e.r - range.s.r + 1;
|
||||||
|
const cols = range.e.c - range.s.c + 1;
|
||||||
|
|
||||||
|
const cells: RenderedCell[][] = Array.from({ length: rows }, () =>
|
||||||
|
Array.from({ length: cols }, () => ({
|
||||||
|
display: '',
|
||||||
|
rawType: 'z',
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 1,
|
||||||
|
skip: false,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
for (let c = 0; c < cols; c++) {
|
||||||
|
const address = XLSX.utils.encode_cell({ r: r + range.s.r, c: c + range.s.c });
|
||||||
|
const cell = ws[address] as XLSX.CellObject | undefined;
|
||||||
|
if (!cell) continue;
|
||||||
|
const display = cell.w ?? (cell.v !== undefined && cell.v !== null ? String(cell.v) : '');
|
||||||
|
cells[r][c].display = display;
|
||||||
|
cells[r][c].rawType = cell.t ?? 'z';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const merges = ws['!merges'] ?? [];
|
||||||
|
for (const merge of merges) {
|
||||||
|
const rs = merge.s.r - range.s.r;
|
||||||
|
const cs = merge.s.c - range.s.c;
|
||||||
|
const re = merge.e.r - range.s.r;
|
||||||
|
const ce = merge.e.c - range.s.c;
|
||||||
|
if (rs < 0 || cs < 0 || re >= rows || ce >= cols) continue;
|
||||||
|
|
||||||
|
cells[rs][cs].rowspan = re - rs + 1;
|
||||||
|
cells[rs][cs].colspan = ce - cs + 1;
|
||||||
|
|
||||||
|
for (let r = rs; r <= re; r++) {
|
||||||
|
for (let c = cs; c <= ce; c++) {
|
||||||
|
if (r === rs && c === cs) continue;
|
||||||
|
cells[r][c].skip = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const colWidthsPx: number[] = [];
|
||||||
|
const colsMeta = ws['!cols'] ?? [];
|
||||||
|
for (let c = 0; c < cols; c++) {
|
||||||
|
const meta = colsMeta[c + range.s.c];
|
||||||
|
if (meta?.wpx) {
|
||||||
|
colWidthsPx.push(meta.wpx);
|
||||||
|
} else if (meta?.wch) {
|
||||||
|
colWidthsPx.push(Math.round(meta.wch * 7 + 8));
|
||||||
|
} else if (meta?.width) {
|
||||||
|
colWidthsPx.push(Math.round(meta.width * 7 + 8));
|
||||||
|
} else {
|
||||||
|
colWidthsPx.push(80);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rowHeightsPx: (number | null)[] = [];
|
||||||
|
const rowsMeta = ws['!rows'] ?? [];
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
const meta = rowsMeta[r + range.s.r];
|
||||||
|
if (meta?.hpx) {
|
||||||
|
rowHeightsPx.push(meta.hpx);
|
||||||
|
} else if (meta?.hpt) {
|
||||||
|
rowHeightsPx.push(Math.round((meta.hpt * 4) / 3));
|
||||||
|
} else {
|
||||||
|
rowHeightsPx.push(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { name, cols, rows, colWidthsPx, rowHeightsPx, cells };
|
||||||
|
}
|
||||||
|
|
||||||
|
function alignmentForCell(cell: RenderedCell): 'left' | 'right' | 'center' {
|
||||||
|
if (cell.rawType === 'n' || cell.rawType === 'd') return 'right';
|
||||||
|
if (cell.rawType === 'b') return 'center';
|
||||||
|
return 'left';
|
||||||
|
}
|
||||||
|
|
||||||
|
function colLabel(index: number): string {
|
||||||
|
let result = '';
|
||||||
|
let n = index;
|
||||||
|
do {
|
||||||
|
result = String.fromCharCode(65 + (n % 26)) + result;
|
||||||
|
n = Math.floor(n / 26) - 1;
|
||||||
|
} while (n >= 0);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ExcelRenderer({ blob, fileName, onError }: ExcelRendererProps) {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
const [sheets, setSheets] = useState<RenderedSheet[]>([]);
|
||||||
|
const [activeSheet, setActiveSheet] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [localError, setLocalError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
setLoading(true);
|
||||||
|
setLocalError(null);
|
||||||
|
|
||||||
|
blob
|
||||||
|
.arrayBuffer()
|
||||||
|
.then(buffer => {
|
||||||
|
const workbook = XLSX.read(buffer, {
|
||||||
|
type: 'array',
|
||||||
|
cellDates: true,
|
||||||
|
cellNF: true,
|
||||||
|
cellStyles: true,
|
||||||
|
});
|
||||||
|
const parsed = workbook.SheetNames.map(name =>
|
||||||
|
renderSheet(workbook.Sheets[name], name),
|
||||||
|
);
|
||||||
|
if (cancelled) return;
|
||||||
|
setSheets(parsed);
|
||||||
|
setActiveSheet(parsed[0]?.name ?? null);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
if (cancelled) return;
|
||||||
|
const msg = err?.message ?? t('Tabelle konnte nicht gerendert werden.');
|
||||||
|
setLocalError(msg);
|
||||||
|
setLoading(false);
|
||||||
|
onError(msg);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [blob, onError, t]);
|
||||||
|
|
||||||
|
const current = useMemo(
|
||||||
|
() => sheets.find(s => s.name === activeSheet) ?? null,
|
||||||
|
[sheets, activeSheet],
|
||||||
|
);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className={styles.textContainer}>
|
||||||
|
<div className={styles.textHeader}>
|
||||||
|
<span className={styles.textTitle}>{t('Tabelle wird geladen...')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (localError) {
|
||||||
|
return (
|
||||||
|
<div className={styles.textContainer}>
|
||||||
|
<div className={styles.textHeader}>
|
||||||
|
<span className={styles.textTitle}>{fileName}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '1rem', color: 'var(--color-error)' }}>{localError}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.textContainer}>
|
||||||
|
<div className={styles.textHeader}>
|
||||||
|
<span className={styles.textTitle}>{fileName}</span>
|
||||||
|
{sheets.length > 1 && (
|
||||||
|
<div className={styles.excelTabs}>
|
||||||
|
{sheets.map(sheet => (
|
||||||
|
<button
|
||||||
|
key={sheet.name}
|
||||||
|
onClick={() => setActiveSheet(sheet.name)}
|
||||||
|
className={`${styles.excelTab} ${
|
||||||
|
sheet.name === activeSheet ? styles.excelTabActive : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{sheet.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.excelSheet}>
|
||||||
|
{current && current.rows > 0 ? (
|
||||||
|
<table className={styles.excelTable}>
|
||||||
|
<colgroup>
|
||||||
|
<col style={{ width: 40 }} />
|
||||||
|
{current.colWidthsPx.map((w, i) => (
|
||||||
|
<col key={i} style={{ width: w }} />
|
||||||
|
))}
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className={styles.excelCorner} />
|
||||||
|
{current.colWidthsPx.map((_, i) => (
|
||||||
|
<th key={i} className={styles.excelColHeader}>
|
||||||
|
{colLabel(i)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{current.cells.map((row, rIdx) => (
|
||||||
|
<tr
|
||||||
|
key={rIdx}
|
||||||
|
style={{
|
||||||
|
height: current.rowHeightsPx[rIdx] ?? undefined,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<th className={styles.excelRowHeader}>{rIdx + 1}</th>
|
||||||
|
{row.map((cell, cIdx) => {
|
||||||
|
if (cell.skip) return null;
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key={cIdx}
|
||||||
|
rowSpan={cell.rowspan}
|
||||||
|
colSpan={cell.colspan}
|
||||||
|
className={styles.excelCell}
|
||||||
|
style={{ textAlign: alignmentForCell(cell) }}
|
||||||
|
>
|
||||||
|
{cell.display}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: '1rem', color: 'var(--color-text-secondary)' }}>
|
||||||
|
{t('Dieses Arbeitsblatt ist leer.')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
110
src/components/ContentPreview/renderers/WordRenderer.tsx
Normal file
110
src/components/ContentPreview/renderers/WordRenderer.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { renderAsync } from 'docx-preview';
|
||||||
|
import { useLanguage } from '../../../providers/language/LanguageContext';
|
||||||
|
import styles from '../ContentPreview.module.css';
|
||||||
|
|
||||||
|
interface WordRendererProps {
|
||||||
|
blob: Blob;
|
||||||
|
fileName: string;
|
||||||
|
mimeType?: string;
|
||||||
|
onError: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SUPPORTED_MIME_TYPES = new Set([
|
||||||
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||||
|
]);
|
||||||
|
|
||||||
|
export function isWordMimeType(mimeType?: string, fileName?: string): boolean {
|
||||||
|
if (mimeType && SUPPORTED_MIME_TYPES.has(mimeType)) return true;
|
||||||
|
if (fileName && /\.docx$/i.test(fileName)) return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WordRenderer({ blob, fileName, mimeType, onError }: WordRendererProps) {
|
||||||
|
const { t } = useLanguage();
|
||||||
|
const bodyRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const styleRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [localError, setLocalError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const isLegacyDoc = useMemo(
|
||||||
|
() => mimeType === 'application/msword' || /\.doc$/i.test(fileName),
|
||||||
|
[mimeType, fileName],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
if (isLegacyDoc) {
|
||||||
|
const msg = t(
|
||||||
|
'Das alte Word-Format (.doc) wird nicht unterstützt. Bitte konvertiere die Datei in .docx.',
|
||||||
|
);
|
||||||
|
setLocalError(msg);
|
||||||
|
setLoading(false);
|
||||||
|
onError(msg);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = bodyRef.current;
|
||||||
|
const styleContainer = styleRef.current;
|
||||||
|
if (!body || !styleContainer) return;
|
||||||
|
|
||||||
|
body.innerHTML = '';
|
||||||
|
styleContainer.innerHTML = '';
|
||||||
|
setLoading(true);
|
||||||
|
setLocalError(null);
|
||||||
|
|
||||||
|
renderAsync(blob, body, styleContainer, {
|
||||||
|
className: 'docx-preview',
|
||||||
|
inWrapper: true,
|
||||||
|
ignoreWidth: false,
|
||||||
|
ignoreHeight: false,
|
||||||
|
ignoreFonts: false,
|
||||||
|
breakPages: true,
|
||||||
|
experimental: true,
|
||||||
|
trimXmlDeclaration: true,
|
||||||
|
useBase64URL: true,
|
||||||
|
renderHeaders: true,
|
||||||
|
renderFooters: true,
|
||||||
|
renderFootnotes: true,
|
||||||
|
renderEndnotes: true,
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
if (cancelled) return;
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
if (cancelled) return;
|
||||||
|
const msg =
|
||||||
|
err?.message ?? t('Word-Dokument konnte nicht gerendert werden.');
|
||||||
|
setLocalError(msg);
|
||||||
|
setLoading(false);
|
||||||
|
onError(msg);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [blob, isLegacyDoc, onError, t]);
|
||||||
|
|
||||||
|
if (localError) {
|
||||||
|
return (
|
||||||
|
<div className={styles.textContainer}>
|
||||||
|
<div className={styles.textHeader}>
|
||||||
|
<span className={styles.textTitle}>{fileName}</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '1rem', color: 'var(--color-error)' }}>{localError}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.docxContainer}>
|
||||||
|
{loading && (
|
||||||
|
<div className={styles.docxLoading}>{t('Word-Dokument wird geladen...')}</div>
|
||||||
|
)}
|
||||||
|
<div ref={styleRef} />
|
||||||
|
<div ref={bodyRef} className={styles.docxBody} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -7,4 +7,6 @@ export { ApplicationRenderer } from './ApplicationRenderer';
|
||||||
export { UnsupportedRenderer } from './UnsupportedRenderer';
|
export { UnsupportedRenderer } from './UnsupportedRenderer';
|
||||||
export { LoadingRenderer } from './LoadingRenderer';
|
export { LoadingRenderer } from './LoadingRenderer';
|
||||||
export { ErrorRenderer } from './ErrorRenderer';
|
export { ErrorRenderer } from './ErrorRenderer';
|
||||||
|
export { WordRenderer, isWordMimeType } from './WordRenderer';
|
||||||
|
export { ExcelRenderer, isExcelMimeType } from './ExcelRenderer';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -118,15 +118,11 @@ export function DeleteActionButton<T = any>({
|
||||||
const success = await handleDelete(itemId);
|
const success = await handleDelete(itemId);
|
||||||
|
|
||||||
if (success) {
|
if (success) {
|
||||||
// If we used optimistic removal, don't refetch immediately
|
// Always refetch after a successful delete. The server has actually
|
||||||
// The item is already removed from UI, and refetch might bring it back
|
// removed the row, so fresh data won't bring it back — and this is
|
||||||
if (removeOptimistically) {
|
// what re-syncs pagination.totalItems (and clears any optimistic
|
||||||
// Only refetch if there was an error or if we need to sync other changes
|
// hidden-row state maintained by FormGeneratorTable).
|
||||||
// For now, we trust the optimistic removal worked
|
refetch();
|
||||||
} else {
|
|
||||||
// No optimistic removal, refetch immediately
|
|
||||||
refetch();
|
|
||||||
}
|
|
||||||
onSuccess?.(row);
|
onSuccess?.(row);
|
||||||
} else {
|
} else {
|
||||||
// Refetch to restore the item in case of failure
|
// Refetch to restore the item in case of failure
|
||||||
|
|
|
||||||
|
|
@ -185,8 +185,8 @@ export interface FormGeneratorTableProps<T = any> {
|
||||||
getRowDataAttributes?: (row: T, index: number) => Record<string, string>;
|
getRowDataAttributes?: (row: T, index: number) => Record<string, string>;
|
||||||
// For passing hook data to action buttons
|
// For passing hook data to action buttons
|
||||||
hookData?: any; // Contains all hook data: refetch, operations, loading states, etc.
|
hookData?: any; // Contains all hook data: refetch, operations, loading states, etc.
|
||||||
// Custom empty message when table is empty
|
// Custom empty message when table is empty (string or custom ReactNode)
|
||||||
emptyMessage?: string;
|
emptyMessage?: React.ReactNode;
|
||||||
// API endpoint for CSV export (e.g. "/api/users/"). If provided, the CSV export button is shown.
|
// API endpoint for CSV export (e.g. "/api/users/"). If provided, the CSV export button is shown.
|
||||||
apiEndpoint?: string;
|
apiEndpoint?: string;
|
||||||
// Grouping configuration
|
// Grouping configuration
|
||||||
|
|
@ -339,7 +339,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
onRefresh,
|
onRefresh,
|
||||||
className = '',
|
className = '',
|
||||||
getRowDataAttributes,
|
getRowDataAttributes,
|
||||||
hookData,
|
hookData: hookDataProp,
|
||||||
emptyMessage,
|
emptyMessage,
|
||||||
apiEndpoint,
|
apiEndpoint,
|
||||||
groupBy,
|
groupBy,
|
||||||
|
|
@ -356,6 +356,108 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
// When only onDelete is provided, use it for multi-delete too so Delete stays visible with 2+ selected
|
// When only onDelete is provided, use it for multi-delete too so Delete stays visible with 2+ selected
|
||||||
const onDeleteMultiple = onDeleteMultipleProp ?? (onDelete ? (rows: T[]) => rows.forEach((r) => onDelete(r)) : undefined);
|
const onDeleteMultiple = onDeleteMultipleProp ?? (onDelete ? (rows: T[]) => rows.forEach((r) => onDelete(r)) : undefined);
|
||||||
const currentLanguage = useMemo(() => contextLanguage || 'en', [contextLanguage]);
|
const currentLanguage = useMemo(() => contextLanguage || 'en', [contextLanguage]);
|
||||||
|
|
||||||
|
// ── Optimistic row hiding + adjusted header count ───────────────────────
|
||||||
|
// We synthesize `removeOptimistically` at the FormGenerator layer so every
|
||||||
|
// page gets instant delete feedback (row hidden + "N Einträge" decremented)
|
||||||
|
// regardless of whether the underlying hook implements it.
|
||||||
|
//
|
||||||
|
// 1. `optimisticallyDeletedIds` tracks which rows are currently hidden.
|
||||||
|
// 2. `displayData` below is filtered to exclude those IDs.
|
||||||
|
// 3. `pagination.totalItems`/`totalPages` are reduced by the set size.
|
||||||
|
// 4. The set is cleared whenever a fresh `pagination` reference arrives
|
||||||
|
// from the hook (i.e. after a successful refetch establishes server
|
||||||
|
// truth).
|
||||||
|
const [optimisticallyDeletedIds, setOptimisticallyDeletedIds] = useState<Set<string>>(() => new Set());
|
||||||
|
const previousPaginationRef = useRef<any>(hookDataProp?.pagination);
|
||||||
|
useEffect(() => {
|
||||||
|
if (hookDataProp?.pagination !== previousPaginationRef.current) {
|
||||||
|
previousPaginationRef.current = hookDataProp?.pagination;
|
||||||
|
if (optimisticallyDeletedIds.size > 0) setOptimisticallyDeletedIds(new Set());
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [hookDataProp?.pagination]);
|
||||||
|
|
||||||
|
// Snapshot of the current table state so a "naked" refetch() call (e.g.
|
||||||
|
// from DeleteActionButton) still includes page/pageSize/filters/sort/search.
|
||||||
|
// Without this, the hook issues a no-params GET which, for paginated
|
||||||
|
// endpoints, returns `pagination: null` and leaves `totalItems` stale.
|
||||||
|
const tableStateRef = useRef({
|
||||||
|
page: 1,
|
||||||
|
pageSize: pageSize,
|
||||||
|
search: '',
|
||||||
|
filters: {} as Record<string, any>,
|
||||||
|
sort: [] as Array<{ key: string; direction: 'asc' | 'desc' }>,
|
||||||
|
});
|
||||||
|
|
||||||
|
const hookData = useMemo(() => {
|
||||||
|
if (!hookDataProp) return hookDataProp;
|
||||||
|
|
||||||
|
const origRemove =
|
||||||
|
hookDataProp.removeOptimistically || hookDataProp.removeFileOptimistically;
|
||||||
|
const wrappedRemove = (id: string) => {
|
||||||
|
if (origRemove) origRemove(id);
|
||||||
|
setOptimisticallyDeletedIds(prev => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.add(String(id));
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const wrappedRefetch = hookDataProp.refetch
|
||||||
|
? async (params?: any) => {
|
||||||
|
const hasPaginationInfo =
|
||||||
|
params && (params.page !== undefined || params.pageSize !== undefined);
|
||||||
|
if (hasPaginationInfo) {
|
||||||
|
return await hookDataProp.refetch(params);
|
||||||
|
}
|
||||||
|
const s = tableStateRef.current;
|
||||||
|
const finalParams: any = {
|
||||||
|
page: s.page,
|
||||||
|
pageSize: s.pageSize,
|
||||||
|
...(params || {}),
|
||||||
|
};
|
||||||
|
if (s.search && s.search.trim()) finalParams.search = s.search.trim();
|
||||||
|
const activeFilters: Record<string, any> = {};
|
||||||
|
Object.entries(s.filters).forEach(([k, v]) => {
|
||||||
|
if (v !== undefined && v !== '') activeFilters[k] = v;
|
||||||
|
});
|
||||||
|
if (Object.keys(activeFilters).length) finalParams.filters = activeFilters;
|
||||||
|
if (s.sort.length) {
|
||||||
|
finalParams.sort = s.sort.map(sc => ({ field: sc.key, direction: sc.direction }));
|
||||||
|
}
|
||||||
|
return await hookDataProp.refetch(finalParams);
|
||||||
|
}
|
||||||
|
: hookDataProp.refetch;
|
||||||
|
|
||||||
|
const origPagination = hookDataProp.pagination;
|
||||||
|
const hasNumericTotal =
|
||||||
|
origPagination && typeof origPagination.totalItems === 'number';
|
||||||
|
const delta = -optimisticallyDeletedIds.size;
|
||||||
|
const adjustedTotalItems = hasNumericTotal
|
||||||
|
? Math.max(0, origPagination.totalItems + delta)
|
||||||
|
: undefined;
|
||||||
|
const adjustedTotalPages =
|
||||||
|
hasNumericTotal && origPagination.pageSize
|
||||||
|
? Math.max(1, Math.ceil((adjustedTotalItems ?? 0) / origPagination.pageSize))
|
||||||
|
: origPagination?.totalPages;
|
||||||
|
|
||||||
|
const adjustedPagination = hasNumericTotal
|
||||||
|
? {
|
||||||
|
...origPagination,
|
||||||
|
totalItems: adjustedTotalItems,
|
||||||
|
totalPages: adjustedTotalPages,
|
||||||
|
}
|
||||||
|
: origPagination;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...hookDataProp,
|
||||||
|
removeOptimistically: wrappedRemove,
|
||||||
|
removeFileOptimistically: wrappedRemove,
|
||||||
|
refetch: wrappedRefetch,
|
||||||
|
pagination: adjustedPagination,
|
||||||
|
};
|
||||||
|
}, [hookDataProp, optimisticallyDeletedIds]);
|
||||||
// Use provided columns from Pydantic attribute definitions
|
// Use provided columns from Pydantic attribute definitions
|
||||||
// NO AUTO-DETECTION - columns must come from backend attribute definitions
|
// NO AUTO-DETECTION - columns must come from backend attribute definitions
|
||||||
// Use a ref to cache columns so they persist across data changes (e.g., when filtering)
|
// Use a ref to cache columns so they persist across data changes (e.g., when filtering)
|
||||||
|
|
@ -429,6 +531,10 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
|
|
||||||
// Debounce search term for backend calls
|
// Debounce search term for backend calls
|
||||||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
|
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
|
||||||
|
|
||||||
|
// Bumped by the refresh button so the backend-refetch useEffect re-runs even
|
||||||
|
// when no other state (page/filters/sort/search) changed.
|
||||||
|
const [refreshNonce, setRefreshNonce] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
|
|
@ -440,6 +546,18 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [searchTerm]);
|
}, [searchTerm]);
|
||||||
|
|
||||||
|
// Keep tableStateRef in sync so a "naked" refetch() call (from e.g.
|
||||||
|
// DeleteActionButton) can inject the current page/pageSize/filters/sort.
|
||||||
|
useEffect(() => {
|
||||||
|
tableStateRef.current = {
|
||||||
|
page: currentPage,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
search: debouncedSearchTerm,
|
||||||
|
filters,
|
||||||
|
sort: sortConfigs,
|
||||||
|
};
|
||||||
|
}, [currentPage, currentPageSize, debouncedSearchTerm, filters, sortConfigs]);
|
||||||
|
|
||||||
// Call backend when filters/search/sort/pagination change
|
// Call backend when filters/search/sort/pagination change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -494,7 +612,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
console.error('❌ FormGeneratorTable: Backend refetch failed:', error);
|
console.error('❌ FormGeneratorTable: Backend refetch failed:', error);
|
||||||
});
|
});
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [debouncedSearchTerm, filters, sortConfigs, currentPage, currentPageSize, supportsBackendPagination]);
|
}, [debouncedSearchTerm, filters, sortConfigs, currentPage, currentPageSize, supportsBackendPagination, refreshNonce]);
|
||||||
|
|
||||||
// Refs for action buttons containers to detect clicks outside
|
// Refs for action buttons containers to detect clicks outside
|
||||||
const actionButtonsRefs = useRef<Map<number, HTMLDivElement>>(new Map());
|
const actionButtonsRefs = useRef<Map<number, HTMLDivElement>>(new Map());
|
||||||
|
|
@ -740,9 +858,13 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
return value.length > 8 ? `${value.substring(0, 8)}...` : value;
|
return value.length > 8 ? `${value.substring(0, 8)}...` : value;
|
||||||
}, [fkCache]);
|
}, [fkCache]);
|
||||||
|
|
||||||
// Data is already filtered, sorted, and paginated by the backend
|
// Data is already filtered, sorted, and paginated by the backend.
|
||||||
// No client-side processing needed
|
// Client-side only filters out rows that were just optimistically deleted
|
||||||
const displayData = data;
|
// so the UI updates instantly before the server's next refetch response.
|
||||||
|
const displayData = useMemo(() => {
|
||||||
|
if (optimisticallyDeletedIds.size === 0) return data;
|
||||||
|
return data.filter(row => !optimisticallyDeletedIds.has(String(row?.[_idField])));
|
||||||
|
}, [data, optimisticallyDeletedIds, _idField]);
|
||||||
|
|
||||||
// Grouping: Group data by groupBy field if specified
|
// Grouping: Group data by groupBy field if specified
|
||||||
const groupedData = useMemo(() => {
|
const groupedData = useMemo(() => {
|
||||||
|
|
@ -1835,7 +1957,22 @@ export function FormGeneratorTable<T extends Record<string, any>>({
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}) : undefined}
|
}) : undefined}
|
||||||
onRefresh={onRefresh}
|
onRefresh={
|
||||||
|
// The refresh button resets pagination to page 1, clears any
|
||||||
|
// optimistic hidden-rows state, and bumps `refreshNonce` so the
|
||||||
|
// backend-refetch useEffect re-runs (even when no state changed).
|
||||||
|
// When the table supports backend pagination, the external
|
||||||
|
// onRefresh is skipped to avoid a double-fetch — the useEffect
|
||||||
|
// already calls hookData.refetch with the correct pagination.
|
||||||
|
onRefresh
|
||||||
|
? () => {
|
||||||
|
if (optimisticallyDeletedIds.size > 0) setOptimisticallyDeletedIds(new Set());
|
||||||
|
setCurrentPage(1);
|
||||||
|
setRefreshNonce(n => n + 1);
|
||||||
|
if (!supportsBackendPagination) onRefresh();
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
searchable={searchable}
|
searchable={searchable}
|
||||||
selectable={selectable}
|
selectable={selectable}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { createContext, useContext, useCallback, useState, useEffect, useMemo } from 'react';
|
import React, { createContext, useContext, useCallback, useState, useEffect, useMemo } from 'react';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
import api from '../api';
|
import api from '../api';
|
||||||
import { useFileOperations } from '../hooks/useFiles';
|
import { useFileOperations, type FilePreviewResult } from '../hooks/useFiles';
|
||||||
import type { FolderInfo } from '../api/fileApi';
|
import type { FolderInfo } from '../api/fileApi';
|
||||||
import type { FileNode } from '../components/FolderTree/FolderTree';
|
import type { FileNode } from '../components/FolderTree/FolderTree';
|
||||||
|
|
||||||
|
|
@ -31,7 +31,7 @@ interface FileContextType {
|
||||||
handleDownloadFolder: (folderId: string, folderName: string) => Promise<void>;
|
handleDownloadFolder: (folderId: string, folderName: string) => Promise<void>;
|
||||||
handleFileDelete: (fileId: string, onOptimisticDelete?: () => void) => Promise<boolean>;
|
handleFileDelete: (fileId: string, onOptimisticDelete?: () => void) => Promise<boolean>;
|
||||||
handleFileUpload: (file: File, workflowId?: string) => Promise<{ success: boolean; fileData?: any; error?: string }>;
|
handleFileUpload: (file: File, workflowId?: string) => Promise<{ success: boolean; fileData?: any; error?: string }>;
|
||||||
handleFilePreview: (fileId: string, fileName: string, mimeType?: string) => Promise<{ success: boolean; previewUrl?: string | null; blob?: Blob | null; isJsonContent?: boolean; decodedContent?: any; isTextContent?: boolean; error?: string }>;
|
handleFilePreview: (fileId: string, fileName: string, mimeType?: string) => Promise<FilePreviewResult>;
|
||||||
handleFileDownload: (fileId: string, fileName: string) => Promise<void>;
|
handleFileDownload: (fileId: string, fileName: string) => Promise<void>;
|
||||||
uploadingFile: boolean;
|
uploadingFile: boolean;
|
||||||
deletingFiles: Set<string>;
|
deletingFiles: Set<string>;
|
||||||
|
|
@ -316,7 +316,7 @@ export function FileProvider({ children }: { children: React.ReactNode }) {
|
||||||
handleDownloadFolder,
|
handleDownloadFolder,
|
||||||
handleFileDelete,
|
handleFileDelete,
|
||||||
handleFileUpload,
|
handleFileUpload,
|
||||||
handleFilePreview: handleFilePreview as FileContextType['handleFilePreview'],
|
handleFilePreview,
|
||||||
handleFileDownload: async (fileId: string, fileName: string) => {
|
handleFileDownload: async (fileId: string, fileName: string) => {
|
||||||
await handleFileDownload(fileId, fileName);
|
await handleFileDownload(fileId, fileName);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -333,6 +333,8 @@ export function useConnections() {
|
||||||
|
|
||||||
// Create Google connection and open OAuth popup
|
// Create Google connection and open OAuth popup
|
||||||
const createGoogleConnectionAndAuth = async (): Promise<void> => {
|
const createGoogleConnectionAndAuth = async (): Promise<void> => {
|
||||||
|
if (isConnecting) return;
|
||||||
|
setIsConnecting(true);
|
||||||
try {
|
try {
|
||||||
// Step 1: Create a Google connection
|
// Step 1: Create a Google connection
|
||||||
const newConnection = await createConnection({
|
const newConnection = await createConnection({
|
||||||
|
|
@ -354,7 +356,7 @@ export function useConnections() {
|
||||||
authUrl = `${apiBaseUrl}${authUrl}`;
|
authUrl = `${apiBaseUrl}${authUrl}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return await new Promise<void>((resolve, reject) => {
|
||||||
const popup = window.open(
|
const popup = window.open(
|
||||||
authUrl,
|
authUrl,
|
||||||
'google-connection',
|
'google-connection',
|
||||||
|
|
@ -362,6 +364,7 @@ export function useConnections() {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!popup) {
|
if (!popup) {
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -371,6 +374,7 @@ export function useConnections() {
|
||||||
if (popup.closed) {
|
if (popup.closed) {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('Google OAuth popup closed');
|
console.log('Google OAuth popup closed');
|
||||||
// Refresh connections in case it succeeded
|
// Refresh connections in case it succeeded
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
|
|
@ -390,6 +394,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('Google connection successful');
|
console.log('Google connection successful');
|
||||||
// Refresh connections
|
// Refresh connections
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
|
|
@ -398,6 +403,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error(event.data.error || 'Google connection failed'));
|
reject(new Error(event.data.error || 'Google connection failed'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -405,6 +411,7 @@ export function useConnections() {
|
||||||
window.addEventListener('message', messageListener);
|
window.addEventListener('message', messageListener);
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
setIsConnecting(false);
|
||||||
console.error('Error creating Google connection:', error);
|
console.error('Error creating Google connection:', error);
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
@ -412,6 +419,8 @@ export function useConnections() {
|
||||||
|
|
||||||
// Create ClickUp connection and open OAuth popup
|
// Create ClickUp connection and open OAuth popup
|
||||||
const createClickupConnectionAndAuth = async (): Promise<void> => {
|
const createClickupConnectionAndAuth = async (): Promise<void> => {
|
||||||
|
if (isConnecting) return;
|
||||||
|
setIsConnecting(true);
|
||||||
try {
|
try {
|
||||||
const newConnection = await createConnection({
|
const newConnection = await createConnection({
|
||||||
type: 'clickup',
|
type: 'clickup',
|
||||||
|
|
@ -430,7 +439,7 @@ export function useConnections() {
|
||||||
authUrl = `${apiBaseUrl}${authUrl}`;
|
authUrl = `${apiBaseUrl}${authUrl}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return await new Promise<void>((resolve, reject) => {
|
||||||
const popup = window.open(
|
const popup = window.open(
|
||||||
authUrl,
|
authUrl,
|
||||||
'clickup-connection',
|
'clickup-connection',
|
||||||
|
|
@ -438,6 +447,7 @@ export function useConnections() {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!popup) {
|
if (!popup) {
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -446,6 +456,7 @@ export function useConnections() {
|
||||||
if (popup.closed) {
|
if (popup.closed) {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('ClickUp OAuth popup closed');
|
console.log('ClickUp OAuth popup closed');
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
resolve();
|
resolve();
|
||||||
|
|
@ -462,6 +473,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('ClickUp connection successful');
|
console.log('ClickUp connection successful');
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
resolve();
|
resolve();
|
||||||
|
|
@ -469,6 +481,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error(event.data.error || 'ClickUp connection failed'));
|
reject(new Error(event.data.error || 'ClickUp connection failed'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -476,6 +489,7 @@ export function useConnections() {
|
||||||
window.addEventListener('message', messageListener);
|
window.addEventListener('message', messageListener);
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
setIsConnecting(false);
|
||||||
console.error('Error creating ClickUp connection:', error);
|
console.error('Error creating ClickUp connection:', error);
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
@ -483,6 +497,8 @@ export function useConnections() {
|
||||||
|
|
||||||
// Create Microsoft connection and open OAuth popup
|
// Create Microsoft connection and open OAuth popup
|
||||||
const createMicrosoftConnectionAndAuth = async (): Promise<void> => {
|
const createMicrosoftConnectionAndAuth = async (): Promise<void> => {
|
||||||
|
if (isConnecting) return;
|
||||||
|
setIsConnecting(true);
|
||||||
try {
|
try {
|
||||||
// Step 1: Create a Microsoft connection
|
// Step 1: Create a Microsoft connection
|
||||||
const newConnection = await createConnection({
|
const newConnection = await createConnection({
|
||||||
|
|
@ -504,7 +520,7 @@ export function useConnections() {
|
||||||
authUrl = `${apiBaseUrl}${authUrl}`;
|
authUrl = `${apiBaseUrl}${authUrl}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return await new Promise<void>((resolve, reject) => {
|
||||||
const popup = window.open(
|
const popup = window.open(
|
||||||
authUrl,
|
authUrl,
|
||||||
'msft-connection',
|
'msft-connection',
|
||||||
|
|
@ -512,6 +528,7 @@ export function useConnections() {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!popup) {
|
if (!popup) {
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -521,6 +538,7 @@ export function useConnections() {
|
||||||
if (popup.closed) {
|
if (popup.closed) {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('Microsoft OAuth popup closed');
|
console.log('Microsoft OAuth popup closed');
|
||||||
// Refresh connections in case it succeeded
|
// Refresh connections in case it succeeded
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
|
|
@ -540,6 +558,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
console.log('Microsoft connection successful');
|
console.log('Microsoft connection successful');
|
||||||
// Refresh connections
|
// Refresh connections
|
||||||
fetchConnections();
|
fetchConnections();
|
||||||
|
|
@ -548,6 +567,7 @@ export function useConnections() {
|
||||||
clearInterval(checkClosed);
|
clearInterval(checkClosed);
|
||||||
window.removeEventListener('message', messageListener);
|
window.removeEventListener('message', messageListener);
|
||||||
popup.close();
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
reject(new Error(event.data.error || 'Microsoft connection failed'));
|
reject(new Error(event.data.error || 'Microsoft connection failed'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -555,6 +575,7 @@ export function useConnections() {
|
||||||
window.addEventListener('message', messageListener);
|
window.addEventListener('message', messageListener);
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
setIsConnecting(false);
|
||||||
console.error('Error creating Microsoft connection:', error);
|
console.error('Error creating Microsoft connection:', error);
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,15 @@ import {
|
||||||
type FolderInfo,
|
type FolderInfo,
|
||||||
} from '../api/fileApi';
|
} from '../api/fileApi';
|
||||||
|
|
||||||
|
export interface FilePreviewResult {
|
||||||
|
success: boolean;
|
||||||
|
previewUrl?: string;
|
||||||
|
blob?: Blob;
|
||||||
|
mimeType?: string;
|
||||||
|
textContent?: string | null;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
// File interfaces - exactly matching backend FileItem model
|
// File interfaces - exactly matching backend FileItem model
|
||||||
export interface FileInfo {
|
export interface FileInfo {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -480,7 +489,12 @@ export function useFileOperations() {
|
||||||
* - Removed workflowId from FileItem creation in interfaceComponentObjects.py
|
* - Removed workflowId from FileItem creation in interfaceComponentObjects.py
|
||||||
* - Upload should now work correctly
|
* - Upload should now work correctly
|
||||||
*/
|
*/
|
||||||
const handleFileUpload = async (file: globalThis.File, workflowId?: string, featureInstanceId?: string) => {
|
const handleFileUpload = async (
|
||||||
|
file: globalThis.File,
|
||||||
|
workflowId?: string,
|
||||||
|
featureInstanceId?: string,
|
||||||
|
folderId?: string | null,
|
||||||
|
) => {
|
||||||
setUploadError(null);
|
setUploadError(null);
|
||||||
setUploadingFile(true);
|
setUploadingFile(true);
|
||||||
|
|
||||||
|
|
@ -504,6 +518,9 @@ export function useFileOperations() {
|
||||||
if (featureInstanceId) {
|
if (featureInstanceId) {
|
||||||
formData.append('featureInstanceId', featureInstanceId);
|
formData.append('featureInstanceId', featureInstanceId);
|
||||||
}
|
}
|
||||||
|
if (folderId) {
|
||||||
|
formData.append('folderId', folderId);
|
||||||
|
}
|
||||||
|
|
||||||
// FormData is now correctly configured for backend
|
// FormData is now correctly configured for backend
|
||||||
|
|
||||||
|
|
@ -580,334 +597,67 @@ export function useFileOperations() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFilePreview = async (fileId: string, fileName: string, mimeType?: string) => {
|
const handleFilePreview = async (
|
||||||
|
fileId: string,
|
||||||
|
fileName: string,
|
||||||
|
_mimeType?: string,
|
||||||
|
): Promise<FilePreviewResult> => {
|
||||||
setPreviewError(null);
|
setPreviewError(null);
|
||||||
setPreviewingFiles(prev => new Set(prev).add(fileId));
|
setPreviewingFiles(prev => new Set(prev).add(fileId));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const response = await api.get(`/api/files/${fileId}/preview`, {
|
||||||
// For PDF files, try JSON response first (API returns base64-encoded PDF)
|
responseType: 'json',
|
||||||
if (mimeType === 'application/pdf') {
|
});
|
||||||
|
const data = response.data;
|
||||||
try {
|
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
|
||||||
responseType: 'json',
|
|
||||||
validateStatus: function (status: number) {
|
|
||||||
return status >= 200 && status < 300;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const jsonResponse = response.data;
|
|
||||||
|
|
||||||
|
|
||||||
|
if (!data || typeof data !== 'object' || typeof data.content !== 'string' || !data.mimeType) {
|
||||||
// Check if response has base64-encoded PDF content
|
throw new Error('Invalid preview response from server');
|
||||||
if (jsonResponse && typeof jsonResponse === 'object' && 'content' in jsonResponse) {
|
|
||||||
let content = jsonResponse.content;
|
|
||||||
|
|
||||||
// The content field contains base64-encoded JSON, so decode it first
|
|
||||||
if (typeof content === 'string' && /^[A-Za-z0-9+/=]+$/.test(content)) {
|
|
||||||
try {
|
|
||||||
const decodedJsonString = atob(content);
|
|
||||||
|
|
||||||
// Parse the decoded JSON string
|
|
||||||
const nestedJson = JSON.parse(decodedJsonString);
|
|
||||||
|
|
||||||
if (nestedJson && typeof nestedJson === 'object' && 'content' in nestedJson) {
|
|
||||||
const innerContent = nestedJson.content;
|
|
||||||
const isBase64 = /^[A-Za-z0-9+/=]+$/.test(innerContent);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (isBase64) {
|
|
||||||
// It's base64-encoded PDF content
|
|
||||||
content = innerContent;
|
|
||||||
} else {
|
|
||||||
// It's plain text content, not a PDF
|
|
||||||
// Return the text content for the FilePreview to handle as text
|
|
||||||
return {
|
|
||||||
success: true,
|
|
||||||
previewUrl: null,
|
|
||||||
blob: null,
|
|
||||||
isJsonContent: true,
|
|
||||||
decodedContent: innerContent,
|
|
||||||
isTextContent: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (decodeError) {
|
|
||||||
console.warn('⚠️ Failed to decode base64 content or parse JSON:', decodeError);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Decode base64 content
|
|
||||||
let decodedContent;
|
|
||||||
try {
|
|
||||||
decodedContent = atob(content);
|
|
||||||
|
|
||||||
|
|
||||||
// Verify it's actually a PDF
|
|
||||||
const isPDF = decodedContent.startsWith('%PDF');
|
|
||||||
|
|
||||||
|
|
||||||
if (!isPDF) {
|
|
||||||
console.warn('⚠️ Decoded content does not appear to be a valid PDF');
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (decodeError) {
|
|
||||||
console.error('❌ Failed to decode base64 PDF content:', decodeError);
|
|
||||||
throw new Error('Failed to decode PDF content');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a blob from the decoded PDF content
|
|
||||||
// Convert string to Uint8Array for proper binary handling
|
|
||||||
const uint8Array = new Uint8Array(decodedContent.length);
|
|
||||||
for (let i = 0; i < decodedContent.length; i++) {
|
|
||||||
uint8Array[i] = decodedContent.charCodeAt(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = new Blob([uint8Array], { type: 'application/pdf' });
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true, decodedContent: decodedContent };
|
|
||||||
} else {
|
|
||||||
throw new Error('No content field in PDF response');
|
|
||||||
}
|
|
||||||
} catch (jsonError) {
|
|
||||||
|
|
||||||
|
|
||||||
// Fallback to blob response
|
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
|
||||||
responseType: 'blob',
|
|
||||||
validateStatus: function (status: number) {
|
|
||||||
return status >= 200 && status < 300;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const previewData = response.data;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const url = window.URL.createObjectURL(previewData);
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: previewData, isJsonContent: false };
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// For image files, try JSON response first (API returns base64-encoded images)
|
|
||||||
if (mimeType?.startsWith('image/')) {
|
|
||||||
|
|
||||||
|
const { content, mimeType: responseMime, isText } = data as {
|
||||||
try {
|
content: string;
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
mimeType: string;
|
||||||
responseType: 'json',
|
isText?: boolean;
|
||||||
validateStatus: function (status: number) {
|
encoding?: string | null;
|
||||||
return status >= 200 && status < 300;
|
};
|
||||||
}
|
|
||||||
});
|
|
||||||
const jsonResponse = response.data;
|
|
||||||
|
|
||||||
|
|
||||||
|
let blob: Blob;
|
||||||
// Check if response has base64-encoded image content
|
let textContent: string | null = null;
|
||||||
if (jsonResponse && typeof jsonResponse === 'object' && 'content' in jsonResponse) {
|
|
||||||
let content = jsonResponse.content;
|
|
||||||
const responseMimeType = jsonResponse.mimeType || mimeType;
|
|
||||||
|
|
||||||
// The content field contains base64-encoded data, decode it first
|
|
||||||
if (typeof content === 'string' && /^[A-Za-z0-9+/=]+$/.test(content)) {
|
|
||||||
|
|
||||||
try {
|
if (isText) {
|
||||||
const decodedString = atob(content);
|
textContent = content;
|
||||||
|
blob = new Blob([content], { type: responseMime });
|
||||||
|
} else {
|
||||||
// Check if it's JSON (nested structure) or direct image data
|
const binaryString = atob(content);
|
||||||
if (decodedString.startsWith('{')) {
|
const bytes = new Uint8Array(binaryString.length);
|
||||||
// It's JSON, parse it
|
for (let i = 0; i < binaryString.length; i++) {
|
||||||
const nestedJson = JSON.parse(decodedString);
|
bytes[i] = binaryString.charCodeAt(i);
|
||||||
|
|
||||||
|
|
||||||
if (nestedJson && typeof nestedJson === 'object' && 'content' in nestedJson) {
|
|
||||||
const innerContent = nestedJson.content;
|
|
||||||
const isBase64 = /^[A-Za-z0-9+/=]+$/.test(innerContent);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (isBase64) {
|
|
||||||
// It's base64-encoded image content
|
|
||||||
content = innerContent;
|
|
||||||
} else {
|
|
||||||
throw new Error('Inner content is not base64-encoded');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (decodedString.startsWith('\x89PNG') || decodedString.startsWith('\xFF\xD8\xFF') || decodedString.startsWith('GIF8') || decodedString.startsWith('RIFF')) {
|
|
||||||
// It's direct image data, use it as is
|
|
||||||
content = btoa(decodedString); // Re-encode as base64 for processing
|
|
||||||
} else {
|
|
||||||
throw new Error('Decoded content is neither JSON nor image data');
|
|
||||||
}
|
|
||||||
} catch (decodeError) {
|
|
||||||
console.warn('⚠️ Failed to decode base64 content:', decodeError);
|
|
||||||
throw decodeError;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Decode base64 content
|
|
||||||
let decodedContent;
|
|
||||||
try {
|
|
||||||
decodedContent = atob(content);
|
|
||||||
|
|
||||||
|
|
||||||
// Verify it's actually an image by checking for common image headers
|
|
||||||
const isJPEG = decodedContent.startsWith('\xFF\xD8\xFF');
|
|
||||||
const isPNG = decodedContent.startsWith('\x89PNG\r\n\x1a\n');
|
|
||||||
const isGIF = decodedContent.startsWith('GIF8');
|
|
||||||
const isWebP = decodedContent.startsWith('RIFF') && decodedContent.includes('WEBP');
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (!isJPEG && !isPNG && !isGIF && !isWebP) {
|
|
||||||
console.warn('⚠️ Decoded content does not appear to be a valid image');
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (decodeError) {
|
|
||||||
console.error('❌ Failed to decode base64 image content:', decodeError);
|
|
||||||
throw new Error('Failed to decode image content');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a blob from the decoded image content
|
|
||||||
// Convert string to Uint8Array for proper binary handling
|
|
||||||
const uint8Array = new Uint8Array(decodedContent.length);
|
|
||||||
for (let i = 0; i < decodedContent.length; i++) {
|
|
||||||
uint8Array[i] = decodedContent.charCodeAt(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = new Blob([uint8Array], { type: responseMimeType });
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true, decodedContent: decodedContent };
|
|
||||||
} else {
|
|
||||||
throw new Error('No content field in image response');
|
|
||||||
}
|
|
||||||
} catch (jsonError) {
|
|
||||||
|
|
||||||
// Fallback to blob response
|
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
|
||||||
responseType: 'blob',
|
|
||||||
validateStatus: function (status: number) {
|
|
||||||
return status >= 200 && status < 300;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const previewData = response.data;
|
|
||||||
|
|
||||||
|
|
||||||
const url = window.URL.createObjectURL(previewData);
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: previewData, isJsonContent: false };
|
|
||||||
}
|
}
|
||||||
|
blob = new Blob([bytes], { type: responseMime });
|
||||||
}
|
}
|
||||||
|
|
||||||
// For other files, first try to get JSON response (for text-based files)
|
|
||||||
try {
|
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
|
||||||
responseType: 'json',
|
|
||||||
validateStatus: function (status: number) {
|
|
||||||
return status >= 200 && status < 300;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const jsonResponse = response.data;
|
|
||||||
|
|
||||||
// Check if response has content field (structured response)
|
|
||||||
if (jsonResponse && typeof jsonResponse === 'object' && 'content' in jsonResponse) {
|
|
||||||
const content = jsonResponse.content;
|
|
||||||
const mimeType = jsonResponse.mimeType || 'text/plain';
|
|
||||||
|
|
||||||
|
|
||||||
|
const previewUrl = window.URL.createObjectURL(blob);
|
||||||
// Check if content is base64 encoded (common pattern)
|
|
||||||
let decodedContent = content;
|
|
||||||
try {
|
|
||||||
// Try to decode as base64 if it looks like base64
|
|
||||||
if (content && typeof content === 'string' && /^[A-Za-z0-9+/=]+$/.test(content)) {
|
|
||||||
decodedContent = atob(content);
|
|
||||||
|
|
||||||
}
|
return {
|
||||||
} catch (decodeError) {
|
success: true,
|
||||||
decodedContent = content;
|
previewUrl,
|
||||||
}
|
blob,
|
||||||
|
mimeType: responseMime,
|
||||||
// Create a blob from the (possibly decoded) content
|
textContent,
|
||||||
const blob = new Blob([decodedContent], { type: mimeType });
|
};
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true, decodedContent: decodedContent };
|
|
||||||
} else if (jsonResponse && typeof jsonResponse === 'object' && 'result' in jsonResponse) {
|
|
||||||
// Handle base64 encoded content in 'result' field
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Decode base64 content
|
|
||||||
const decodedContent = atob(jsonResponse.result);
|
|
||||||
const mimeType = jsonResponse.mimeType || 'application/json';
|
|
||||||
|
|
||||||
|
|
||||||
// Create a blob from the decoded content
|
|
||||||
const blob = new Blob([decodedContent], { type: mimeType });
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true, decodedContent: decodedContent };
|
|
||||||
} catch (decodeError) {
|
|
||||||
console.error('❌ Failed to decode base64 content:', decodeError);
|
|
||||||
// Fallback to treating as raw JSON
|
|
||||||
const blob = new Blob([JSON.stringify(jsonResponse, null, 2)], { type: 'application/json' });
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true };
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// If it's not structured JSON, treat as raw content
|
|
||||||
const blob = new Blob([JSON.stringify(jsonResponse, null, 2)], { type: 'application/json' });
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: blob, isJsonContent: true };
|
|
||||||
}
|
|
||||||
} catch (jsonError) {
|
|
||||||
|
|
||||||
// Fallback to blob response for binary files
|
|
||||||
const response = await api.get(`/api/files/${fileId}/preview`, {
|
|
||||||
responseType: 'blob',
|
|
||||||
validateStatus: function (status: number) {
|
|
||||||
return status >= 200 && status < 300;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const previewData = response.data;
|
|
||||||
|
|
||||||
|
|
||||||
// Create a blob URL for preview
|
|
||||||
const url = window.URL.createObjectURL(previewData);
|
|
||||||
|
|
||||||
return { success: true, previewUrl: url, blob: previewData, isJsonContent: false };
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error(`❌ Preview failed for ${fileName}:`, error);
|
console.error(`Preview failed for ${fileName}:`, error);
|
||||||
let errorMessage = error.message;
|
let errorMessage = error?.message ?? 'Unknown error';
|
||||||
|
|
||||||
if (error.response?.status === 404) {
|
if (error?.response?.status === 404) {
|
||||||
errorMessage = `File "${fileName}" not found or has been deleted.`;
|
errorMessage = `File "${fileName}" not found or has been deleted.`;
|
||||||
} else if (error.response?.status === 403) {
|
} else if (error?.response?.status === 403) {
|
||||||
errorMessage = `No permission to preview "${fileName}".`;
|
errorMessage = `No permission to preview "${fileName}".`;
|
||||||
} else if (error.response?.status === 415) {
|
} else if (error?.response?.status === 415) {
|
||||||
errorMessage = `File type "${fileName}" is not supported for preview.`;
|
errorMessage = `File type "${fileName}" is not supported for preview.`;
|
||||||
}
|
}
|
||||||
|
|
||||||
setPreviewError(errorMessage);
|
setPreviewError(errorMessage);
|
||||||
return { success: false, error: errorMessage };
|
return { success: false, error: errorMessage };
|
||||||
} finally {
|
} finally {
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,6 @@ import styles from '../admin/Admin.module.css';
|
||||||
|
|
||||||
import { useLanguage } from '../../providers/language/LanguageContext';
|
import { useLanguage } from '../../providers/language/LanguageContext';
|
||||||
|
|
||||||
/** Wenn false: keine neue ClickUp-Verbindung über diese Seite (Buttons inaktiv). */
|
|
||||||
const isClickupConnectionUiEnabled = false;
|
|
||||||
|
|
||||||
|
|
||||||
export const ConnectionsPage: React.FC = () => {
|
export const ConnectionsPage: React.FC = () => {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
|
|
||||||
|
|
@ -101,12 +97,15 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
// Handle edit submit
|
// Handle edit submit
|
||||||
const handleEditSubmit = async (data: Partial<Connection>) => {
|
const handleEditSubmit = async (data: Partial<Connection>) => {
|
||||||
if (!editingConnection) return;
|
if (!editingConnection) return;
|
||||||
// Note: updateConnection is handled through the hook
|
|
||||||
try {
|
try {
|
||||||
// Ensure authority is properly typed - filter and validate authority value
|
|
||||||
const updateData: Partial<import('../../api/connectionApi').Connection> = { ...data };
|
const updateData: Partial<import('../../api/connectionApi').Connection> = { ...data };
|
||||||
|
|
||||||
// Validate and set authority if present
|
// Strip computed/read-only fields the backend cannot write.
|
||||||
|
delete (updateData as any).connectionReference;
|
||||||
|
delete (updateData as any).displayLabel;
|
||||||
|
delete (updateData as any).tokenStatus;
|
||||||
|
delete (updateData as any).tokenExpiresAt;
|
||||||
|
|
||||||
if (data.authority) {
|
if (data.authority) {
|
||||||
if (
|
if (
|
||||||
data.authority === 'local' ||
|
data.authority === 'local' ||
|
||||||
|
|
@ -116,7 +115,6 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
) {
|
) {
|
||||||
updateData.authority = data.authority;
|
updateData.authority = data.authority;
|
||||||
} else {
|
} else {
|
||||||
// Remove invalid authority value
|
|
||||||
delete (updateData as any).authority;
|
delete (updateData as any).authority;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -177,8 +175,10 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle create Google connection
|
// Guards prevent double-trigger while the OAuth popup is open, which would
|
||||||
|
// otherwise create additional orphan PENDING connections on every click.
|
||||||
const handleCreateGoogle = async () => {
|
const handleCreateGoogle = async () => {
|
||||||
|
if (isConnecting) return;
|
||||||
try {
|
try {
|
||||||
await createGoogleConnectionAndAuth();
|
await createGoogleConnectionAndAuth();
|
||||||
refetch();
|
refetch();
|
||||||
|
|
@ -187,8 +187,8 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle create Microsoft connection
|
|
||||||
const handleCreateMicrosoft = async () => {
|
const handleCreateMicrosoft = async () => {
|
||||||
|
if (isConnecting) return;
|
||||||
try {
|
try {
|
||||||
await createMicrosoftConnectionAndAuth();
|
await createMicrosoftConnectionAndAuth();
|
||||||
refetch();
|
refetch();
|
||||||
|
|
@ -197,9 +197,8 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle create ClickUp connection (UI kann per Flag abgeschaltet sein)
|
|
||||||
const handleCreateClickup = async () => {
|
const handleCreateClickup = async () => {
|
||||||
if (!isClickupConnectionUiEnabled) return;
|
if (isConnecting) return;
|
||||||
try {
|
try {
|
||||||
await createClickupConnectionAndAuth();
|
await createClickupConnectionAndAuth();
|
||||||
refetch();
|
refetch();
|
||||||
|
|
@ -228,7 +227,12 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
|
|
||||||
// Form attributes for edit modal
|
// Form attributes for edit modal
|
||||||
const formAttributes = useMemo(() => {
|
const formAttributes = useMemo(() => {
|
||||||
const excludedFields = ['id', 'mandateId', 'userId', 'sysCreatedBy', 'sysCreatedAt', 'sysModifiedAt', 'connectedAt', 'lastChecked'];
|
const excludedFields = [
|
||||||
|
'id', 'mandateId', 'userId', 'sysCreatedBy', 'sysCreatedAt', 'sysModifiedAt',
|
||||||
|
'connectedAt', 'lastChecked',
|
||||||
|
// computed/read-only fields the backend rejects on write
|
||||||
|
'connectionReference', 'displayLabel', 'tokenStatus', 'tokenExpiresAt',
|
||||||
|
];
|
||||||
return (attributes || [])
|
return (attributes || [])
|
||||||
.filter(attr => !excludedFields.includes(attr.name));
|
.filter(attr => !excludedFields.includes(attr.name));
|
||||||
}, [attributes]);
|
}, [attributes]);
|
||||||
|
|
@ -253,9 +257,7 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
<div>
|
<div>
|
||||||
<h1 className={styles.pageTitle}>{t('Verbindungen')}</h1>
|
<h1 className={styles.pageTitle}>{t('Verbindungen')}</h1>
|
||||||
<p className={styles.pageSubtitle}>
|
<p className={styles.pageSubtitle}>
|
||||||
{isClickupConnectionUiEnabled
|
{t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft, ClickUp)')}
|
||||||
? t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft, ClickUp)')
|
|
||||||
: t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft)')}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.headerActions}>
|
<div className={styles.headerActions}>
|
||||||
|
|
@ -263,7 +265,7 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
className={styles.secondaryButton}
|
className={styles.secondaryButton}
|
||||||
onClick={handleAdminConsent}
|
onClick={handleAdminConsent}
|
||||||
disabled={adminConsentPending}
|
disabled={adminConsentPending}
|
||||||
title={t('Microsoft Admin-Zustimmung erteilt der')}
|
title={t('Microsoft Admin-Zustimmung für die gesamte Organisation erteilen')}
|
||||||
>
|
>
|
||||||
<FaShieldAlt /> {t('Admin-Zustimmung')}
|
<FaShieldAlt /> {t('Admin-Zustimmung')}
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -290,17 +292,15 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
>
|
>
|
||||||
<FaMicrosoft /> Microsoft
|
<FaMicrosoft /> Microsoft
|
||||||
</button>
|
</button>
|
||||||
{isClickupConnectionUiEnabled && (
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
className={styles.clickupButton}
|
||||||
className={styles.clickupButton}
|
onClick={handleCreateClickup}
|
||||||
onClick={handleCreateClickup}
|
disabled={isConnecting}
|
||||||
disabled={isConnecting}
|
title={t('ClickUp-Konto verbinden (OAuth oder Personal Token nach Anmeldung)')}
|
||||||
title={t('ClickUp-Konto verbinden')}
|
>
|
||||||
>
|
<FaTasks /> ClickUp
|
||||||
<FaTasks /> ClickUp
|
</button>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -336,9 +336,7 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
icon: <FaLink />,
|
icon: <FaLink />,
|
||||||
onClick: handleConnect,
|
onClick: handleConnect,
|
||||||
title: t('Verbinden'),
|
title: t('Verbinden'),
|
||||||
visible: (row: Connection) =>
|
visible: (row: Connection) => row.status !== 'active',
|
||||||
row.status !== 'active' &&
|
|
||||||
(isClickupConnectionUiEnabled || row.authority !== 'clickup'),
|
|
||||||
loading: () => isConnecting,
|
loading: () => isConnecting,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import { FormGeneratorTable } from '../../components/FormGenerator/FormGenerator
|
||||||
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
||||||
import FolderTree from '../../components/FolderTree/FolderTree';
|
import FolderTree from '../../components/FolderTree/FolderTree';
|
||||||
import { useResizablePanels } from '../../hooks/useResizablePanels';
|
import { useResizablePanels } from '../../hooks/useResizablePanels';
|
||||||
import { FaSync, FaUpload, FaDownload, FaEye, FaFolderPlus } from 'react-icons/fa';
|
import { FaSync, FaUpload, FaDownload, FaFolderPlus } from 'react-icons/fa';
|
||||||
import { useToast } from '../../contexts/ToastContext';
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
import { usePrompt } from '../../hooks/usePrompt';
|
import { usePrompt } from '../../hooks/usePrompt';
|
||||||
import styles from '../admin/Admin.module.css';
|
import styles from '../admin/Admin.module.css';
|
||||||
|
|
@ -66,7 +66,6 @@ export const FilesPage: React.FC = () => {
|
||||||
handleFileDeleteMultiple,
|
handleFileDeleteMultiple,
|
||||||
handleFileUpload,
|
handleFileUpload,
|
||||||
handleFileUpdate,
|
handleFileUpdate,
|
||||||
handleFilePreview,
|
|
||||||
handleInlineUpdate,
|
handleInlineUpdate,
|
||||||
deletingFiles,
|
deletingFiles,
|
||||||
downloadingFiles,
|
downloadingFiles,
|
||||||
|
|
@ -153,6 +152,29 @@ export const FilesPage: React.FC = () => {
|
||||||
}));
|
}));
|
||||||
}, [folders]);
|
}, [folders]);
|
||||||
|
|
||||||
|
const selectedFolderName = useMemo(() => {
|
||||||
|
if (!selectedFolderId) return null;
|
||||||
|
return folders.find(f => f.id === selectedFolderId)?.name ?? null;
|
||||||
|
}, [folders, selectedFolderId]);
|
||||||
|
|
||||||
|
const emptyTableMessage = useMemo(() => {
|
||||||
|
if (!selectedFolderId) {
|
||||||
|
return t('Keine Dateien gefunden');
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem', alignItems: 'center' }}>
|
||||||
|
<div style={{ fontWeight: 600 }}>
|
||||||
|
{selectedFolderName
|
||||||
|
? t('Der Ordner „{name}" ist leer.', { name: selectedFolderName })
|
||||||
|
: t('Dieser Ordner ist leer.')}
|
||||||
|
</div>
|
||||||
|
<div style={{ color: 'var(--text-muted, #64748b)' }}>
|
||||||
|
{t('Lade eine neue Datei hoch oder verschiebe bestehende Dateien hierher.')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, [selectedFolderId, selectedFolderName, t]);
|
||||||
|
|
||||||
// ── Columns ───────────────────────────────────────────────────────────
|
// ── Columns ───────────────────────────────────────────────────────────
|
||||||
const columns = useMemo(() => {
|
const columns = useMemo(() => {
|
||||||
const hiddenColumns = ['id', 'fileHash', 'folderId'];
|
const hiddenColumns = ['id', 'fileHash', 'folderId'];
|
||||||
|
|
@ -278,13 +300,6 @@ export const FilesPage: React.FC = () => {
|
||||||
await handleFileDownload(file.id, file.fileName);
|
await handleFileDownload(file.id, file.fileName);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePreview = async (file: UserFile) => {
|
|
||||||
const result = await handleFilePreview(file.id, file.fileName, file.mimeType);
|
|
||||||
if (result.success && result.previewUrl) {
|
|
||||||
window.open(result.previewUrl, '_blank');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUploadClick = () => { fileInputRef.current?.click(); };
|
const handleUploadClick = () => { fileInputRef.current?.click(); };
|
||||||
|
|
||||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
|
@ -293,7 +308,7 @@ export const FilesPage: React.FC = () => {
|
||||||
let successCount = 0;
|
let successCount = 0;
|
||||||
let errorCount = 0;
|
let errorCount = 0;
|
||||||
for (const file of Array.from(picked)) {
|
for (const file of Array.from(picked)) {
|
||||||
const result = await handleFileUpload(file);
|
const result = await handleFileUpload(file, undefined, undefined, selectedFolderId);
|
||||||
if (result?.success) successCount++; else errorCount++;
|
if (result?.success) successCount++; else errorCount++;
|
||||||
}
|
}
|
||||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||||
|
|
@ -465,6 +480,15 @@ export const FilesPage: React.FC = () => {
|
||||||
({ highlighted: row.id === highlightedFileId ? 'true' : 'false' })
|
({ highlighted: row.id === highlightedFileId ? 'true' : 'false' })
|
||||||
}
|
}
|
||||||
actionButtons={[
|
actionButtons={[
|
||||||
|
{
|
||||||
|
type: 'view' as const,
|
||||||
|
onAction: () => { /* ContentPreview fetches the file itself once the popup opens */ },
|
||||||
|
title: t('Vorschau'),
|
||||||
|
idField: 'id',
|
||||||
|
nameField: 'fileName',
|
||||||
|
typeField: 'mimeType',
|
||||||
|
loadingStateName: 'previewingFiles',
|
||||||
|
},
|
||||||
...(canUpdate ? [{
|
...(canUpdate ? [{
|
||||||
type: 'edit' as const,
|
type: 'edit' as const,
|
||||||
onAction: handleEditClick,
|
onAction: handleEditClick,
|
||||||
|
|
@ -486,13 +510,6 @@ export const FilesPage: React.FC = () => {
|
||||||
title: t('Herunterladen'),
|
title: t('Herunterladen'),
|
||||||
loading: (row: UserFile) => downloadingFiles.has(row.id),
|
loading: (row: UserFile) => downloadingFiles.has(row.id),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'preview',
|
|
||||||
icon: <FaEye />,
|
|
||||||
onClick: handlePreview,
|
|
||||||
title: t('Vorschau'),
|
|
||||||
loading: (row: UserFile) => previewingFiles.has(row.id),
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
onDelete={handleDelete}
|
onDelete={handleDelete}
|
||||||
onDeleteMultiple={handleDeleteMultiple}
|
onDeleteMultiple={handleDeleteMultiple}
|
||||||
|
|
@ -503,8 +520,9 @@ export const FilesPage: React.FC = () => {
|
||||||
handleDelete: handleFileDelete,
|
handleDelete: handleFileDelete,
|
||||||
handleInlineUpdate,
|
handleInlineUpdate,
|
||||||
updateOptimistically: updateFileOptimistically,
|
updateOptimistically: updateFileOptimistically,
|
||||||
|
previewingFiles,
|
||||||
}}
|
}}
|
||||||
emptyMessage={t('Keine Dateien gefunden')}
|
emptyMessage={emptyTableMessage}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
* Follows the pattern established in AdminUsersPage/WorkflowsPage.
|
* Follows the pattern established in AdminUsersPage/WorkflowsPage.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useMemo, useEffect } from 'react';
|
import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||||||
import { usePrompts, usePromptOperations } from '../../hooks/usePrompts';
|
import { usePrompts, usePromptOperations } from '../../hooks/usePrompts';
|
||||||
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
|
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
|
||||||
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
||||||
|
|
@ -49,10 +49,22 @@ export const PromptsPage: React.FC = () => {
|
||||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||||
const [editingPrompt, setEditingPrompt] = useState<Prompt | null>(null);
|
const [editingPrompt, setEditingPrompt] = useState<Prompt | null>(null);
|
||||||
|
|
||||||
|
// ── Table refetch wrapper (stable signature used by FormGeneratorTable) ──
|
||||||
|
const _tableRefetch = useCallback(async (params?: any) => {
|
||||||
|
await refetch(params);
|
||||||
|
}, [refetch]);
|
||||||
|
|
||||||
|
// ── Refresh-All for the header "Aktualisieren" button ────────────────────
|
||||||
|
// Forces a paginated request so the cache key matches what the table uses
|
||||||
|
// internally. This guarantees fresh (non-cached) data is pulled in.
|
||||||
|
const _refreshAll = useCallback(async () => {
|
||||||
|
await _tableRefetch({ page: 1, pageSize: 25 });
|
||||||
|
}, [_tableRefetch]);
|
||||||
|
|
||||||
// Initial fetch
|
// Initial fetch
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refetch();
|
_tableRefetch({ page: 1, pageSize: 25 });
|
||||||
}, []);
|
}, [_tableRefetch]);
|
||||||
|
|
||||||
// Generate columns from attributes - exclude ID fields from display
|
// Generate columns from attributes - exclude ID fields from display
|
||||||
const columns = useMemo(() => {
|
const columns = useMemo(() => {
|
||||||
|
|
@ -114,7 +126,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
});
|
});
|
||||||
if (result?.success) {
|
if (result?.success) {
|
||||||
setShowCreateModal(false);
|
setShowCreateModal(false);
|
||||||
refetch();
|
_refreshAll();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -127,7 +139,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
});
|
});
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
setEditingPrompt(null);
|
setEditingPrompt(null);
|
||||||
refetch();
|
_refreshAll();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -135,7 +147,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
const handleDelete = async (prompt: Prompt) => {
|
const handleDelete = async (prompt: Prompt) => {
|
||||||
const success = await handlePromptDelete(prompt.id);
|
const success = await handlePromptDelete(prompt.id);
|
||||||
if (success) {
|
if (success) {
|
||||||
refetch();
|
_refreshAll();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -152,7 +164,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
<div className={styles.errorContainer}>
|
<div className={styles.errorContainer}>
|
||||||
<span className={styles.errorIcon}>⚠️</span>
|
<span className={styles.errorIcon}>⚠️</span>
|
||||||
<p className={styles.errorMessage}>{t('Fehler beim Laden der Prompts: {detail}', { detail: String(error) })}</p>
|
<p className={styles.errorMessage}>{t('Fehler beim Laden der Prompts: {detail}', { detail: String(error) })}</p>
|
||||||
<button className={styles.secondaryButton} onClick={() => refetch()}>
|
<button className={styles.secondaryButton} onClick={() => _refreshAll()}>
|
||||||
<FaSync /> {t('Erneut versuchen')}
|
<FaSync /> {t('Erneut versuchen')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -170,7 +182,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
<div className={styles.headerActions}>
|
<div className={styles.headerActions}>
|
||||||
<button
|
<button
|
||||||
className={styles.secondaryButton}
|
className={styles.secondaryButton}
|
||||||
onClick={() => refetch()}
|
onClick={() => _refreshAll()}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
<FaSync className={loading ? 'spinning' : ''} /> {t('Aktualisieren')}
|
<FaSync className={loading ? 'spinning' : ''} /> {t('Aktualisieren')}
|
||||||
|
|
@ -217,7 +229,7 @@ export const PromptsPage: React.FC = () => {
|
||||||
]}
|
]}
|
||||||
onDelete={handleDelete}
|
onDelete={handleDelete}
|
||||||
hookData={{
|
hookData={{
|
||||||
refetch,
|
refetch: _tableRefetch,
|
||||||
permissions,
|
permissions,
|
||||||
pagination,
|
pagination,
|
||||||
handleDelete: handlePromptDelete,
|
handleDelete: handlePromptDelete,
|
||||||
|
|
|
||||||
|
|
@ -475,7 +475,7 @@ export const BillingDataView: React.FC = () => {
|
||||||
{ key: 'aicoreProvider', label: t('Anbieter'), type: 'text' as any, sortable: true, filterable: true, width: 120 },
|
{ key: 'aicoreProvider', label: t('Anbieter'), type: 'text' as any, sortable: true, filterable: true, width: 120 },
|
||||||
{ key: 'aicoreModel', label: t('Modell'), type: 'text' as any, sortable: true, filterable: true, width: 150 },
|
{ key: 'aicoreModel', label: t('Modell'), type: 'text' as any, sortable: true, filterable: true, width: 150 },
|
||||||
{ key: 'featureCode', label: t('Feature'), type: 'text' as any, sortable: true, filterable: true, width: 120 },
|
{ key: 'featureCode', label: t('Feature'), type: 'text' as any, sortable: true, filterable: true, width: 120 },
|
||||||
{ key: 'amount', label: t('Betrag (CHF)'), type: 'number' as any, sortable: true, width: 120 },
|
{ key: 'amount', label: t('Betrag (CHF)'), type: 'number' as any, sortable: true, searchable: true, width: 120 },
|
||||||
], [t]);
|
], [t]);
|
||||||
|
|
||||||
const totalBalance = useMemo(() => {
|
const totalBalance = useMemo(() => {
|
||||||
|
|
@ -609,7 +609,7 @@ export const BillingDataView: React.FC = () => {
|
||||||
fontWeight: chartMode === 'pie' ? 600 : 400,
|
fontWeight: chartMode === 'pie' ? 600 : 400,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t('Pie')}
|
{t('Kreis')}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setChartMode('bar')}
|
onClick={() => setChartMode('bar')}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue