From c1933dccfa024e9cbb7299759cb715cdb6338a6b Mon Sep 17 00:00:00 2001 From: louai98 Date: Mon, 31 Jul 2023 09:59:28 +0200 Subject: [PATCH] Updated version --- package-lock.json | 28 ++++++- package.json | 4 +- src/App.js | 70 ++++++++++++++--- src/App.module.css | 9 +++ src/Components/Layout/Results/Results.js | 2 +- src/Components/PDFGenerator/PDFGenerator.js | 76 ++++++------------- .../{PDFWorker.js => pdf.worker.js} | 0 7 files changed, 124 insertions(+), 65 deletions(-) create mode 100644 src/App.module.css rename src/Components/PDFGenerator/{PDFWorker.js => pdf.worker.js} (100%) diff --git a/package-lock.json b/package-lock.json index f77283b..0206641 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "d3": "^7.8.4", "d3-cloud": "^1.2.5", "file-saver": "^2.0.5", + "js-file-download": "^0.4.12", "react": "^18.2.0", "react-bootstrap": "^2.7.4", "react-d3-cloud": "^1.0.6", @@ -29,7 +30,8 @@ "react-pdf": "^6.2.2", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "worker-loader": "^3.0.8" } }, "node_modules/@adobe/css-tools": { @@ -12904,6 +12906,11 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-file-download": { + "version": "0.4.12", + "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz", + "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==" + }, "node_modules/js-sdsl": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz", @@ -19040,6 +19047,25 @@ "workbox-core": "6.5.4" } }, + "node_modules/worker-loader": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-3.0.8.tgz", + "integrity": "sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==", + "dependencies": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", diff --git a/package.json b/package.json index 6c97038..e4586b2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "d3": "^7.8.4", "d3-cloud": "^1.2.5", "file-saver": "^2.0.5", + "js-file-download": "^0.4.12", "react": "^18.2.0", "react-bootstrap": "^2.7.4", "react-d3-cloud": "^1.0.6", @@ -24,7 +25,8 @@ "react-pdf": "^6.2.2", "react-scripts": "^5.0.1", "react-spinners": "^0.13.8", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "worker-loader": "^3.0.8" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index c9947a2..66a176f 100644 --- a/src/App.js +++ b/src/App.js @@ -6,13 +6,17 @@ import Filter from "./Components/Layout/Filter/Filter"; import ComplainceFilter from "./Components/Layout/Filter/ComplainceFilter"; import Results from "./Components/Layout/Results/Results"; import AppliedFilters from "./Components/Layout/AppliedFilters/AppliedFilters"; -import IddrsImg from "./Static/Imgs/IDDRS.png" +import IddrsImg from "./Static/Imgs/IDDRS.png"; import axios from "axios"; import FeaturedQuestions from "./Components/Layout/FeaturedQuestions/FeaturedQuestions"; import WordCloud_ from "./Components/Layout/WordCloud_/WordCloud_"; import Stack from "react-bootstrap/esm/Stack"; import Container from "react-bootstrap/esm/Container"; -import Image from 'react-bootstrap/Image'; +import Image from "react-bootstrap/Image"; +import Button from "react-bootstrap/esm/Button"; +import { saveAs } from 'file-saver'; +import ClipLoader from "react-spinners/ClipLoader"; +import Classes from "./App.module.css"; function App() { const [data, setData] = useState(""); @@ -22,6 +26,7 @@ function App() { const [filteredResults, setFilteredResults] = useState([]); const [filtersComplaince, setFiltersComplaince] = useState([]); const [filtersStandards, setFiltersStandards] = useState([]); + const [loading, setLoading] = useState(false); // the useEffect hook is used to apply filters whenever the results, // filtersStandards, or filtersComplaince values change @@ -34,31 +39,40 @@ function App() { //################################################################################ const handleSubmit = (event) => { event.preventDefault(); + setLoading(true); // Send the input value to Django axios .post("http://localhost:8000/client_api/get_input/", { data }) .then((response) => { - setPhrase(data['phrase']) + setPhrase(data["phrase"]); setResults(response.data.results); - setShowResults(true) + setShowResults(true); setFilteredResults(response.data.results); + setLoading(false); }) .catch((error) => { console.log(error); + setLoading(false); }); }; const handleSubmit_ = (value) => { + setLoading(true); // Send the input value to Django axios - .post("http://localhost:8000/client_api/get_input/", { data: { phrase: value } }) + .post("http://localhost:8000/client_api/get_input/", { + data: { phrase: value }, + }) .then((response) => { + setPhrase(value); setShowResults(true); setResults(response.data.results); setFilteredResults(response.data.results); + setLoading(false); }) .catch((error) => { console.log(error); + setLoading(false); }); }; @@ -112,6 +126,28 @@ function App() { }); }; + //################################################################################# + // function to export the results as a pdf file + const handleExportPDF = async () => { + setLoading(true); + try { + const response = await axios.post("http://localhost:8000/client_api/exportPDF/", { + params: { + filteredResults: filteredResults, // Replace with the actual filtered results data + phrase: phrase, // Replace with the actual phrase data + }, + }); + + // The response will contain the PDF file data, and you can use it as needed (e.g., to display or download the PDF) + const blob = new Blob([response.data], { type: 'application/pdf' }); + saveAs(blob, 'output.pdf'); + setLoading(false); + } catch (error) { + console.error('Error exporting PDF:', error); + setLoading(false); + } + }; + return (
@@ -122,20 +158,36 @@ function App() { )} - {filtersStandards.length > 0 && } - + {filtersStandards.length > 0 && ( + + )} + {showResults && ( + + )} {showResults && ( )} - + + + {loading && ( +
+ +
+ )}
); diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..564beab --- /dev/null +++ b/src/App.module.css @@ -0,0 +1,9 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */ + z-index: 9999; + } \ No newline at end of file diff --git a/src/Components/Layout/Results/Results.js b/src/Components/Layout/Results/Results.js index 6bbe59d..458ff9f 100644 --- a/src/Components/Layout/Results/Results.js +++ b/src/Components/Layout/Results/Results.js @@ -4,7 +4,7 @@ import Stack from "react-bootstrap/Stack"; import ResultsItem from "./ResultsItem"; import ResultModal from "../../UI/ResultModal/ResultModal"; import ResultsPagination from "../../UI/ResultsPagination/ResultsPagination"; -//import PDFGenerator from "../../PDFGenerator/PDFGenerator"; +import PDFGenerator from "../../PDFGenerator/PDFGenerator"; const Results = (props) => { const [showModal, setShowModal] = useState(false); diff --git a/src/Components/PDFGenerator/PDFGenerator.js b/src/Components/PDFGenerator/PDFGenerator.js index 0942091..6df5d86 100644 --- a/src/Components/PDFGenerator/PDFGenerator.js +++ b/src/Components/PDFGenerator/PDFGenerator.js @@ -7,13 +7,11 @@ import { View, StyleSheet, Font, - pdf,createWorker + pdf, } from "@react-pdf/renderer"; import { saveAs } from "file-saver"; -import { css } from "@emotion/react"; -import ClipLoader from "react-spinners/ClipLoader"; -//import { createWorker } from "@react-pdf-viewer/core"; // Import the createWorker function +// Register font Font.register({ family: "Times-Roman" }); const styles = StyleSheet.create({ @@ -38,48 +36,32 @@ const PDFGenerator = (props) => { setIsLoading(true); try { - const worker = createWorker(); // Create a new web worker - - await worker.load(); // Load the worker - await worker.setFont("path/to/font/Times-Roman.ttf"); // Set the font path - - worker.onRenderError(() => { - console.error("Error generating PDF"); - setIsLoading(false); - }); - - worker.onRenderProgress((percent) => { - console.log(`PDF rendering progress: ${percent}%`); - }); + const views = props.results.map((result, index) => ( + + + Level {result.LevelName} + + + IDDRS - {result.Module} + + {result.Heading1} + {result.Heading2} + {result.Heading3} + {result.Heading4} + {result.Paragraph} + {result.PageNum} + + )); const pdfContent = ( - - {props.results.map((result, index) => ( - - - Level {result.LevelName} - - - IDDRS - {result.Module} - - {result.Heading1} - {result.Heading2} - {result.Heading3} - {result.Heading4} - {result.Paragraph} - {result.PageNum} - - ))} - + {views} ); - const result = await worker.renderToString(pdfContent); // Render the PDF content using the web worker - - const pdfBlob = new Blob([result], { type: "application/pdf" }); + const pdfBlob = await pdf(pdfContent).toBlob(); saveAs(pdfBlob, "IDDRS.pdf"); } catch (error) { console.error("Error generating PDF:", error); @@ -91,22 +73,10 @@ const PDFGenerator = (props) => { return (
-
+ ); }; + export default PDFGenerator; \ No newline at end of file diff --git a/src/Components/PDFGenerator/PDFWorker.js b/src/Components/PDFGenerator/pdf.worker.js similarity index 100% rename from src/Components/PDFGenerator/PDFWorker.js rename to src/Components/PDFGenerator/pdf.worker.js