contentoh-components-library 21.4.74 → 21.4.77

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

@@ -0,0 +1,236 @@
+import React, { useState, useEffect } 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";
+import {GeneralInputv2} from "../../atoms/GeneralInputv2"; 
+import successV2 from "../../../assets/images/Icons/checkv2.svg";
+
+export const DragAndDropPhases = ({items: initialItems, grupos: initialGroups, token}) => {
+  const [items, setItems] = useState(initialItems);
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [tempItems, setTempItems] = useState(items);
+  const [user, setUser] = useState(JSON.parse(sessionStorage.getItem("user")));
+  const [listPhases, setListPhases]= useState([]);
+  const [newPhaseName, setNewPhaseName] = useState();
+  const [modalData, setModalData] = useState({ 
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
+
+  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 === tempItems[index]) {
+      return;
+    }
+
+    const draggedIndex = tempItems.findIndex((item) => item === draggedItem);
+    let updatedItems = [...tempItems];
+
+    if (draggedIndex > index) {
+      updatedItems[draggedIndex] = tempItems[index];
+      updatedItems[index] = draggedItem;
+    } else {
+      updatedItems.splice(draggedIndex, 1);
+      updatedItems.splice(index, 0, draggedItem);
+    }
+
+    setTempItems(updatedItems);
+  };
+
+  const onDragEnd = () => {
+    setItems(tempItems);
+    setDraggedItem(null);
+  };
+
+  useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
+
+  const handleAddPhase = () => {
+    setModalData({
+      show: true,
+      title:"Agregar fase de revisión",
+      buttons: [
+        <ButtonV2
+        key="btn-Cancelar"
+        type="white"
+        label="Cancelar"
+        size={12}
+        onClick={() => {
+          handleAcceptModal()
+        }}
+      />,
+        <ButtonV2
+          key="btn-Guardar"
+          type="pink"
+          label="Guardar"
+          size={12}
+          onClick={() => {
+            handleAcceptModal()
+          }}
+        />
+      ],
+      customComponent: (
+        <div className="container-input-name">
+          <p>Las fases nuevas siempre se agregan al final.<br/>Puedes ordenar las fases arrastrándolas.</p>
+          <GeneralInputv2
+              inputType={"text"}
+              inputName={"input-phase-name"}
+              inputId={0}
+              inputValue={newPhaseName}
+              inputOnChange={(e) => setNewPhaseName(e.target.value)}
+              inputPlaceholder="Nombre de fase"
+            />
+        </div>
+      ),
+    });
+  };
+
+  const handleAcceptModal = () => {
+    const newPhaseData = {
+      id: listPhases.length + 1,
+      phaseName: newPhaseName, // Utiliza el nuevo nombre de la fase
+      groupsAssigned: [],
+    };
+    setListPhases((prevListPhases) => {
+      const updatedListPhases = [...prevListPhases, newPhaseData];
+      console.log("actualizada", updatedListPhases);
+      return updatedListPhases;
+    });
+    setModalData((prev) => ({ ...prev, show: false }));
+  };
+
+  const getPhases = async () => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_PHASES_ENDPOINT}/get`,
+        {},
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+  
+      // console.log("response", response);
+  
+      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,
+        });
+      });
+  
+      // console.table("fases Array", phasesDataArray);
+      setListPhases(phasesDataArray);
+    } catch (error) {
+      console.error("Error fetching fases:", error);
+    } 
+  };
+
+const handleDeletePhase = (id) => {
+  setListPhases((prevListPhases) =>
+    prevListPhases.filter((phase) => phase.id !== id)
+  );
+  setModalData({
+    show: true,
+    className: "modal-delete",
+    message: "Fase eliminada correctamente.",
+    icon: "successv2",
+    buttons: [
+      <ButtonV2
+        key="btn-Aceptar"
+        type="pink"
+        label="Aceptar"
+        size={12}
+        onClick={() => {
+          setModalData((prev) => ({ ...prev, show: false }));
+        }}
+      />,
+    ],
+  });
+};
+
+
+useEffect(() => getPhases(),[]);
+
+useEffect(() => {
+  // console.log("fases lista", listPhases);
+}, [listPhases]);
+
+const renderPhase = (idx, phase) => {
+  return (
+    <Phase key={idx} id={idx} phases={listPhases} phaseName={phase.phaseName} nextPhase={phase.nextPhaseIfApproved} groups={phase.groupsAssigned} onDeletePhase={handleDeletePhase}/>
+  );
+};
+
+
+  return (
+    <Container>
+      <Header>
+        <button className="button-phase" onClick={handleAddPhase}>
+          Agregar fase de revisión
+        </button>
+        <ButtonV2
+          key="btn-Guardar"
+          className="button-save"
+          type="pink"
+          label="Guardar Cambios"
+          size={12}
+          onClick={() =>
+            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 }));
+                  }}
+                />,
+              ],
+            })
+          }
+        ></ButtonV2>
+      </Header>
+      <ul>
+        {listPhases.map((phase, idx) => renderPhase(idx, phase, handleDeletePhase))}
+      </ul>
+      <Modal
+        {...modalData}
+        onClickBtnDefault={() =>
+          setModalData((prev) => ({ ...prev, show: false }))
+        }
+      ></Modal>
+    </Container>
+  );
+};

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

@@ -0,0 +1,69 @@
+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;
+    }
+  }
+`;
+
+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,18 @@
+import { EditGroup } from "./index";
+
+export default {
+  title: "Components/organisms/EditGroup",
+  component: EditGroup,
+};
+
+const Template = (args) => <EditGroup {...args} />;
+
+
+export const EditGroupDefault = Template.bind({});
+EditGroupDefault.args = {
+  groups : [
+    { text: 'Impuestos', editing: false },
+    { text: 'Legal', editing: false },
+    { text: 'Datos Maestros', editing: false },
+  ]
+}

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

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import { Container } from './styles';
+import { Button } from '@mui/material';
+import { GroupRow } from './styles';
+import { ButtonV2 } from '../../atoms/ButtonV2';
+import trash from '../../../assets/images/Icons/trash.svg';
+import undo from '../../../assets/images/Icons/undo.svg';
+import { Modal } from '../../organisms/Modal';
+
+export const EditGroup = ({ groups: initialGroups }) => {
+  const [groups, setGroups] = useState(initialGroups);
+  const [isMoreThanTenGroups, setIsMoreThanTenGroups] = useState(false);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [deletingIndex, setDeletingIndex] = useState(null);
+  const [showUndoButton, setShowUndoButton] = useState(false);
+  const [deletedRows, setDeletedRows] = useState([]);
+  const [modalData, setModalData] = useState({
+    show: false,
+    title: 'Actualización completa',
+    message: '',
+    icon: 'success',
+  });
+
+  useEffect(() => {
+    console.log('Se eliminaron datos');
+  }, [groups]);
+
+  const handleAddGroup = () => {
+    if (groups.length < 20) {
+      setGroups([...groups, { text: '', editing: true }]);
+      setIsMoreThanTenGroups(groups.length + 1 > 10);
+    }
+  };
+
+  const handleEditGroup = (index) => {
+    setEditingIndex(index);
+  };
+
+  const handleDeleteGroup = (index) => {
+    setDeletingIndex(index);
+    const updatedGroups = groups.map((group, i) =>
+      i === index ? { ...group, isDeleted: true } : group
+    );
+
+    setGroups(updatedGroups);
+    setDeletedRows((prev) => [...prev, index]);
+    setShowUndoButton(true);
+  };
+
+  const handleUndoEdit = (index) => {
+    setDeletingIndex(null);
+
+    const updatedGroups = groups.map((group, i) =>
+      i === index ? { ...group, isDeleted: false } : group
+    );
+
+    setGroups(updatedGroups);
+    setDeletedRows((prev) => prev.filter((rowIndex) => rowIndex !== index));
+    setShowUndoButton(false);
+  };
+
+  const handleSaveChanges = () => {
+    const updatedGroups = groups.filter((group, index) => !deletedRows.includes(index));
+    setGroups(updatedGroups);
+    setModalData({
+      show: true,
+      className: 'modal-save',
+      message:
+        'El cambio de grupo fue aplicado correctamente a los usuarios seleccionados.',
+      icon: 'success',
+      buttons: [
+        <ButtonV2
+          key="btn-Aceptar"
+          type="pink"
+          label="Aceptar"
+          size={12}
+          onClick={() => setModalData((prev) => ({ ...prev, show: false }))}
+        />,
+      ],
+    });
+    console.log('Guardando cambios:', groups);
+    setShowUndoButton(false);
+    setEditingIndex(null);
+  };
+
+  const handleInputChange = (index, value) => {
+    const updatedGroups = [...groups];
+    updatedGroups[index].text = value;
+    setGroups(updatedGroups);
+  };
+
+  return (
+    <Container>
+       <div className={`contentModal`}>
+        <h2 className="title-edit">Editar grupos</h2>
+        <p className="details-edit">
+          Agrega, edita y borra. Luego guarda los cambios.
+        </p>
+        <div className={`${isMoreThanTenGroups ? 'table-groups-max' : 'table-groups-edit'}`}>
+          {groups.map((group, index) => (
+            <GroupRow
+              key={index}
+              editing={editingIndex === index}
+              hasText={Boolean(group.text)}
+              deleting={deletingIndex === index}
+              onClick={() => handleEditGroup(index)}
+              isDeleted={group.isDeleted}
+            >
+              <input
+                key={index}
+                className={`input-group ${
+                  group.isDeleted ? 'deleted' : 'original'
+                }`}
+                value={group.text}
+                onChange={(e) => handleInputChange(index, e.target.value)}
+              />
+              <Button
+                className="circular-button"
+                onClick={() => {
+                  handleDeleteGroup(index);
+                }}
+                style={{
+                  display:
+                    showUndoButton && deletingIndex === index ? 'none' : 'block',
+                }}
+              >
+                <img src={trash} alt="trash icon" />
+              </Button>
+              {editingIndex === index && (
+                <Button
+                  className="circular-button"
+                  onClick={() => handleUndoEdit(index)}
+                  style={{
+                    display:
+                      showUndoButton && deletingIndex === index
+                        ? 'block'
+                        : 'none',
+                  }}
+                >
+                  <img src={undo} alt="undo icon" />
+                </Button>
+              )}
+            </GroupRow>
+          ))}
+        </div>
+        <div className="container-save-add">
+          <Button className="button-add" onClick={() => handleAddGroup()}>
+            + Agregar Grupo
+          </Button>
+          <ButtonV2
+            key="btn-guardar"
+            type="pink"
+            borderType="oval"
+            label="Guardar"
+            size={12}
+            onClick={() => handleSaveChanges()}
+          />
+        </div>
+        <Modal
+          {...modalData}
+          onClickBtnDefault={() =>
+            setModalData((prev) => ({ ...prev, show: false }))
+          }
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: grid;
+  place-items: center;
+  .contentModal {
+    width: fit-content;
+    max-width: 80%;
+    min-width: 80px;
+    height: fit-content;
+    max-height: 90%;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    border-radius: 10px;
+    border: 1px solid ${GlobalColors.gray_light};
+    padding: 25px 25px 20px 25px;
+    box-shadow: 0px 2px 4px 0px #00000040;
+  }
+
+  .title-edit {
+    width: 100%;
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 17px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: ${GlobalColors.black};
+  }
+
+  .details-edit {
+    width: 100%;
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: ${GlobalColors.gray};
+    margin: 5px 0 10px;
+  }
+  .container-save-add {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+  .button-add {
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: ${GlobalColors.magenta_s2};
+    text-transform: capitalize;
+    border: none;
+  }
+  .table-groups-edit {
+    width: 100%;
+    min-width: 288px;
+    border: 1px solid ${GlobalColors.gray_light};
+    border-radius: 5px;
+  }
+  .table-groups-max{
+    min-width: 288px;
+    border: 1px solid ${GlobalColors.gray_light};
+    border-radius: 5px;
+    display:grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .modal-save {
+    .contentModal {
+      width: 25%;
+    }
+  }
+`;
+
+export const GroupRow = styled.div`
+  width: 100%;
+  height: 34px;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: Roboto;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+  letter-spacing: 0em;
+  text-align: left;
+  text-decoration: none;
+  background: ${({ isDeleted }) => (isDeleted ? "#FF7373" : "transparent")};
+  border-bottom: 1px solid ${GlobalColors.gray_light};
+  input {
+    background: ${({ isDeleted }) => (isDeleted ? "#FF7373" : "transparent")};
+    color: ${({ isDeleted }) =>
+      isDeleted ? GlobalColors.white : GlobalColors.gray};
+    text-decoration: ${({ isDeleted }) =>
+      isDeleted ? "line-through" : "none"};
+    border: 0;
+    padding: 5px 20px;
+  }
+
+  input:focus {
+    border: 0;
+  }
+`;