Merge branch 'main' into 66-modifying-css-of-textbox-on-form-page

ai-cfia · Jun 17, 2024 · 833c4db · 833c4db
2 parents 5e91827 + 5044332
commit 833c4db
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 65 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
-REACT_APP_ACTIVATE_USING_JSON=true
+REACT_APP_ACTIVATE_USING_JSON="false"
+
diff --git a/public/answer.json 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
@@ -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
@@ -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
@@ -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<HTMLDivElement | null>;
   }[] = [];
+
   const textareas: {
     label: string;
     ref: React.MutableRefObject<HTMLTextAreaElement | null>;
@@ -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<HTMLTextAreaElement>) => {
+              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 (
     <StrictMode>
       <div className="formPage-container">

diff --git 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(<App />);
diff --git 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,
+  },
 });