contentoh-components-library 21.4.85 → 21.4.86

package/dist/assets/images/Icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2667 12L6.88333 7.61667C6.55 7.90556 6.16134 8.13056 5.71735 8.29167C5.27336 8.45278 4.80091 8.53333 4.3 8.53333C3.0982 8.53333 2.08108 8.11667 1.24865 7.28333C0.416217 6.45 0 5.44444 0 4.26667C0 3.08889 0.416667 2.08333 1.25 1.25C2.08333 0.416667 3.09167 0 4.275 0C5.45833 0 6.46389 0.416667 7.29167 1.25C8.11944 2.08333 8.53333 3.08972 8.53333 4.26917C8.53333 4.74528 8.45556 5.20556 8.3 5.65C8.14444 6.09444 7.91111 6.51111 7.6 6.9L12 11.2667L11.2667 12ZM4.28333 7.53333C5.18611 7.53333 5.95347 7.21389 6.58542 6.575C7.21736 5.93611 7.53333 5.16667 7.53333 4.26667C7.53333 3.36667 7.21736 2.59722 6.58542 1.95833C5.95347 1.31944 5.18611 1 4.28333 1C3.3713 1 2.59607 1.31944 1.95763 1.95833C1.31921 2.59722 1 3.36667 1 4.26667C1 5.16667 1.31921 5.93611 1.95763 6.575C2.59607 7.21389 3.3713 7.53333 4.28333 7.53333Z" fill="#707070"/>
+</svg>

package/dist/assets/images/Icons/settings.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_801_1360)">
+<path d="M4.62 12L4.32 10.11C4.13 10.04 3.93 9.945 3.72 9.825C3.51 9.705 3.325 9.58 3.165 9.45L1.395 10.26L0 7.8L1.62 6.615C1.6 6.525 1.5875 6.4225 1.5825 6.3075C1.5775 6.1925 1.575 6.09 1.575 6C1.575 5.91 1.5775 5.8075 1.5825 5.6925C1.5875 5.5775 1.6 5.475 1.62 5.385L0 4.2L1.395 1.74L3.165 2.55C3.325 2.42 3.51 2.295 3.72 2.175C3.93 2.055 4.13 1.965 4.32 1.905L4.62 0H7.38L7.68 1.89C7.87 1.96 8.0725 2.0525 8.2875 2.1675C8.5025 2.2825 8.685 2.41 8.835 2.55L10.605 1.74L12 4.2L10.38 5.355C10.4 5.455 10.4125 5.5625 10.4175 5.6775C10.4225 5.7925 10.425 5.9 10.425 6C10.425 6.1 10.4225 6.205 10.4175 6.315C10.4125 6.425 10.4 6.53 10.38 6.63L12 7.8L10.605 10.26L8.835 9.45C8.675 9.58 8.4925 9.7075 8.2875 9.8325C8.0825 9.9575 7.88 10.05 7.68 10.11L7.38 12H4.62ZM5.34 11.1H6.66L6.87 9.42C7.2 9.34 7.5125 9.215 7.8075 9.045C8.1025 8.875 8.37 8.67 8.61 8.43L10.2 9.12L10.8 8.04L9.39 7.005C9.43 6.835 9.4625 6.6675 9.4875 6.5025C9.5125 6.3375 9.525 6.17 9.525 6C9.525 5.83 9.515 5.6625 9.495 5.4975C9.475 5.3325 9.44 5.165 9.39 4.995L10.8 3.96L10.2 2.88L8.61 3.57C8.38 3.31 8.12 3.0925 7.83 2.9175C7.54 2.7425 7.22 2.63 6.87 2.58L6.66 0.9H5.34L5.13 2.58C4.79 2.65 4.4725 2.77 4.1775 2.94C3.8825 3.11 3.62 3.32 3.39 3.57L1.8 2.88L1.2 3.96L2.61 4.995C2.57 5.165 2.5375 5.3325 2.5125 5.4975C2.4875 5.6625 2.475 5.83 2.475 6C2.475 6.17 2.4875 6.3375 2.5125 6.5025C2.5375 6.6675 2.57 6.835 2.61 7.005L1.2 8.04L1.8 9.12L3.39 8.43C3.63 8.67 3.8975 8.875 4.1925 9.045C4.4875 9.215 4.8 9.34 5.13 9.42L5.34 11.1ZM6 7.95C6.54 7.95 7 7.76 7.38 7.38C7.76 7 7.95 6.54 7.95 6C7.95 5.46 7.76 5 7.38 4.62C7 4.24 6.54 4.05 6 4.05C5.46 4.05 5 4.24 4.62 4.62C4.24 5 4.05 5.46 4.05 6C4.05 6.54 4.24 7 4.62 7.38C5 7.76 5.46 7.95 6 7.95Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/components/atoms/Multiselect/Multiselect.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiselectDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/Multiselect",
+  component: _index.Multiselect,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Multiselect, (0, _objectSpread2.default)({}, args));
+};
+
+var MultiselectDefault = Template.bind({});
+exports.MultiselectDefault = MultiselectDefault;
+MultiselectDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg"
+};

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

