contentoh-components-library 21.5.32 → 21.5.34

package/src/components/pages/MultipleEdition/index.js

@@ -1,248 +1,248 @@
-import React, { useState, useEffect, useReducer } from "react";
-import { Modal } from "../../organisms/Modal";
-import { EditionTabs } from "../../molecules/EditionTabs";
-import { Table } from "../../organisms/Table";
-import beenhere from "../../../assets/images/Icons/beenhere.svg";
-import closeMagenta from "../../../assets/images/Icons/close-magenta.svg";
-import { Container } from "./styles";
-import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
-import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
-
-import { initData, setDataColumns, dataReducer, modalReducer } from "./utils";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import { GenericModal } from "../../atoms/GenericModal";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-
-export const MultipleEdition = ({ articles, versions, onClose, token }) => {
-  const [section, setSection] = useState("description");
-  const [attributeSelected, setAttributeSelected] = useState({
-    articleId: "",
-    attributeId: "",
-    versionId: "",
-  });
-  const [attributesReviewed, setAttributesReviewed] = useState([]);
-  const [descriptionsReviewed, setDescriptionsReviewed] = useState([]);
-  const [imagesReviewed, setImagesReviewed] = useState([]);
-  const [showRejectModal, setShowRejectModal] = useState(false);
-  const [showValidationPanel, setShowValidationPanel] = useState(false);
-  const [message, setMessage] = useState("");
-
-  const closeValidationPanel = (e) => {
-    if (
-      !e.target.closest("#validation-panel") ||
-      (e.target.closest(".validation-option") && showValidationPanel)
-    ) {
-      document.removeEventListener("click", closeValidationPanel, false);
-      setShowValidationPanel(false);
-    }
-  };
-  const [currentData, setCurrentData] = useState({
-    columns: [],
-    data: [],
-  });
-  const [dataServices, setDataServices] = useReducer(dataReducer, {
-    description: {
-      data: [],
-    },
-    datasheet: {
-      data: [],
-    },
-    images: {
-      data: [],
-    },
-  });
-  const [modalFromTable, setModalFromTable] = useState();
-  const [modal, setModal] = useReducer(modalReducer, {
-    showModal: false,
-  });
-
-  function callbackToInitData() {
-    initData(setDataServices, articles, versions, token);
-  }
-
-  useEffect(() => {
-    callbackToInitData();
-  }, []);
-
-  useEffect(() => {
-    const [columns, data] = setDataColumns(
-      section,
-      dataServices[section],
-      token,
-      setModalFromTable,
-      setDataServices,
-      setModal,
-      setShowValidationPanel,
-      setAttributeSelected,
-      setShowRejectModal,
-      setAttributesReviewed,
-      setMessage,
-      showValidationPanel,
-      attributeSelected,
-      attributesReviewed,
-      descriptionsReviewed,
-      imagesReviewed
-    );
-    setCurrentData({
-      columns,
-      data,
-    });
-  }, [
-    section,
-    dataServices,
-    attributeSelected,
-    showValidationPanel,
-    attributesReviewed,
-    descriptionsReviewed,
-    imagesReviewed
-  ]);
-
-  return (
-    <Container>
-      <div className="tabs">
-        <div>
-          <EditionTabs getSection={setSection} />{" "}
-        </div>{" "}
-        <img src={beenhere} alt="beenhere" />
-      </div>{" "}
-      
-      <div className="action_buttons">
-        <img
-          src={closeMagenta}
-          alt="Cerrar"
-          onClick={() => {
-            window.location.href = `/products`;
-          }}
-          //onClick={() => onClose && onClose()}
-        />{" "}
-      </div>{" "}
-      <div className="table">
-        <Table
-          withCheckbox
-          columns={currentData.columns}
-          data={currentData.data}
-          withTooltip={true}
-        />{" "}
-      </div>{" "}
-      {modalFromTable} <Modal {...modal} />{" "}
-      {showRejectModal && (
-        <Modal
-          title={"Agregar mensaje de rechazo"}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async () => {
-                const body = document.querySelector(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                ).innerHTML;
-                const comment = [
-                  {
-                    type: "comment",
-                    value: body?.replace(/<.*?\/?>/gm, ""),
-                  },
-                ];
-                if(section=="description"|| section=="datasheet"){
-                  
-                  if(section=="datasheet"){
-                    var index = attributesReviewed.findIndex(
-                      (e) =>
-                        e.articleId === attributeSelected.articleId &&
-                        e.attributeId === attributeSelected.attributeId &&
-                        e.versionId === attributeSelected.versionId
-                    );
-                    attributesReviewed[index].isApproved = false;
-                    attributesReviewed[index].isReviewed = true;
-                    attributesReviewed[index].comment = comment[0].value;
-                  }
-                  if(section=="description"){
-                    var index = descriptionsReviewed.findIndex(
-                      (e) =>
-                        e.articleId === attributeSelected.articleId &&
-                        e.attributeId === attributeSelected.attributeId &&
-                        e.versionId === attributeSelected.versionId
-                    );
-                    descriptionsReviewed[index].isApproved = false;
-                    descriptionsReviewed[index].isReviewed = true;
-                    descriptionsReviewed[index].comment = comment[0].value;
-                    console.log(descriptionsReviewed[index]);
-                  }
-                  document.getElementById(
-                    "button_" +
-                      attributeSelected.articleId +
-                      "_" +
-                      attributeSelected.attributeId +
-                      "_" +
-                      attributeSelected.versionId
-                  ).src = rejectIcon;
-                  
-                  
-                }
-                if(section=="images"){
-                  var index = imagesReviewed.findIndex(
-                    (e) =>
-                      e.articleId === attributeSelected.articleId &&
-                      e.imageId === attributeSelected.attributeId &&
-                      e.versionId === attributeSelected.versionId
-                  );
-                  imagesReviewed[index].isApproved = false;
-                  imagesReviewed[index].isReviewed = true;
-                  imagesReviewed[index].comment = comment[0].value;
-                  console.log(imagesReviewed[index]);
-                }
-                document.getElementById(
-                  "button_" +
-                    attributeSelected.articleId +
-                    "_" +
-                    attributeSelected.attributeId +
-                    "_" +
-                    attributeSelected.versionId
-                ).src = rejectIcon;
-                setShowRejectModal(false);
-              }}
-            />,
-          ]}
-        />
-      )}{" "}
-      {message.length > 0 && (
-        <GenericModal
-          componentsArray={[
-            <img key="1" src={succes} alt="success icon" />,
-            <ScreenHeader
-              key="2"
-              headerType={"retailer-name-header"}
-              text={message}
-              color={"white"}
-            />,
-          ]}
-          onClick={() => {
-            setMessage("");
-            callbackToInitData();
-          }}
-        />
-      )}{" "}
-      
-    </Container>
-  );
-};
+import React, { useState, useEffect, useReducer } from "react";
+import { Modal } from "../../organisms/Modal";
+import { EditionTabs } from "../../molecules/EditionTabs";
+import { Table } from "../../organisms/Table";
+import beenhere from "../../../assets/images/Icons/beenhere.svg";
+import closeMagenta from "../../../assets/images/Icons/close-magenta.svg";
+import { Container } from "./styles";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
+import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
+
+import { initData, setDataColumns, dataReducer, modalReducer } from "./utils";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { GenericModal } from "../../atoms/GenericModal";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+
+export const MultipleEdition = ({ articles, versions, onClose, token }) => {
+  const [section, setSection] = useState("description");
+  const [attributeSelected, setAttributeSelected] = useState({
+    articleId: "",
+    attributeId: "",
+    versionId: "",
+  });
+  const [attributesReviewed, setAttributesReviewed] = useState([]);
+  const [descriptionsReviewed, setDescriptionsReviewed] = useState([]);
+  const [imagesReviewed, setImagesReviewed] = useState([]);
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+  const [message, setMessage] = useState("");
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+  const [currentData, setCurrentData] = useState({
+    columns: [],
+    data: [],
+  });
+  const [dataServices, setDataServices] = useReducer(dataReducer, {
+    description: {
+      data: [],
+    },
+    datasheet: {
+      data: [],
+    },
+    images: {
+      data: [],
+    },
+  });
+  const [modalFromTable, setModalFromTable] = useState();
+  const [modal, setModal] = useReducer(modalReducer, {
+    showModal: false,
+  });
+
+  function callbackToInitData() {
+    initData(setDataServices, articles, versions, token);
+  }
+
+  useEffect(() => {
+    callbackToInitData();
+  }, []);
+
+  useEffect(() => {
+    const [columns, data] = setDataColumns(
+      section,
+      dataServices[section],
+      token,
+      setModalFromTable,
+      setDataServices,
+      setModal,
+      setShowValidationPanel,
+      setAttributeSelected,
+      setShowRejectModal,
+      setAttributesReviewed,
+      setMessage,
+      showValidationPanel,
+      attributeSelected,
+      attributesReviewed,
+      descriptionsReviewed,
+      imagesReviewed
+    );
+    setCurrentData({
+      columns,
+      data,
+    });
+  }, [
+    section,
+    dataServices,
+    attributeSelected,
+    showValidationPanel,
+    attributesReviewed,
+    descriptionsReviewed,
+    imagesReviewed
+  ]);
+
+  return (
+    <Container>
+      <div className="tabs">
+        <div>
+          <EditionTabs getSection={setSection} />{" "}
+        </div>{" "}
+        <img src={beenhere} alt="beenhere" />
+      </div>{" "}
+      
+      <div className="action_buttons">
+        <img
+          src={closeMagenta}
+          alt="Cerrar"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+          //onClick={() => onClose && onClose()}
+        />{" "}
+      </div>{" "}
+      <div className="table">
+        <Table
+          withCheckbox
+          columns={currentData.columns}
+          data={currentData.data}
+          withTooltip={true}
+        />{" "}
+      </div>{" "}
+      {modalFromTable} <Modal {...modal} />{" "}
+      {showRejectModal && (
+        <Modal
+          title={"Agregar mensaje de rechazo"}
+          show={showRejectModal}
+          customComponent={
+            <TagAndInput
+              inputType={"textarea"}
+              inputId={"modal-message-box"}
+              index={0}
+              color={"white"}
+            />
+          }
+          buttons={[
+            <ButtonV2
+              key={"btn-Cancelar"}
+              type={"white"}
+              label={"Cancelar"}
+              size={12}
+              onClick={() => {
+                setShowRejectModal(false);
+              }}
+            />,
+            <ButtonV2
+              key={"btn-Aceptar"}
+              type={"pink"}
+              label={"Aceptar"}
+              size={12}
+              onClick={async () => {
+                const body = document.querySelector(
+                  "#modal-message-box .ql-container .ql-editor > p"
+                ).innerHTML;
+                const comment = [
+                  {
+                    type: "comment",
+                    value: body?.replace(/<.*?\/?>/gm, ""),
+                  },
+                ];
+                if(section=="description"|| section=="datasheet"){
+                  
+                  if(section=="datasheet"){
+                    var index = attributesReviewed.findIndex(
+                      (e) =>
+                        e.articleId === attributeSelected.articleId &&
+                        e.attributeId === attributeSelected.attributeId &&
+                        e.versionId === attributeSelected.versionId
+                    );
+                    attributesReviewed[index].isApproved = false;
+                    attributesReviewed[index].isReviewed = true;
+                    attributesReviewed[index].comment = comment[0].value;
+                  }
+                  if(section=="description"){
+                    var index = descriptionsReviewed.findIndex(
+                      (e) =>
+                        e.articleId === attributeSelected.articleId &&
+                        e.attributeId === attributeSelected.attributeId &&
+                        e.versionId === attributeSelected.versionId
+                    );
+                    descriptionsReviewed[index].isApproved = false;
+                    descriptionsReviewed[index].isReviewed = true;
+                    descriptionsReviewed[index].comment = comment[0].value;
+                    console.log(descriptionsReviewed[index]);
+                  }
+                  document.getElementById(
+                    "button_" +
+                      attributeSelected.articleId +
+                      "_" +
+                      attributeSelected.attributeId +
+                      "_" +
+                      attributeSelected.versionId
+                  ).src = rejectIcon;
+                  
+                  
+                }
+                if(section=="images"){
+                  var index = imagesReviewed.findIndex(
+                    (e) =>
+                      e.articleId === attributeSelected.articleId &&
+                      e.imageId === attributeSelected.attributeId &&
+                      e.versionId === attributeSelected.versionId
+                  );
+                  imagesReviewed[index].isApproved = false;
+                  imagesReviewed[index].isReviewed = true;
+                  imagesReviewed[index].comment = comment[0].value;
+                  console.log(imagesReviewed[index]);
+                }
+                document.getElementById(
+                  "button_" +
+                    attributeSelected.articleId +
+                    "_" +
+                    attributeSelected.attributeId +
+                    "_" +
+                    attributeSelected.versionId
+                ).src = rejectIcon;
+                setShowRejectModal(false);
+              }}
+            />,
+          ]}
+        />
+      )}{" "}
+      {message.length > 0 && (
+        <GenericModal
+          componentsArray={[
+            <img key="1" src={succes} alt="success icon" />,
+            <ScreenHeader
+              key="2"
+              headerType={"retailer-name-header"}
+              text={message}
+              color={"white"}
+            />,
+          ]}
+          onClick={() => {
+            setMessage("");
+            callbackToInitData();
+          }}
+        />
+      )}{" "}
+      
+    </Container>
+  );
+};