contentoh-components-library 21.4.77 → 21.4.78

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

@@ -11,8 +11,9 @@ 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 },
-  ]
+    { groupName: 'Impuestos', editing: false },
+    { groupName: 'Legal', editing: false },
+    { groupName: 'Datos Maestros', editing: false },
+  ],
+  token:"eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4ZGIyZjdhZS01ZGFlLTQ3NDAtOGRiYS04YWYzYzQyNmIyOTkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMzc4Mzk0NywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzAzNzg3NTQ3LCJpYXQiOjE3MDM3ODM5NDcsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.kE0DTZhG3QNJCcVACjWQd4nm-QQKRU9n2jHwC9XtNC9H3Xz7T2F80qxcOUkaOU1IwuJLhxThzpJ9rMKS5XgyjSz_SO7nUQZFY4_vLXgmVowaV798kXRpP5uuUVPJ0b07BMjw12_k0QLeOiAfs4gP4micwedD8ItmsxfjJvv6OPir5NX0KgBjgd5OSlCafgH72yZX8SNmiCyzZkQIEO0MNLwEiIm2COgu4MwvFd73CnlJYYQa-WjCnhB35jgoc8gLpFUfBjgpMUSNRZU2Ndzt9CNuQ6he6RwsVmteMgm0e2Fyn_viRhOsMMxbP8wDXnA9pXwZHB2P-DqXYKhC4blsVA"
 }

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

