contentoh-components-library 21.4.85 → 21.4.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/images/Icons/search.svg +3 -0
- package/dist/assets/images/Icons/settings.svg +8 -0
- package/dist/components/atoms/Multiselect/Multiselect.stories.js +31 -0
- package/dist/components/atoms/Multiselect/index.js +269 -0
- package/dist/components/atoms/Multiselect/styles.js +18 -0
- package/dist/components/organisms/EditGroup/index.js +6 -6
- package/dist/components/organisms/EditGroup/styles.js +2 -2
- package/package.json +1 -1
- package/src/assets/images/Icons/search.svg +3 -0
- package/src/assets/images/Icons/settings.svg +8 -0
- package/src/components/atoms/Multiselect/Multiselect.stories.js +17 -0
- package/src/components/atoms/Multiselect/index.js +230 -0
- package/src/components/atoms/Multiselect/styles.js +29 -0
- package/src/components/organisms/EditGroup/index.js +6 -6
- package/src/components/organisms/EditGroup/styles.js +8 -8
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<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"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
|
|
3
|
+
<rect width="12" height="12" fill="#D9D9D9"/>
|
|
4
|
+
</mask>
|
|
5
|
+
<g mask="url(#mask0_801_1360)">
|
|
6
|
+
<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"/>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.MultiselectDefault = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _index = require("./index");
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
title: "Components/atoms/Multiselect",
|
|
18
|
+
component: _index.Multiselect,
|
|
19
|
+
argTypes: {}
|
|
20
|
+
};
|
|
21
|
+
exports.default = _default;
|
|
22
|
+
|
|
23
|
+
var Template = function Template(args) {
|
|
24
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Multiselect, (0, _objectSpread2.default)({}, args));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
var MultiselectDefault = Template.bind({});
|
|
28
|
+
exports.MultiselectDefault = MultiselectDefault;
|
|
29
|
+
MultiselectDefault.args = {
|
|
30
|
+
token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg"
|
|
31
|
+
};
|
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.Multiselect = void 0;
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _styles = require("./styles");
|
|
21
|
+
|
|
22
|
+
var _Select = _interopRequireDefault(require("@mui/material/Select"));
|
|
23
|
+
|
|
24
|
+
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
|
|
25
|
+
|
|
26
|
+
var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
|
|
27
|
+
|
|
28
|
+
var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
|
|
29
|
+
|
|
30
|
+
var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
|
|
31
|
+
|
|
32
|
+
var _EditGroup = require("../../organisms/EditGroup");
|
|
33
|
+
|
|
34
|
+
var _search = _interopRequireDefault(require("../../../assets/images/Icons/search.svg"));
|
|
35
|
+
|
|
36
|
+
var _settings = _interopRequireDefault(require("../../../assets/images/Icons/settings.svg"));
|
|
37
|
+
|
|
38
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
39
|
+
|
|
40
|
+
//styles
|
|
41
|
+
//components
|
|
42
|
+
//svg
|
|
43
|
+
var Multiselect = function Multiselect(_ref) {
|
|
44
|
+
var arrayData = _ref.arrayData,
|
|
45
|
+
token = _ref.token,
|
|
46
|
+
showSearchBar = _ref.showSearchBar,
|
|
47
|
+
_ref$placeHolder = _ref.placeHolder,
|
|
48
|
+
placeHolder = _ref$placeHolder === void 0 ? "Buscar grupo" : _ref$placeHolder,
|
|
49
|
+
_ref$textButton = _ref.textButton,
|
|
50
|
+
textButton = _ref$textButton === void 0 ? "Editar grupos" : _ref$textButton;
|
|
51
|
+
|
|
52
|
+
var _useState = (0, _react.useState)(null),
|
|
53
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
54
|
+
userData = _useState2[0],
|
|
55
|
+
setUserData = _useState2[1];
|
|
56
|
+
|
|
57
|
+
var _useState3 = (0, _react.useState)(null),
|
|
58
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
59
|
+
groups = _useState4[0],
|
|
60
|
+
setGroups = _useState4[1];
|
|
61
|
+
|
|
62
|
+
var _useState5 = (0, _react.useState)([]),
|
|
63
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
64
|
+
selectValues = _useState6[0],
|
|
65
|
+
setSelectValues = _useState6[1];
|
|
66
|
+
|
|
67
|
+
var _useState7 = (0, _react.useState)(""),
|
|
68
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
69
|
+
text = _useState8[0],
|
|
70
|
+
setText = _useState8[1];
|
|
71
|
+
|
|
72
|
+
var _useState9 = (0, _react.useState)(false),
|
|
73
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
74
|
+
isEditGroupVisible = _useState10[0],
|
|
75
|
+
setIsEditGroupVisible = _useState10[1];
|
|
76
|
+
|
|
77
|
+
var _useState11 = (0, _react.useState)(true),
|
|
78
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
79
|
+
isItemListVisible = _useState12[0],
|
|
80
|
+
setIsItemListVisible = _useState12[1];
|
|
81
|
+
|
|
82
|
+
var onChange = function onChange(evt) {
|
|
83
|
+
setText(evt.target.value);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var handleChange = function handleChange(userId) {
|
|
87
|
+
return function (event) {
|
|
88
|
+
var value = event.target.value;
|
|
89
|
+
var updatedValues = value.filter(function (group) {
|
|
90
|
+
var groupInfo = groups.find(function (g) {
|
|
91
|
+
return g.groupName === group;
|
|
92
|
+
});
|
|
93
|
+
return groupInfo && groupInfo.userContentGroup === 1;
|
|
94
|
+
});
|
|
95
|
+
setSelectValues(function (prevValues) {
|
|
96
|
+
return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
|
|
97
|
+
});
|
|
98
|
+
setIsCheckboxChecked(updatedValues.length > 0);
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
(0, _react.useEffect)(function () {
|
|
103
|
+
var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
|
|
104
|
+
|
|
105
|
+
if (text.length > 0) {
|
|
106
|
+
filteredArray = filteredArray.filter(function (option) {
|
|
107
|
+
return option === null || option === void 0 ? void 0 : option.name.toLowerCase().includes(text.toLocaleLowerCase());
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
}, [text]);
|
|
111
|
+
(0, _react.useEffect)(function () {
|
|
112
|
+
console.log("userData", userData);
|
|
113
|
+
}, [userData]);
|
|
114
|
+
(0, _react.useEffect)(function () {
|
|
115
|
+
console.log("groups", groups);
|
|
116
|
+
}, [groups]);
|
|
117
|
+
var ITEM_HEIGHT = 48;
|
|
118
|
+
var ITEM_PADDING_TOP = 8;
|
|
119
|
+
var MenuProps = {
|
|
120
|
+
PaperProps: {
|
|
121
|
+
style: {
|
|
122
|
+
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
123
|
+
width: 250,
|
|
124
|
+
display: isItemListVisible ? "block" : "none"
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
129
|
+
children: [arrayData.map(function (user) {
|
|
130
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
|
|
131
|
+
labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
|
|
132
|
+
id: "demo-multiple-checkbox-".concat(user.idUser),
|
|
133
|
+
multiple: true,
|
|
134
|
+
value: selectValues[user.idUser] || [],
|
|
135
|
+
onChange: handleChange(user.idUser),
|
|
136
|
+
input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
|
|
137
|
+
sx: {
|
|
138
|
+
width: "80%",
|
|
139
|
+
height: "34px",
|
|
140
|
+
paddingBottom: "1px solid #F0F0F0"
|
|
141
|
+
}
|
|
142
|
+
}),
|
|
143
|
+
renderValue: function renderValue(selected) {
|
|
144
|
+
return selected.join(", ");
|
|
145
|
+
},
|
|
146
|
+
MenuProps: MenuProps,
|
|
147
|
+
sx: {
|
|
148
|
+
width: "80%",
|
|
149
|
+
height: "24px"
|
|
150
|
+
},
|
|
151
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
|
|
152
|
+
sx: {
|
|
153
|
+
maxHeight: "34px",
|
|
154
|
+
paddingLeft: "10px",
|
|
155
|
+
"& .search-bar-filter": {
|
|
156
|
+
display: "flex",
|
|
157
|
+
gap: "10px",
|
|
158
|
+
input: {
|
|
159
|
+
border: "none",
|
|
160
|
+
background: "transparent",
|
|
161
|
+
"::placeholder": {
|
|
162
|
+
fontSize: "12px",
|
|
163
|
+
color: "#CBCBCB"
|
|
164
|
+
},
|
|
165
|
+
":focus-visible, :hover": {
|
|
166
|
+
border: "none",
|
|
167
|
+
background: "transparent",
|
|
168
|
+
outline: "none"
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
":focus-visible, :hover": {
|
|
172
|
+
background: "transparent"
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
177
|
+
className: "search-bar-filter",
|
|
178
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
179
|
+
src: _search.default,
|
|
180
|
+
alt: "search icon"
|
|
181
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
182
|
+
type: "text",
|
|
183
|
+
placeholder: placeHolder,
|
|
184
|
+
value: text,
|
|
185
|
+
onChange: onChange
|
|
186
|
+
})]
|
|
187
|
+
})
|
|
188
|
+
}), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
|
|
189
|
+
return group.groupId !== "Sin id";
|
|
190
|
+
}).map(function (group) {
|
|
191
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
|
|
192
|
+
value: group.groupName,
|
|
193
|
+
sx: {
|
|
194
|
+
paddingLeft: "0px",
|
|
195
|
+
maxHeight: "34px",
|
|
196
|
+
":focus-visible, :hover": {
|
|
197
|
+
border: "none",
|
|
198
|
+
background: "transparent"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
|
|
202
|
+
checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
|
|
203
|
+
sx: {
|
|
204
|
+
maxHeight: "34px",
|
|
205
|
+
"&.Mui-checked": {
|
|
206
|
+
color: "#85BC5B"
|
|
207
|
+
},
|
|
208
|
+
"input, svg": {
|
|
209
|
+
maxWidth: "12px",
|
|
210
|
+
maxHeight: "12px"
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
|
|
214
|
+
primary: group.groupName,
|
|
215
|
+
sx: {
|
|
216
|
+
span: {
|
|
217
|
+
fontSize: "12px",
|
|
218
|
+
color: "#000000"
|
|
219
|
+
},
|
|
220
|
+
"input, svg": {
|
|
221
|
+
maxWidth: "12px",
|
|
222
|
+
maxHeight: "12px"
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
})]
|
|
226
|
+
}, group.groupId);
|
|
227
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
|
|
228
|
+
sx: {
|
|
229
|
+
minHeight: "34px",
|
|
230
|
+
paddingLeft: "10px",
|
|
231
|
+
".btn-edit": {
|
|
232
|
+
color: "#E33AA9",
|
|
233
|
+
border: "none",
|
|
234
|
+
background: "transparent",
|
|
235
|
+
display: "flex",
|
|
236
|
+
gap: "10px",
|
|
237
|
+
alignItems: "center"
|
|
238
|
+
},
|
|
239
|
+
":focus-visible, :hover": {
|
|
240
|
+
border: "none",
|
|
241
|
+
background: "transparent"
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
245
|
+
className: "btn-edit",
|
|
246
|
+
onClick: function onClick() {
|
|
247
|
+
setIsItemListVisible(false);
|
|
248
|
+
setIsEditGroupVisible(true);
|
|
249
|
+
},
|
|
250
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
251
|
+
src: _settings.default,
|
|
252
|
+
className: "icon",
|
|
253
|
+
alt: "search icon"
|
|
254
|
+
}), textButton]
|
|
255
|
+
})
|
|
256
|
+
})]
|
|
257
|
+
});
|
|
258
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
|
|
259
|
+
token: token,
|
|
260
|
+
show: isEditGroupVisible,
|
|
261
|
+
onClose: function onClose() {
|
|
262
|
+
setIsEditGroupVisible(false);
|
|
263
|
+
setIsItemListVisible(true);
|
|
264
|
+
}
|
|
265
|
+
})]
|
|
266
|
+
});
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
exports.Multiselect = Multiselect;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Container = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _templateObject;
|
|
15
|
+
|
|
16
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width:250px;\n max-height:34px;\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"])));
|
|
17
|
+
|
|
18
|
+
exports.Container = Container;
|
|
@@ -446,14 +446,14 @@ var EditGroup = function EditGroup(_ref) {
|
|
|
446
446
|
timeout: 400,
|
|
447
447
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
|
|
448
448
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
449
|
-
className: "
|
|
449
|
+
className: "Modal-edit-group",
|
|
450
450
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
451
451
|
className: "header",
|
|
452
452
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
|
|
453
453
|
className: "title-edit",
|
|
454
454
|
children: "Editar grupos"
|
|
455
455
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
|
|
456
|
-
className: "circular-button close-button",
|
|
456
|
+
className: "circular-button close-edit-button",
|
|
457
457
|
onClick: onClose,
|
|
458
458
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
459
459
|
src: _close.default,
|
|
@@ -486,7 +486,7 @@ var EditGroup = function EditGroup(_ref) {
|
|
|
486
486
|
disabled: !isEditingList[index],
|
|
487
487
|
autoFocus: isEditingList[index] && editingIndex === index
|
|
488
488
|
}, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
|
|
489
|
-
className: "circular-button save-button visible",
|
|
489
|
+
className: "circular-button save-group-button visible",
|
|
490
490
|
onClick: function onClick() {
|
|
491
491
|
return handleSaveChanges(index);
|
|
492
492
|
},
|
|
@@ -496,7 +496,7 @@ var EditGroup = function EditGroup(_ref) {
|
|
|
496
496
|
})
|
|
497
497
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
498
498
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
|
|
499
|
-
className: "circular-button edit-button ".concat(hoveredIndex === index ? "visible" : ""),
|
|
499
|
+
className: "circular-button edit-group-button ".concat(hoveredIndex === index ? "visible" : ""),
|
|
500
500
|
onClick: function onClick() {
|
|
501
501
|
return handleEditButtonClick(index);
|
|
502
502
|
},
|
|
@@ -505,7 +505,7 @@ var EditGroup = function EditGroup(_ref) {
|
|
|
505
505
|
alt: "edit icon"
|
|
506
506
|
})
|
|
507
507
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
|
|
508
|
-
className: "circular-button delete-button ".concat(hoveredIndex === index ? "visible" : ""),
|
|
508
|
+
className: "circular-button delete-group-button ".concat(hoveredIndex === index ? "visible" : ""),
|
|
509
509
|
onClick: function onClick() {
|
|
510
510
|
return handleDeleteButtonClick(group.groupId);
|
|
511
511
|
},
|
|
@@ -520,7 +520,7 @@ var EditGroup = function EditGroup(_ref) {
|
|
|
520
520
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
521
521
|
className: "container-save-add",
|
|
522
522
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
|
|
523
|
-
className: "button-add",
|
|
523
|
+
className: "button-group-add",
|
|
524
524
|
onClick: function onClick() {
|
|
525
525
|
return handleAddButtonClick();
|
|
526
526
|
},
|
|
@@ -19,10 +19,10 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
19
19
|
|
|
20
20
|
var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
21
21
|
|
|
22
|
-
var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n .header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n .close-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%);\n opacity:0.4;\n img {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n background-color: ", ";\n -webkit-filter: grayscale(0);\n filter: grayscale(0);\n opacity:1;\n }\n }\n .
|
|
22
|
+
var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n .header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n .close-edit-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%);\n opacity:0.4;\n img {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n background-color: ", ";\n -webkit-filter: grayscale(0);\n filter: grayscale(0);\n opacity:1;\n }\n }\n .Modal-edit-group {\n position: absolute;\n top: 10%;\n z-index: 20;\n width: fit-content;\n max-width: 80%;\n min-width: 80px;\n height: fit-content;\n max-height: 100%;\n min-height: 120px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: white;\n border-radius: 10px;\n border: 1px solid ", ";\n padding: 25px 25px 20px 25px;\n box-shadow: 0px 2px 4px 0px #00000040;\n }\n\n .title-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 17px;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n }\n\n .details-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n margin: 5px 0 10px;\n }\n .container-save-add {\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n .button-group-add {\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n text-transform: capitalize;\n border: none;\n background: transparent;\n border-radius: 20px;\n &:hover {\n background-color: ", ";\n }\n }\n .table-groups-edit {\n width: 100%;\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n }\n .table-groups-max {\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n }\n .modal-save {\n .contentModal {\n width: 25%;\n }\n }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
|
|
23
23
|
|
|
24
24
|
exports.Container = Container;
|
|
25
25
|
|
|
26
|
-
var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 34px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: Roboto;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n text-decoration: none;\n border-bottom: 1px solid ", ";\n padding: 0 8px 0 0;\n input {\n width:100%;\n min-width: 215px;\n background: transparent;\n color: ", ";\n border: 0;\n font-size: 12px;\n font-family:", ", sans-serif;\n padding: 5px 20px;\n ::placeholder {\n color: #CBCBCB;\n }\n }\n\n input:focus {\n border: 0;\n }\n &.editing {\n background-color: ", "; \n color: black;\n input{\n color: ", ";\n }\n }\n\n .save-button,\n .edit-button,\n .delete-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n \n img {\n width: 12px;\n height: 12px;\n }\n \n &:hover {\n background-color: ", ";\n }\n }\n .edit-button,\n .delete-button {\n display: none;\n }\n\n .visible {\n display: flex;\n animation: ", " 0.3s ease-in-out forwards;\n }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
|
|
26
|
+
var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 34px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: Roboto;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n text-decoration: none;\n border-bottom: 1px solid ", ";\n padding: 0 8px 0 0;\n input {\n width:100%;\n min-width: 215px;\n background: transparent;\n color: ", ";\n border: 0;\n font-size: 12px;\n font-family:", ", sans-serif;\n padding: 5px 20px;\n ::placeholder {\n color: #CBCBCB;\n }\n }\n\n input:focus {\n border: 0;\n }\n &.editing {\n background-color: ", "; \n color: black;\n input{\n color: ", ";\n }\n }\n\n .save-group-button,\n .edit-group-button,\n .delete-group-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n \n img {\n width: 12px;\n height: 12px;\n }\n \n &:hover {\n background-color: ", ";\n }\n }\n .edit-group-button,\n .delete-group-button {\n display: none;\n }\n\n .visible {\n display: flex;\n animation: ", " 0.3s ease-in-out forwards;\n }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
|
|
27
27
|
|
|
28
28
|
exports.GroupRow = GroupRow;
|
package/package.json
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<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"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
|
|
3
|
+
<rect width="12" height="12" fill="#D9D9D9"/>
|
|
4
|
+
</mask>
|
|
5
|
+
<g mask="url(#mask0_801_1360)">
|
|
6
|
+
<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"/>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Multiselect } from "./index";
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: "Components/atoms/Multiselect",
|
|
5
|
+
component: Multiselect,
|
|
6
|
+
argTypes: {
|
|
7
|
+
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const Template = (args) => <Multiselect {...args} />;
|
|
12
|
+
|
|
13
|
+
export const MultiselectDefault = Template.bind({});
|
|
14
|
+
|
|
15
|
+
MultiselectDefault.args = {
|
|
16
|
+
token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
|
|
17
|
+
};
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
//styles
|
|
3
|
+
import { Container } from "./styles";
|
|
4
|
+
//components
|
|
5
|
+
import Select from "@mui/material/Select";
|
|
6
|
+
import MenuItem from "@mui/material/MenuItem";
|
|
7
|
+
import Checkbox from "@mui/material/Checkbox";
|
|
8
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
9
|
+
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
10
|
+
import { EditGroup } from "../../organisms/EditGroup";
|
|
11
|
+
|
|
12
|
+
//svg
|
|
13
|
+
import searchIcon from "../../../assets/images/Icons/search.svg";
|
|
14
|
+
import settings from "../../../assets/images/Icons/settings.svg";
|
|
15
|
+
|
|
16
|
+
export const Multiselect = ({
|
|
17
|
+
arrayData,
|
|
18
|
+
token,
|
|
19
|
+
showSearchBar,
|
|
20
|
+
placeHolder = "Buscar grupo",
|
|
21
|
+
textButton = "Editar grupos",
|
|
22
|
+
}) => {
|
|
23
|
+
const [userData, setUserData] = useState(null);
|
|
24
|
+
const [groups, setGroups] = useState(null);
|
|
25
|
+
const [selectValues, setSelectValues] = useState([]);
|
|
26
|
+
const [text, setText] = useState("");
|
|
27
|
+
const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
|
|
28
|
+
const [isItemListVisible, setIsItemListVisible] = useState(true);
|
|
29
|
+
|
|
30
|
+
const onChange = (evt) => {
|
|
31
|
+
setText(evt.target.value);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const handleChange = (userId) => (event) => {
|
|
36
|
+
const {
|
|
37
|
+
target: { value },
|
|
38
|
+
} = event;
|
|
39
|
+
|
|
40
|
+
const updatedValues = value.filter((group) => {
|
|
41
|
+
const groupInfo = groups.find((g) => g.groupName === group);
|
|
42
|
+
return groupInfo && groupInfo.userContentGroup === 1;
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
setSelectValues((prevValues) => ({
|
|
46
|
+
...prevValues,
|
|
47
|
+
[userId]: updatedValues,
|
|
48
|
+
}));
|
|
49
|
+
|
|
50
|
+
setIsCheckboxChecked(updatedValues.length > 0);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
let filteredArray = groups?.slice() || [];
|
|
55
|
+
if (text.length > 0) {
|
|
56
|
+
filteredArray = filteredArray.filter((option) =>
|
|
57
|
+
option?.name.toLowerCase().includes(text.toLocaleLowerCase())
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
}, [text]);
|
|
61
|
+
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
console.log("userData", userData);
|
|
64
|
+
}, [userData]);
|
|
65
|
+
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
console.log("groups", groups);
|
|
68
|
+
}, [groups]);
|
|
69
|
+
|
|
70
|
+
const ITEM_HEIGHT = 48;
|
|
71
|
+
const ITEM_PADDING_TOP = 8;
|
|
72
|
+
const MenuProps = {
|
|
73
|
+
PaperProps: {
|
|
74
|
+
style: {
|
|
75
|
+
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
76
|
+
width: 250,
|
|
77
|
+
display: isItemListVisible ? "block" : "none",
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<Container>
|
|
84
|
+
{arrayData.map((user) => (
|
|
85
|
+
<Select
|
|
86
|
+
labelId={`demo-multiple-checkbox-label-${user.idUser}`}
|
|
87
|
+
id={`demo-multiple-checkbox-${user.idUser}`}
|
|
88
|
+
multiple
|
|
89
|
+
value={selectValues[user.idUser] || []}
|
|
90
|
+
onChange={handleChange(user.idUser)}
|
|
91
|
+
input={
|
|
92
|
+
<OutlinedInput
|
|
93
|
+
sx={{
|
|
94
|
+
width: "80%",
|
|
95
|
+
height: "34px",
|
|
96
|
+
paddingBottom: "1px solid #F0F0F0",
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
}
|
|
100
|
+
renderValue={(selected) => selected.join(", ")}
|
|
101
|
+
MenuProps={MenuProps}
|
|
102
|
+
sx={{ width: "80%", height: "24px" }}
|
|
103
|
+
>
|
|
104
|
+
<MenuItem
|
|
105
|
+
sx={{
|
|
106
|
+
maxHeight: "34px",
|
|
107
|
+
paddingLeft: "10px",
|
|
108
|
+
"& .search-bar-filter": {
|
|
109
|
+
display: "flex",
|
|
110
|
+
gap: "10px",
|
|
111
|
+
input: {
|
|
112
|
+
border: "none",
|
|
113
|
+
background: "transparent",
|
|
114
|
+
"::placeholder": {
|
|
115
|
+
fontSize: "12px",
|
|
116
|
+
color: "#CBCBCB",
|
|
117
|
+
},
|
|
118
|
+
":focus-visible, :hover": {
|
|
119
|
+
border: "none",
|
|
120
|
+
background: "transparent",
|
|
121
|
+
outline: "none",
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
":focus-visible, :hover": {
|
|
125
|
+
background: "transparent",
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
}}
|
|
129
|
+
>
|
|
130
|
+
{showSearchBar && (
|
|
131
|
+
<div className="search-bar-filter">
|
|
132
|
+
<img src={searchIcon} alt="search icon" />
|
|
133
|
+
<input
|
|
134
|
+
type="text"
|
|
135
|
+
placeholder={placeHolder}
|
|
136
|
+
value={text}
|
|
137
|
+
onChange={onChange}
|
|
138
|
+
/>
|
|
139
|
+
</div>
|
|
140
|
+
)}
|
|
141
|
+
</MenuItem>
|
|
142
|
+
{console.log("usuario", user.idUser, "grupos", user.groups)}
|
|
143
|
+
{user.groups &&
|
|
144
|
+
user.groups
|
|
145
|
+
.filter((group) => group.groupId !== "Sin id")
|
|
146
|
+
.map((group) => (
|
|
147
|
+
<MenuItem
|
|
148
|
+
key={group.groupId}
|
|
149
|
+
value={group.groupName}
|
|
150
|
+
sx={{
|
|
151
|
+
paddingLeft: "0px",
|
|
152
|
+
maxHeight: "34px",
|
|
153
|
+
":focus-visible, :hover": {
|
|
154
|
+
border: "none",
|
|
155
|
+
background: "transparent",
|
|
156
|
+
},
|
|
157
|
+
}}
|
|
158
|
+
>
|
|
159
|
+
<Checkbox
|
|
160
|
+
checked={
|
|
161
|
+
(selectValues[user.idUser] || []).indexOf(
|
|
162
|
+
group.groupName
|
|
163
|
+
) > -1 && group.userContentGroup === 1
|
|
164
|
+
}
|
|
165
|
+
sx={{
|
|
166
|
+
maxHeight: "34px",
|
|
167
|
+
"&.Mui-checked": {
|
|
168
|
+
color: "#85BC5B",
|
|
169
|
+
},
|
|
170
|
+
"input, svg": {
|
|
171
|
+
maxWidth: "12px",
|
|
172
|
+
maxHeight: "12px",
|
|
173
|
+
},
|
|
174
|
+
}}
|
|
175
|
+
/>
|
|
176
|
+
{console.log("nombre grupo", group.groupName)}
|
|
177
|
+
<ListItemText
|
|
178
|
+
primary={group.groupName}
|
|
179
|
+
sx={{
|
|
180
|
+
span: { fontSize: "12px", color: "#000000" },
|
|
181
|
+
"input, svg": {
|
|
182
|
+
maxWidth: "12px",
|
|
183
|
+
maxHeight: "12px",
|
|
184
|
+
},
|
|
185
|
+
}}
|
|
186
|
+
/>
|
|
187
|
+
</MenuItem>
|
|
188
|
+
))}
|
|
189
|
+
<MenuItem
|
|
190
|
+
sx={{
|
|
191
|
+
minHeight: "34px",
|
|
192
|
+
paddingLeft: "10px",
|
|
193
|
+
".btn-edit": {
|
|
194
|
+
color: "#E33AA9",
|
|
195
|
+
border: "none",
|
|
196
|
+
background: "transparent",
|
|
197
|
+
display: "flex",
|
|
198
|
+
gap: "10px",
|
|
199
|
+
alignItems: "center",
|
|
200
|
+
},
|
|
201
|
+
":focus-visible, :hover": {
|
|
202
|
+
border: "none",
|
|
203
|
+
background: "transparent",
|
|
204
|
+
},
|
|
205
|
+
}}
|
|
206
|
+
>
|
|
207
|
+
<button
|
|
208
|
+
className="btn-edit"
|
|
209
|
+
onClick={() => {
|
|
210
|
+
setIsItemListVisible(false);
|
|
211
|
+
setIsEditGroupVisible(true);
|
|
212
|
+
}}
|
|
213
|
+
>
|
|
214
|
+
<img src={settings} className="icon" alt="search icon" />
|
|
215
|
+
{textButton}
|
|
216
|
+
</button>
|
|
217
|
+
</MenuItem>
|
|
218
|
+
</Select>
|
|
219
|
+
))}
|
|
220
|
+
<EditGroup
|
|
221
|
+
token={token}
|
|
222
|
+
show={isEditGroupVisible}
|
|
223
|
+
onClose={() => {
|
|
224
|
+
setIsEditGroupVisible(false);
|
|
225
|
+
setIsItemListVisible(true);
|
|
226
|
+
}}
|
|
227
|
+
/>
|
|
228
|
+
</Container>
|
|
229
|
+
);
|
|
230
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const Container = styled.div`
|
|
4
|
+
min-width:250px;
|
|
5
|
+
max-height:34px;
|
|
6
|
+
.search-bar-filter {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
border: 1px solid #f0f0f0;
|
|
10
|
+
padding-left: 10px;
|
|
11
|
+
|
|
12
|
+
img {
|
|
13
|
+
width: 15px;
|
|
14
|
+
height: 15px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
input {
|
|
18
|
+
background-color: transparent;
|
|
19
|
+
padding: 10px 10px;
|
|
20
|
+
outline: none;
|
|
21
|
+
border: none;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
img.icon{
|
|
26
|
+
width: 15px;
|
|
27
|
+
height: 15px;
|
|
28
|
+
}
|
|
29
|
+
`;
|
|
@@ -237,11 +237,11 @@ export const EditGroup = ({ token, show, onClose }) => {
|
|
|
237
237
|
>
|
|
238
238
|
<Fade in={show} timeout={400}>
|
|
239
239
|
<Container>
|
|
240
|
-
<div className=
|
|
240
|
+
<div className="Modal-edit-group">
|
|
241
241
|
<div className="header">
|
|
242
242
|
<h2 className="title-edit">Editar grupos</h2>
|
|
243
243
|
<Button
|
|
244
|
-
className={`circular-button close-button`}
|
|
244
|
+
className={`circular-button close-edit-button`}
|
|
245
245
|
onClick={onClose}
|
|
246
246
|
>
|
|
247
247
|
<img src={close} alt="close icon" />
|
|
@@ -277,7 +277,7 @@ export const EditGroup = ({ token, show, onClose }) => {
|
|
|
277
277
|
/>
|
|
278
278
|
{currentEditIndex === index ? (
|
|
279
279
|
<Button
|
|
280
|
-
className={`circular-button save-button visible`}
|
|
280
|
+
className={`circular-button save-group-button visible`}
|
|
281
281
|
onClick={() => handleSaveChanges(index)}
|
|
282
282
|
>
|
|
283
283
|
<img src={save} alt="save update icon" />
|
|
@@ -285,7 +285,7 @@ export const EditGroup = ({ token, show, onClose }) => {
|
|
|
285
285
|
) : (
|
|
286
286
|
<>
|
|
287
287
|
<Button
|
|
288
|
-
className={`circular-button edit-button ${
|
|
288
|
+
className={`circular-button edit-group-button ${
|
|
289
289
|
hoveredIndex === index ? "visible" : ""
|
|
290
290
|
}`}
|
|
291
291
|
onClick={() => handleEditButtonClick(index)}
|
|
@@ -293,7 +293,7 @@ export const EditGroup = ({ token, show, onClose }) => {
|
|
|
293
293
|
<img src={edit} alt="edit icon" />
|
|
294
294
|
</Button>
|
|
295
295
|
<Button
|
|
296
|
-
className={`circular-button delete-button ${
|
|
296
|
+
className={`circular-button delete-group-button ${
|
|
297
297
|
hoveredIndex === index ? "visible" : ""
|
|
298
298
|
}`}
|
|
299
299
|
onClick={() => handleDeleteButtonClick(group.groupId)}
|
|
@@ -307,7 +307,7 @@ export const EditGroup = ({ token, show, onClose }) => {
|
|
|
307
307
|
</div>
|
|
308
308
|
<div className="container-save-add">
|
|
309
309
|
<Button
|
|
310
|
-
className="button-add"
|
|
310
|
+
className="button-group-add"
|
|
311
311
|
onClick={() => handleAddButtonClick()}
|
|
312
312
|
>
|
|
313
313
|
+ Agregar Grupo
|
|
@@ -21,7 +21,7 @@ export const Container = styled.div`
|
|
|
21
21
|
display: flex;
|
|
22
22
|
justify-content: space-between;
|
|
23
23
|
}
|
|
24
|
-
.close-button {
|
|
24
|
+
.close-edit-button {
|
|
25
25
|
min-width: 24px;
|
|
26
26
|
height: 24px;
|
|
27
27
|
background-color: transparent;
|
|
@@ -47,7 +47,7 @@ export const Container = styled.div`
|
|
|
47
47
|
opacity:1;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
.
|
|
50
|
+
.Modal-edit-group {
|
|
51
51
|
position: absolute;
|
|
52
52
|
top: 10%;
|
|
53
53
|
z-index: 20;
|
|
@@ -95,7 +95,7 @@ export const Container = styled.div`
|
|
|
95
95
|
justify-content: space-between;
|
|
96
96
|
margin-top: 20px;
|
|
97
97
|
}
|
|
98
|
-
.button-add {
|
|
98
|
+
.button-group-add {
|
|
99
99
|
font-family: ${FontFamily.RobotoRegular}, sans-serif;
|
|
100
100
|
font-size: 12px;
|
|
101
101
|
font-weight: 400;
|
|
@@ -172,9 +172,9 @@ export const GroupRow = styled.div`
|
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
.save-button,
|
|
176
|
-
.edit-button,
|
|
177
|
-
.delete-button {
|
|
175
|
+
.save-group-button,
|
|
176
|
+
.edit-group-button,
|
|
177
|
+
.delete-group-button {
|
|
178
178
|
min-width: 24px;
|
|
179
179
|
height: 24px;
|
|
180
180
|
background-color: transparent;
|
|
@@ -195,8 +195,8 @@ export const GroupRow = styled.div`
|
|
|
195
195
|
background-color: ${GlobalColors.blue_light};
|
|
196
196
|
}
|
|
197
197
|
}
|
|
198
|
-
.edit-button,
|
|
199
|
-
.delete-button {
|
|
198
|
+
.edit-group-button,
|
|
199
|
+
.delete-group-button {
|
|
200
200
|
display: none;
|
|
201
201
|
}
|
|
202
202
|
|