contentoh-components-library 21.5.32 → 21.5.34

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

@@ -1,92 +1,92 @@
-import AWS from "aws-sdk";
-import { v4 as uuidv4 } from "uuid";
-import axios from "axios";
-
-const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-const REGION = "us-east-1";
-
-AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KUTS3,
-  secretAccessKey: process.env.REACT_APP_AKUTS3,
-});
-
-const myBucket = new AWS.S3({
-  params: { Bucket: S3_BUCKET },
-  region: REGION,
-});
-
-export async function saveData(params) {
-  const { section, data, token } = params;
-  if (section === "images") {
-    if (await saveImagesData(data, token)) {
-      //callbackToInitData();
-      /**setModal({
-        type: "saved successfully",
-        functions: { setModal },
-        payload: { service: "imágenes" },
-      });**/
-      // aquí va modal de que todo salío bien y actualiza la data
-    }
-  }
-  return true;
-}
-
-async function saveImagesData(articles, token) {
-  const imagesToUpdate = [];
-  articles.data.forEach((article) => {
-    const { images, version } = article;
-    console.log(images);
-    const imagesToAdd = Object.values(images).filter(
-      (f) => f.value && !f.value.src.startsWith("id-")
-    );
-    if (imagesToAdd.length > 0) {
-      imagesToUpdate.push(
-        ...imagesToAdd.map((e) => ({
-          imageId: e.imageId,
-          ...e.value,
-          version,
-          uuid: uuidv4(),
-        }))
-      );
-    }
-  });
-  const promiseArray = imagesToUpdate.map((e) => {
-    const { src, articleId, imageId, uuid, ext, version } = e;
-    const file = Buffer.from(
-      src.replace(/^data:image\/\w+;base64,/, ""),
-      "base64"
-    );
-    const params = {
-      ACL: "public-read",
-      Body: file,
-      Bucket: S3_BUCKET,
-      Key: `id-${articleId}/${version}/${imageId}-${uuid}.${ext}`,
-    };
-    return myBucket.putObject(params).promise();
-  });
-  await Promise.all(promiseArray);
-  console.log("finish upload");
-
-  const res = await axios.put(
-    process.env.REACT_APP_BASE_UPDATE_IMAGES_ENDPOINT,
-    imagesToUpdate.map((e) => {
-      delete e.src;
-      return e;
-    }),
-    {
-      headers: {
-        Authorization: token,
-      },
-    }
-  );
-  if (res.data.statusCode !== 200) return false;
-  return true;
-}
-
-export async function deleteImage(data, version, token) {
-  await axios.put(
-    `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-    data,
-    { headers: { Authorization: token } }
-  );
-}
+import AWS from "aws-sdk";
+import { v4 as uuidv4 } from "uuid";
+import axios from "axios";
+
+const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+const REGION = "us-east-1";
+
+AWS.config.update({
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3,
+});
+
+const myBucket = new AWS.S3({
+  params: { Bucket: S3_BUCKET },
+  region: REGION,
+});
+
+export async function saveData(params) {
+  const { section, data, token } = params;
+  if (section === "images") {
+    if (await saveImagesData(data, token)) {
+      //callbackToInitData();
+      /**setModal({
+        type: "saved successfully",
+        functions: { setModal },
+        payload: { service: "imágenes" },
+      });**/
+      // aquí va modal de que todo salío bien y actualiza la data
+    }
+  }
+  return true;
+}
+
+async function saveImagesData(articles, token) {
+  const imagesToUpdate = [];
+  articles.data.forEach((article) => {
+    const { images, version } = article;
+    console.log(images);
+    const imagesToAdd = Object.values(images).filter(
+      (f) => f.value && !f.value.src.startsWith("id-")
+    );
+    if (imagesToAdd.length > 0) {
+      imagesToUpdate.push(
+        ...imagesToAdd.map((e) => ({
+          imageId: e.imageId,
+          ...e.value,
+          version,
+          uuid: uuidv4(),
+        }))
+      );
+    }
+  });
+  const promiseArray = imagesToUpdate.map((e) => {
+    const { src, articleId, imageId, uuid, ext, version } = e;
+    const file = Buffer.from(
+      src.replace(/^data:image\/\w+;base64,/, ""),
+      "base64"
+    );
+    const params = {
+      ACL: "public-read",
+      Body: file,
+      Bucket: S3_BUCKET,
+      Key: `id-${articleId}/${version}/${imageId}-${uuid}.${ext}`,
+    };
+    return myBucket.putObject(params).promise();
+  });
+  await Promise.all(promiseArray);
+  console.log("finish upload");
+
+  const res = await axios.put(
+    process.env.REACT_APP_BASE_UPDATE_IMAGES_ENDPOINT,
+    imagesToUpdate.map((e) => {
+      delete e.src;
+      return e;
+    }),
+    {
+      headers: {
+        Authorization: token,
+      },
+    }
+  );
+  if (res.data.statusCode !== 200) return false;
+  return true;
+}
+
+export async function deleteImage(data, version, token) {
+  await axios.put(
+    `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+    data,
+    { headers: { Authorization: token } }
+  );
+}

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