@@ -0,0 +1,275 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Multiselect = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+
+var _EditGroup = require("../../organisms/EditGroup");
+
+var _search = _interopRequireDefault(require("../../../assets/images/Icons/search.svg"));
+
+var _settings = _interopRequireDefault(require("../../../assets/images/Icons/settings.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+//styles
+//components
+//svg
+var Multiselect = function Multiselect(_ref) {
+  var arrayData = _ref.arrayData,
+      token = _ref.token,
+      showSearchBar = _ref.showSearchBar,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? "Buscar grupo" : _ref$placeHolder,
+      _ref$textButton = _ref.textButton,
+      textButton = _ref$textButton === void 0 ? "Editar grupos" : _ref$textButton;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      userData = _useState2[0],
+      setUserData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      groups = _useState4[0],
+      setGroups = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selectValues = _useState6[0],
+      setSelectValues = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      text = _useState8[0],
+      setText = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isEditGroupVisible = _useState10[0],
+      setIsEditGroupVisible = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(true),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isItemListVisible = _useState12[0],
+      setIsItemListVisible = _useState12[1];
+
+  var onChange = function onChange(evt) {
+    setText(evt.target.value);
+  };
+
+  var handleChange = function handleChange(userId) {
+    return function (event) {
+      var value = event.target.value;
+      var updatedValues = value.filter(function (group) {
+        var groupInfo = groups.find(function (g) {
+          return g.groupName === group;
+        });
+        return groupInfo && groupInfo.userContentGroup === 1;
+      });
+      setSelectValues(function (prevValues) {
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
+      });
+      setIsCheckboxChecked(updatedValues.length > 0);
+    };
+  };
+
+  (0, _react.useEffect)(function () {
+    var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
+
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter(function (option) {
+        return option === null || option === void 0 ? void 0 : option.name.toLowerCase().includes(text.toLocaleLowerCase());
+      });
+    }
+  }, [text]);
+  (0, _react.useEffect)(function () {
+    console.log("userData", userData);
+  }, [userData]);
+  (0, _react.useEffect)(function () {
+    console.log("groups", groups);
+  }, [groups]);
+  var ITEM_HEIGHT = 48;
+  var ITEM_PADDING_TOP = 8;
+  var MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+        display: isItemListVisible ? "block" : "none"
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [arrayData.map(function (user) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: user.idUser
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: user.userName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
+          labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
+          id: "demo-multiple-checkbox-".concat(user.idUser),
+          multiple: true,
+          value: selectValues[user.idUser] || [],
+          onChange: handleChange(user.idUser),
+          input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+            sx: {
+              width: "80%",
+              height: "34px",
+              paddingBottom: "1px solid #F0F0F0"
+            }
+          }),
+          renderValue: function renderValue(selected) {
+            return selected.join(", ");
+          },
+          MenuProps: MenuProps,
+          sx: {
+            width: "80%",
+            height: "24px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            sx: {
+              maxHeight: "34px",
+              paddingLeft: "10px",
+              "& .search-bar-filter": {
+                display: "flex",
+                gap: "10px",
+                input: {
+                  border: "none",
+                  background: "transparent",
+                  "::placeholder": {
+                    fontSize: "12px",
+                    color: "#CBCBCB"
+                  },
+                  ":focus-visible, :hover": {
+                    border: "none",
+                    background: "transparent",
+                    outline: "none"
+                  }
+                },
+                ":focus-visible, :hover": {
+                  background: "transparent"
+                }
+              }
+            },
+            children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "search-bar-filter",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _search.default,
+                alt: "search icon"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "text",
+                placeholder: placeHolder,
+                value: text,
+                onChange: onChange
+              })]
+            })
+          }), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
+            return group.groupId !== "Sin id";
+          }).map(function (group) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+              value: group.groupName,
+              sx: {
+                paddingLeft: "0px",
+                maxHeight: "34px",
+                ":focus-visible, :hover": {
+                  border: "none",
+                  background: "transparent"
+                }
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
+                sx: {
+                  maxHeight: "34px",
+                  "&.Mui-checked": {
+                    color: "#85BC5B"
+                  },
+                  "input, svg": {
+                    maxWidth: "12px",
+                    maxHeight: "12px"
+                  }
+                }
+              }), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+                primary: group.groupName,
+                sx: {
+                  span: {
+                    fontSize: "12px",
+                    color: "#000000"
+                  },
+                  "input, svg": {
+                    maxWidth: "12px",
+                    maxHeight: "12px"
+                  }
+                }
+              })]
+            }, group.groupId);
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            sx: {
+              minHeight: "34px",
+              paddingLeft: "10px",
+              ".btn-edit": {
+                color: "#E33AA9",
+                border: "none",
+                background: "transparent",
+                display: "flex",
+                gap: "10px",
+                alignItems: "center"
+              },
+              ":focus-visible, :hover": {
+                border: "none",
+                background: "transparent"
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              className: "btn-edit",
+              onClick: function onClick() {
+                setIsItemListVisible(false);
+                setIsEditGroupVisible(true);
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _settings.default,
+                className: "icon",
+                alt: "search icon"
+              }), textButton]
+            })
+          })]
+        })]
+      });
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
+      token: token,
+      show: isEditGroupVisible,
+      onClose: function onClose() {
+        setIsEditGroupVisible(false);
+        setIsItemListVisible(true);
+      }
+    })]
+  });
+};
+
+exports.Multiselect = Multiselect;

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

