contentoh-components-library 21.5.2 → 21.5.3

package/src/components/organisms/DragAndDropPhases/index.js

@@ -1,336 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Container, Header } from "./styles";
-import { Phase } from "../../molecules/Phase";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { Modal } from "../Modal";
-import axios from "axios";
-
-export const DragAndDropPhases = ({ token }) => {
-  const [draggedItem, setDraggedItem] = useState(null);
-  const [listPhases, setListPhases]= useState([]);
-  const [tempListPhases, setTempListPhases] = useState([]); 
-  const [search, setSearch] = useState();
-  const [newPhaseName, setNewPhaseName] = useState("");
-  const [inputValue, setInputValue] = useState("");
-  const [modalData, setModalData] = useState({ 
-    show: false,
-    title: "Actualización completa",
-    message: "",
-    icon: "success",
-  });
-  const newPhaseNameRef = useRef("");
-
-  useEffect(() => loadData(),[]);
-
-  useEffect(() => {
-    setNewPhaseName((prev) => prev + inputValue);
-  }, [inputValue]);
-
-  useEffect(() => {
-    newPhaseNameRef.current = search;
-  }, [newPhaseName]);
-
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
-  };
-  
-
-  const onDragStart = (e, id) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(id);
-  };
-
-  const onDragOver = (index) => {
-    const draggedIdx = tempListPhases.findIndex(
-      (phase) => phase.phaseId === draggedItem
-    );
-    const draggedItemData = tempListPhases[draggedIdx];
-    const targetIdx = index;
-    const newTempListPhases = [...tempListPhases];
-    newTempListPhases.splice(draggedIdx, 1);
-    newTempListPhases.splice(targetIdx, 0, draggedItemData);
-    setTempListPhases(newTempListPhases);
-
-  };
-  
-
-  const onDragEnd = () => {
-    setDraggedItem(null);
-  };
-
-  const updatePhases = async () => {
-    try {
-      const updateData = {
-          updateReferencesOfNodes: listPhases.map((phase) => ({
-            name:phase.phaseName,
-            isInitialPhase: phase.isInitialPhase,
-            phaseId: phase.phaseId,
-            nextPhaseIfApproved: phase.nextPhaseIfApproved,
-          }))
-      };
-
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        updateData,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log("Update response:", response.body.data);
-      loadData();
-    } catch (error) {
-      console.error("Error al actualizar fases", error);
-    }
-  };
-
-  const addPhase = async(search) => {
-    try {
-      const body = {
-        name: search,
-        retailerGroupsIds: [],
-        nextPhaseId: null
-      }
-     const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
-        body,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      const createdPhase = response.data.body;
-      console.log(createdPhase)
-      setSearch();
-      setInputValue("");
-      loadData();
-    } catch (error) {
-      console.error("Error al agregar fase:", error);
-    }
-  }
-
-  const deletePhase = async(id, phases) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
-        {
-          updateReferencesOfNodes:phases,
-          deletePhase:id
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      loadData();
-    } catch (error) {
-      console.error("Error al eliminar fase:", error);
-    } 
-  }
-
-  const handleAddPhaseButton = () => {
-    setModalData({
-      show: true,
-      className:"modal-add-phase",
-      title:"Agregar fase de revisión",
-      buttons: [
-        <ButtonV2
-        key="btn-Cancelar"
-        type="white"
-        label="Cancelar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }))
-        }}
-      />,
-      <ButtonV2
-        key="btn-Guardar"
-        type="pink"
-        label="Guardar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }));
-          handleSavePhase(search);
-        }}
-      />
-      ],
-      customComponent: (
-        <div className="container-input-name">
-          <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
-           <input
-            type="text"
-            className="input-phases"
-            onChange={(e) => {
-              setSearch(e.target.value);
-              handleInputChange(e);
-            }}
-            value={search}
-            placeholder="Nombre de fase"
-          ></input>
-        </div>
-      ),
-    });
-  };
-
-  const handleSavePhase = () => {
-    addPhase(newPhaseNameRef.current);
-    setInputValue("");
-  };
-
-  const loadData = async () => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/get`,
-        {},
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      const phasesData = JSON.parse(response.data.body).data;
-      const phasesDataArray = [];
-  
-      phasesData.forEach(({ phaseId, phaseName, isInitialPhase, nextPhaseIfApproved, groups }) => {
-        const groupsAssigned = groups.map(({ id, name, active }) => ({
-          groupId: id,
-          groupName: name,
-          groupActive: active,
-        }));
-  
-        phasesDataArray.push({
-          phaseId,
-          phaseName,
-          isInitialPhase,
-          nextPhaseIfApproved,
-          groupsAssigned,
-        });
-      });
-      setListPhases(phasesDataArray);
-      setTempListPhases(phasesDataArray);
-    } catch (error) {
-      console.error("Error al obtener fases:", error);
-    } 
-  };
-
-const handleDeletePhase = (id) => {
-  const updatedListPhases = [...listPhases];
-
-  const filteredPhases = updatedListPhases.filter((phase) => phase.phaseId !== id);
-  setListPhases(filteredPhases);
-  setModalData({
-    show: true,
-    className: "modal-delete-phase",
-    message: "Fase eliminada correctamente.",
-    icon: "successv2",
-    buttons: [
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        size={12}
-        onClick={() => {
-          setModalData((prev) => ({ ...prev, show: false }));
-        }}
-      />,
-    ],
-  });
-  deletePhase(id, filteredPhases)
-};
-
-const renderPhase = (phase, idx) => {
-  if (phase.isInitialPhase===1){
-    return (
-      <Phase
-        key={phase.phaseId}
-        id={idx}
-        phaseId={phase.phaseId}
-        phases={listPhases}
-        phaseName={phase.phaseName}
-        nextPhase={phase.nextPhaseIfApproved}
-        groups={phase.groupsAssigned}
-        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
-        token={token}
-        showMenu={false}
-        showButtonChip={false}
-      />
-    );
-  }else{
-    return (
-      <Phase
-        key={phase.phaseId}
-        id={idx}
-        phaseId={phase.phaseId}
-        phases={listPhases}
-        phaseName={phase.phaseName}
-        nextPhase={phase.nextPhaseIfApproved}
-        groups={phase.groupsAssigned}
-        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
-        // onDragStart={(e) => onDragStart(e, idx)}
-        // onDragOver={() => onDragOver(idx)}
-        // onDragEnd={onDragEnd}
-        token={token}
-      />
-    );
-  }
-  
-};
-
-
-  return (
-    <Container>
-      <Header>
-        <button className="button-phase" onClick={handleAddPhaseButton}>
-          Agregar fase de revisión
-        </button>
-        <ButtonV2
-          key="btn-Guardar"
-          className="button-save"
-          type="pink"
-          label="Guardar Cambios"
-          size={12}
-          onClick={() => {
-            setListPhases(tempListPhases)
-            updatePhases();
-            setModalData({
-              show: true,
-              className: "modal-save",
-              message: "Cambios aplicados correctamente.",
-              icon: "successv2",
-              buttons: [
-                <ButtonV2
-                  key="btn-Aceptar"
-                  type="pink"
-                  label="Aceptar"
-                  size={12}
-                  onClick={() => {
-                    setModalData((prev) => ({ ...prev, show: false }));
-                  }}
-                />,
-              ],
-            })
-            loadData();
-          }}
-        ></ButtonV2>
-      </Header>
-      {listPhases.length > 0 ? (
-        <ul>{listPhases.map((phase, idx) => renderPhase(phase, idx))}</ul>
-      ) : (
-        <div className="no-phases-container">
-          <p>Parece que aun no tienes fases disponibles.</p>
-        </div>
-      )}
-      <Modal
-        {...modalData}
-        onClickBtnDefault={() =>
-          setModalData((prev) => ({ ...prev, show: false }))
-        }
-      ></Modal>
-    </Container>
-  );
-};

package/src/components/organisms/DragAndDropPhases/styles.js

@@ -1,107 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-display:flex;
-flex-direction: column;
-gap:20px;
-width:100%;
-ul{
-  display:flex;
-  flex-direction:column;
-  width:100%;
-  gap:10px;
-}
-  .item{
-    display:flex;
-    width:100%;
-  }
-  .drag{
-    width:100%;
-  }
-  .container-input-name{
-    p{
-      font-family: ${FontFamily.RobotoRegular}, sans-serif;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 14px;
-      letter-spacing: 0em;
-      text-align: left;
-      color: ${GlobalColors.gray};
-      margin-bottom:15px;
-    }
-    .input-phases{
-      width:100%;
-      height: 30px;
-      padding: 8px 10px;
-      border-radius: 5px;
-      border: 1px solid ${GlobalColors.gray_light};
-      ::placeholder {
-        font-family: ${FontFamily.RobotoRegular}, sans-serif;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 14px;
-        letter-spacing: 0em;
-        text-align: left;
-        color: #CBCBCB;
-      }
-    }
-  }
-  .modal-add-phase {
-    .contentModal{
-      min-width:310px;
-    }
-    header .label-title{
-      text-align: left;
-    }
-    .container-buttons{
-      justify-content: flex-end;
-    }
-  }
-  .no-phases-container {
-    display: flex;
-    flex-direction:column;
-    gap:10px;
-    align-items: center;
-    border-radius:10px;
-    border:1px solid ${GlobalColors.gray_light};
-    padding:10px 15px;
-    font-family:${FontFamily.Roboto}, sans-serif;
-    font-size:12px;
-  }
-`;
-
-export const Header = styled.div`
-  width:100%;
-  display: flex;
-  justify-content: space-between;
-  margin-top:10px;
-  .button-phase {
-    cursor: pointer;
-    padding: 9px 18px;
-    background-color: #ffffff;
-    border-radius: 30px;
-    font-family: RobotoMedium, sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 14px;
-    border: none;
-    color: #e33aa9;
-    border:1px solid #e33aa9;
-  }
-  .button-save {
-    cursor: pointer;
-    font-family: RobotoMedium, sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    border: none;
-    button{
-      padding: 9px 18px;
-    }
-  }
-  .modal-save{
-    width:20%;
-    background:transparent;
-  }
-`;