@@ -1,197 +1,197 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: grid;
-  grid-template-columns: 75% 25%;
-  grid-template-rows: 75px 1fr;
-  grid-template-areas:
-    "tabs action_buttons"
-    "table table";
-  margin: 0 30px;
-  body{
-    font-family: Roboto;
-  }
-
-  .tabs {
-    grid-area: tabs;
-    display: flex;
-    align-items: center;
-    gap: 0 10px;
-  }
-  .action_buttons {
-    grid-area: action_buttons;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    gap: 0 10px;
-    & > * {
-      cursor: pointer;
-    }
-  }
-  .table {
-    grid-area: table;
-    background: red;
-    height: 100%;
-    font-family: Raleway;
-    min-height:140px;
-  }
-  
-  .buttons-container{
-    display: flex;
-    flex-direction: column;
-    background: white;
-    width: max-content;
-    padding: 8px;
-    border: 1px solid ${GlobalColors.s3};
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-    border-radius: 3px;
-    position: absolute;
-    top: 0;
-    left: 50px;
-    z-index: 100;
-  }
-
-  .validation-button{
-    width: 30px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    color: black;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 18px;
-    background-color: white;
-    margin-right:5px;
-    img {
-      & + p {
-        margin-left: 7px;
-      }
-    }
-
-    &:hover {
-      border-radius: 10px;
-    }
-  }
-
-  .validation-option {
-    display: flex;
-    width: 82px;
-    height: 20px;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    color: black;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 18px;
-    background-color: white;
-    left: 7px;
-    gap:5px;
-
-    &:hover {
-      border-radius: 10px;
-    }
-
-    & + * {
-      margin-top: 8px;
-    }
-  }
-
-  td{
-    margin:0;
-    background: #ffffff !important;
-  }
-
-  th{
-    border-radius: 0 0 0 0 !important;
-    padding: 15px !important;
-  }
-  
-  textarea {
-    width: 100%;
-    border: 1px solid
-      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
-
-    font-family: ${FontFamily.AvenirNext};
-    color: ${GlobalColors.deep_gray};
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 15px;
-    padding: 10px;
-    outline: none;
-    border-radius: 5px;
-    resize: none;
-
-    &:focus {
-      border: 1px solid ${GlobalColors.magenta_s2};
-    }
-  }
-
-  .general-input {
-    width: 100%;
-    height:27px;
-    max-height:100px;
-  }
-
-  .select-edition-multiple {
-    padding: 5px 10px;
-    border-radius: 5px;
-    gap: 10px;
-    border:1px solid ${GlobalColors.gray_light};
-    border-width: 1px 2px 1px 1px;
-    outline: none;
-    border-image: initial;
-    width: 100%;
-    min-height:27px;
-    cursor: pointer;
-    color: ${GlobalColors.deep_gray};
-    font-size: 12px;
-    line-height: 21px;
-    overflow:hidden; 
-    white-space:nowrap; 
-    text-overflow:ellipsis;
-    :focus{
-      border:1px solid ${GlobalColors.magenta_s2};
-    }
-  }
-
-  .tooltip {
-    position: relative;
-    display: inline-block;
-  }
-  
-  .tooltiptext {
-    visibility: hidden;
-    width: 200px;
-    background-color: #ffffff;
-    color: #000000;
-    text-align: center;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 6!important;
-    bottom: 100%;
-    left: 20%;
-    margin-left: -80px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    box-shadow: 0px 2px 4px 0px #00000040;
-    font-family: Roboto;
-    font-size: 12px;
-    padding: 10px;
-    text-align: justify;
-  }
-  
-
-  
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-  }
-`;
-
-
-
-
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: 75% 25%;
+  grid-template-rows: 75px 1fr;
+  grid-template-areas:
+    "tabs action_buttons"
+    "table table";
+  margin: 0 30px;
+  body{
+    font-family: Roboto;
+  }
+
+  .tabs {
+    grid-area: tabs;
+    display: flex;
+    align-items: center;
+    gap: 0 10px;
+  }
+  .action_buttons {
+    grid-area: action_buttons;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 0 10px;
+    & > * {
+      cursor: pointer;
+    }
+  }
+  .table {
+    grid-area: table;
+    background: red;
+    height: 100%;
+    font-family: Raleway;
+    min-height:140px;
+  }
+  
+  .buttons-container{
+    display: flex;
+    flex-direction: column;
+    background: white;
+    width: max-content;
+    padding: 8px;
+    border: 1px solid ${GlobalColors.s3};
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 3px;
+    position: absolute;
+    top: 0;
+    left: 50px;
+    z-index: 100;
+  }
+
+  .validation-button{
+    width: 30px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    color: black;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    background-color: white;
+    margin-right:5px;
+    img {
+      & + p {
+        margin-left: 7px;
+      }
+    }
+
+    &:hover {
+      border-radius: 10px;
+    }
+  }
+
+  .validation-option {
+    display: flex;
+    width: 82px;
+    height: 20px;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    color: black;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    background-color: white;
+    left: 7px;
+    gap:5px;
+
+    &:hover {
+      border-radius: 10px;
+    }
+
+    & + * {
+      margin-top: 8px;
+    }
+  }
+
+  td{
+    margin:0;
+    background: #ffffff !important;
+  }
+
+  th{
+    border-radius: 0 0 0 0 !important;
+    padding: 15px !important;
+  }
+  
+  textarea {
+    width: 100%;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.deep_gray};
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+    padding: 10px;
+    outline: none;
+    border-radius: 5px;
+    resize: none;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  .general-input {
+    width: 100%;
+    height:27px;
+    max-height:100px;
+  }
+
+  .select-edition-multiple {
+    padding: 5px 10px;
+    border-radius: 5px;
+    gap: 10px;
+    border:1px solid ${GlobalColors.gray_light};
+    border-width: 1px 2px 1px 1px;
+    outline: none;
+    border-image: initial;
+    width: 100%;
+    min-height:27px;
+    cursor: pointer;
+    color: ${GlobalColors.deep_gray};
+    font-size: 12px;
+    line-height: 21px;
+    overflow:hidden; 
+    white-space:nowrap; 
+    text-overflow:ellipsis;
+    :focus{
+      border:1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #ffffff;
+    color: #000000;
+    text-align: center;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 6!important;
+    bottom: 100%;
+    left: 20%;
+    margin-left: -80px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0px 2px 4px 0px #00000040;
+    font-family: Roboto;
+    font-size: 12px;
+    padding: 10px;
+    text-align: justify;
+  }
+  
+
+  
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+
+
+