@@ -0,0 +1,18 @@
+"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 _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width:100%;\n    height:auto;\n    .search-bar-filter {\n        display: flex;\n        align-items: center;\n        border: 1px solid #f0f0f0;\n        padding-left: 10px;\n  \n        img {\n          width: 15px;\n          height: 15px;\n        }\n  \n        input {\n          background-color: transparent;\n          padding: 10px 10px;\n          outline: none;\n          border: none;\n        }\n      }\n\n      img.icon{\n        width: 15px;\n          height: 15px;\n      }\n"])));
+
+exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.85",
+  "version": "21.4.86",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/assets/images/Icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2667 12L6.88333 7.61667C6.55 7.90556 6.16134 8.13056 5.71735 8.29167C5.27336 8.45278 4.80091 8.53333 4.3 8.53333C3.0982 8.53333 2.08108 8.11667 1.24865 7.28333C0.416217 6.45 0 5.44444 0 4.26667C0 3.08889 0.416667 2.08333 1.25 1.25C2.08333 0.416667 3.09167 0 4.275 0C5.45833 0 6.46389 0.416667 7.29167 1.25C8.11944 2.08333 8.53333 3.08972 8.53333 4.26917C8.53333 4.74528 8.45556 5.20556 8.3 5.65C8.14444 6.09444 7.91111 6.51111 7.6 6.9L12 11.2667L11.2667 12ZM4.28333 7.53333C5.18611 7.53333 5.95347 7.21389 6.58542 6.575C7.21736 5.93611 7.53333 5.16667 7.53333 4.26667C7.53333 3.36667 7.21736 2.59722 6.58542 1.95833C5.95347 1.31944 5.18611 1 4.28333 1C3.3713 1 2.59607 1.31944 1.95763 1.95833C1.31921 2.59722 1 3.36667 1 4.26667C1 5.16667 1.31921 5.93611 1.95763 6.575C2.59607 7.21389 3.3713 7.53333 4.28333 7.53333Z" fill="#707070"/>
+</svg>

