diff --git a/.env b/.env index 5ec94fc1..fa49b5a9 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -REACT_APP_ACTIVATE_USING_JSON=true \ No newline at end of file +REACT_APP_ACTIVATE_USING_JSON="false" + diff --git a/public/answer.json b/public/answer.json new file mode 100644 index 00000000..ba24ac80 --- /dev/null +++ b/public/answer.json @@ -0,0 +1,44 @@ +{ + "company_name": "a", + "company_address": "a", + "company_website": "a", + "company_phone_number": "jdnfsjf df jodkf jkds fksd jflksd kfln sdkjf nsklddf lk sdlkfn sdlkfn jksdfknslkf nsdlk fksdn fksd fl jsdlkf sdlkfn sdn fsd fjsd kf sdklfn sdfnklsdfnlsd flknd kf sdkfn dlkfn sdlkfn sdlkfn lksdfjkds flksd fklsd fklsd lkfn sdklfn sdklf", + "manufacturer_name": "a", + "manufacturer_address": "a", + "manufacturer_website": "a", + "manufacturer_phone_number": "aaansmansmnas", + "fertiliser_name": "mznda sals,am skam sam slma sl;m a,s al ms;la msl;a mslam slkndnsdjns d sdnsn djsndjs", + "fertiliser_registration_number": "", + "fertiliser_lot_number": "", + "fertiliser_npk": "", + "fertiliser_precautionary_fr": "", + "fertiliser_precautionary_en": "", + "fertiliser_instructions_fr": "", + "fertiliser_instructions_en": "", + "fertiliser_ingredients_fr": "", + "fertiliser_ingredients_en": "", + "fertiliser_specifications_fr": "", + "fertiliser_specifications_en": "", + "fertiliser_cautions_fr": "", + "fertiliser_cautions_en": "", + "fertiliser_recommendation_fr": "", + "fertiliser_recommendation_en": "", + "fertiliser_first_aid_fr": "", + "fertiliser_first_aid_en": "", + "fertiliser_warranty_fr": "", + "fertiliser_warranty_en": "", + "fertiliser_danger_fr": "", + "fertiliser_danger_en": "", + "fertiliser_guaranteed_analysis": "", + "nutrient_in_guaranteed_analysis": "", + "percentage_in_guaranteed_analysis": "", + "fertiliser_weight": "", + "fertiliser_density": "", + "fertiliser_volume": "", + "fertiliser_label_all_other_text_fr": "", + "all_other_text_fr_1": "", + "all_other_text_fr_2": "", + "fertiliser_label_all_other_text_en": "", + "all_other_text_en_1": "", + "all_other_text_en_2": "" + } diff --git a/src/Components/Modal/Modal.css b/src/Components/Modal/Modal.css index 81a6931d..ccfdbaa9 100644 --- a/src/Components/Modal/Modal.css +++ b/src/Components/Modal/Modal.css @@ -42,7 +42,7 @@ /* Styles du contenu de la carte */ .card-content { - height: 300px; + height: 306px; /* 306 because the scrollbar of the card when text area is show appears */ overflow-y: auto; } @@ -55,14 +55,27 @@ height: 100%; resize: none; white-space: wrap; /* Enable automatic line wrapping */ + font-family: Arial, sans-serif, Bold; /* Specify a fallback font */ + font-size: 20px; + font-weight: 400; /* Normal weight */ + color: #000000; /* Dark gray */ + text-decoration: none; + } /* Styles du textarea de la carte */ .card-content textarea { width: 100%; - height: 100%; + height:100%; resize: none; font-size: 17px; /* Set base font size for card content */ + max-height: fit-content; + font-family: Arial, sans-serif, Bold; /* Specify a fallback font */ + font-size: 20px; + font-weight: 400; /* Normal weight */ + color: #000000; /* Dark gray */ + text-decoration: none; + overflow-y:visible; } /* Styles du pied de page de la carte */ @@ -73,8 +86,24 @@ /* Styles du bouton modifier/enregistrer */ .card-footer button { - padding: 5px 10px; + width: 150px; + padding: 10px 10px; border: 1px solid #ccc; - border-radius: 3px; + border-radius: 10px; cursor: pointer; } + +.card ::-webkit-scrollbar { + background: transparent; + height: 8px; + width: 8px; +} +.card ::-webkit-scrollbar-thumb { + border-radius: 0.25rem; + background: rgb(118, 118, 118); +} +.card ::-webkit-scrollbar-track { + margin-top: 3px; + padding-right: 10px; + background: transparent; +} diff --git a/src/Pages/FormPage/FormPage.css b/src/Pages/FormPage/FormPage.css index d52a34e6..f27cdd4b 100644 --- a/src/Pages/FormPage/FormPage.css +++ b/src/Pages/FormPage/FormPage.css @@ -40,11 +40,23 @@ padding-bottom: 60px; } +.data-container h1 { + text-align: left; + margin-left: 20px; +} +.data-container label{ + font-family: Arial, sans-serif, Bold; ; + color: #000000; + font-size: 20px; +} + + .textbox-container { display: flex; /* Enable flexbox layout */ - justify-content: center; /* Center horizontally within the container */ + justify-content: left; /* Center horizontally within the container */ align-items: center; /* Center vertically within the container */ width: 100%; /* Make the container take up the full width */ + margin-left: 20px; } .underlined { @@ -53,28 +65,42 @@ /* Text box styles */ textarea { - padding: 10px; border: 1px solid #ccc; + border-radius: 10px; box-sizing: border-box; - width: 300px; /* Adjust width as needed */ - height: auto; /* Adjust height as needed */ + width: 300px; + height: auto; + min-height: 40px; + max-height: 97px; resize: none; + background-color: rgb(220, 219, 219); + overflow-y: hidden; + padding-top: 5px; + padding-left: 5px; + padding-right: 3px; + padding-bottom: 10px; + /* Text style properties */ + font-family: Arial, sans-serif, Bold; /* Specify a fallback font */ + font-size: 20px; + font-weight: 400; /* Normal weight */ + color: #000000; /* Dark gray */ + text-decoration: none; } .open-icon { position: relative; - top: 25px; - right: 40px; + top: 35px; + right: 37px; margin: -5%; - width: 10%; + width: 12%; height: auto; } .data-section { display: flex; flex-direction: column; - justify-content: center; - align-items: center; + justify-content: left; + align-items: left; gap: 10px; } diff --git a/src/Pages/FormPage/FormPage.tsx b/src/Pages/FormPage/FormPage.tsx index cd18da58..021b8fb7 100644 --- a/src/Pages/FormPage/FormPage.tsx +++ b/src/Pages/FormPage/FormPage.tsx @@ -177,10 +177,18 @@ const FormPage = () => { ]), ); + const resizeTextarea = (textarea: HTMLTextAreaElement | null) => { + if (textarea) { + textarea.style.height = "auto"; + textarea.style.height = textarea.scrollHeight + "px"; + } + }; + const modals: { label: string; ref: React.MutableRefObject; }[] = []; + const textareas: { label: string; ref: React.MutableRefObject; @@ -243,9 +251,14 @@ const FormPage = () => { if (shown_lines > current.rows && current.rows < 3) { current.rows = Math.min(shown_lines, 3); } + resizeTextarea(current); inputInfo.value = event.target.value; setData(data.copy()); }} + onInput={(event: React.FormEvent) => { + const current = event.target as HTMLTextAreaElement; + resizeTextarea(current); // Ajoutez cet appel ici + }} className="text-box" rows={1} /> @@ -360,62 +373,100 @@ const FormPage = () => { }; useEffect(() => { - const tmpUrls: { url: string; title: string }[] = []; - files.forEach((file) => { - const reader = new FileReader(); - reader.onload = (e) => { - tmpUrls.push({ - url: e!.target!.result as string, - title: file.name, - }); - }; - reader.onloadend = () => setUrls(tmpUrls); - reader.readAsDataURL(file); - }); + console.log(process.env); + if (process.env.REACT_APP_ACTIVATE_USING_JSON == "true") { + fetch("/answer.json").then((res) => + res.json().then((response) => { + data.sections.forEach((section) => { + section.inputs.forEach((input) => { + input.value = + typeof response[section.label + "_" + input.label] == "string" + ? response[section.label + "_" + input.label] + : ""; + }); + }); + setData(data.copy()); + setLoading(false); + console.log("just before update"); + document.querySelectorAll("textarea").forEach((elem) => { + const nativeTAValueSetter = Object.getOwnPropertyDescriptor( + window.HTMLTextAreaElement.prototype, + "value", + )!.set; + const event = new Event("change", { bubbles: true }); + nativeTAValueSetter!.call(elem, elem.value + " "); + elem.dispatchEvent(event); + nativeTAValueSetter!.call(elem, elem.value.slice(0, -1)); + elem.dispatchEvent(event); + }); + }), + ); + } else { + const tmpUrls: { url: string; title: string }[] = []; + files.forEach((file) => { + const reader = new FileReader(); + reader.onload = (e) => { + tmpUrls.push({ + url: e!.target!.result as string, + title: file.name, + }); + }; + reader.onloadend = () => setUrls(tmpUrls); + reader.readAsDataURL(file); + }); - if (!uploadStarted) { - startUpload(true); - upload_all() - .then(() => { - poll_analyze() - .then((response) => { - data.sections.forEach((section) => { - section.inputs.forEach((input) => { - input.value = - typeof response[section.label + "_" + input.label] == - "string" - ? response[section.label + "_" + input.label] - : ""; + if (!uploadStarted) { + startUpload(true); + upload_all() + .then(() => { + poll_analyze() + .then((response) => { + data.sections.forEach((section) => { + section.inputs.forEach((input) => { + input.value = + typeof response[section.label + "_" + input.label] == + "string" + ? response[section.label + "_" + input.label] + : ""; + }); }); + setData(data.copy()); + setLoading(false); + console.log("just before update"); + document.querySelectorAll("textarea").forEach((elem) => { + const nativeTAValueSetter = Object.getOwnPropertyDescriptor( + window.HTMLTextAreaElement.prototype, + "value", + )!.set; + const event = new Event("change", { bubbles: true }); + nativeTAValueSetter!.call(elem, elem.value + " "); + elem.dispatchEvent(event); + nativeTAValueSetter!.call(elem, elem.value.slice(0, -1)); + elem.dispatchEvent(event); + }); + }) + .catch((e) => { + setLoading(false); + setError(e); + console.log(e); }); - setData(data.copy()); - setLoading(false); - console.log("just before update"); - document.querySelectorAll("textarea").forEach((elem) => { - const nativeTAValueSetter = Object.getOwnPropertyDescriptor( - window.HTMLTextAreaElement.prototype, - "value", - )!.set; - const event = new Event("change", { bubbles: true }); - nativeTAValueSetter!.call(elem, elem.value + " "); - elem.dispatchEvent(event); - nativeTAValueSetter!.call(elem, elem.value.slice(0, -1)); - elem.dispatchEvent(event); - }); - }) - .catch((e) => { - setLoading(false); - setError(e); - console.log(e); - }); - }) - .catch((error) => { - console.log(error); - }); + }) + .catch((error) => { + console.log(error); + }); + } } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + textareas.forEach((textareaObj) => { + if (textareaObj.ref.current) { + resizeTextarea(textareaObj.ref.current); + } + }); + }, [textareas]); + return (
diff --git a/src/main.tsx b/src/main.tsx index 54d608da..27cd4804 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,5 +2,4 @@ import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; -require('dotenv').config(); ReactDOM.createRoot(document.getElementById("root")!).render(); diff --git a/vite.config.ts b/vite.config.ts index d366e8c8..1747e520 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,11 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; - +import dotenv from "dotenv"; +dotenv.config(); // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + define: { + "process.env": process.env, + }, });