contentoh-components-library 21.4.115 → 21.4.116

package/src/components/molecules/Phase/index.js

@@ -6,15 +6,12 @@ import axios from "axios";
 
 //Componentes
 import { Modal } from "../../organisms/Modal";
-import { TextField } from "@mui/material/TextField";
-import { GroupSelect } from "../../molecules/GroupSelect";
 import { CustomChip } from "../../atoms/CustomChip";
-import { CustomSelect } from "../../molecules/CustomSelect";
 import { ButtonV2 } from "../../atoms/ButtonV2";
 
 //svg
 import options from "../../../assets/images/Icons/options.svg";
-import add from "../../../assets/images/Icons/addv2.svg";
+import { AddGroup } from "../AddGroup";
 
 export const Phase = ({
   key,
@@ -34,6 +31,7 @@ export const Phase = ({
   const [groupsSelected, setGroupsSelected] = useState([]);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [nextPhaseState, setNextPhaseState] = useState("");
+  const [tempChips, setTempChips] = useState([]);
   const open = Boolean(anchorEl);
   const [modalData, setModalData] = useState({
     show: false,
@@ -90,17 +88,13 @@ export const Phase = ({
       const updatedGroups = groups.map((group) =>
         group.groupName === selectedValue ? { ...group, groupActive: 1 } : group
       );
-
-      // Actualizar el estado de chips y groupsSelected
-      setChips((prevChips) => [
+      setTempChips((prevChips) => [
         ...prevChips,
         { id: phaseId, label: selectedValue },
       ]);
-
+  
       setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
       setSelectedValue("");
-
-      console.log("update", updatedGroups);
       loadData();
     }
   };
@@ -120,8 +114,7 @@ export const Phase = ({
           },
         }
       );
-      console.log("response", response.data.body)
-      console.log("grupo agregado correctamente");
+      console.log(response.data.body)
       loadData();
     } catch (error) {
       console.error("Error al agregar grupo a fase:", error);
@@ -144,36 +137,32 @@ export const Phase = ({
           },
         }
       );
-      console.log("response", response.data.body);
-      console.log("grupo agregado correctamente");
+      console.log(response.data.body);
     } catch (error) {
       console.error("Error al actualizar grupo de fase:", error);
     }
   };
 
-  const handleGroupSelect = () => {
-    groupsSelected.forEach((groupId) => {
+  const handleGroupSelect = async () => {
+    for (const groupId of groupsSelected) {
       const matchingGroup = groups.find((group) => group.groupId === groupId);
       if (matchingGroup) {
-        if (!chips.find((chip) => chip.key === matchingGroup.groupId)) {
-          setChips((prevChips) => [
+        if (!tempChips.find((chip) => chip.key === matchingGroup.groupId)) {
+          setTempChips((prevChips) => [
             ...prevChips,
-            { id: matchingGroup.groupId, 
-              label: matchingGroup.groupName },
+            { id: matchingGroup.groupId, label: matchingGroup.groupName },
           ]);
         }
-        addGroup(phaseId,groupsSelected)
+        await addGroup(phaseId, [groupId]); 
       }
-    });
+    }
   };
 
 
   const handleNextPhaseSelect = () => {
     if (selectedValue.length > 0) {
       const Id = selectedValue[0];
-      console.log("phaseId",Id)
       const matchingPhase = phases.find((phase) => phase.phaseId === Id);
-      console.log("matchingPhase",matchingPhase)
       if (matchingPhase) {
         checkAvailablePhase(phaseId, matchingPhase.phaseId);
       }
@@ -229,7 +218,6 @@ export const Phase = ({
     setGroupsSelected((prevGroups) =>
       prevGroups.filter((chip) => chip.id !== chipToRemove.id)
     );
-    console.log("Se elimino el grupo", chipToRemove.id);
     setChips((prevChips) =>
       prevChips.filter((chip) => chip.id !== chipToRemove.id)
     );
@@ -239,7 +227,6 @@ export const Phase = ({
   //eliminar grupo de fase
   const deleteGroup = async (phaseId, groupId) => {
     try {
-      console.log("grupo de fase", { phaseId, groupId });
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
         {
@@ -251,7 +238,6 @@ export const Phase = ({
         {
           headers: {
             Authorization: token,
-            // Authorization: sessionStorage.getItem("jwt"),
           },
         }
       );
@@ -272,7 +258,7 @@ export const Phase = ({
     <Container>
       <div key={key} className="header-phase">
         <h2>
-          Fase {phaseId} - {phaseName}
+          Fase {id} - {phaseName}
         </h2>
         <div className="text-button-container">
           <div className="phase-sel">
@@ -371,26 +357,20 @@ export const Phase = ({
             onDelete={() => handleChipDelete(phaseId, chip)}
           />
         ))}
-
-       {showButtonChip && <GroupSelect
-          options={groups
-            .filter((group) => group.groupActive === 0)
-            .map((group) => ({
-              id: group.groupId,
-              name: group.groupName,
-            }))}
-          showSearchBar
-          isSingleSelect={false}
-          icon={add}
-          placeHolder={"Buscar grupo"}
-          customSelectId={"category-select-" + groups.groupId}
-          defaultOption={"Todos los grupos"}
-          parameterArray={groupsSelected}
-          setParameterArray={setGroupsSelected}
-          onClickItem={() => {
-            handleGroupSelect();
+        {showButtonChip && <AddGroup
+        id={`add-group-select-${phaseId}`}
+        items={groups
+          .filter((group) => group.groupActive === 0)
+          .map((group) => ({
+            value: group.groupId,
+            label: group.groupName,
+          }))}
+          defaultOption="Todos los grupos"
+          placeholder="Buscar grupo"
+          onChange={(selectedItems) => {
+            setGroupsSelected(selectedItems);
           }}
-        />}
+          />}
       </div>
       <Modal
         {...modalData}

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

@@ -4,13 +4,12 @@ import { Phase } from "../../molecules/Phase";
 import { ButtonV2 } from "../../atoms/ButtonV2";
 import { Modal } from "../Modal";
 import axios from "axios";
-import successV2 from "../../../assets/images/Icons/checkv2.svg";
-import { Input } from "@mui/material";
 
-export const DragAndDropPhases = ({ token}) => {
+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({ 
@@ -19,18 +18,22 @@ export const DragAndDropPhases = ({ token}) => {
     message: "",
     icon: "success",
   });
+  const newPhaseNameRef = useRef("");
 
   useEffect(() => loadData(),[]);
 
-  const newPhaseNameRef = useRef("");
+  useEffect(() => {
+    setNewPhaseName((prev) => prev + inputValue);
+  }, [inputValue]);
 
   useEffect(() => {
-    newPhaseNameRef.current = newPhaseName;
+    newPhaseNameRef.current = search;
   }, [newPhaseName]);
 
-  useEffect(() => {
-    setNewPhaseName((prev) => prev + inputValue);
-  }, [inputValue]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  
 
   const onDragStart = (e, id) => {
     e.dataTransfer.effectAllowed = "move";
@@ -59,7 +62,6 @@ export const DragAndDropPhases = ({ token}) => {
 
   const updatePhases = async () => {
     try {
-      console.log("listPhases:", listPhases);
       const updateData = {
           updateReferencesOfNodes: listPhases.map((phase) => ({
             name:phase.phaseName,
@@ -71,7 +73,6 @@ export const DragAndDropPhases = ({ token}) => {
           Authorization: token,
         },
       };
-      console.log("updateData:", updateData);
 
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
@@ -82,24 +83,20 @@ export const DragAndDropPhases = ({ token}) => {
           },
         }
       );
-      console.log("Update response:", response.data);
+      console.log("Update response:", response.body.data);
     } catch (error) {
       console.error("Error al actualizar fases", error);
     }
   };
 
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
-  };
-
-  const addPhase = async(phaseName) => {
+  const addPhase = async(search) => {
     try {
       const body = {
-        name: phaseName,
+        name: search,
         retailerGroupsIds: [],
         nextPhaseId: null
       }
-      const response = await axios.post(
+     const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
         body,
         {
@@ -110,6 +107,7 @@ export const DragAndDropPhases = ({ token}) => {
       );
       const createdPhase = response.data.body;
       console.log(createdPhase)
+      setSearch();
       setInputValue("");
       loadData();
     } catch (error) {
@@ -119,8 +117,6 @@ export const DragAndDropPhases = ({ token}) => {
 
   const deletePhase = async(id, phases) => {
     try {
-      console.log("Lista de fases actualizada",phases);
-      console.log("fase a eliminar", id)
       const response = await axios.post(
         `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
         {
@@ -161,19 +157,23 @@ export const DragAndDropPhases = ({ token}) => {
         size={12}
         onClick={() => {
           setModalData((prev) => ({ ...prev, show: false }));
-          handleSavePhase();
+          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
-            className={`input-phases`}
+           <input
+            type="text"
+            className="input-phases"
+            onChange={(e) => {
+              setSearch(e.target.value);
+              handleInputChange(e);
+            }}
+            value={search}
             placeholder="Nombre de fase"
-            value={inputValue}
-            onChange={(e) => handleInputChange(e)}
-          />
+          ></input>
         </div>
       ),
     });
@@ -192,12 +192,9 @@ export const DragAndDropPhases = ({ token}) => {
         {
           headers: {
             Authorization: token,
-            // Authorization: sessionStorage.getItem("jwt"),
           },
         }
       );
-      
-  
       const phasesData = JSON.parse(response.data.body).data;
       const phasesDataArray = [];
   
@@ -216,8 +213,6 @@ export const DragAndDropPhases = ({ token}) => {
           groupsAssigned,
         });
       });
-  
-      console.table("fases Array", phasesDataArray);
       setListPhases(phasesDataArray);
       setTempListPhases(phasesDataArray);
     } catch (error) {
@@ -250,11 +245,6 @@ const handleDeletePhase = (id) => {
   deletePhase(id, filteredPhases)
 };
 
-// useEffect(() => {
-//   updatePhases(); 
-//   setModalData((prev) => ({ ...prev, show: false }));
-// }, [listPhases]); 
-
 const renderPhase = (phase, idx) => {
   if (phase.isInitialPhase===1){
     return (
@@ -326,6 +316,7 @@ const renderPhase = (phase, idx) => {
                 />,
               ],
             })
+            loadData();
           }}
         ></ButtonV2>
       </Header>

package/dist/components/atoms/GeneralInput/style.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  &.audit-class {\n    input,\n    .quill {\n      border: 1px solid #8a6caa;\n      background-color: #ededfc;\n    }\n  }\n"])), function (_ref) {
-  var isRequired = _ref.isRequired;
-  return isRequired ? "red" : "none";
-}, function (_ref2) {
-  var isRequired = _ref2.isRequired;
-  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, function (_ref3) {
-  var isRequired = _ref3.isRequired;
-  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray);
-
-exports.Container = Container;