diff --git a/package-lock.json b/package-lock.json index 7cfcea4..4f48a98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@types/leaflet": "^1.9.21", "@xstate/react": "^5.0.0", "axios": "^1.8.3", + "docx-preview": "^0.3.7", "dotenv": "^16.0.3", "express": "^4.18.2", "framer-motion": "^12.7.3", @@ -22,6 +23,7 @@ "jsonwebtoken": "^9.0.2", "jwt-decode": "^4.0.0", "leaflet": "^1.9.4", + "mammoth": "^1.12.0", "motion": "^12.7.3", "pg": "^8.8.0", "proj4": "^2.20.2", @@ -34,6 +36,7 @@ "react-router-dom": "^7.7.1", "recharts": "^3.7.0", "remark-gfm": "^4.0.1", + "xlsx": "^0.18.5", "xstate": "^5.20.1" }, "devDependencies": { @@ -1980,6 +1983,14 @@ "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": { "version": "5.0.5", "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" } }, + "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": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -2131,6 +2150,30 @@ "dev": true, "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": { "version": "1.20.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", @@ -2337,6 +2380,18 @@ "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": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -2415,6 +2470,14 @@ "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": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2541,6 +2604,22 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "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": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2794,6 +2873,19 @@ "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": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -2895,6 +2987,14 @@ "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": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -3608,6 +3708,14 @@ "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": { "version": "12.23.9", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz", @@ -3957,6 +4065,11 @@ "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": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz", @@ -4111,6 +4224,11 @@ "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": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -4258,6 +4376,17 @@ "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": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz", @@ -4318,6 +4447,14 @@ "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": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -4405,6 +4542,16 @@ "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": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -4425,6 +4572,37 @@ "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": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz", @@ -5571,6 +5749,11 @@ "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": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -5621,6 +5804,11 @@ "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": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -5700,6 +5888,14 @@ "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": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -5910,6 +6106,11 @@ "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": { "version": "2.20.2", "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.20.2.tgz", @@ -6206,6 +6407,25 @@ "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": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz", @@ -6522,6 +6742,11 @@ "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", "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": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -6673,6 +6898,22 @@ "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": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", @@ -6687,6 +6928,19 @@ "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": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", @@ -6901,6 +7155,11 @@ "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": { "version": "7.14.0", "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" } }, + "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": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -7251,6 +7515,22 @@ "integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==", "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": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", @@ -7261,6 +7541,34 @@ "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": { "version": "5.20.1", "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.20.1.tgz", diff --git a/package.json b/package.json index 456aebc..e94b6ae 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@types/leaflet": "^1.9.21", "@xstate/react": "^5.0.0", "axios": "^1.8.3", + "docx-preview": "^0.3.7", "dotenv": "^16.0.3", "express": "^4.18.2", "framer-motion": "^12.7.3", @@ -28,6 +29,7 @@ "jsonwebtoken": "^9.0.2", "jwt-decode": "^4.0.0", "leaflet": "^1.9.4", + "mammoth": "^1.12.0", "motion": "^12.7.3", "pg": "^8.8.0", "proj4": "^2.20.2", @@ -40,6 +42,7 @@ "react-router-dom": "^7.7.1", "recharts": "^3.7.0", "remark-gfm": "^4.0.1", + "xlsx": "^0.18.5", "xstate": "^5.20.1" }, "devDependencies": { diff --git a/src/components/ContentPreview/ContentPreview.module.css b/src/components/ContentPreview/ContentPreview.module.css index fd8cf40..7ae9574 100644 --- a/src/components/ContentPreview/ContentPreview.module.css +++ b/src/components/ContentPreview/ContentPreview.module.css @@ -845,3 +845,121 @@ /* 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; +} + diff --git a/src/components/ContentPreview/ContentPreview.tsx b/src/components/ContentPreview/ContentPreview.tsx index 2ee4d82..6f753a6 100644 --- a/src/components/ContentPreview/ContentPreview.tsx +++ b/src/components/ContentPreview/ContentPreview.tsx @@ -1,20 +1,24 @@ -import { useState, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { IoIosDownload, IoIosCopy } from 'react-icons/io'; import { Popup, PopupAction } from '../UiComponents/Popup/Popup'; import { useLanguage } from '../../providers/language/LanguageContext'; import { useFileOperations } from '../../hooks/useFiles'; -import { - JsonRenderer, - ImageRenderer, - TextRenderer, - PdfRenderer, +import { + JsonRenderer, + ImageRenderer, + TextRenderer, + PdfRenderer, HtmlRenderer, - ApplicationRenderer, - UnsupportedRenderer, - LoadingRenderer, - ErrorRenderer + ApplicationRenderer, + UnsupportedRenderer, + LoadingRenderer, + ErrorRenderer, + WordRenderer, + ExcelRenderer, + isWordMimeType, + isExcelMimeType, } from './renderers'; import styles from './ContentPreview.module.css'; @@ -26,98 +30,91 @@ export interface ContentPreviewProps { mimeType?: string; } -export function ContentPreview({ - isOpen, - onClose, - fileId, - fileName, - mimeType +export function ContentPreview({ + isOpen, + onClose, + fileId, + fileName, + mimeType, }: ContentPreviewProps) { const { t } = useLanguage(); - const { handleFilePreview, handleFileDownload, previewingFiles, previewError, downloadingFiles } = useFileOperations(); - - // Debug logging to see what data we're receiving - useEffect(() => { - if (isOpen && import.meta.env.DEV) { - console.log('ContentPreview received:', { fileId, fileName, mimeType }); - } - }, [isOpen, fileId, fileName, mimeType]); - const [previewUrl, setPreviewUrl] = useState(null); - const [previewContent, setPreviewContent] = useState(null); - const [error, setError] = useState(null); - const [copySuccess, setCopySuccess] = useState(false); + const { + handleFilePreview, + handleFileDownload, + previewingFiles, + previewError, + downloadingFiles, + } = useFileOperations(); + + const [previewUrl, setPreviewUrl] = useState(null); + const [blob, setBlob] = useState(null); + const [textContent, setTextContent] = useState(null); + const [resolvedMime, setResolvedMime] = useState(null); + const [error, setError] = useState(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(() => { return () => { - if (previewUrl) { - window.URL.revokeObjectURL(previewUrl); - } + if (previewUrl) window.URL.revokeObjectURL(previewUrl); }; }, [previewUrl]); - // Load preview when modal opens - useEffect(() => { - if (isOpen && fileId) { - // 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 effectiveMime = resolvedMime ?? mimeType; + const isPreviewing = previewingFiles.has(fileId); + const hasError = error || previewError; const handleCopyContent = async () => { + if (!textContent) return; try { - if (previewContent) { - await navigator.clipboard.writeText(previewContent); - setCopySuccess(true); - 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); - } - } + await navigator.clipboard.writeText(textContent); + setCopySuccess(true); + setTimeout(() => setCopySuccess(false), 2000); } catch (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[] = [ - // Copy Content Button - only show for text-based files (exclude PDFs and images) or corrupted PDFs - ...(mimeType !== 'application/pdf' && !mimeType?.startsWith('image/') && (mimeType?.startsWith('text/') || mimeType === 'application/json' || previewContent) ? [{ - label: copySuccess ? t('In die Zwischenablage kopiert') : t(''), - icon: copySuccess ? '✓' : , - onClick: handleCopyContent, - disabled: !previewContent && !previewUrl, - variant: 'primary' as const - }] : []), - - // Download Button - hide for corrupted PDFs - ...(isCorruptedPdf ? [] : [{ - label: String(''), + ...(textContent + ? [ + { + label: copySuccess ? t('In die Zwischenablage kopiert') : '', + icon: copySuccess ? '✓' : , + onClick: handleCopyContent, + disabled: !textContent, + variant: 'primary' as const, + }, + ] + : []), + { + label: '', icon: downloadingFiles.has(fileId) ? undefined : , onClick: handleDownloadFile, disabled: downloadingFiles.has(fileId), loading: downloadingFiles.has(fileId), - variant: 'success' as const - }]) + variant: 'success' as const, + }, ]; const renderPreview = () => { - // Handle text content in PDF files (corrupted files) - check this first - if (previewContent && !previewUrl && mimeType === 'application/pdf') { - console.log('🔍 ContentPreview: Rendering corrupted PDF with text content'); + if (isPreviewing) return ; + if (hasError) return ; + if (!blob || !effectiveMime) return null; + + if (effectiveMime === 'application/json' && textContent) { + return ; + } + + if (isWordMimeType(effectiveMime, fileName)) { return ( - setError(t('PDF-Vorschau konnte nicht geladen werden'))} + setError(msg)} /> ); } - if (!previewUrl) { - if (isPreviewing) { - return ; - } - - if (hasError) { - return ; - } - - return null; - } - - // For JSON files with decoded content, use JsonRenderer - if (previewContent && mimeType === 'application/json') { - return ; - } - - if (mimeType === 'application/json') { + if (isExcelMimeType(effectiveMime, fileName)) { return ( -
-
- {t('JSON-Vorschau als Fallback')} -
- {t('Rohinhalt')} -
-
- 
-            
-              {previewContent || t('Kein Inhalt verfügbar')}
-            
-
-
+ setError(msg)} + /> ); } - // Determine preview type based on MIME type - const mimePrefix = mimeType?.split('/')[0]; + const mimePrefix = effectiveMime.split('/')[0]; - - switch (mimePrefix) { case 'image': + if (!previewUrl) return null; return ( - setError(t('Bildvorschau konnte nicht geladen werden'))} /> ); - + case 'text': - // Special handling for HTML files - if (mimeType === 'text/html') { + if (effectiveMime === 'text/html' && previewUrl) { return ( - setError(t('HTML-Vorschau konnte nicht geladen werden'))} /> ); } - return ( - setError(t('Textvorschau konnte nicht geladen werden'))} /> ); - + case 'application': - if (mimeType === 'application/pdf') { - console.log('🔍 ContentPreview passing normal PDF to PdfRenderer:', { - previewUrl, - previewContent: previewContent ? `${previewContent.substring(0, 50)}...` : null, - fileName, - mimeType - }); + if (effectiveMime === 'application/pdf' && previewUrl) { return ( - setError(t('PDF-Vorschau konnte nicht geladen werden'))} /> ); } - - if (mimeType === 'application/html') { + if (effectiveMime === 'application/html' && previewUrl) { return ( - setError(t('HTML-Vorschau konnte nicht geladen werden'))} /> ); } - - - return ( - setError(t('Vorschau wird für dieses Format nicht unterstützt'))} + + setError(t('Vorschau wird für dieses Format nicht unterstützt')) + } /> ); - + default: - return ; + return ; } }; @@ -297,12 +257,9 @@ export function ContentPreview({ className={styles.contentPreviewPopup} actions={actions} > -
- {renderPreview()} -
+
{renderPreview()}
); } export default ContentPreview; - diff --git a/src/components/ContentPreview/renderers/ExcelRenderer.tsx b/src/components/ContentPreview/renderers/ExcelRenderer.tsx new file mode 100644 index 0000000..b4133f9 --- /dev/null +++ b/src/components/ContentPreview/renderers/ExcelRenderer.tsx @@ -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([]); + const [activeSheet, setActiveSheet] = useState(null); + const [loading, setLoading] = useState(true); + const [localError, setLocalError] = useState(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 ( +
+
+ {t('Tabelle wird geladen...')} +
+
+ ); + } + + if (localError) { + return ( +
+
+ {fileName} +
+
{localError}
+
+ ); + } + + return ( +
+
+ {fileName} + {sheets.length > 1 && ( +
+ {sheets.map(sheet => ( + + ))} +
+ )} +
+
+ {current && current.rows > 0 ? ( + + + + {current.colWidthsPx.map((w, i) => ( + + ))} + + + + + ))} + + + + {current.cells.map((row, rIdx) => ( + + + {row.map((cell, cIdx) => { + if (cell.skip) return null; + return ( + + ); + })} + + ))} + +
+ {current.colWidthsPx.map((_, i) => ( + + {colLabel(i)} +
{rIdx + 1} + {cell.display} +
+ ) : ( +
+ {t('Dieses Arbeitsblatt ist leer.')} +
+ )} +
+
+ ); +} diff --git a/src/components/ContentPreview/renderers/WordRenderer.tsx b/src/components/ContentPreview/renderers/WordRenderer.tsx new file mode 100644 index 0000000..6623f3e --- /dev/null +++ b/src/components/ContentPreview/renderers/WordRenderer.tsx @@ -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(null); + const styleRef = useRef(null); + const [loading, setLoading] = useState(true); + const [localError, setLocalError] = useState(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 ( +
+
+ {fileName} +
+
{localError}
+
+ ); + } + + return ( +
+ {loading && ( +
{t('Word-Dokument wird geladen...')}
+ )} +
+
+
+ ); +} diff --git a/src/components/ContentPreview/renderers/index.ts b/src/components/ContentPreview/renderers/index.ts index 0aa8e32..223f4e4 100644 --- a/src/components/ContentPreview/renderers/index.ts +++ b/src/components/ContentPreview/renderers/index.ts @@ -7,4 +7,6 @@ export { ApplicationRenderer } from './ApplicationRenderer'; export { UnsupportedRenderer } from './UnsupportedRenderer'; export { LoadingRenderer } from './LoadingRenderer'; export { ErrorRenderer } from './ErrorRenderer'; +export { WordRenderer, isWordMimeType } from './WordRenderer'; +export { ExcelRenderer, isExcelMimeType } from './ExcelRenderer'; diff --git a/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx b/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx index b040d45..f3e9ab4 100644 --- a/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx +++ b/src/components/FormGenerator/ActionButtons/DeleteActionButton/DeleteActionButton.tsx @@ -118,15 +118,11 @@ export function DeleteActionButton({ const success = await handleDelete(itemId); if (success) { - // If we used optimistic removal, don't refetch immediately - // The item is already removed from UI, and refetch might bring it back - if (removeOptimistically) { - // Only refetch if there was an error or if we need to sync other changes - // For now, we trust the optimistic removal worked - } else { - // No optimistic removal, refetch immediately - refetch(); - } + // Always refetch after a successful delete. The server has actually + // removed the row, so fresh data won't bring it back — and this is + // what re-syncs pagination.totalItems (and clears any optimistic + // hidden-row state maintained by FormGeneratorTable). + refetch(); onSuccess?.(row); } else { // Refetch to restore the item in case of failure diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx index 7dbc936..732330b 100644 --- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx +++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx @@ -185,8 +185,8 @@ export interface FormGeneratorTableProps { getRowDataAttributes?: (row: T, index: number) => Record; // For passing hook data to action buttons hookData?: any; // Contains all hook data: refetch, operations, loading states, etc. - // Custom empty message when table is empty - emptyMessage?: string; + // Custom empty message when table is empty (string or custom ReactNode) + emptyMessage?: React.ReactNode; // API endpoint for CSV export (e.g. "/api/users/"). If provided, the CSV export button is shown. apiEndpoint?: string; // Grouping configuration @@ -339,7 +339,7 @@ export function FormGeneratorTable>({ onRefresh, className = '', getRowDataAttributes, - hookData, + hookData: hookDataProp, emptyMessage, apiEndpoint, groupBy, @@ -356,6 +356,108 @@ export function FormGeneratorTable>({ // 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 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>(() => new Set()); + const previousPaginationRef = useRef(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, + 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 = {}; + 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 // 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) @@ -429,6 +531,10 @@ export function FormGeneratorTable>({ // Debounce search term for backend calls 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(() => { const timer = setTimeout(() => { @@ -440,6 +546,18 @@ export function FormGeneratorTable>({ return () => clearTimeout(timer); }, [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 useEffect(() => { @@ -494,7 +612,7 @@ export function FormGeneratorTable>({ console.error('❌ FormGeneratorTable: Backend refetch failed:', error); }); // 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 const actionButtonsRefs = useRef>(new Map()); @@ -740,9 +858,13 @@ export function FormGeneratorTable>({ return value.length > 8 ? `${value.substring(0, 8)}...` : value; }, [fkCache]); - // Data is already filtered, sorted, and paginated by the backend - // No client-side processing needed - const displayData = data; + // Data is already filtered, sorted, and paginated by the backend. + // Client-side only filters out rows that were just optimistically deleted + // 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 const groupedData = useMemo(() => { @@ -1835,7 +1957,22 @@ export function FormGeneratorTable>({ }, }; }) : 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} selectable={selectable} loading={loading} diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx index e5809bd..fea4872 100644 --- a/src/contexts/FileContext.tsx +++ b/src/contexts/FileContext.tsx @@ -1,7 +1,7 @@ import React, { createContext, useContext, useCallback, useState, useEffect, useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import api from '../api'; -import { useFileOperations } from '../hooks/useFiles'; +import { useFileOperations, type FilePreviewResult } from '../hooks/useFiles'; import type { FolderInfo } from '../api/fileApi'; import type { FileNode } from '../components/FolderTree/FolderTree'; @@ -31,7 +31,7 @@ interface FileContextType { handleDownloadFolder: (folderId: string, folderName: string) => Promise; handleFileDelete: (fileId: string, onOptimisticDelete?: () => void) => Promise; 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; handleFileDownload: (fileId: string, fileName: string) => Promise; uploadingFile: boolean; deletingFiles: Set; @@ -316,7 +316,7 @@ export function FileProvider({ children }: { children: React.ReactNode }) { handleDownloadFolder, handleFileDelete, handleFileUpload, - handleFilePreview: handleFilePreview as FileContextType['handleFilePreview'], + handleFilePreview, handleFileDownload: async (fileId: string, fileName: string) => { await handleFileDownload(fileId, fileName); }, diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts index d5ea099..563f7a1 100644 --- a/src/hooks/useConnections.ts +++ b/src/hooks/useConnections.ts @@ -333,6 +333,8 @@ export function useConnections() { // Create Google connection and open OAuth popup const createGoogleConnectionAndAuth = async (): Promise => { + if (isConnecting) return; + setIsConnecting(true); try { // Step 1: Create a Google connection const newConnection = await createConnection({ @@ -354,7 +356,7 @@ export function useConnections() { authUrl = `${apiBaseUrl}${authUrl}`; } - return new Promise((resolve, reject) => { + return await new Promise((resolve, reject) => { const popup = window.open( authUrl, 'google-connection', @@ -362,6 +364,7 @@ export function useConnections() { ); if (!popup) { + setIsConnecting(false); reject(new Error('Popup was blocked. Please allow popups and try again.')); return; } @@ -371,6 +374,7 @@ export function useConnections() { if (popup.closed) { clearInterval(checkClosed); window.removeEventListener('message', messageListener); + setIsConnecting(false); console.log('Google OAuth popup closed'); // Refresh connections in case it succeeded fetchConnections(); @@ -390,6 +394,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); console.log('Google connection successful'); // Refresh connections fetchConnections(); @@ -398,6 +403,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); reject(new Error(event.data.error || 'Google connection failed')); } }; @@ -405,6 +411,7 @@ export function useConnections() { window.addEventListener('message', messageListener); }); } catch (error) { + setIsConnecting(false); console.error('Error creating Google connection:', error); throw error; } @@ -412,6 +419,8 @@ export function useConnections() { // Create ClickUp connection and open OAuth popup const createClickupConnectionAndAuth = async (): Promise => { + if (isConnecting) return; + setIsConnecting(true); try { const newConnection = await createConnection({ type: 'clickup', @@ -430,7 +439,7 @@ export function useConnections() { authUrl = `${apiBaseUrl}${authUrl}`; } - return new Promise((resolve, reject) => { + return await new Promise((resolve, reject) => { const popup = window.open( authUrl, 'clickup-connection', @@ -438,6 +447,7 @@ export function useConnections() { ); if (!popup) { + setIsConnecting(false); reject(new Error('Popup was blocked. Please allow popups and try again.')); return; } @@ -446,6 +456,7 @@ export function useConnections() { if (popup.closed) { clearInterval(checkClosed); window.removeEventListener('message', messageListener); + setIsConnecting(false); console.log('ClickUp OAuth popup closed'); fetchConnections(); resolve(); @@ -462,6 +473,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); console.log('ClickUp connection successful'); fetchConnections(); resolve(); @@ -469,6 +481,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); reject(new Error(event.data.error || 'ClickUp connection failed')); } }; @@ -476,6 +489,7 @@ export function useConnections() { window.addEventListener('message', messageListener); }); } catch (error) { + setIsConnecting(false); console.error('Error creating ClickUp connection:', error); throw error; } @@ -483,6 +497,8 @@ export function useConnections() { // Create Microsoft connection and open OAuth popup const createMicrosoftConnectionAndAuth = async (): Promise => { + if (isConnecting) return; + setIsConnecting(true); try { // Step 1: Create a Microsoft connection const newConnection = await createConnection({ @@ -504,7 +520,7 @@ export function useConnections() { authUrl = `${apiBaseUrl}${authUrl}`; } - return new Promise((resolve, reject) => { + return await new Promise((resolve, reject) => { const popup = window.open( authUrl, 'msft-connection', @@ -512,6 +528,7 @@ export function useConnections() { ); if (!popup) { + setIsConnecting(false); reject(new Error('Popup was blocked. Please allow popups and try again.')); return; } @@ -521,6 +538,7 @@ export function useConnections() { if (popup.closed) { clearInterval(checkClosed); window.removeEventListener('message', messageListener); + setIsConnecting(false); console.log('Microsoft OAuth popup closed'); // Refresh connections in case it succeeded fetchConnections(); @@ -540,6 +558,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); console.log('Microsoft connection successful'); // Refresh connections fetchConnections(); @@ -548,6 +567,7 @@ export function useConnections() { clearInterval(checkClosed); window.removeEventListener('message', messageListener); popup.close(); + setIsConnecting(false); reject(new Error(event.data.error || 'Microsoft connection failed')); } }; @@ -555,6 +575,7 @@ export function useConnections() { window.addEventListener('message', messageListener); }); } catch (error) { + setIsConnecting(false); console.error('Error creating Microsoft connection:', error); throw error; } diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts index 305c3d1..b2b59d4 100644 --- a/src/hooks/useFiles.ts +++ b/src/hooks/useFiles.ts @@ -15,6 +15,15 @@ import { type FolderInfo, } 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 export interface FileInfo { id: string; @@ -480,7 +489,12 @@ export function useFileOperations() { * - Removed workflowId from FileItem creation in interfaceComponentObjects.py * - 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); setUploadingFile(true); @@ -504,6 +518,9 @@ export function useFileOperations() { if (featureInstanceId) { formData.append('featureInstanceId', featureInstanceId); } + if (folderId) { + formData.append('folderId', folderId); + } // 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 => { setPreviewError(null); setPreviewingFiles(prev => new Set(prev).add(fileId)); - + try { - - // For PDF files, try JSON response first (API returns base64-encoded PDF) - if (mimeType === 'application/pdf') { - - 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; - + const response = await api.get(`/api/files/${fileId}/preview`, { + responseType: 'json', + }); + const data = response.data; - - // Check if response has base64-encoded PDF content - 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 }; - } + if (!data || typeof data !== 'object' || typeof data.content !== 'string' || !data.mimeType) { + throw new Error('Invalid preview response from server'); } - - // For image files, try JSON response first (API returns base64-encoded images) - if (mimeType?.startsWith('image/')) { - - 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; - + const { content, mimeType: responseMime, isText } = data as { + content: string; + mimeType: string; + isText?: boolean; + encoding?: string | null; + }; - - // Check if response has base64-encoded image content - 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)) { + let blob: Blob; + let textContent: string | null = null; - try { - const decodedString = atob(content); - - - // Check if it's JSON (nested structure) or direct image data - if (decodedString.startsWith('{')) { - // It's JSON, parse it - const nestedJson = JSON.parse(decodedString); - - - 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 }; + if (isText) { + textContent = content; + blob = new Blob([content], { type: responseMime }); + } else { + const binaryString = atob(content); + const bytes = new Uint8Array(binaryString.length); + for (let i = 0; i < binaryString.length; i++) { + bytes[i] = binaryString.charCodeAt(i); } + 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'; - - - // 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); + const previewUrl = window.URL.createObjectURL(blob); - } - } catch (decodeError) { - decodedContent = content; - } - - // Create a blob from the (possibly 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 }; - } 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 }; - } + return { + success: true, + previewUrl, + blob, + mimeType: responseMime, + textContent, + }; } catch (error: any) { - console.error(`❌ Preview failed for ${fileName}:`, error); - let errorMessage = error.message; - - if (error.response?.status === 404) { + console.error(`Preview failed for ${fileName}:`, error); + let errorMessage = error?.message ?? 'Unknown error'; + + if (error?.response?.status === 404) { 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}".`; - } else if (error.response?.status === 415) { + } else if (error?.response?.status === 415) { errorMessage = `File type "${fileName}" is not supported for preview.`; } - + setPreviewError(errorMessage); return { success: false, error: errorMessage }; } finally { diff --git a/src/pages/basedata/ConnectionsPage.tsx b/src/pages/basedata/ConnectionsPage.tsx index 8c368a0..a3218eb 100644 --- a/src/pages/basedata/ConnectionsPage.tsx +++ b/src/pages/basedata/ConnectionsPage.tsx @@ -15,10 +15,6 @@ import styles from '../admin/Admin.module.css'; 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 = () => { const { t } = useLanguage(); @@ -101,12 +97,15 @@ export const ConnectionsPage: React.FC = () => { // Handle edit submit const handleEditSubmit = async (data: Partial) => { if (!editingConnection) return; - // Note: updateConnection is handled through the hook try { - // Ensure authority is properly typed - filter and validate authority value const updateData: Partial = { ...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 === 'local' || @@ -116,7 +115,6 @@ export const ConnectionsPage: React.FC = () => { ) { updateData.authority = data.authority; } else { - // Remove invalid authority value 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 () => { + if (isConnecting) return; try { await createGoogleConnectionAndAuth(); refetch(); @@ -187,8 +187,8 @@ export const ConnectionsPage: React.FC = () => { } }; - // Handle create Microsoft connection const handleCreateMicrosoft = async () => { + if (isConnecting) return; try { await createMicrosoftConnectionAndAuth(); refetch(); @@ -197,9 +197,8 @@ export const ConnectionsPage: React.FC = () => { } }; - // Handle create ClickUp connection (UI kann per Flag abgeschaltet sein) const handleCreateClickup = async () => { - if (!isClickupConnectionUiEnabled) return; + if (isConnecting) return; try { await createClickupConnectionAndAuth(); refetch(); @@ -228,7 +227,12 @@ export const ConnectionsPage: React.FC = () => { // Form attributes for edit modal 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 || []) .filter(attr => !excludedFields.includes(attr.name)); }, [attributes]); @@ -253,9 +257,7 @@ export const ConnectionsPage: React.FC = () => {

{t('Verbindungen')}

- {isClickupConnectionUiEnabled - ? t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft, ClickUp)') - : t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft)')} + {t('Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft, ClickUp)')}

@@ -263,7 +265,7 @@ export const ConnectionsPage: React.FC = () => { className={styles.secondaryButton} onClick={handleAdminConsent} disabled={adminConsentPending} - title={t('Microsoft Admin-Zustimmung erteilt der')} + title={t('Microsoft Admin-Zustimmung für die gesamte Organisation erteilen')} > {t('Admin-Zustimmung')} @@ -290,17 +292,15 @@ export const ConnectionsPage: React.FC = () => { > Microsoft - {isClickupConnectionUiEnabled && ( - - )} + )}
@@ -336,9 +336,7 @@ export const ConnectionsPage: React.FC = () => { icon: , onClick: handleConnect, title: t('Verbinden'), - visible: (row: Connection) => - row.status !== 'active' && - (isClickupConnectionUiEnabled || row.authority !== 'clickup'), + visible: (row: Connection) => row.status !== 'active', loading: () => isConnecting, }, { diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx index e65da9e..af1638d 100644 --- a/src/pages/basedata/FilesPage.tsx +++ b/src/pages/basedata/FilesPage.tsx @@ -14,7 +14,7 @@ import { FormGeneratorTable } from '../../components/FormGenerator/FormGenerator import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm'; import FolderTree from '../../components/FolderTree/FolderTree'; 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 { usePrompt } from '../../hooks/usePrompt'; import styles from '../admin/Admin.module.css'; @@ -66,7 +66,6 @@ export const FilesPage: React.FC = () => { handleFileDeleteMultiple, handleFileUpload, handleFileUpdate, - handleFilePreview, handleInlineUpdate, deletingFiles, downloadingFiles, @@ -153,6 +152,29 @@ export const FilesPage: React.FC = () => { })); }, [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 ( +
+
+ {selectedFolderName + ? t('Der Ordner „{name}" ist leer.', { name: selectedFolderName }) + : t('Dieser Ordner ist leer.')} +
+
+ {t('Lade eine neue Datei hoch oder verschiebe bestehende Dateien hierher.')} +
+
+ ); + }, [selectedFolderId, selectedFolderName, t]); + // ── Columns ─────────────────────────────────────────────────────────── const columns = useMemo(() => { const hiddenColumns = ['id', 'fileHash', 'folderId']; @@ -278,13 +300,6 @@ export const FilesPage: React.FC = () => { 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 handleFileSelect = async (e: React.ChangeEvent) => { @@ -293,7 +308,7 @@ export const FilesPage: React.FC = () => { let successCount = 0; let errorCount = 0; 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 (fileInputRef.current) fileInputRef.current.value = ''; @@ -465,6 +480,15 @@ export const FilesPage: React.FC = () => { ({ highlighted: row.id === highlightedFileId ? 'true' : 'false' }) } 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 ? [{ type: 'edit' as const, onAction: handleEditClick, @@ -486,13 +510,6 @@ export const FilesPage: React.FC = () => { title: t('Herunterladen'), loading: (row: UserFile) => downloadingFiles.has(row.id), }, - { - id: 'preview', - icon: , - onClick: handlePreview, - title: t('Vorschau'), - loading: (row: UserFile) => previewingFiles.has(row.id), - }, ]} onDelete={handleDelete} onDeleteMultiple={handleDeleteMultiple} @@ -503,8 +520,9 @@ export const FilesPage: React.FC = () => { handleDelete: handleFileDelete, handleInlineUpdate, updateOptimistically: updateFileOptimistically, + previewingFiles, }} - emptyMessage={t('Keine Dateien gefunden')} + emptyMessage={emptyTableMessage} />
diff --git a/src/pages/basedata/PromptsPage.tsx b/src/pages/basedata/PromptsPage.tsx index c733f11..38ea58f 100644 --- a/src/pages/basedata/PromptsPage.tsx +++ b/src/pages/basedata/PromptsPage.tsx @@ -5,7 +5,7 @@ * 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 { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable'; import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm'; @@ -49,10 +49,22 @@ export const PromptsPage: React.FC = () => { const [showCreateModal, setShowCreateModal] = useState(false); const [editingPrompt, setEditingPrompt] = useState(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 useEffect(() => { - refetch(); - }, []); + _tableRefetch({ page: 1, pageSize: 25 }); + }, [_tableRefetch]); // Generate columns from attributes - exclude ID fields from display const columns = useMemo(() => { @@ -114,7 +126,7 @@ export const PromptsPage: React.FC = () => { }); if (result?.success) { setShowCreateModal(false); - refetch(); + _refreshAll(); } }; @@ -127,7 +139,7 @@ export const PromptsPage: React.FC = () => { }); if (result.success) { setEditingPrompt(null); - refetch(); + _refreshAll(); } }; @@ -135,7 +147,7 @@ export const PromptsPage: React.FC = () => { const handleDelete = async (prompt: Prompt) => { const success = await handlePromptDelete(prompt.id); if (success) { - refetch(); + _refreshAll(); } }; @@ -152,7 +164,7 @@ export const PromptsPage: React.FC = () => {
⚠️

{t('Fehler beim Laden der Prompts: {detail}', { detail: String(error) })}

-
@@ -170,7 +182,7 @@ export const PromptsPage: React.FC = () => {