64 extract class input and section from from page

.env

@@ -1 +1,2 @@
-REACT_APP_ACTIVATE_USING_JSON="true"
+REACT_APP_ACTIVATE_USING_JSON="false"
+API_URL="http://127.0.0.1:5000"

public/answer.json

@@ -1,44 +1,45 @@
 {
-    "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": ""
+  "company_name": "Cameron Chemicals, Inc.",
+  "company_address": "930 Old Dil Road. Suffolk VA 23434",
+  "company_website": null,
+  "company_phone_number": "(757) 487-0656",
+  "manufacturer_name": "Cameron Chemicals, Inc.",
+  "manufacturer_address": "930 Old Dil Road. Suffolk VA 23434",
+  "manufacturer_website": null,
+  "manufacturer_phone_number": "(757) 487-0656",
+  "fertiliser_name": "GRANULAR ZINC 20% GRANULAIRE",
+  "fertiliser_registration_number": "20150458",
+  "fertiliser_lot_number": "Lot 31923352",
+  "fertiliser_npk": "null",
+  "fertiliser_precautionary_fr": "Éviter de respirer les poussières/fumées/gaz/brouillards/vapeurs/aérosols. Laver la peau soigneusement après manipulation. Utiliser seulement en plein air ou dans un endroit bien ventilé. Porter des gants de protection/vêtements de protection/des yeux/protection/du visage. Conserver dans un endroit bien ventilé. Conserver le récipient bien fermé. Éliminer le contenu/les récipients dans un site d'élimination approuvé selon les réglementations nationales.",
+  "fertiliser_precautionary_en": "Avoid breathing dust/fumes/gas/mist/vapors/spray. Wash skin thoroughly after handling. Use only outdoors or in a well-ventilated area. Wear protective gloves/protective clothing/eye protection/face protection. Store in a well-ventilated place. Keep container tightly closed. Dispose of contents/containers to an approved disposal site in accordance with national regulations.",
+  "fertiliser_instructions_fr": "Pour emploi en mélange d'engrais pour application au sol seulement. Les applications devraient être basées sur les résultats d'analyses du sol ou des feuilles.",
+  "fertiliser_instructions_en": "To be used only in blending fertilizer for soil applications. Applications should be based on the results of soil or leaf analysis.",
+  "fertiliser_ingredients_fr": "Frabriqué à partir de : sulfate de Zinc, Oxide de zinc",
+  "fertiliser_ingredients_en": "Derived from: Zinc Sulphate and Zinc Oxide.",
+  "fertiliser_specifications_fr": null,
+  "fertiliser_specifications_en": null,
+  "fertiliser_cautions_fr": "AVERTISSEMENT Cet engrais renferme du Zinc et Soufre et ne doit être employé que de la manière recommandée. Il peut être nocif s'il est employé mal à propos. L'application de ce produit devrait être basée sur les résultats des analyses du sol ou des tissus.",
+  "fertiliser_cautions_en": "CAUTION this fertilizer contains Zinc and Sulphur and should be used only as recommended. It may prove harmful when misused. Applications of this product should be based on the results of soil and/or tissue analysis.",
+  "fertiliser_recommendation_fr": null,
+  "fertiliser_recommendation_en": null,
+  "fertiliser_first_aid_fr": "En cas de contact avec la peau, laver abondamment à l'eau. En cas d'inhalation, déplacer la personne à l'air frais et la maintenir au repos pour faciliter la respiration. En cas de contact avec les yeux, rincer avec précaution à l'eau pendant plusieurs minutes. Enlever les lentilles de contact, si présentes et faciles à enlever. Continuer à rincer. Appeler immédiatement un centre antipoison/un médecin. Traitement spécifique (voir les sections 4 à 5 sur cette étiquette et toute information supplémentaire sur cette étiquette). En cas d'irritation cutanée, demander un avis médical. Enlever les vêtements contaminés et les laver avant de les réutiliser.",
+  "fertiliser_first_aid_en": "If on skin, wash with plenty of water. If inhaled, remove person to fresh air and keep comfortable for breathing. If in eyes, rinse cautiously with water for several minutes. Remove contact lenses, if present and easy to do. Continue rinsing. Immediately call a poison center/doctor. Specific treatment (see sections 4 to 5 on this label and any additional information on this label). If skin irritation occurs, get medical advice/attention. Take off contaminated clothing and wash it before reuse.",
+  "fertiliser_warranty_fr": "La garantie de ce produit est limitée aux termes indiqués sur l'étiquette et sous réserve que l'acheteur assume les risques pour les personnes ou les biens résultant de l'utilisation ou de la manipulation de ce produit et accepte le produit dans son état actuel.",
+  "fertiliser_warranty_en": "The warranty for this product shall be limited to the terms set out on the label and subject to the buyer assuming the risks to persons or property arising from the use or handling of this product and accepting the product as is.",
+  "fertiliser_danger_fr": "Provoque une irritation de la peau. Provoque une irritation des yeux. Peut irriter les voies respiratoires.",
+  "fertiliser_danger_en": "Causes skin irritation. Causes serious eye irritation. May cause respiratory irritation.",
+  "fertiliser_guaranteed_analysis": {
+    "nutrient_in_guaranteed_analysis": ["Sulphur (S)", "Zinc (Zn)"],
+    "percentage_in_guaranteed_analysis": ["3.00%", "20.00%"]
+  },
+  "fertiliser_weight": "2000 lbs (907kg)",
+  "fertiliser_density": null,
+  "fertiliser_volume": null,
+  "fertiliser_label_all_other_text_fr": {
+    "other_text_fr_1": "| Chemical Name: Synonym(s): Product Code No: | Classified in Accordance with Appendix C OSHA Hazaro Communicator Standard 20 CFR 1910:1200 | | Classé conformément à TArése C OSHA Hazart Communication Standard 29 CFR 1910 1200 |\n|| Granular Zinc 20% \n|| None known| | Granulaire Zinc 20% || Aucun coena. 27M240000KDD:2ZN2A20008 50, 2ZN2A2000TO0, 2ZN2A2200B50, 22N2A2205T00; 2ZN2A2500B 50 | Codo prodali No:  2ZN2AD000K00, 2ZN2A2000850, 2ZN2A2600T00, 2ZN2A2200350 2ZN2A2200700. 2ZN2A2500850 |"
+  },
+  "fertiliser_label_all_other_text_en": {
+    "other_text_en_1": "| Chemical Name: Synonym(s): Product Code No: | Classified in Accordance with Appendix C OSHA Hazaro Communicator Standard 20 CFR 1910:1200 | | Classé conformément à TArése C OSHA Hazart Communication Standard 29 CFR 1910 1200 |\n|| Granular Zinc 20% \n|| None known| | Granulaire Zinc 20% || Aucun coena. 27M240000KDD:2ZN2A20008 50, 2ZN2A2000TO0, 2ZN2A2200B50, 22N2A2205T00; 2ZN2A2500B 50 | Codo prodali No:  2ZN2AD000K00, 2ZN2A2000850, 2ZN2A2600T00, 2ZN2A2200350 2ZN2A2200700. 2ZN2A2500850 |"
   }
+}