package/src/assets/images/Icons/settings.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_801_1360)">
+<path d="M4.62 12L4.32 10.11C4.13 10.04 3.93 9.945 3.72 9.825C3.51 9.705 3.325 9.58 3.165 9.45L1.395 10.26L0 7.8L1.62 6.615C1.6 6.525 1.5875 6.4225 1.5825 6.3075C1.5775 6.1925 1.575 6.09 1.575 6C1.575 5.91 1.5775 5.8075 1.5825 5.6925C1.5875 5.5775 1.6 5.475 1.62 5.385L0 4.2L1.395 1.74L3.165 2.55C3.325 2.42 3.51 2.295 3.72 2.175C3.93 2.055 4.13 1.965 4.32 1.905L4.62 0H7.38L7.68 1.89C7.87 1.96 8.0725 2.0525 8.2875 2.1675C8.5025 2.2825 8.685 2.41 8.835 2.55L10.605 1.74L12 4.2L10.38 5.355C10.4 5.455 10.4125 5.5625 10.4175 5.6775C10.4225 5.7925 10.425 5.9 10.425 6C10.425 6.1 10.4225 6.205 10.4175 6.315C10.4125 6.425 10.4 6.53 10.38 6.63L12 7.8L10.605 10.26L8.835 9.45C8.675 9.58 8.4925 9.7075 8.2875 9.8325C8.0825 9.9575 7.88 10.05 7.68 10.11L7.38 12H4.62ZM5.34 11.1H6.66L6.87 9.42C7.2 9.34 7.5125 9.215 7.8075 9.045C8.1025 8.875 8.37 8.67 8.61 8.43L10.2 9.12L10.8 8.04L9.39 7.005C9.43 6.835 9.4625 6.6675 9.4875 6.5025C9.5125 6.3375 9.525 6.17 9.525 6C9.525 5.83 9.515 5.6625 9.495 5.4975C9.475 5.3325 9.44 5.165 9.39 4.995L10.8 3.96L10.2 2.88L8.61 3.57C8.38 3.31 8.12 3.0925 7.83 2.9175C7.54 2.7425 7.22 2.63 6.87 2.58L6.66 0.9H5.34L5.13 2.58C4.79 2.65 4.4725 2.77 4.1775 2.94C3.8825 3.11 3.62 3.32 3.39 3.57L1.8 2.88L1.2 3.96L2.61 4.995C2.57 5.165 2.5375 5.3325 2.5125 5.4975C2.4875 5.6625 2.475 5.83 2.475 6C2.475 6.17 2.4875 6.3375 2.5125 6.5025C2.5375 6.6675 2.57 6.835 2.61 7.005L1.2 8.04L1.8 9.12L3.39 8.43C3.63 8.67 3.8975 8.875 4.1925 9.045C4.4875 9.215 4.8 9.34 5.13 9.42L5.34 11.1ZM6 7.95C6.54 7.95 7 7.76 7.38 7.38C7.76 7 7.95 6.54 7.95 6C7.95 5.46 7.76 5 7.38 4.62C7 4.24 6.54 4.05 6 4.05C5.46 4.05 5 4.24 4.62 4.62C4.24 5 4.05 5.46 4.05 6C4.05 6.54 4.24 7 4.62 7.38C5 7.76 5.46 7.95 6 7.95Z" fill="#E33AA9"/>
+</g>
+</svg>

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

