contentoh-components-library 21.4.89 → 21.4.90

package/src/components/atoms/Multiselect/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import axios from "axios";
 //styles
 import { Container } from "./styles";
 //components
@@ -8,6 +9,8 @@ import Checkbox from "@mui/material/Checkbox";
 import ListItemText from "@mui/material/ListItemText";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import { EditGroup } from "../../organisms/EditGroup";
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../ButtonV2";
 
 //svg
 import searchIcon from "../../../assets/images/Icons/search.svg";
@@ -21,20 +24,31 @@ export const Multiselect = ({
   placeHolder = "Buscar grupo",
   textButton = "Editar grupos",
 }) => {
+  const [filters, setFilters] = useState([]);
   const [selectValues, setSelectValues] = useState([]);
   const [text, setText] = useState("");
   const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
   const [isItemListVisible, setIsItemListVisible] = useState(true);
   const currentUser = arrayData.find((user) => user.idUser === userId);
   const { idUser, groups } = currentUser || {};
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [modalData, setModalData] = useState({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
 
   useEffect(() => {
-    const hasUserContentGroup1 = groups.some((group) => group.userContentGroup === 1);
+    const hasUserContentGroup1 = groups.some(
+      (group) => group.userContentGroup === 1
+    );
 
     if (hasUserContentGroup1) {
-      const initialSelectedValues = groups
-        .filter((group) => group.userContentGroup === 1)
-        .map((group) => group.groupName) || [];
+      const initialSelectedValues =
+        groups
+          .filter((group) => group.userContentGroup === 1)
+          .map((group) => group.groupName) || [];
       setSelectValues((prevValues) => ({
         ...prevValues,
         [idUser]: initialSelectedValues,
@@ -45,41 +59,102 @@ export const Multiselect = ({
         [idUser]: ["Sin grupos asignados"],
       }));
     }
+    setFilters(groups ? groups : []);
   }, [idUser, groups]);
 
+  useEffect(() => {
+    if (selectValues[userId]) {
+      setSelectedItems(selectValues[userId]);
+    }
+  }, [selectValues, userId]);
+
   const onChange = (evt) => {
     setText(evt.target.value);
   };
 
-
   const handleChange = (userId) => (event) => {
     const {
       target: { value },
     } = event;
 
-    const updatedValues = value.filter((groupName) => {
+    const updatedValues = value.map((groupName) => {
       const groupInfo = groups.find((g) => g.groupName === groupName);
-      return groupInfo;
-      
+      return groupInfo ? groupInfo.groupName : null;
+    });
+
+    setSelectedItems((prevItems) => {
+      updateGroup(
+        value
+          .map((groupName) => {
+            const groupInfo = groups.find((g) => g.groupName === groupName);
+            return groupInfo ? groupInfo.groupId : null;
+          })
+          .filter((groupId) => groupId !== null)
+      );
+      return updatedValues;
     });
 
     setSelectValues((prevValues) => ({
       ...prevValues,
       [userId]: updatedValues,
     }));
+  };
 
+  //actualiza los grupos seleccionados
+  const updateGroup = async (groupsIds) => {
+    try {
+      const body = {
+        userId,
+        groupsIds,
+      };
+      const response = await axios.post(
+        `${process.env.REACT_APP_USERS_ONBOARDING_ENDPOINT}/update`,
+        body,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+      setModalData({
+        show: true,
+        className: "modal-save",
+        title: "",
+        message: `El cambio de grupo fue aplicado correctamente.`,
+        icon: "successv2",
+        buttons: [
+          <ButtonV2
+            key="btn-Aceptar-guardar"
+            type="pink"
+            label="Aceptar"
+            size={12}
+            onClick={() => {
+              setModalData(false);
+            }}
+          />,
+        ],
+      })
+      console.log("grupo actualizado correctamente", response.data.body);
+      console.log("body", body);
+    } catch (error) {
+      console.error("Error al cambiar grupos de usuarios:", error);
+    }
   };
 
-  useEffect(() => {
-  },[selectValues])
+  useEffect(() => {}, [selectValues]);
 
   useEffect(() => {
     let filteredArray = groups?.slice() || [];
-    if (text.length > 0) {
+    const normalizedText = text.trim().toLowerCase();
+
+    if (normalizedText.length > 0) {
       filteredArray = filteredArray.filter((option) =>
-        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+        option?.groupName?.toLowerCase().includes(normalizedText)
       );
     }
+    setFilters(filteredArray);
+    console.log("text:", normalizedText);
+    console.log("filteredArray:", filteredArray);
   }, [text]);
 
   const ITEM_HEIGHT = 48;
@@ -90,35 +165,41 @@ export const Multiselect = ({
         maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
         width: "auto",
         display: isItemListVisible ? "block" : "none",
-        left:"1013px"
+        left: "1013px",
       },
     },
   };
 
   return (
     <Container>
-       {currentUser && (
-          <Select
-            labelId={`demo-multiple-checkbox-label-${idUser}`}
-            id={`demo-multiple-checkbox-${idUser}`}
-            multiple
-            value={selectValues[idUser] || []}
-            onChange={handleChange(idUser)}
-            input={
-              <OutlinedInput
-                sx={{
-                  width: "80%",
-                  height: "34px",
-                  paddingBottom: "1px solid #F0F0F0",
-                  color:"#707070",
-                  fontSize:"12px"
-                }}
-              />
-            }
-            renderValue={(selected) => selected.join(", ")}
-            MenuProps={MenuProps}
-            sx={{ width: "80%", height: "24px" }}
-          >
+      {currentUser && (
+        <Select
+          labelId={`demo-multiple-checkbox-label-${idUser}`}
+          id={`demo-multiple-checkbox-${idUser}`}
+          multiple
+          value={selectValues[idUser] || []}
+          onChange={handleChange(idUser)}
+          input={
+            <OutlinedInput
+              sx={{
+                width: "80%",
+                height: "34px",
+                paddingBottom: "1px solid #F0F0F0",
+              }}
+            />
+          }
+          renderValue={(selected) => selected.join(", ")}
+          MenuProps={MenuProps}
+          sx={{
+            width: "80%",
+            height: "24px",
+            "& div": {
+              color: "#707070",
+              fontSize: "12px",
+            },
+          }}
+        >
+          {showSearchBar && (
             <MenuItem
               sx={{
                 maxHeight: "34px",
@@ -145,93 +226,91 @@ export const Multiselect = ({
                 },
               }}
             >
-              {showSearchBar && (
-                <div className="search-bar-filter">
-                  <img src={searchIcon} alt="search icon" />
-                  <input
-                    type="text"
-                    placeholder={placeHolder}
-                    value={text}
-                    onChange={onChange}
-                  />
-                </div>
-              )}
+              <div className="search-bar-filter">
+                <img src={searchIcon} alt="search icon" />
+                <input
+                  type="text"
+                  placeholder={placeHolder}
+                  value={text}
+                  onChange={onChange}
+                />
+              </div>
             </MenuItem>
-            {groups &&
-              groups
-                .filter((group) => group.groupId !== "Sin id")
-                .map((group) => (
-                  <MenuItem
-                    key={group.groupId}
-                    value={group.groupName}
+          )}
+          {groups &&
+            groups
+              .filter((group) => group.groupId !== "Sin id")
+              .map((group) => (
+                <MenuItem
+                  key={group.groupId}
+                  value={group.groupName}
+                  sx={{
+                    paddingLeft: "0px",
+                    maxHeight: "34px",
+                    ":focus-visible, :hover": {
+                      border: "none",
+                      background: "transparent",
+                    },
+                  }}
+                >
+                  <Checkbox
+                    checked={
+                      (selectValues[idUser] || []).indexOf(group.groupName) >
+                        -1 && group.userContentGroup === 1
+                    }
                     sx={{
-                      paddingLeft: "0px",
                       maxHeight: "34px",
-                      ":focus-visible, :hover": {
-                        border: "none",
-                        background: "transparent",
+                      "&.Mui-checked": {
+                        color: "#85BC5B",
+                      },
+                      "input, svg": {
+                        maxWidth: "12px",
+                        maxHeight: "12px",
                       },
                     }}
-                  >
-                    <Checkbox
-                      checked={
-                        (selectValues[idUser] || []).indexOf(
-                          group.groupName
-                        ) > -1 && group.userContentGroup === 1
-                      }
-                      sx={{
-                        maxHeight: "34px",
-                        "&.Mui-checked": {
-                          color: "#85BC5B",
-                        },
-                        "input, svg": {
-                          maxWidth: "12px",
-                          maxHeight: "12px",
-                        },
-                      }}
-                    />
-                    <ListItemText
-                      primary={group.groupName}
-                      sx={{
-                        span: { fontSize: "12px", color: "#000000" },
-                        "input, svg": {
-                          maxWidth: "12px",
-                          maxHeight: "12px",
-                        },
-                      }}
-                    />
-                  </MenuItem>
-                ))}
-            <MenuItem
-              sx={{
-                minHeight: "34px",
-                paddingLeft: "10px",
-                ".btn-edit-group": {
-                  color: "#E33AA9",
-                  border: "none",
-                  background: "transparent",
-                  display: "flex",
-                  gap: "10px",
-                  alignItems: "center",
-                },
-                ":focus-visible, :hover": {
-                  border: "none",
-                  background: "transparent",
-                },
+                  />
+                  <ListItemText
+                    primary={group.groupName}
+                    sx={{
+                      span: { fontSize: "12px", color: "#000000" },
+                      "input, svg": {
+                        maxWidth: "12px",
+                        maxHeight: "12px",
+                      },
+                    }}
+                  />
+                </MenuItem>
+              ))}
+          <MenuItem
+            sx={{
+              minHeight: "34px",
+              paddingLeft: "10px",
+              ".btn-edit-group": {
+                color: "#E33AA9",
+                border: "none",
+                background: "transparent",
+                display: "flex",
+                gap: "10px",
+                alignItems: "center",
+              },
+              ":focus-visible, :hover": {
+                border: "none",
+                background: "transparent",
+              },
+            }}
+          >
+            <button
+              className="btn-edit-group"
+              onClick={() => {
+                setIsItemListVisible(false);
+                setIsEditGroupVisible(true);
               }}
             >
-              <button
-                className="btn-edit-group"
-                onClick={() => {
-                  setIsItemListVisible(false);
-                  setIsEditGroupVisible(true);
-                }}
-              >
-                <img src={settings} className="icon" alt="search icon" />
-                {textButton}
-              </button>
-            </MenuItem>
-          </Select>
+              <img src={settings} className="icon" alt="search icon" />
+              {textButton}
+            </button>
+          </MenuItem>
+        </Select>
       )}
       <EditGroup
         token={token}
@@ -241,6 +320,12 @@ export const Multiselect = ({
           setIsItemListVisible(true);
         }}
       />
+       <Modal
+          {...modalData}
+          onClickBtnDefault={() =>
+            setModalData((prev) => ({ ...prev, show: false }))
+          }
+        ></Modal>
     </Container>
   );
 };

package/src/components/atoms/Multiselect/styles.js

@@ -26,4 +26,8 @@ export const Container = styled.div`
         width: 15px;
           height: 15px;
       }
+
+      .modal-save .contentModal {
+        max-width:200px;
+      }
 `;

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

@@ -5,21 +5,6 @@ export default {
   title: "Components/molecules/Phase",
   component: Phase,
   argTypes: {
-    statusType: {
-      options: Object.values(GlobalStatus),
-      control: { type: "select" },
-    },
-    percent: {
-      control: { type: "range", min: 0, max: 100, step: 1 },
-    },
-    backgroundColor: {
-      options: Object.keys(GlobalColors),
-      control: { type: "select" },
-    },
-    priority: {
-      options: ["no priority", "low", "medium", "high"],
-      control: { type: "select" },
-    },
   },
 };
 
@@ -28,10 +13,95 @@ const Template = (args) => <Phase {...args} />;
 export const PhaseDefault = Template.bind({});
 
 PhaseDefault.args = {
-  productName: "Nombre del producto",
-  statusType: "AP",
-  percent: 10,
-  backgroundColor: "s2",
-  priority: "no priority",
-  date: new Date().toLocaleDateString(),
+  id:0,
+ phases:[
+  {
+      "phaseId": 2,
+      "phaseName": "Fase Evaluación",
+      "isInitialPhase": 1,
+      "nextPhaseIfApproved": 3,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 1
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 1
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  },
+  {
+      "phaseId": 3,
+      "phaseName": "Fase comercial",
+      "isInitialPhase": 0,
+      "nextPhaseIfApproved": 4,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 1
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 1
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  },
+  {
+      "phaseId": 4,
+      "phaseName": "Fase legal",
+      "isInitialPhase": 0,
+      "nextPhaseIfApproved": null,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 0
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 0
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  }
+],
+phaseName:"Fase Evaluación",
+nextPhase:3,
+groups: [
+  {
+      "groupId": 1,
+      "groupName": "Preguntas",
+      "groupActive": 1
+  },
+  {
+      "groupId": 8,
+      "groupName": "Inteligencia",
+      "groupActive": 1
+  },
+  {
+      "groupId": 9,
+      "groupName": "Legal",
+      "groupActive": 0
+  }
+]
 };