src/Components/Carousel/Carousel.tsx

@@ -49,7 +49,7 @@ const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
         <ImageZoomInOut
           className="main-img"
           imageUrl={imgList.length > 0 ? imgList[currImg].url : ""}
-          alt="No picture"
+          alt="no picture"
         />
         <a className="next" onClick={() => selectImg(currImg + 1)}>
           &#10095;

src/Components/ImageZoomInOut/ImageZoomInOut.css

@@ -1,20 +1,21 @@
 .btn-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    background-color: #fff;
-    border-radius: 8px;
-    overflow: hidden;
-    top: 10px;
-    left: 10px;
-    z-index: 1;
-    border:1px solid black;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid black;
+}
 
 .btn-container button {
-    border: none;
-    color: #737373;
-    background-color: #fff;
-    padding: 10px;
-    cursor: pointer;
-  }
+  border: none;
+  color: #737373;
+  background-color: #fff;
+  padding: 10px;
+  cursor: pointer;
+}

src/Components/Input/Input.css

@@ -0,0 +1,18 @@
+textarea {
+  transition: box-shadow 1s ease-in-out;
+}
+textarea:disabled {
+  background-color: #4e4e4e;
+  border: solid 2px black;
+}
+
+@media (prefers-color-schem: light) {
+  textarea {
+    box-shadow: 0 0 0 0 black;
+  }
+}
+@media (prefers-color-schem: dark) {
+  textarea {
+    box-shadow: 0 0 0 0 white;
+  }
+}

src/Components/Input/Input.tsx

