contentoh-components-library 21.4.122 → 21.4.124

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

@@ -1,639 +0,0 @@
-import axios from "axios";
-import { ImageVisor } from "../../organisms/ImageVisor";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { deleteImage } from "./saveData";
-import { Container, Input, InputBase, TextField } from "@mui/material";
-import { ValidationPanel } from "../../atoms/ValidationPanel";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
-import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
-import infoIcon from "../../../assets/images/Icons/info.svg";
-import saveWhite from "../../../assets/images/Icons/save-white.svg";
-import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
-
-// variables
-export const optionsSelect = [
-  {
-    label: "item 1",
-    value: 1,
-  },
-  {
-    label: "item 2",
-    value: 2,
-  },
-  {
-    label: "item 3",
-    value: 3,
-  },
-  {
-    label: "item 4",
-    value: 4,
-  },
-];
-
-export const columnsBase = [
-  {
-    Header: "UPC",
-    accessor: "upc",
-    width: "100px",
-    fixedToLeft: 0,
-    style: {
-      textAlign: "left",
-    },
-  },
-  {
-    Header: "Nombre",
-    accessor: "name",
-    width: "100px",
-    fixedToLeft: 100,
-  },
-  {
-    Header: "Categoría",
-    accessor: "category",
-    width: "100px",
-    fixedToLeft: 200,
-  },
-  {
-    Header: "Est.",
-    accessor: "status",
-    width: "30px",
-    fixedToLeft: 300,
-  },
-  {
-    Header: "Ver.",
-    accessor: "version",
-    width: "30px",
-    fixedToLeft: 330,
-    style: {
-      borderRight: "1px solid #f0f0f0",
-    },
-  },
-];
-
-// data
-async function getData(service, articles, versions, token) {
-  const encodedArticles = encodeURIComponent(articles.join(","));
-  const encodedVersion = encodeURIComponent(versions.join(","));
-  const params = `?articles=${encodedArticles}&versions=${encodedVersion}`;
-  const res = await axios.get(
-    `${process.env.REACT_APP_BASE_MULTIPLE_EDITION_ENDPOINT}/${service}${params}`,
-    {
-      headers: {
-        Authorization: token,
-      },
-    }
-  );
-  return JSON.parse(res.data.body);
-}
-
-// functions
-export function dataReducer(state, action) {
-  if (action.type === "init") {
-    return action.payload;
-  }
-  if (action.type === "updateImage") {
-    const { articleId, imageId } = action.payload;
-    const newImageData = state.images.data.slice();
-    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
-    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
-    newImageData[articleIndex].images[imageId].value = {
-      ...action.payload,
-      id,
-    };
-    return {
-      ...state,
-      images: {
-        ...state.images,
-        data: newImageData,
-      },
-    };
-  }
-  if (action.type === "deleteImage") {
-    const { articleId, imageId, token } = action.payload;
-    const newImageData = state.images.data.slice();
-    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
-    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
-    delete newImageData[articleIndex]?.images[imageId]?.value;
-    console.log(newImageData[articleIndex]);
-    const data = {
-      articleId,
-      deleteImages: [
-        {
-          id,
-        },
-      ],
-    };
-    deleteImage(data, newImageData[articleIndex].version, token);
-    return {
-      ...state,
-      images: {
-        ...state.images,
-        data: newImageData,
-      },
-    };
-  }
-  return state;
-}
-
-export async function initData(setDataServices, articles, versions, token) {
-  const [description, datasheet, images] = await Promise.all([
-    getData("description", articles, versions, token),
-    getData("datasheet", articles, versions, token),
-    getData("images", articles, versions, token),
-  ]);
-  const { data: dataDescription, attributes: rulesDescription } = description;
-  const { data: dataDatasheet, attributes: rulesDatasheet } = datasheet;
-  const { data: dataImage, typesShot: rulesImage } = images;
-  const payload = {
-    description: {
-      data: Object.values(dataDescription),
-      rules: rulesDescription,
-    },
-    datasheet: {
-      data: Object.values(dataDatasheet),
-      rules: rulesDatasheet,
-    },
-    images: {
-      data: Object.values(dataImage),
-      rules: rulesImage.reduce(
-        (prev, curr) =>
-          (prev = {
-            ...prev,
-            [curr.id]: curr.name,
-          }),
-        {}
-      ),
-    },
-  };
-  setDataServices({
-    type: "init",
-    payload,
-  });
-}
-
-export function setDataColumns(
-  section,
-  dataService,
-  token,
-  setModalFromTable,
-  setDataServices,
-  setModal,
-  setShowValidationPanel,
-  setAttributeSelected,
-  setShowRejectModal,
-  setAttributesReviewed,
-  setMessage,
-  showValidationPanel,
-  attributeSelected,
-  attributesReviewed
-) {
-  const { data, rules } = dataService;
-  const columns = [...columnsBase];
-  const values = [];
-
-  const styleRetailer = {
-    borderRight: "1px solid #f0f0f0",
-    borderLeft: "1px solid #f0f0f0",
-  };
-  const styleSaveButtonCol = {
-    borderRight: "1px solid #f0f0f0",
-    //borderLeft: "1px solid #f0f0f0",
-  };
-  const styleData = {
-    textAlign: "center",
-    display: "flex",
-    justifyContent: "center",
-  };
-
-  const retailersAdded = {
-    id: [],
-    attr: [],
-  };
-  data.forEach((item) => {
-    const currentData = {};
-    ["upc", "name", "accessor", "category", "status", "version"].forEach(
-      (key) => {
-        currentData[key] = <p className="content"> {item[key]} </p>;
-      }
-    );
-    if (item.status)
-      currentData["status"] = (
-        <StatusTag statusType={item.status} ovalForm={true} />
-      );
-    if (section === "images") {
-      const { images } = item;
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px",
-            style: styleRetailer,
-          });
-        }
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        ret.images.forEach((imgId) => {
-          if (!retailersAdded.attr.includes(`img${imgId}`)) {
-            retailersAdded.attr.push(`img${imgId}`);
-            columns.push({
-              Header: rules[imgId],
-              accessor: `img${imgId}`,
-              width: "115px",
-              style: styleData,
-            });
-          }
-        });
-        Object.values(images).forEach(({ value, imageId }) => {
-          const props = {
-            name: rules[imageId],
-            value: value,
-            setModalFromTable,
-            articleId: item.id,
-            setDataServices,
-            imageId,
-            setModal,
-            token,
-          };
-          currentData[`img${imageId}`] = <ImageVisor {...props} />;
-        });
-      });
-    }
-    if (section === "datasheet") {
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px",
-          });
-          columns.push({
-            Header: "",
-            accessor: `retailer${ret.id}-save`,
-            width: "60px",
-            style: styleSaveButtonCol,
-          });
-        }
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        var saveAvailable = attributesReviewed
-          .filter((e) => e.articleId === item.id)
-          .every((e) => e.isReviewed === true);
-        if (
-          attributesReviewed.filter((e) => e.articleId === item.id).length == 0
-        ) {
-          saveAvailable = false;
-        }
-        currentData[`retailer${ret.id}-save`] = (
-          <button
-            onClick={() => {
-              var articlesAtributesUpdateBody = [];
-              var articleAttributes = attributesReviewed.filter(
-                (e) => e.articleId === item.id && e.versionId === item.version
-              );
-              articleAttributes.forEach((articleAttribute) => {
-                const value = document.getElementById(
-                  articleAttribute.articleId +
-                    "_" +
-                    articleAttribute.attributeId +
-                    "_" +
-                    articleAttribute.versionId
-                ).value;
-                articlesAtributesUpdateBody.push({
-                  articleId: articleAttribute.articleId,
-                  versionId: articleAttribute.versionId,
-                  attributeId: articleAttribute.attributeId,
-                  value: value ? value : "",
-                  isApproved: articleAttribute.isApproved,
-                  comment: articleAttribute.comment,
-                });
-              });
-              updateArticleData(
-                item.version,
-                item.id,
-                articlesAtributesUpdateBody,
-                token,
-                setMessage
-              );
-            }}
-            className="validation-option"
-            disabled={!saveAvailable}
-          >
-            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
-            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
-          </button>
-        );
-        ret.attributes.forEach((attributeId) => {
-          if (!retailersAdded.attr.includes(`${attributeId + "-" + ret.id}`)) {
-            retailersAdded.attr.push(`${attributeId + "-" + ret.id}`);
-            columns.push({
-              Header: rules[attributeId].name,
-              accessor: `${attributeId + "-" + ret.id}`,
-              width: "200px",
-              style: styleData,
-            });
-          }
-        });
-        Object.values(item.attributes).forEach((des) => {
-          const props = {
-            inputId:
-              item.id +
-              "_" +
-              rules[des.attributeId].attributeId +
-              "_" +
-              item.version,
-            name:
-              item.id +
-              "-" +
-              rules[des.attributeId].attributeId +
-              "-" +
-              item.version,
-            value: des.value,
-          };
-          if (
-            !attributesReviewed.find(
-              (e) =>
-                e.articleId == item.id &&
-                e.attributeId == des.attributeId &&
-                e.versionId == item.version
-            )
-          )
-            attributesReviewed.push({
-              articleId: item.id,
-              attributeId: des.attributeId,
-              versionId: item.version,
-              isApproved: des.isApproved ? des.isApproved : false,
-              isReviewed: des.isApproved != null ? true : false,
-              comment: "",
-            });
-          var index = attributesReviewed.findIndex(
-            (e) =>
-              e.articleId === item.id &&
-              e.attributeId === des.attributeId &&
-              e.versionId === item.version
-          );
-          currentData[`${des.attributeId + "-" + ret.id}`] = (
-            <>
-              <button
-                onClick={() => {
-                  setShowValidationPanel(true);
-                  setAttributeSelected({
-                    articleId: item.id,
-                    attributeId: des.attributeId,
-                    versionId: item.version,
-                  });
-                }}
-                className="validation-option"
-              >
-                {attributesReviewed[index].isReviewed &&
-                  attributesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={acceptIcon}
-                      alt="accept button"
-                    />
-                  )}{" "}
-                {attributesReviewed[index].isReviewed &&
-                  !attributesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}{" "}
-                {typeof des.isApproved === "undefined" &&
-                  !attributesReviewed[index].isReviewed && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}
-              </button>{" "}
-              {showValidationPanel &&
-                attributeSelected.articleId === item.id &&
-                attributeSelected.attributeId === des.attributeId &&
-                attributeSelected.versionId === item.version && (
-                  <div className="buttons-container">
-                    <button
-                      onClick={() => {
-                        attributesReviewed[index].isApproved = true;
-                        attributesReviewed[index].isReviewed = true;
-                        //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
-                        setShowValidationPanel(false);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={acceptIcon} alt="accept button" />
-                      <p> Validar </p>{" "}
-                    </button>{" "}
-                    <button
-                      onClick={() => {
-                        setShowValidationPanel(false);
-                        setShowRejectModal(true);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={rejectIcon} alt="reject button" />
-                      <p> Rechazar </p>{" "}
-                    </button>{" "}
-                  </div>
-                )}{" "}
-              <TagAndInput {...props} />
-            </>
-          );
-        });
-      });
-    }
-    if (section === "description") {
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px",
-            style: styleRetailer,
-          });
-        }
-
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        ret.descriptions.forEach((descriptionId) => {
-          if (!retailersAdded.attr.includes(`${descriptionId}`)) {
-            retailersAdded.attr.push(`${descriptionId}`);
-            columns.push({
-              Header: rules[ret.id][descriptionId].name,
-              accessor: `${descriptionId}`,
-              width: "250px",
-              style: styleData,
-            });
-          }
-        });
-        Object.values(item.descriptions).forEach((des) => {
-          const props = {
-            name: rules[des.attributeId],
-            value: des.value,
-            cols: 30,
-            rows: 2,
-            readOnly: true,
-          };
-          currentData[`${des.attributeId}`] = (
-            <>
-              <textarea {...props}> </textarea>{" "}
-            </>
-          );
-        });
-      });
-    }
-    values.push(currentData);
-  });
-  return [columns, values];
-}
-
-export function modalReducer(state, action) {
-  if (action.type === "close") {
-    return {
-      show: false,
-    };
-  }
-  const { setModal, setDataServices } = action?.functions;
-  const buttons = [
-    <ButtonV2
-      key="btn-Cancelar"
-      type="white"
-      label="Cancelar"
-      onClick={() =>
-        setModal({
-          type: "close",
-        })
-      }
-    />,
-  ];
-  if (action.type === "saved successfully") {
-    buttons[0] = (
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        onClick={async () =>
-          setModal({
-            type: "close",
-          })
-        }
-      />
-    );
-    return {
-      show: true,
-      title: "Servicio guardado con éxito",
-      message: `El servicio de ${action.payload?.service} se ha guardado con éxito.`,
-      icon: "success",
-      buttons,
-    };
-  }
-  if (action.type === "delete") {
-    buttons.push(
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        onClick={async () => {
-          setDataServices({
-            type: "deleteImage",
-            payload: action.payload,
-          });
-          setModal({
-            type: "close",
-          });
-        }}
-      />
-    );
-    return {
-      show: true,
-      title: "Eliminar imagen",
-      message: "¿Está seguro de eliminar la imagen seleccionada?",
-      icon: "warning",
-      buttons,
-    };
-  }
-  return state;
-}
-
-async function updateArticleData(
-  version,
-  articleId,
-  attributes,
-  token,
-  setMessage
-) {
-  const body = {
-    articleId: articleId,
-    articleData: attributes,
-  };
-  const params = `?datasheet=true&version=${version}`;
-  try {
-    const res = await axios.put(
-      `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}` + params,
-      body,
-      {
-        headers: {
-          Authorization: token,
-        },
-      }
-    );
-    if (res.data.statusCode === 200) {
-      setMessage("Atributos guardados con éxito");
-    }
-  } catch (error) {
-    console.log(error);
-  }
-}
-
-/**
-             * Componentes para guardar y validación multiple
-             * <img
-                        src={saveWhite}
-                        alt="Guardar"
-                        onClick={() => {
-                          const params = {
-                            section, data: dataServices[section], token, callbackToInitData, setModal,
-                          };
-                          saveData(params);
-                        }}
-                      />
-
-                      <SelectV2
-                        items={optionsSelect}
-                        triggerType="click"
-                        selectButton={{
-                          type: "whiteS3",
-                          label: "Validación masiva",
-                          size: 12,
-                        }}
-                        typeSelectItems="labelOnly"
-                        borderType="oval"
-                        onChange={(selectedItems) => {
-                          console.log(selectedItems);
-                        }}
-                      />
-             */