@@ -0,0 +1,17 @@
+import { Multiselect } from "./index";
+
+export default {
+  title: "Components/atoms/Multiselect",
+  component: Multiselect,
+  argTypes: {
+   
+  },
+};
+
+const Template = (args) => <Multiselect {...args} />;
+
+export const MultiselectDefault = Template.bind({});
+
+MultiselectDefault.args = {
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
+};

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

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from "react";
+//styles
+import { Container } from "./styles";
+//components
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Checkbox from "@mui/material/Checkbox";
+import ListItemText from "@mui/material/ListItemText";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import { EditGroup } from "../../organisms/EditGroup";
+
+//svg
+import searchIcon from "../../../assets/images/Icons/search.svg";
+import settings from "../../../assets/images/Icons/settings.svg";
+
+export const Multiselect = ({
+  arrayData,
+  token,
+  showSearchBar,
+  placeHolder = "Buscar grupo",
+  textButton = "Editar grupos",
+}) => {
+  const [userData, setUserData] = useState(null);
+  const [groups, setGroups] = useState(null);
+  const [selectValues, setSelectValues] = useState([]);
+  const [text, setText] = useState("");
+  const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
+  const [isItemListVisible, setIsItemListVisible] = useState(true);
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+
+  const handleChange = (userId) => (event) => {
+    const {
+      target: { value },
+    } = event;
+
+    const updatedValues = value.filter((group) => {
+      const groupInfo = groups.find((g) => g.groupName === group);
+      return groupInfo && groupInfo.userContentGroup === 1;
+    });
+
+    setSelectValues((prevValues) => ({
+      ...prevValues,
+      [userId]: updatedValues,
+    }));
+
+    setIsCheckboxChecked(updatedValues.length > 0);
+  };
+
+  useEffect(() => {
+    let filteredArray = groups?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+  }, [text]);
+
+  useEffect(() => {
+    console.log("userData", userData);
+  }, [userData]);
+
+  useEffect(() => {
+    console.log("groups", groups);
+  }, [groups]);
+
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+        display: isItemListVisible ? "block" : "none",
+      },
+    },
+  };
+
+  return (
+    <Container>
+      {arrayData.map((user) => (
+        <>
+          <p>{user.idUser}</p>
+          <p>{user.userName}</p>
+          <Select
+            labelId={`demo-multiple-checkbox-label-${user.idUser}`}
+            id={`demo-multiple-checkbox-${user.idUser}`}
+            multiple
+            value={selectValues[user.idUser] || []}
+            onChange={handleChange(user.idUser)}
+            input={
+              <OutlinedInput
+                sx={{
+                  width: "80%",
+                  height: "34px",
+                  paddingBottom: "1px solid #F0F0F0",
+                }}
+              />
+            }
+            renderValue={(selected) => selected.join(", ")}
+            MenuProps={MenuProps}
+            sx={{ width: "80%", height: "24px" }}
+          >
+            <MenuItem
+              sx={{
+                maxHeight: "34px",
+                paddingLeft: "10px",
+                "& .search-bar-filter": {
+                  display: "flex",
+                  gap: "10px",
+                  input: {
+                    border: "none",
+                    background: "transparent",
+                    "::placeholder": {
+                      fontSize: "12px",
+                      color: "#CBCBCB",
+                    },
+                    ":focus-visible, :hover": {
+                      border: "none",
+                      background: "transparent",
+                      outline: "none",
+                    },
+                  },
+                  ":focus-visible, :hover": {
+                    background: "transparent",
+                  },
+                },
+              }}
+            >
+              {showSearchBar && (
+                <div className="search-bar-filter">
+                  <img src={searchIcon} alt="search icon" />
+                  <input
+                    type="text"
+                    placeholder={placeHolder}
+                    value={text}
+                    onChange={onChange}
+                  />
+                </div>
+              )}
+            </MenuItem>
+            {console.log("usuario", user.idUser, "grupos", user.groups)}
+            {user.groups &&
+              user.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[user.idUser] || []).indexOf(
+                          group.groupName
+                        ) > -1 && group.userContentGroup === 1
+                      }
+                      sx={{
+                        maxHeight: "34px",
+                        "&.Mui-checked": {
+                          color: "#85BC5B",
+                        },
+                        "input, svg": {
+                          maxWidth: "12px",
+                          maxHeight: "12px",
+                        },
+                      }}
+                    />
+                    {console.log("nombre grupo", group.groupName)}
+                    <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": {
+                  color: "#E33AA9",
+                  border: "none",
+                  background: "transparent",
+                  display: "flex",
+                  gap: "10px",
+                  alignItems: "center",
+                },
+                ":focus-visible, :hover": {
+                  border: "none",
+                  background: "transparent",
+                },
+              }}
+            >
+              <button
+                className="btn-edit"
+                onClick={() => {
+                  setIsItemListVisible(false);
+                  setIsEditGroupVisible(true);
+                }}
+              >
+                <img src={settings} className="icon" alt="search icon" />
+                {textButton}
+              </button>
+            </MenuItem>
+          </Select>
+        </>
+      ))}
+      <EditGroup
+        token={token}
+        show={isEditGroupVisible}
+        onClose={() => {
+          setIsEditGroupVisible(false);
+          setIsItemListVisible(true);
+        }}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width:100%;
+    height:auto;
+    .search-bar-filter {
+        display: flex;
+        align-items: center;
+        border: 1px solid #f0f0f0;
+        padding-left: 10px;
+  
+        img {
+          width: 15px;
+          height: 15px;
+        }
+  
+        input {
+          background-color: transparent;
+          padding: 10px 10px;
+          outline: none;
+          border: none;
+        }
+      }
+
+      img.icon{
+        width: 15px;
+          height: 15px;
+      }
+`;