From f0f63c013e9f50a91ef60f34c84b847fd355eb75 Mon Sep 17 00:00:00 2001 From: Thierry Keller Date: Thu, 14 Apr 2022 15:32:14 +0300 Subject: [PATCH] adding pdfVIewer --- package-lock.json | 519 +++++++++++++++++++ package.json | 2 + src/{pages/Clients => assets/pdf}/django.pdf | Bin src/pages/Clients/PDFviewer.js | 1 + src/pages/Clients/ViewPDF.js | 127 ++--- src/pages/Clients/pdfViewer2.js | 59 +++ src/pages/Documents/PDFviewer.js | 38 ++ src/pages/Documents/viewPDF.js | 120 ++++- src/pages/HomePage.js | 3 +- src/routes.js | 2 +- 10 files changed, 787 insertions(+), 84 deletions(-) rename src/{pages/Clients => assets/pdf}/django.pdf (100%) create mode 100644 src/pages/Clients/pdfViewer2.js create mode 100644 src/pages/Documents/PDFviewer.js diff --git a/package-lock.json b/package-lock.json index b33a844..ebb5945 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2339,6 +2339,270 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" }, + "@react-pdf/font": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.1.1.tgz", + "integrity": "sha512-4XwdD4S9HoiuhUQZvCGTFz+baYqowUcq7+HknRlMEk0HQOL3Rnnqe7Sxlv8ap208bHUsdsQFMjxlW8D0BS6C0w==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/fontkit": "^2.1.0", + "@react-pdf/types": "^2.0.8", + "cross-fetch": "^3.1.5", + "is-url": "^1.2.4" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/fontkit": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/fontkit/-/fontkit-2.1.0.tgz", + "integrity": "sha512-/t7nOtH0XAgN7kPJtVfXQL78YmfUanhPc0HEIVgS0YdMTAtZJT0aIQ2HoBWyyYmlsDlsWyGkb78Hf4b1y5QaPQ==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/unicode-properties": "^2.5.0", + "brotli": "^1.2.0", + "clone": "^1.0.4", + "deep-equal": "^1.0.0", + "dfa": "^1.2.0", + "restructure": "^0.5.3", + "tiny-inflate": "^1.0.2", + "unicode-trie": "^0.3.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/image": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.1.1.tgz", + "integrity": "sha512-Uh9N1HBU5QGP1QxuIhpVES8FAQsSy2/IGrCHoCCzUUuvbUKf+Mezl3+gvaS4fkWbENPpZ9q6u2C3yL5IqRirsw==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/png-js": "^2.1.0", + "cross-fetch": "^3.1.5" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/layout": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-2.1.1.tgz", + "integrity": "sha512-ddpXNRAU1JNHL+AUQEFO2RFolDrtqs/Z0Gb8fjicCcWinthpqkeLdNMWYA5bQuUIzuJXONAQDGd6JLomv2Wayg==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/image": "^2.1.1", + "@react-pdf/pdfkit": "^2.1.0", + "@react-pdf/primitives": "^2.0.2", + "@react-pdf/stylesheet": "^2.1.0", + "@react-pdf/textkit": "^2.1.0", + "@react-pdf/types": "^2.0.8", + "@react-pdf/yoga": "^2.0.4", + "cross-fetch": "^3.1.5", + "emoji-regex": "^8.0.0", + "queue": "^6.0.1", + "ramda": "^0.26.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + } + } + }, + "@react-pdf/pdfkit": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-2.1.0.tgz", + "integrity": "sha512-XS/mBgQadBEyz5b79L1rGOiPiX+9oZL8TlOV9PG9mGHS9VyrK7rieysay4azI/67a1nlRs2XyRETELPlqHYsHA==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/fontkit": "^2.1.0", + "@react-pdf/png-js": "^2.1.0", + "crypto-js": "^4.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/png-js": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-2.1.0.tgz", + "integrity": "sha512-S5T5qGOlDK6VUJBVGkltNcPFEOWJW5FAD5IWkp9ATYPehC7L1d0CwuFlkFDaHh9ySmm46fKRHfn4YNQguq9gmw==" + }, + "@react-pdf/primitives": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-2.0.2.tgz", + "integrity": "sha512-NkbOje/Sd/ziqfp9eYFc0ACeytmZB9MIrhx0j1rDT3gIhrjo19sS7R6Iap50gNgSphgx4Nh7GxWu/usBiuTmnw==" + }, + "@react-pdf/render": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-2.1.0.tgz", + "integrity": "sha512-OacYR/eY47OzuuBXr0TaIqdP2m8GWIMWVkzTVaSxB6ZEs0wFCv6Hw5LYmh1k617o1YbZkRRDJIyGUtTmZuw6Ng==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/primitives": "^2.0.2", + "@react-pdf/textkit": "^2.1.0", + "@react-pdf/types": "^2.0.8", + "abs-svg-path": "^0.1.1", + "color-string": "^1.5.3", + "normalize-svg-path": "^1.1.0", + "parse-svg-path": "^0.1.2", + "ramda": "^0.26.1", + "svg-arc-to-cubic-bezier": "^3.2.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/renderer": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-2.1.1.tgz", + "integrity": "sha512-W6Ma/4/zfj8KAJQkBeyHmzR3OuuMZFYZFrFtcfFXQNCZC3NDEasTNN0qYwcBAPkCyDAm+jhA/CKezhAPwnh3QQ==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/font": "^2.1.1", + "@react-pdf/layout": "^2.1.1", + "@react-pdf/pdfkit": "^2.1.0", + "@react-pdf/primitives": "^2.0.2", + "@react-pdf/render": "^2.1.0", + "@react-pdf/types": "^2.0.8", + "blob-stream": "^0.1.3", + "queue": "^6.0.1", + "ramda": "^0.26.1", + "react-reconciler": "^0.23.0", + "scheduler": "^0.17.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "scheduler": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", + "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, + "@react-pdf/stylesheet": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-2.1.0.tgz", + "integrity": "sha512-F9v++z1QhlnCONkwdUJm1C/FNM9WkTiTRp+OCe6za2iZvrs9sGhSnTHFMOb5HOZYHsAXx+pLgHqE4WP+60SunQ==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/types": "^2.0.8", + "color-string": "^1.5.3", + "hsl-to-hex": "^1.0.0", + "media-engine": "^1.0.3", + "postcss-value-parser": "^4.1.0", + "ramda": "^0.26.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/textkit": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-2.1.0.tgz", + "integrity": "sha512-caFluGk2aHgPjeGxqcYvH3rake/01K5zQfjQ7RVtjye5ZvlSgEFSuorRynwFPs92Vw7tA9TjvVnNc3GDsWghgQ==", + "requires": { + "@babel/runtime": "^7.16.4", + "@react-pdf/unicode-properties": "^2.5.0", + "hyphen": "^1.6.4", + "ramda": "^0.26.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@react-pdf/types": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.0.8.tgz", + "integrity": "sha512-/LngaZV8Z7+XEvbT2IVPbSxmU7pPYqCgdrrAkjGtdHsuGHRJegJMTBUEOellOY5Pqaqy3yvNTz/kZ9URrv+McQ==" + }, + "@react-pdf/unicode-properties": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@react-pdf/unicode-properties/-/unicode-properties-2.5.0.tgz", + "integrity": "sha512-L311rb7e2LInUcGpujxBjNQSU8C+4DHk83j7Q93mJwmsapCzwQmas2LxAJElGGQie90db21/X8sUniSLjrlceA==", + "requires": { + "unicode-trie": "^0.3.0" + } + }, + "@react-pdf/yoga": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@react-pdf/yoga/-/yoga-2.0.4.tgz", + "integrity": "sha512-bsU48GQ8E4LEQ38AtyQPQZ9oEATMpolGPFewgI4sBXOZBNH2miLtoBTbyB/xEOMuBcyqtvJQwSNg2czSZjrlyQ==", + "requires": { + "@types/yoga-layout": "^1.9.3" + } + }, "@restart/context": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", @@ -3067,6 +3331,11 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz", "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==" }, + "@types/yoga-layout": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/@types/yoga-layout/-/yoga-layout-1.9.4.tgz", + "integrity": "sha512-RRHc1+8Hc5mf/2lZKnom6kCnqcNS07s8keahniWTOva0KELF6RgDJmaEcvGEKUUJgN4UgessmEsWuidaOycIOw==" + }, "@typescript-eslint/eslint-plugin": { "version": "2.34.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz", @@ -3315,6 +3584,11 @@ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" }, + "abs-svg-path": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz", + "integrity": "sha1-32Acjo0roQ1KdtYl4japo5wnI78=" + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -3648,6 +3922,58 @@ "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" }, + "ast-transform": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz", + "integrity": "sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=", + "requires": { + "escodegen": "~1.2.0", + "esprima": "~1.0.4", + "through": "~2.3.4" + }, + "dependencies": { + "escodegen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz", + "integrity": "sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=", + "requires": { + "esprima": "~1.0.4", + "estraverse": "~1.5.0", + "esutils": "~1.0.0", + "source-map": "~0.1.30" + } + }, + "esprima": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz", + "integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0=" + }, + "estraverse": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz", + "integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E=" + }, + "esutils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz", + "integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA=" + }, + "source-map": { + "version": "0.1.43", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", + "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=", + "optional": true, + "requires": { + "amdefine": ">=0.0.4" + } + } + } + }, + "ast-types": { + "version": "0.7.8", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz", + "integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk=" + }, "ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", @@ -4309,6 +4635,19 @@ "file-uri-to-path": "1.0.0" } }, + "blob": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz", + "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=" + }, + "blob-stream": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/blob-stream/-/blob-stream-0.1.3.tgz", + "integrity": "sha1-mNZor2mW4PMu9mbQbiFczH13aGw=", + "requires": { + "blob": "0.0.4" + } + }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -4438,6 +4777,14 @@ "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" }, + "brotli": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.2.tgz", + "integrity": "sha1-UlqcrU/LqWR119OI9q7LE+7VL0Y=", + "requires": { + "base64-js": "^1.1.2" + } + }, "browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -4492,6 +4839,16 @@ "safe-buffer": "^5.1.2" } }, + "browserify-optional": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz", + "integrity": "sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=", + "requires": { + "ast-transform": "0.0.0", + "ast-types": "^0.7.0", + "browser-resolve": "^1.8.1" + } + }, "browserify-rsa": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz", @@ -5083,6 +5440,11 @@ } } }, + "clone": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", + "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=" + }, "clone-deep": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", @@ -5495,6 +5857,14 @@ "sha.js": "^2.4.8" } }, + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "requires": { + "node-fetch": "2.6.7" + } + }, "cross-spawn": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", @@ -5522,6 +5892,11 @@ "randomfill": "^1.0.3" } }, + "crypto-js": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", + "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" + }, "css": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", @@ -6037,6 +6412,11 @@ } } }, + "dfa": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz", + "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==" + }, "diff-sequences": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz", @@ -8139,6 +8519,19 @@ "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz", "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=" }, + "hsl-to-hex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz", + "integrity": "sha1-xYyCbcbS8eCl/x2lp+y/A/qsE1I=", + "requires": { + "hsl-to-rgb-for-reals": "^1.1.0" + } + }, + "hsl-to-rgb-for-reals": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz", + "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==" + }, "hsla-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz", @@ -8270,6 +8663,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphen": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.6.4.tgz", + "integrity": "sha512-nWwvXceFMAFIjkiRzqZMZSOa1LVngieSolnYIVKWSwmDwMSmdutjzqImmdbxe2eUCfX693fgrCgtPjbllqx1lA==" + }, "hyphenate-style-name": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", @@ -8787,6 +9185,11 @@ "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" }, + "is-url": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz", + "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==" + }, "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", @@ -11571,6 +11974,11 @@ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==" }, + "media-engine": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz", + "integrity": "sha1-vjGI9s0kPqKkCASjXeWlsDL1ja0=" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -12013,6 +12421,35 @@ "tslib": "^2.0.3" } }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "requires": { + "whatwg-url": "^5.0.0" + }, + "dependencies": { + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -12198,6 +12635,14 @@ "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" }, + "normalize-svg-path": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz", + "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==", + "requires": { + "svg-arc-to-cubic-bezier": "^3.0.0" + } + }, "normalize-url": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", @@ -12641,6 +13086,11 @@ "json-parse-better-errors": "^1.0.1" } }, + "parse-svg-path": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz", + "integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes=" + }, "parse5": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", @@ -14068,6 +14518,14 @@ "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==" }, + "queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "requires": { + "inherits": "~2.0.3" + } + }, "raf": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", @@ -14081,6 +14539,11 @@ "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" }, + "ramda": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz", + "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -14576,6 +15039,28 @@ } } }, + "react-reconciler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.23.0.tgz", + "integrity": "sha512-vV0KlLimP9a/NuRcM6GRVakkmT6MKSzhfo8K72fjHMnlXMOhz9GlPe+/tCp5CWBkg+lsMUt/CR1nypJBTPfwuw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.17.0" + }, + "dependencies": { + "scheduler": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", + "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, "react-redux": { "version": "7.2.8", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz", @@ -15250,6 +15735,14 @@ "signal-exit": "^3.0.2" } }, + "restructure": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/restructure/-/restructure-0.5.4.tgz", + "integrity": "sha1-9U591WNZD7NP1r9Vh2EJrsyyjeg=", + "requires": { + "browserify-optional": "^1.0.0" + } + }, "ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", @@ -16474,6 +16967,11 @@ "has-flag": "^4.0.0" } }, + "svg-arc-to-cubic-bezier": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz", + "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==" + }, "svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", @@ -16865,6 +17363,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-inflate": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", + "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" + }, "tiny-invariant": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", @@ -17110,6 +17613,22 @@ "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz", "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==" }, + "unicode-trie": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-0.3.1.tgz", + "integrity": "sha1-1nHd3YkQGgi6w3tqUWEBBgIFIIU=", + "requires": { + "pako": "^0.2.5", + "tiny-inflate": "^1.0.0" + }, + "dependencies": { + "pako": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz", + "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=" + } + } + }, "union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", diff --git a/package.json b/package.json index e545498..ea257bc 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@mui/styles": "^5.6.0", "@mui/x-data-grid": "^5.8.0", "@pdftron/webviewer": "^8.4.1", + "@react-pdf/renderer": "^2.1.1", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", @@ -43,6 +44,7 @@ "bootstrap": "5.0.0-beta1", "chartist": "^0.11.4", "chartist-plugin-tooltips-updated": "^0.1.4", + "lodash": "^4.17.21", "material-table": "^2.0.3", "moment-timezone": "^0.5.31", "node-sass": "^4.14.1", diff --git a/src/pages/Clients/django.pdf b/src/assets/pdf/django.pdf similarity index 100% rename from src/pages/Clients/django.pdf rename to src/assets/pdf/django.pdf diff --git a/src/pages/Clients/PDFviewer.js b/src/pages/Clients/PDFviewer.js index ff73362..aa5cf16 100644 --- a/src/pages/Clients/PDFviewer.js +++ b/src/pages/Clients/PDFviewer.js @@ -6,6 +6,7 @@ import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesber import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { TableClient } from "../../components/TableClient"; import ViewPDF from "./ViewPDF"; +// import pdfViewer2 from "./pdfViewer2"; const PDFviewer = () => { return( diff --git a/src/pages/Clients/ViewPDF.js b/src/pages/Clients/ViewPDF.js index fa1aa59..5eb11c8 100644 --- a/src/pages/Clients/ViewPDF.js +++ b/src/pages/Clients/ViewPDF.js @@ -1,74 +1,81 @@ import React, { useState } from 'react'; import { Document, Page,pdfjs } from 'react-pdf'; -import pdf from "./django.pdf"; +import pdf from "./../../assets/pdf/django.pdf"; import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesberg/react-bootstrap"; -const url = pdf + +const styles = { + page : { + width : 100 + } +}; + export default function ViewPDF() { -pdfjs.GlobalWorkerOptions.workerSrc = -`//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; -const [numPages, setNumPages] = useState(null); -const [pageNumber, setPageNumber] = useState(1); + pdfjs.GlobalWorkerOptions.workerSrc = + `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; + const [numPages, setNumPages] = useState(null); + const [pageNumber, setPageNumber] = useState(1); -/*To Prevent right click on screen*/ -document.addEventListener("contextmenu", (event) => { - event.preventDefault(); -}); - -/*When document gets loaded successfully*/ -function onDocumentLoadSuccess({ numPages }) { - setNumPages(numPages); - setPageNumber(1); -} + /*To Prevent right click on screen*/ + document.addEventListener("contextmenu", (event) => { + event.preventDefault(); + }); + + /*When document gets loaded successfully*/ + function onDocumentLoadSuccess({ numPages }) { + setNumPages(numPages); + setPageNumber(1); + } -function changePage(offset) { - setPageNumber(prevPageNumber => prevPageNumber + offset); -} + function changePage(offset) { + setPageNumber(prevPageNumber => prevPageNumber + offset); + } -function previousPage() { - changePage(-1); -} + function previousPage() { + changePage(-1); + } -function nextPage() { - changePage(1); -} + function nextPage() { + changePage(1); + } -return ( - <> - -
- - - -
+ return ( + <> + +
+ + + +
- - -
- Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} -
-
- - -
- - - - -); + + +
+ Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} +
+
+ + +
+ + + + + ); } diff --git a/src/pages/Clients/pdfViewer2.js b/src/pages/Clients/pdfViewer2.js new file mode 100644 index 0000000..abea7ab --- /dev/null +++ b/src/pages/Clients/pdfViewer2.js @@ -0,0 +1,59 @@ +import React, { PureComponent } from "react"; +// import { Document, Page } from "react-pdf"; +import throttle from "lodash.throttle"; +import pdf from "./django.pdf"; +import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer'; + +const styles = StyleSheet.create({ + page : { + width : 100 + } +}); + +class pdfViewer2 extends PureComponent { + constructor(props) { + super(props) + this.state = {width: null} + } + + componentDidMount () { + this.setDivSize() + window.addEventListener("resize", throttle(this.setDivSize, 500)) + } + + componentWillUnmount () { + window.removeEventListener("resize", throttle(this.setDivSize, 500)) + } + + setDivSize = () => { + this.setState({width: this.pdfWrapper.getBoundingClientRect().width}) + } + + render() { + return ( +
+
+
this.pdfWrapper = ref}> + +
+
+ ) + } +} + +class PdfComponent extends PureComponent { + render() { + return ( +
+ + + +
+ ) + } +} + +export default pdfViewer2; \ No newline at end of file diff --git a/src/pages/Documents/PDFviewer.js b/src/pages/Documents/PDFviewer.js new file mode 100644 index 0000000..1717137 --- /dev/null +++ b/src/pages/Documents/PDFviewer.js @@ -0,0 +1,38 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faHome, faSearch } from "@fortawesome/free-solid-svg-icons"; +import { Col, Row, Form, Card, Button, Breadcrumb, InputGroup } from "@themesberg/react-bootstrap"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; +import { TableClient } from "../../components/TableClient"; +import ViewPDF from "./viewPDF"; + + +const PDFviewer = () => { + return( + <> +
+
+ + + + + + + Document + pdfViewer + +

Documents

+
+
+ + + + + + + + ); +}; + +export default PDFviewer; diff --git a/src/pages/Documents/viewPDF.js b/src/pages/Documents/viewPDF.js index 7d51ae3..50592d7 100644 --- a/src/pages/Documents/viewPDF.js +++ b/src/pages/Documents/viewPDF.js @@ -1,3 +1,81 @@ +import React, { useState } from 'react'; +import { Document, Page,pdfjs } from 'react-pdf'; +import pdf from "./../../assets/pdf/django.pdf"; +import { Col, Row, Form, Card, Button } from "@themesberg/react-bootstrap"; + + + +export default function ViewPDF() { + + pdfjs.GlobalWorkerOptions.workerSrc = + `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; + const [numPages, setNumPages] = useState(null); + const [pageNumber, setPageNumber] = useState(1); + + /*To Prevent right click on screen*/ + document.addEventListener("contextmenu", (event) => { + event.preventDefault(); + }); + + /*When document gets loaded successfully*/ + function onDocumentLoadSuccess({ numPages }) { + setNumPages(numPages); + setPageNumber(1); + } + + function changePage(offset) { + setPageNumber(prevPageNumber => prevPageNumber + offset); + } + + function previousPage() { + changePage(-1); + } + + function nextPage() { + changePage(1); + } + + return ( + <> + +
+ + + +
+ + + +
+ Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} +
+
+ + +
+ + + + + ); +} + + + + // import React, { Component } from 'react'; // import logger from 'logging-library'; // import FileViewer from 'react-file-viewer'; @@ -21,30 +99,30 @@ // logger.logError(e, 'error in file-viewer'); // } // } -import React, { useState } from 'react'; -import { Document, Page } from 'react-pdf'; +// import React, { useState } from 'react'; +// import { Document, Page } from 'react-pdf'; -function ViewPDF() { - const [numPages, setNumPages] = useState(null); - const [pageNumber, setPageNumber] = useState(1); +// function ViewPDF() { +// const [numPages, setNumPages] = useState(null); +// const [pageNumber, setPageNumber] = useState(1); - function onDocumentLoadSuccess({ numPages }) { - setNumPages(numPages); - } +// function onDocumentLoadSuccess({ numPages }) { +// setNumPages(numPages); +// } - return ( -
- - - -

Page {pageNumber} of {numPages}

-
- ); -} -export default ViewPDF; +// return ( +//
+// +// +// +//

Page {pageNumber} of {numPages}

+//
+// ); +// } +// export default ViewPDF; // import { useEffect, useRef } from 'react'; // import WebViewer from '@pdftron/webviewer' diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 47cb05e..bd58f4c 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -57,7 +57,6 @@ import AddClient from "./Clients/AddClient"; import UpdateClient from "./Clients/UpdateClient"; import HistoryClient from "./Clients/HistoryClient"; import ViewClient from "./Clients/ViewClient"; -import PDFviewer from "./Clients/PDFviewer"; import Documents from "./Documents/Documents"; import AddDocument from "./Documents/AddDocument"; @@ -174,7 +173,7 @@ export default () => ( - + {/* */} diff --git a/src/routes.js b/src/routes.js index c62fd03..910d141 100644 --- a/src/routes.js +++ b/src/routes.js @@ -25,13 +25,13 @@ export const Routes = { UpdateClient: { path: "/client/update" }, ViewClient: { path: "/client/detail" }, HistoryClient: { path: "/client/history" }, - PDFviewer: {path: "/client/viewPDF" }, //Document Document: { path: "/document" }, AddDocument: { path: "/document/add" }, UpdateDocument: { path: "/document/update" }, HistoryDocument: { path: "/document/history" }, + ViewPDF : {path: "/document/viewpdf"}, //Project Project: { path: "/projet" },