package/src/components/organisms/DragPrueba/DragPrueba.stories.js

@@ -1,12 +0,0 @@
-import { DragPrueba } from "./index";
-
-export default {
-  title: "Components/organisms/DragPrueba",
-  component: DragPrueba,
-};
-
-const Template = (args) => <DragPrueba {...args} />;
-
-export const DragPruebaDefault = Template.bind({});
-DragPruebaDefault.args = {
-}

package/src/components/organisms/DragPrueba/index.js

@@ -1,57 +0,0 @@
-import React, { useState } from "react";
-import { Container } from "./styles";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-import { ServiceDataValidator } from "../../molecules/ServiceDataValidator";
-import { Button } from "../../atoms/GeneralButton";
-import { IconInfo } from "@aws-amplify/ui-react";
-
-export const DragPrueba = ({
-
-}) => {
-  const [items, setItems] = useState(["🍰 Cake", "🍩 Donut", "🍎 Apple", "🍕 Pizza"]);
-  const [draggedItem, setDraggedItem] = useState(null);
-
-  const onDragStart = (e, idx) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(items[idx]);
-  };
-
-  const onDragOver = (index) => {
-    if (!draggedItem) {
-      return;
-    }
-    if (draggedItem === items[index]) {
-      return;
-    }
-    let updatedItems = items.filter((item) => item !== draggedItem);
-    updatedItems.splice(index, 0, draggedItem);
-    setItems(updatedItems);
-  };
-
-  const onDragEnd = () => {
-    setDraggedItem(null);
-  };
-
-  return (
-    <Container>
-      <h3>List of items</h3>
-      <ul>
-        {items.map((item, idx) => (
-          <li className="item" key={item} onDragOver={() => onDragOver(idx)}>
-            <div
-              className="drag"
-              draggable
-              onDragStart={(e) => onDragStart(e, idx)}
-              onDragEnd={onDragEnd}
-            >
-              <IconInfo />
-            </div>
-            {item}
-          </li>
-        ))}
-      </ul>
-    </Container>
-  );
-};