@@ -0,0 +1,135 @@
+import "./Input.css";
+import React, { useState } from "react";
+import Input from "../../Model/Input-Model";
+import Section from "../../Model/Section-Model";
+
+import Modal from "../Modal/Modal";
+
+import editIcon from "../../assets/edit1.svg";
+import acceptIcon from "../../assets/acceptIcon.svg";
+
+import { FormClickActions } from "../../Utils/EventChannels";
+
+interface InputProps {
+  parent: Section;
+  inputInfo: Input;
+  textarea: React.MutableRefObject<HTMLTextAreaElement | null>;
+  modal: React.MutableRefObject<HTMLDivElement | null>;
+  propagateChange: (inputInfo: Input) => void;
+}
+
+const MAX_CHAR_IN_ROW = 37;
+
+const resizeTextarea = (textarea: HTMLTextAreaElement | null) => {
+  if (textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+  }
+};
+
+const InputComponent: React.FC<InputProps> = ({
+  parent,
+  inputInfo,
+  textarea,
+  modal,
+  propagateChange,
+}) => {
+  const [isActive, setIsActive] = useState(false);
+
+  //Need to be modified to "approve" but color dont work
+  const handleClick_Modify = (inputInfo: Input) => () => {
+    console.log("modified: ", inputInfo.label);
+    setIsActive(true);
+    inputInfo.disabled = false;
+    FormClickActions.emit("ModifyClick", inputInfo);
+    setTimeout(() => setIsActive(false), 400);
+  };
+
+  //Need to be modified to "modified" but color dont work
+  const handleClick_Approve = (inputInfo: Input) => () => {
+    console.log("approved: ", inputInfo.label);
+    setIsActive(true);
+    inputInfo.disabled = true;
+    FormClickActions.emit("ApproveClick", inputInfo);
+    setTimeout(() => setIsActive(false), 400);
+  };
+
+  if (inputInfo.value == "") return <></>;
+  return (
+    <div className="input-container">
+      <label htmlFor={inputInfo.id}>
+        {parent.label.charAt(0).toUpperCase() + parent.label.slice(1)}{" "}
+        {inputInfo.label.replace(/_/gi, " ")} :
+      </label>
+      <div className="textbox-container">
+        <textarea
+          id={inputInfo.id}
+          ref={textarea}
+          value={inputInfo.value}
+          disabled={inputInfo.disabled}
+          onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+            console.log(event);
+            const current = event.target as HTMLTextAreaElement;
+            resizeTextarea(current);
+            inputInfo.value = event.target.value;
+            propagateChange(inputInfo);
+          }}
+          onInput={(event: React.FormEvent<HTMLTextAreaElement>) => {
+            const current = event.target as HTMLTextAreaElement;
+            resizeTextarea(current); // Added here
+          }}
+          className="text-box"
+          rows={1}
+        />
+        <div className="button-container">
+          <button
+            className={`button ${isActive ? "active" : ""}`}
+            onClick={handleClick_Approve(inputInfo)}
+          >
+            <img src={acceptIcon} alt="Modifier" width="20" height="20" />
+          </button>
+          <button
+            className={`button ${isActive ? "active" : ""}`}
+            onClick={handleClick_Modify(inputInfo)}
+          >
+            <img src={editIcon} alt="Modifier" width="20" height="20" />
+          </button>
+        </div>
+      </div>
+      {/* Show more functionality moved here for better separation */}
+      {inputInfo.value.split("\n").length +
+        inputInfo.value
+          .split("\n")
+          .map((line) => Math.floor(line.length / MAX_CHAR_IN_ROW))
+          .reduce((sum, current) => sum + current) >
+        3 && (
+        <div className="show-more-container">
+          <label
+            className="open-icon"
+            onClick={() => {
+              modal.current?.classList.add("active");
+            }}
+          >
+            Show more
+          </label>
+          <Modal
+            toRef={modal}
+            text={inputInfo.value}
+            handleTextChange={(event: {
+              target: { value: React.SetStateAction<string> };
+            }) => {
+              inputInfo.value = event.target.value.toString();
+              propagateChange(inputInfo);
+            }}
+            imgs={[]}
+            close={() => {
+              modal.current?.classList.remove("active");
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputComponent;

src/Components/Modal/Modal.css

@@ -61,13 +61,12 @@
   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;
@@ -76,7 +75,7 @@
   font-weight: 400; /* Normal weight */
   color: #000000; /* Dark gray */
   text-decoration: none;
-  overflow-y:visible;
+  overflow-y: visible;
 }
 
 /* Styles du pied de page de la carte */
@@ -113,7 +112,7 @@
   .formPage-container {
     grid-template-areas:
       "pics data"
-      "pics open-icon";  /* Add a new row for the open-icon */
+      "pics open-icon"; /* Add a new row for the open-icon */
     grid-template-columns: 42% 55%;
   }
 }
@@ -129,11 +128,12 @@
 
 .pic-container {
   grid-area: pics;
-  margin-right:10px ;
+  margin-right: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
   .open-icon {
-    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg) brightness(101%) contrast(98%);
+    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg)
+      brightness(101%) contrast(98%);
   }
 }

src/Components/ProgressBar/ProgressBar.css

@@ -1,13 +1,18 @@
 .progress-bar-vertical {
-    flex-direction: column;
-    width: 30px;
-    height: 120%;
-    border-radius: 15px;
-    overflow: hidden;
-    position: sticky;
-    margin-top: 50px;
-    }
+  flex-direction: column;
+  width: 30px;
+  height: 120%;
+  border-radius: 15px;
+  overflow: hidden;
+  position: sticky;
+  margin-top: 50px;
+}
 
 .section {
-    flex: 1;
-    }
+  background-color: rgb(185, 185, 185);
+  flex: 1;
+}
+
+.section.approved {
+  background-color: rgb(18, 178, 18);
+}