contentoh-components-library 21.5.3 → 21.5.4

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

@@ -0,0 +1,336 @@
+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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,20 @@
+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"
+}