package/src/components/organisms/DragPrueba/styles.js

@@ -1,8 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  .item{
-    display:flex;
-  }
-`;

package/src/components/organisms/EditGroup/EditGroup.stories.js

@@ -1,20 +0,0 @@
-import { EditGroup } from "./index";
-
-export default {
-  title: "Components/organisms/EditGroup",
-  component: EditGroup,
-};
-
-const Template = (args) => <EditGroup {...args} />;
-
-
-export const EditGroupDefault = Template.bind({});
-EditGroupDefault.args = {
-  show:true,
-  groups : [
-    { groupName: 'Impuestos', editing: false },
-    { groupName: 'Legal', editing: false },
-    { groupName: 'Datos Maestros', editing: false },
-  ],
-  token:"eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4ZGIyZjdhZS01ZGFlLTQ3NDAtOGRiYS04YWYzYzQyNmIyOTkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMzc4Mzk0NywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzAzNzg3NTQ3LCJpYXQiOjE3MDM3ODM5NDcsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.kE0DTZhG3QNJCcVACjWQd4nm-QQKRU9n2jHwC9XtNC9H3Xz7T2F80qxcOUkaOU1IwuJLhxThzpJ9rMKS5XgyjSz_SO7nUQZFY4_vLXgmVowaV798kXRpP5uuUVPJ0b07BMjw12_k0QLeOiAfs4gP4micwedD8ItmsxfjJvv6OPir5NX0KgBjgd5OSlCafgH72yZX8SNmiCyzZkQIEO0MNLwEiIm2COgu4MwvFd73CnlJYYQa-WjCnhB35jgoc8gLpFUfBjgpMUSNRZU2Ndzt9CNuQ6he6RwsVmteMgm0e2Fyn_viRhOsMMxbP8wDXnA9pXwZHB2P-DqXYKhC4blsVA"
-}