@@ -1,160 +1,323 @@
-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);
+import React, { useState, useEffect, useReducer, useRef } 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 edit from "../../../assets/images/Icons/edit.svg";
+import close from "../../../assets/images/Icons/close.svg";
+import save from "../../../assets/images/Icons/save.svg";
+import { Modal } from "../../organisms/Modal";
+import axios from "axios";
+
+const reducerGroups = (state, action) => {
+  let { values } = state;
+  switch (action.type) {
+    case "init":
+      return { ...state, values: action.payload };
+    case "addGroup":
+      values = [...values, action.group];
+      return { ...state, values };
+    case "updateGroup":
+      values[action.payload.index][action.payload.property] =
+        action.payload.value;
+      return { ...state, values };
+    case "deleteGroup":
+      values = values.map((item) =>
+        item.groupId !== action.payload.id ? item : { ...item, isDeleted: true }
+      );
+      return { ...state, values };
+    default:
+      return state;
+  }
+};
+
+export const EditGroup = ({ token }) => {
+  const [groups, setGroups] = useState([]);
+  const [state, dispatch] = useReducer(reducerGroups, {});
   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 [hoveredIndex, setHoveredIndex] = useState(null);
+  const [isEditingList, setIsEditingList] = useState([]);
+  const [newGroup, setNewGroup] = useState(false);
+  const [currentEditIndex, setCurrentEditIndex] = useState(null);
+  const [inputValue, setInputValue] = useState([]);
   const [modalData, setModalData] = useState({
     show: false,
-    title: 'Actualización completa',
-    message: '',
-    icon: 'success',
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
   });
 
+  const modalRef = useRef();
+
   useEffect(() => {
-    console.log('Se eliminaron datos');
   }, [groups]);
 
-  const handleAddGroup = () => {
-    if (groups.length < 20) {
-      setGroups([...groups, { text: '', editing: true }]);
-      setIsMoreThanTenGroups(groups.length + 1 > 10);
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_GROUPS_ENDPOINT}/get`,
+        {},
+        {
+          headers: {
+            Authorization: sessionStorage.getItem("jwt"),
+          },
+        }
+      );
+
+      const receivedGroups = JSON.parse(response.data.body).groups;
+      const groupsArray = [];
+      receivedGroups.forEach(({ id, name, retailer_id }) => {
+        groupsArray.push({
+          groupId: id,
+          groupName: name || null,
+          retailerId: retailer_id || null,
+        });
+      });
+      setGroups(groupsArray);
+
+      dispatch({ type: "init", payload: groupsArray });
+    } catch (error) {
+      console.error("Error al obtener grupos:", error);
     }
   };
 
-  const handleEditGroup = (index) => {
-    setEditingIndex(index);
-  };
+  const AddGroup = async (index, concatenatedValue) => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_GROUPS_ENDPOINT}/create`,
+        {
+          groupName: concatenatedValue,
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
 
-  const handleDeleteGroup = (index) => {
-    setDeletingIndex(index);
-    const updatedGroups = groups.map((group, i) =>
-      i === index ? { ...group, isDeleted: true } : group
-    );
+      const createdGroup = response.data.body;
+      dispatch({ type: "addGroup", payload: createdGroup });
+      setEditingIndex(null);
+      setInputValue([]);
+      setIsEditingList((prevList) => {
+        const newList = [...prevList];
+        newList[index] = false;
+        return newList;
+      });
+      setCurrentEditIndex(null);
+      loadData();
+    } catch (error) {
+      console.error("Error al agregar grupo:", error);
+    }
+  };
 
-    setGroups(updatedGroups);
-    setDeletedRows((prev) => [...prev, index]);
-    setShowUndoButton(true);
+  const handleUpdateGroup = async (index, groupId, updatedGroupName) => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_GROUPS_ENDPOINT}/update?id=${groupId}&groupName=${updatedGroupName}`,
+       {},
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      const updatedData = response.data.body;
+      dispatch({
+        type: "updateGroup",
+        payload: {
+          index,
+          property: "groupName",
+          value: updatedData.groupName,
+        },
+      });
+      setEditingIndex(null);
+      setInputValue([]);
+      setIsEditingList((prevList) => {
+        const newList = [...prevList];
+        newList[index] = false;
+        return newList;
+      });
+      setCurrentEditIndex(null);
+      loadData();
+    } catch (error) {
+      console.error("Error al actualizar grupo:", error);
+    }
   };
 
-  const handleUndoEdit = (index) => {
-    setDeletingIndex(null);
+  const deleteGroup = async (groupId) => {
+    try {
+      const response = await axios.post(
+        `${process.env.REACT_APP_GROUPS_ENDPOINT}/delete?id=${groupId}`,
+        {},
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      dispatch({
+        type: "deleteGroup",
+        payload: { id: groupId },
+      });
+      loadData();
+    } catch (error) {
+      console.error("Error al borrar grupo:", error);
+    }
+  };
 
-    const updatedGroups = groups.map((group, i) =>
-      i === index ? { ...group, isDeleted: false } : group
-    );
+  const handleEditButtonClick = (index) => {
+    if (isEditingList[index]) {
+      handleSaveChanges(index);
+    } else {
+      setIsEditingList((prevList) => {
+        const newList = [...prevList];
+        newList[index] = true;
+        return newList;
+      });
+      setEditingIndex(index);
+      setInputValue(groups[index].groupName);
+      setNewGroup(groups[index].groupId);
+      setCurrentEditIndex(index);
+    }
+  };
 
-    setGroups(updatedGroups);
-    setDeletedRows((prev) => prev.filter((rowIndex) => rowIndex !== index));
-    setShowUndoButton(false);
+  const handleDeleteButtonClick = async (groupId) => {
+    await deleteGroup(groupId);
   };
 
-  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 }))}
-        />,
-      ],
+  const handleInputChange = (value, index) => {
+    setInputValue((prevInputValue) => prevInputValue + value);
+
+    setGroups((prevGroups) => {
+      const updatedGroups = [...prevGroups];
+      if (index !== undefined) {
+        updatedGroups[index] = { ...updatedGroups[index], groupName: value };
+      }
+      return updatedGroups;
     });
-    console.log('Guardando cambios:', groups);
-    setShowUndoButton(false);
-    setEditingIndex(null);
   };
 
-  const handleInputChange = (index, value) => {
-    const updatedGroups = [...groups];
-    updatedGroups[index].text = value;
-    setGroups(updatedGroups);
+  const handleAddButtonClick = () => {
+    const isAnyGroupEditing = isEditingList.some((editing) => editing);
+    if (!isAnyGroupEditing && groups.length < 20) {
+      setIsEditingList((prevList) => {
+        const newList = [...prevList];
+        newList[groups.length] = true;
+        return newList;
+      });
+      setEditingIndex(groups.length);
+      const nuevoGrupo = {
+        groupName: inputValue,
+        isEditing: true,
+      };
+      setGroups([...groups, nuevoGrupo]);
+      setIsMoreThanTenGroups(groups.length + 1 > 10);
+      setNewGroup(undefined);
+      setCurrentEditIndex(groups.length);
+    }
+  };
+
+  const handleSaveChanges = (index) => {
+    const concatenatedValue = groups[index].groupName;
+    if (newGroup !== undefined) {
+      handleUpdateGroup(index, newGroup, concatenatedValue);
+    } else {
+      AddGroup(index,concatenatedValue);
+    }
   };
 
+  const handleCloseModal = (e) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      setEditingIndex(null);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleCloseModal);
+
+    return () => {
+      document.removeEventListener("mousedown", handleCloseModal);
+    };
+  }, []);
+
   return (
-    <Container>
-       <div className={`contentModal`}>
-        <h2 className="title-edit">Editar grupos</h2>
+    <Container ref={modalRef}>
+      <div className={`contentModal`}>
+        <div className="header">
+          <h2 className="title-edit">Editar grupos</h2>
+          <Button className={`circular-button close-button`} onClick={handleCloseModal(e)}>
+            <img src={close} alt="close icon" />
+          </Button>
+        </div>
         <p className="details-edit">
           Agrega, edita y borra. Luego guarda los cambios.
         </p>
-        <div className={`${isMoreThanTenGroups ? 'table-groups-max' : 'table-groups-edit'}`}>
+        <div
+          className={`${
+            isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"
+          }`}
+        >
           {groups.map((group, index) => (
             <GroupRow
-              key={index}
+              key={group.groupId}
               editing={editingIndex === index}
-              hasText={Boolean(group.text)}
               deleting={deletingIndex === index}
-              onClick={() => handleEditGroup(index)}
-              isDeleted={group.isDeleted}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              className={`group-row ${isEditingList[index] ? "editing" : ""}`}
             >
               <input
                 key={index}
-                className={`input-group ${
-                  group.isDeleted ? 'deleted' : 'original'
-                }`}
-                value={group.text}
-                onChange={(e) => handleInputChange(index, e.target.value)}
+                className={`input-group`}
+                placeholder="Escribe el nombre del grupo"
+                value={index !== undefined ? group.groupName : inputValue}
+                onChange={(e) => handleInputChange(e.target.value, index)}
+                disabled={!isEditingList[index]}
+                autoFocus={isEditingList[index] && editingIndex === index}
               />
-              <Button
-                className="circular-button"
-                onClick={() => {
-                  handleDeleteGroup(index);
-                }}
-                style={{
-                  display:
-                    showUndoButton && deletingIndex === index ? 'none' : 'block',
-                }}
-              >
-                <img src={trash} alt="trash icon" />
-              </Button>
-              {editingIndex === index && (
+              { currentEditIndex === index ? (
                 <Button
-                  className="circular-button"
-                  onClick={() => handleUndoEdit(index)}
-                  style={{
-                    display:
-                      showUndoButton && deletingIndex === index
-                        ? 'block'
-                        : 'none',
-                  }}
+                  className={`circular-button save-button visible`}
+                  onClick={() => handleSaveChanges(index)}
                 >
-                  <img src={undo} alt="undo icon" />
+                  <img src={save} alt="save update icon" />
                 </Button>
+              ) : (
+                <>
+                  <Button
+                    className={`circular-button edit-button ${
+                      hoveredIndex === index ? "visible" : ""
+                    }`}
+                    onClick={() => handleEditButtonClick(index)}
+                  >
+                    <img src={edit} alt="edit icon" />
+                  </Button>
+                  <Button
+                    className={`circular-button delete-button ${
+                      hoveredIndex === index ? "visible" : ""
+                    }`}
+                    onClick={() => handleDeleteButtonClick(group.groupId)}
+                  >
+                    <img src={trash} alt="trash icon" />
+                  </Button>
+                </>
               )}
             </GroupRow>
           ))}
         </div>
         <div className="container-save-add">
-          <Button className="button-add" onClick={() => handleAddGroup()}>
+          <Button className="button-add" onClick={() => handleAddButtonClick()}>
             + Agregar Grupo
           </Button>
-          <ButtonV2
-            key="btn-guardar"
-            type="pink"
-            borderType="oval"
-            label="Guardar"
-            size={12}
-            onClick={() => handleSaveChanges()}
-          />
         </div>
         <Modal
           {...modalData}

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

@@ -1,18 +1,61 @@
-import styled from "styled-components";
+import styled, {keyframes} from "styled-components";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
 export const Container = styled.div`
   width: 100%;
   height: 100%;
   overflow: auto;
   display: grid;
   place-items: center;
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .close-button {
+    min-width: 24px;
+    height: 24px;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease, opacity 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    opacity:0.4;
+    img {
+      width: 10px;
+      height: 10px;
+    }
+
+    &:hover {
+      background-color: ${GlobalColors.blue_light};
+      -webkit-filter: grayscale(0);
+      filter: grayscale(0);
+      opacity:1;
+    }
+  }
   .contentModal {
+    position: absolute;
+    top: 10%;
+    z-index: 20;
     width: fit-content;
     max-width: 80%;
     min-width: 80px;
     height: fit-content;
-    max-height: 90%;
+    max-height: 100%;
     min-height: 120px;
     display: flex;
     flex-direction: column;
@@ -62,6 +105,11 @@ export const Container = styled.div`
     color: ${GlobalColors.magenta_s2};
     text-transform: capitalize;
     border: none;
+    background: transparent;
+    border-radius: 20px;
+    &:hover {
+      background-color: ${GlobalColors.blue_light};
+    }
   }
   .table-groups-edit {
     width: 100%;
@@ -69,11 +117,11 @@ export const Container = styled.div`
     border: 1px solid ${GlobalColors.gray_light};
     border-radius: 5px;
   }
-  .table-groups-max{
+  .table-groups-max {
     min-width: 288px;
     border: 1px solid ${GlobalColors.gray_light};
     border-radius: 5px;
-    display:grid;
+    display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
   .modal-save {
@@ -97,19 +145,63 @@ export const GroupRow = styled.div`
   letter-spacing: 0em;
   text-align: left;
   text-decoration: none;
-  background: ${({ isDeleted }) => (isDeleted ? "#FF7373" : "transparent")};
   border-bottom: 1px solid ${GlobalColors.gray_light};
+  padding: 0 8px 0 0;
   input {
-    background: ${({ isDeleted }) => (isDeleted ? "#FF7373" : "transparent")};
-    color: ${({ isDeleted }) =>
-      isDeleted ? GlobalColors.white : GlobalColors.gray};
-    text-decoration: ${({ isDeleted }) =>
-      isDeleted ? "line-through" : "none"};
+    width:100%;
+    min-width: 215px;
+    background: transparent;
+    color: ${GlobalColors.gray};
     border: 0;
+    font-size: 12px;
+    font-family:${FontFamily.RobotoRegular}, sans-serif;
     padding: 5px 20px;
+    ::placeholder {
+      color: #CBCBCB;
+    }
   }
 
   input:focus {
     border: 0;
   }
+  &.editing {
+    background-color: ${GlobalColors.blue_light}; 
+    color: black;
+    input{
+      color: ${GlobalColors.black};
+    }
+  }
+
+  .save-button,
+  .edit-button,
+  .delete-button {
+    min-width: 24px;
+    height: 24px;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease, opacity 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  
+    img {
+      width: 12px;
+      height: 12px;
+    }
+  
+    &:hover {
+      background-color: ${GlobalColors.blue_light};
+    }
+  }
+  .edit-button,
+  .delete-button {
+    display: none;
+  }
+
+  .visible {
+    display: flex;
+    animation: ${fadeIn} 0.3s ease-in-out forwards;
+  }
 `;