contentoh-components-library 21.4.86 → 21.4.88

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.
Files changed (11) hide show
  1. package/dist/components/atoms/Multiselect/Multiselect.stories.js +168 -1
  2. package/dist/components/atoms/Multiselect/index.js +157 -157
  3. package/dist/components/atoms/Multiselect/styles.js +1 -1
  4. package/dist/components/organisms/EditGroup/index.js +6 -6
  5. package/dist/components/organisms/EditGroup/styles.js +2 -2
  6. package/package.json +1 -1
  7. package/src/components/atoms/Multiselect/Multiselect.stories.js +215 -0
  8. package/src/components/atoms/Multiselect/index.js +36 -31
  9. package/src/components/atoms/Multiselect/styles.js +2 -2
  10. package/src/components/organisms/EditGroup/index.js +6 -6
  11. package/src/components/organisms/EditGroup/styles.js +8 -8
package/dist/components/atoms/Multiselect/Multiselect.stories.js CHANGED
@@ -27,5 +27,172 @@ var Template = function Template(args) {
27
27
  var MultiselectDefault = Template.bind({});
28
28
  exports.MultiselectDefault = MultiselectDefault;
29
29
  MultiselectDefault.args = {
30
- token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg"
30
+ token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
31
+ showSearchBar: true,
32
+ arrayData: [{
33
+ "idUser": 350,
34
+ "userName": "Proveedor Uno",
35
+ "userEmail": "proveedorradioshackuno@allfreemail.net",
36
+ "groups": [{
37
+ "groupId": 8,
38
+ "groupName": "Inteligencia",
39
+ "userContentGroup": 1
40
+ }, {
41
+ "groupId": 1,
42
+ "groupName": "Preguntas",
43
+ "userContentGroup": 0
44
+ }, {
45
+ "groupId": 9,
46
+ "groupName": "Legal",
47
+ "userContentGroup": 0
48
+ }]
49
+ }, {
50
+ "idUser": 351,
51
+ "userName": "Provedor Dos",
52
+ "userEmail": "proveedorradioshackdos@allfreemail.net",
53
+ "groups": [{
54
+ "groupId": "Sin id",
55
+ "groupName": "No tiene grupo asignado",
56
+ "userContentGroup": 0
57
+ }, {
58
+ "groupId": 1,
59
+ "groupName": "Preguntas",
60
+ "userContentGroup": 0
61
+ }, {
62
+ "groupId": 8,
63
+ "groupName": "Inteligencia",
64
+ "userContentGroup": 0
65
+ }, {
66
+ "groupId": 9,
67
+ "groupName": "Legal",
68
+ "userContentGroup": 0
69
+ }]
70
+ }, {
71
+ "idUser": 352,
72
+ "userName": "Radioshack tres",
73
+ "userEmail": "proveedorradioshacktres@allfreemail.net",
74
+ "groups": [{
75
+ "groupId": "Sin id",
76
+ "groupName": "No tiene grupo asignado",
77
+ "userContentGroup": 0
78
+ }, {
79
+ "groupId": 1,
80
+ "groupName": "Preguntas",
81
+ "userContentGroup": 0
82
+ }, {
83
+ "groupId": 8,
84
+ "groupName": "Inteligencia",
85
+ "userContentGroup": 0
86
+ }, {
87
+ "groupId": 9,
88
+ "groupName": "Legal",
89
+ "userContentGroup": 0
90
+ }]
91
+ }, {
92
+ "idUser": 373,
93
+ "userName": "Alexis",
94
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
95
+ "groups": [{
96
+ "groupId": "Sin id",
97
+ "groupName": "No tiene grupo asignado",
98
+ "userContentGroup": 0
99
+ }, {
100
+ "groupId": 1,
101
+ "groupName": "Preguntas",
102
+ "userContentGroup": 0
103
+ }, {
104
+ "groupId": 8,
105
+ "groupName": "Inteligencia",
106
+ "userContentGroup": 0
107
+ }, {
108
+ "groupId": 9,
109
+ "groupName": "Legal",
110
+ "userContentGroup": 0
111
+ }]
112
+ }, {
113
+ "idUser": 374,
114
+ "userName": "Alexis",
115
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
116
+ "groups": [{
117
+ "groupId": "Sin id",
118
+ "groupName": "No tiene grupo asignado",
119
+ "userContentGroup": 0
120
+ }, {
121
+ "groupId": 1,
122
+ "groupName": "Preguntas",
123
+ "userContentGroup": 0
124
+ }, {
125
+ "groupId": 8,
126
+ "groupName": "Inteligencia",
127
+ "userContentGroup": 0
128
+ }, {
129
+ "groupId": 9,
130
+ "groupName": "Legal",
131
+ "userContentGroup": 0
132
+ }]
133
+ }, {
134
+ "idUser": 375,
135
+ "userName": "Alexis",
136
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
137
+ "groups": [{
138
+ "groupId": "Sin id",
139
+ "groupName": "No tiene grupo asignado",
140
+ "userContentGroup": 0
141
+ }, {
142
+ "groupId": 1,
143
+ "groupName": "Preguntas",
144
+ "userContentGroup": 0
145
+ }, {
146
+ "groupId": 8,
147
+ "groupName": "Inteligencia",
148
+ "userContentGroup": 0
149
+ }, {
150
+ "groupId": 9,
151
+ "groupName": "Legal",
152
+ "userContentGroup": 0
153
+ }]
154
+ }, {
155
+ "idUser": 376,
156
+ "userName": "Alexis refactor",
157
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
158
+ "groups": [{
159
+ "groupId": "Sin id",
160
+ "groupName": "No tiene grupo asignado",
161
+ "userContentGroup": 0
162
+ }, {
163
+ "groupId": 1,
164
+ "groupName": "Preguntas",
165
+ "userContentGroup": 0
166
+ }, {
167
+ "groupId": 8,
168
+ "groupName": "Inteligencia",
169
+ "userContentGroup": 0
170
+ }, {
171
+ "groupId": 9,
172
+ "groupName": "Legal",
173
+ "userContentGroup": 0
174
+ }]
175
+ }, {
176
+ "idUser": 377,
177
+ "userName": "",
178
+ "userEmail": "originalradioshack@allfreemail.net",
179
+ "groups": [{
180
+ "groupId": "Sin id",
181
+ "groupName": "No tiene grupo asignado",
182
+ "userContentGroup": 0
183
+ }, {
184
+ "groupId": 1,
185
+ "groupName": "Preguntas",
186
+ "userContentGroup": 0
187
+ }, {
188
+ "groupId": 8,
189
+ "groupName": "Inteligencia",
190
+ "userContentGroup": 0
191
+ }, {
192
+ "groupId": 9,
193
+ "groupName": "Legal",
194
+ "userContentGroup": 0
195
+ }]
196
+ }],
197
+ userId: 350
31
198
  };
package/dist/components/atoms/Multiselect/index.js CHANGED
@@ -11,7 +11,7 @@ exports.Multiselect = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
13
13
 
14
- var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
14
+ var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
15
15
 
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
17
17
 
@@ -42,6 +42,7 @@ var _jsxRuntime = require("react/jsx-runtime");
42
42
  //svg
43
43
  var Multiselect = function Multiselect(_ref) {
44
44
  var arrayData = _ref.arrayData,
45
+ userId = _ref.userId,
45
46
  token = _ref.token,
46
47
  showSearchBar = _ref.showSearchBar,
47
48
  _ref$placeHolder = _ref.placeHolder,
@@ -49,35 +50,44 @@ var Multiselect = function Multiselect(_ref) {
49
50
  _ref$textButton = _ref.textButton,
50
51
  textButton = _ref$textButton === void 0 ? "Editar grupos" : _ref$textButton;
51
52
 
52
- var _useState = (0, _react.useState)(null),
53
+ var _useState = (0, _react.useState)([]),
53
54
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
54
- userData = _useState2[0],
55
- setUserData = _useState2[1];
55
+ selectValues = _useState2[0],
56
+ setSelectValues = _useState2[1];
56
57
 
57
- var _useState3 = (0, _react.useState)(null),
58
+ var _useState3 = (0, _react.useState)(""),
58
59
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
59
- groups = _useState4[0],
60
- setGroups = _useState4[1];
60
+ text = _useState4[0],
61
+ setText = _useState4[1];
61
62
 
62
- var _useState5 = (0, _react.useState)([]),
63
+ var _useState5 = (0, _react.useState)(false),
63
64
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
64
- selectValues = _useState6[0],
65
- setSelectValues = _useState6[1];
65
+ isEditGroupVisible = _useState6[0],
66
+ setIsEditGroupVisible = _useState6[1];
66
67
 
67
- var _useState7 = (0, _react.useState)(""),
68
+ var _useState7 = (0, _react.useState)(true),
68
69
  _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
69
- text = _useState8[0],
70
- setText = _useState8[1];
70
+ isItemListVisible = _useState8[0],
71
+ setIsItemListVisible = _useState8[1];
71
72
 
72
- var _useState9 = (0, _react.useState)(false),
73
- _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
74
- isEditGroupVisible = _useState10[0],
75
- setIsEditGroupVisible = _useState10[1];
73
+ var currentUser = arrayData.find(function (user) {
74
+ return user.idUser === userId;
75
+ });
76
+
77
+ var _ref2 = currentUser || {},
78
+ idUser = _ref2.idUser,
79
+ groups = _ref2.groups;
76
80
 
77
- var _useState11 = (0, _react.useState)(true),
78
- _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
79
- isItemListVisible = _useState12[0],
80
- setIsItemListVisible = _useState12[1];
81
+ (0, _react.useEffect)(function () {
82
+ var initialSelectedValues = (groups === null || groups === void 0 ? void 0 : groups.filter(function (group) {
83
+ return group.userContentGroup === 1;
84
+ }).map(function (group) {
85
+ return group.groupName;
86
+ })) || [];
87
+ setSelectValues(function (prevValues) {
88
+ return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, idUser, initialSelectedValues));
89
+ });
90
+ }, [idUser, groups]);
81
91
 
82
92
  var onChange = function onChange(evt) {
83
93
  setText(evt.target.value);
@@ -86,19 +96,23 @@ var Multiselect = function Multiselect(_ref) {
86
96
  var handleChange = function handleChange(userId) {
87
97
  return function (event) {
88
98
  var value = event.target.value;
89
- var updatedValues = value.filter(function (group) {
99
+ var updatedValues = value.filter(function (groupName) {
90
100
  var groupInfo = groups.find(function (g) {
91
- return g.groupName === group;
101
+ return g.groupName === groupName;
92
102
  });
93
- return groupInfo && groupInfo.userContentGroup === 1;
103
+ console.log("groupInfo", groupInfo);
104
+ return groupInfo;
94
105
  });
106
+ console.log("selectValues", updatedValues);
95
107
  setSelectValues(function (prevValues) {
96
- return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
108
+ return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
97
109
  });
98
- setIsCheckboxChecked(updatedValues.length > 0);
99
110
  };
100
111
  };
101
112
 
113
+ (0, _react.useEffect)(function () {
114
+ console.log(selectValues);
115
+ }, [selectValues]);
102
116
  (0, _react.useEffect)(function () {
103
117
  var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
104
118
 
@@ -108,12 +122,6 @@ var Multiselect = function Multiselect(_ref) {
108
122
  });
109
123
  }
110
124
  }, [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
125
  var ITEM_HEIGHT = 48;
118
126
  var ITEM_PADDING_TOP = 8;
119
127
  var MenuProps = {
@@ -126,141 +134,133 @@ var Multiselect = function Multiselect(_ref) {
126
134
  }
127
135
  };
128
136
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
129
- children: [arrayData.map(function (user) {
130
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
131
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
132
- children: user.idUser
133
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
134
- children: user.userName
135
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
136
- labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
137
- id: "demo-multiple-checkbox-".concat(user.idUser),
138
- multiple: true,
139
- value: selectValues[user.idUser] || [],
140
- onChange: handleChange(user.idUser),
141
- input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
142
- sx: {
143
- width: "80%",
144
- height: "34px",
145
- paddingBottom: "1px solid #F0F0F0"
137
+ children: [currentUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
138
+ labelId: "demo-multiple-checkbox-label-".concat(idUser),
139
+ id: "demo-multiple-checkbox-".concat(idUser),
140
+ multiple: true,
141
+ value: selectValues[idUser] || [],
142
+ onChange: handleChange(idUser),
143
+ input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
144
+ sx: {
145
+ width: "80%",
146
+ height: "34px",
147
+ paddingBottom: "1px solid #F0F0F0"
148
+ }
149
+ }),
150
+ renderValue: function renderValue(selected) {
151
+ return selected.join(", ");
152
+ },
153
+ MenuProps: MenuProps,
154
+ sx: {
155
+ width: "80%",
156
+ height: "24px"
157
+ },
158
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
159
+ sx: {
160
+ maxHeight: "34px",
161
+ paddingLeft: "10px",
162
+ "& .search-bar-filter": {
163
+ display: "flex",
164
+ gap: "10px",
165
+ input: {
166
+ border: "none",
167
+ background: "transparent",
168
+ "::placeholder": {
169
+ fontSize: "12px",
170
+ color: "#CBCBCB"
171
+ },
172
+ ":focus-visible, :hover": {
173
+ border: "none",
174
+ background: "transparent",
175
+ outline: "none"
176
+ }
177
+ },
178
+ ":focus-visible, :hover": {
179
+ background: "transparent"
146
180
  }
147
- }),
148
- renderValue: function renderValue(selected) {
149
- return selected.join(", ");
150
- },
151
- MenuProps: MenuProps,
181
+ }
182
+ },
183
+ children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
184
+ className: "search-bar-filter",
185
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
186
+ src: _search.default,
187
+ alt: "search icon"
188
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
189
+ type: "text",
190
+ placeholder: placeHolder,
191
+ value: text,
192
+ onChange: onChange
193
+ })]
194
+ })
195
+ }), console.log("usuario", idUser, "grupos", groups), groups && groups.filter(function (group) {
196
+ return group.groupId !== "Sin id";
197
+ }).map(function (group) {
198
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
199
+ value: group.groupName,
152
200
  sx: {
153
- width: "80%",
154
- height: "24px"
201
+ paddingLeft: "0px",
202
+ maxHeight: "34px",
203
+ ":focus-visible, :hover": {
204
+ border: "none",
205
+ background: "transparent"
206
+ }
155
207
  },
156
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
208
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
209
+ checked: (selectValues[idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
157
210
  sx: {
158
211
  maxHeight: "34px",
159
- paddingLeft: "10px",
160
- "& .search-bar-filter": {
161
- display: "flex",
162
- gap: "10px",
163
- input: {
164
- border: "none",
165
- background: "transparent",
166
- "::placeholder": {
167
- fontSize: "12px",
168
- color: "#CBCBCB"
169
- },
170
- ":focus-visible, :hover": {
171
- border: "none",
172
- background: "transparent",
173
- outline: "none"
174
- }
175
- },
176
- ":focus-visible, :hover": {
177
- background: "transparent"
178
- }
179
- }
180
- },
181
- children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
182
- className: "search-bar-filter",
183
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
184
- src: _search.default,
185
- alt: "search icon"
186
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
187
- type: "text",
188
- placeholder: placeHolder,
189
- value: text,
190
- onChange: onChange
191
- })]
192
- })
193
- }), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
194
- return group.groupId !== "Sin id";
195
- }).map(function (group) {
196
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
197
- value: group.groupName,
198
- sx: {
199
- paddingLeft: "0px",
200
- maxHeight: "34px",
201
- ":focus-visible, :hover": {
202
- border: "none",
203
- background: "transparent"
204
- }
212
+ "&.Mui-checked": {
213
+ color: "#85BC5B"
205
214
  },
206
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
207
- checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
208
- sx: {
209
- maxHeight: "34px",
210
- "&.Mui-checked": {
211
- color: "#85BC5B"
212
- },
213
- "input, svg": {
214
- maxWidth: "12px",
215
- maxHeight: "12px"
216
- }
217
- }
218
- }), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
219
- primary: group.groupName,
220
- sx: {
221
- span: {
222
- fontSize: "12px",
223
- color: "#000000"
224
- },
225
- "input, svg": {
226
- maxWidth: "12px",
227
- maxHeight: "12px"
228
- }
229
- }
230
- })]
231
- }, group.groupId);
232
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
215
+ "input, svg": {
216
+ maxWidth: "12px",
217
+ maxHeight: "12px"
218
+ }
219
+ }
220
+ }), console.log("userContent", group.userContentGroup), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
221
+ primary: group.groupName,
233
222
  sx: {
234
- minHeight: "34px",
235
- paddingLeft: "10px",
236
- ".btn-edit": {
237
- color: "#E33AA9",
238
- border: "none",
239
- background: "transparent",
240
- display: "flex",
241
- gap: "10px",
242
- alignItems: "center"
223
+ span: {
224
+ fontSize: "12px",
225
+ color: "#000000"
243
226
  },
244
- ":focus-visible, :hover": {
245
- border: "none",
246
- background: "transparent"
227
+ "input, svg": {
228
+ maxWidth: "12px",
229
+ maxHeight: "12px"
247
230
  }
248
- },
249
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
250
- className: "btn-edit",
251
- onClick: function onClick() {
252
- setIsItemListVisible(false);
253
- setIsEditGroupVisible(true);
254
- },
255
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
256
- src: _settings.default,
257
- className: "icon",
258
- alt: "search icon"
259
- }), textButton]
260
- })
231
+ }
261
232
  })]
262
- })]
263
- });
233
+ }, group.groupId);
234
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
235
+ sx: {
236
+ minHeight: "34px",
237
+ paddingLeft: "10px",
238
+ ".btn-edit-group": {
239
+ color: "#E33AA9",
240
+ border: "none",
241
+ background: "transparent",
242
+ display: "flex",
243
+ gap: "10px",
244
+ alignItems: "center"
245
+ },
246
+ ":focus-visible, :hover": {
247
+ border: "none",
248
+ background: "transparent"
249
+ }
250
+ },
251
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
252
+ className: "btn-edit-group",
253
+ onClick: function onClick() {
254
+ setIsItemListVisible(false);
255
+ setIsEditGroupVisible(true);
256
+ },
257
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
258
+ src: _settings.default,
259
+ className: "icon",
260
+ alt: "search icon"
261
+ }), textButton]
262
+ })
263
+ })]
264
264
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
265
265
  token: token,
266
266
  show: isEditGroupVisible,
package/dist/components/atoms/Multiselect/styles.js CHANGED
@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _templateObject;
15
15
 
16
- 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"])));
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
17
 
18
18
  exports.Container = Container;
package/dist/components/organisms/EditGroup/index.js CHANGED
@@ -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: "contentModal",
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
  },
package/dist/components/organisms/EditGroup/styles.js CHANGED
@@ -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 .contentModal {\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-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);
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.4.86",
3
+ "version": "21.4.88",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/Multiselect/Multiselect.stories.js CHANGED
@@ -14,4 +14,219 @@ export const MultiselectDefault = Template.bind({});
14
14
 
15
15
  MultiselectDefault.args = {
16
16
  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YjFkNTAxMS1mZjYxLTQ5ZDUtYjQ1Mi05MWY4YWFjMzc2NjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNDI5NjI1MywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA0Mjk5ODUzLCJpYXQiOjE3MDQyOTYyNTMsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.jxuawcG-ktvnugT2_bJnHbj6JFn5OEY5ehBxI5mQNVkY92CAvzVud5LLMTfhis7FtctJGWY49-iP2IQJQZM-D7nmySieEyIlgl0jeZsmEFUIpXF5y6IjGVdVpM5I7BKwAJeZbk80tgz1FHEJO_U1RKlXc88roNJK9ZZRHXO795Ilk4DH1wN1HPPtmSSBF7kAUSpolWcywNyg2o-7hUfmxu8UDJ3gYaOq2IkKjD2efQkw7PwBIzCobGYQfoWAo8QaQo-lbxh5SGcC33Qtu-T8Abk-Cm8AGCkKyDiX5ml4FbPnsCf-ND_1-lPWOY6z0n1YPf8ow32l0Aa0eOhdphsnPg",
17
+ showSearchBar:true,
18
+ arrayData: [
19
+ {
20
+ "idUser": 350,
21
+ "userName": "Proveedor Uno",
22
+ "userEmail": "proveedorradioshackuno@allfreemail.net",
23
+ "groups": [
24
+ {
25
+ "groupId": 8,
26
+ "groupName": "Inteligencia",
27
+ "userContentGroup": 1
28
+ },
29
+ {
30
+ "groupId": 1,
31
+ "groupName": "Preguntas",
32
+ "userContentGroup": 0
33
+ },
34
+ {
35
+ "groupId": 9,
36
+ "groupName": "Legal",
37
+ "userContentGroup": 0
38
+ }
39
+ ]
40
+ },
41
+ {
42
+ "idUser": 351,
43
+ "userName": "Provedor Dos",
44
+ "userEmail": "proveedorradioshackdos@allfreemail.net",
45
+ "groups": [
46
+ {
47
+ "groupId": "Sin id",
48
+ "groupName": "No tiene grupo asignado",
49
+ "userContentGroup": 0
50
+ },
51
+ {
52
+ "groupId": 1,
53
+ "groupName": "Preguntas",
54
+ "userContentGroup": 0
55
+ },
56
+ {
57
+ "groupId": 8,
58
+ "groupName": "Inteligencia",
59
+ "userContentGroup": 0
60
+ },
61
+ {
62
+ "groupId": 9,
63
+ "groupName": "Legal",
64
+ "userContentGroup": 0
65
+ }
66
+ ]
67
+ },
68
+ {
69
+ "idUser": 352,
70
+ "userName": "Radioshack tres",
71
+ "userEmail": "proveedorradioshacktres@allfreemail.net",
72
+ "groups": [
73
+ {
74
+ "groupId": "Sin id",
75
+ "groupName": "No tiene grupo asignado",
76
+ "userContentGroup": 0
77
+ },
78
+ {
79
+ "groupId": 1,
80
+ "groupName": "Preguntas",
81
+ "userContentGroup": 0
82
+ },
83
+ {
84
+ "groupId": 8,
85
+ "groupName": "Inteligencia",
86
+ "userContentGroup": 0
87
+ },
88
+ {
89
+ "groupId": 9,
90
+ "groupName": "Legal",
91
+ "userContentGroup": 0
92
+ }
93
+ ]
94
+ },
95
+ {
96
+ "idUser": 373,
97
+ "userName": "Alexis",
98
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
99
+ "groups": [
100
+ {
101
+ "groupId": "Sin id",
102
+ "groupName": "No tiene grupo asignado",
103
+ "userContentGroup": 0
104
+ },
105
+ {
106
+ "groupId": 1,
107
+ "groupName": "Preguntas",
108
+ "userContentGroup": 0
109
+ },
110
+ {
111
+ "groupId": 8,
112
+ "groupName": "Inteligencia",
113
+ "userContentGroup": 0
114
+ },
115
+ {
116
+ "groupId": 9,
117
+ "groupName": "Legal",
118
+ "userContentGroup": 0
119
+ }
120
+ ]
121
+ },
122
+ {
123
+ "idUser": 374,
124
+ "userName": "Alexis",
125
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
126
+ "groups": [
127
+ {
128
+ "groupId": "Sin id",
129
+ "groupName": "No tiene grupo asignado",
130
+ "userContentGroup": 0
131
+ },
132
+ {
133
+ "groupId": 1,
134
+ "groupName": "Preguntas",
135
+ "userContentGroup": 0
136
+ },
137
+ {
138
+ "groupId": 8,
139
+ "groupName": "Inteligencia",
140
+ "userContentGroup": 0
141
+ },
142
+ {
143
+ "groupId": 9,
144
+ "groupName": "Legal",
145
+ "userContentGroup": 0
146
+ }
147
+ ]
148
+ },
149
+ {
150
+ "idUser": 375,
151
+ "userName": "Alexis",
152
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
153
+ "groups": [
154
+ {
155
+ "groupId": "Sin id",
156
+ "groupName": "No tiene grupo asignado",
157
+ "userContentGroup": 0
158
+ },
159
+ {
160
+ "groupId": 1,
161
+ "groupName": "Preguntas",
162
+ "userContentGroup": 0
163
+ },
164
+ {
165
+ "groupId": 8,
166
+ "groupName": "Inteligencia",
167
+ "userContentGroup": 0
168
+ },
169
+ {
170
+ "groupId": 9,
171
+ "groupName": "Legal",
172
+ "userContentGroup": 0
173
+ }
174
+ ]
175
+ },
176
+ {
177
+ "idUser": 376,
178
+ "userName": "Alexis refactor",
179
+ "userEmail": "usurioradioshcekparagrupo@AllFreeMail.net",
180
+ "groups": [
181
+ {
182
+ "groupId": "Sin id",
183
+ "groupName": "No tiene grupo asignado",
184
+ "userContentGroup": 0
185
+ },
186
+ {
187
+ "groupId": 1,
188
+ "groupName": "Preguntas",
189
+ "userContentGroup": 0
190
+ },
191
+ {
192
+ "groupId": 8,
193
+ "groupName": "Inteligencia",
194
+ "userContentGroup": 0
195
+ },
196
+ {
197
+ "groupId": 9,
198
+ "groupName": "Legal",
199
+ "userContentGroup": 0
200
+ }
201
+ ]
202
+ },
203
+ {
204
+ "idUser": 377,
205
+ "userName": "",
206
+ "userEmail": "originalradioshack@allfreemail.net",
207
+ "groups": [
208
+ {
209
+ "groupId": "Sin id",
210
+ "groupName": "No tiene grupo asignado",
211
+ "userContentGroup": 0
212
+ },
213
+ {
214
+ "groupId": 1,
215
+ "groupName": "Preguntas",
216
+ "userContentGroup": 0
217
+ },
218
+ {
219
+ "groupId": 8,
220
+ "groupName": "Inteligencia",
221
+ "userContentGroup": 0
222
+ },
223
+ {
224
+ "groupId": 9,
225
+ "groupName": "Legal",
226
+ "userContentGroup": 0
227
+ }
228
+ ]
229
+ }
230
+ ],
231
+ userId:350,
17
232
  };
package/src/components/atoms/Multiselect/index.js CHANGED
@@ -15,17 +15,28 @@ import settings from "../../../assets/images/Icons/settings.svg";
15
15
 
16
16
  export const Multiselect = ({
17
17
  arrayData,
18
+ userId,
18
19
  token,
19
20
  showSearchBar,
20
21
  placeHolder = "Buscar grupo",
21
22
  textButton = "Editar grupos",
22
23
  }) => {
23
- const [userData, setUserData] = useState(null);
24
- const [groups, setGroups] = useState(null);
25
24
  const [selectValues, setSelectValues] = useState([]);
26
25
  const [text, setText] = useState("");
27
26
  const [isEditGroupVisible, setIsEditGroupVisible] = useState(false);
28
27
  const [isItemListVisible, setIsItemListVisible] = useState(true);
28
+ const currentUser = arrayData.find((user) => user.idUser === userId);
29
+ const { idUser, groups } = currentUser || {};
30
+
31
+ useEffect(() => {
32
+ const initialSelectedValues = groups
33
+ ?.filter((group) => group.userContentGroup === 1)
34
+ .map((group) => group.groupName) || [];
35
+ setSelectValues((prevValues) => ({
36
+ ...prevValues,
37
+ [idUser]: initialSelectedValues,
38
+ }));
39
+ }, [idUser, groups]);
29
40
 
30
41
  const onChange = (evt) => {
31
42
  setText(evt.target.value);
@@ -37,19 +48,25 @@ export const Multiselect = ({
37
48
  target: { value },
38
49
  } = event;
39
50
 
40
- const updatedValues = value.filter((group) => {
41
- const groupInfo = groups.find((g) => g.groupName === group);
42
- return groupInfo && groupInfo.userContentGroup === 1;
51
+ const updatedValues = value.filter((groupName) => {
52
+ const groupInfo = groups.find((g) => g.groupName === groupName);
53
+ console.log("groupInfo",groupInfo)
54
+ return groupInfo;
55
+
43
56
  });
57
+ console.log("selectValues", updatedValues);
44
58
 
45
59
  setSelectValues((prevValues) => ({
46
60
  ...prevValues,
47
61
  [userId]: updatedValues,
48
62
  }));
49
63
 
50
- setIsCheckboxChecked(updatedValues.length > 0);
51
64
  };
52
65
 
66
+ useEffect(() => {
67
+ console.log(selectValues)
68
+ },[selectValues])
69
+
53
70
  useEffect(() => {
54
71
  let filteredArray = groups?.slice() || [];
55
72
  if (text.length > 0) {
@@ -59,14 +76,6 @@ export const Multiselect = ({
59
76
  }
60
77
  }, [text]);
61
78
 
62
- useEffect(() => {
63
- console.log("userData", userData);
64
- }, [userData]);
65
-
66
- useEffect(() => {
67
- console.log("groups", groups);
68
- }, [groups]);
69
-
70
79
  const ITEM_HEIGHT = 48;
71
80
  const ITEM_PADDING_TOP = 8;
72
81
  const MenuProps = {
@@ -81,16 +90,13 @@ export const Multiselect = ({
81
90
 
82
91
  return (
83
92
  <Container>
84
- {arrayData.map((user) => (
85
- <>
86
- <p>{user.idUser}</p>
87
- <p>{user.userName}</p>
93
+ {currentUser && (
88
94
  <Select
89
- labelId={`demo-multiple-checkbox-label-${user.idUser}`}
90
- id={`demo-multiple-checkbox-${user.idUser}`}
95
+ labelId={`demo-multiple-checkbox-label-${idUser}`}
96
+ id={`demo-multiple-checkbox-${idUser}`}
91
97
  multiple
92
- value={selectValues[user.idUser] || []}
93
- onChange={handleChange(user.idUser)}
98
+ value={selectValues[idUser] || []}
99
+ onChange={handleChange(idUser)}
94
100
  input={
95
101
  <OutlinedInput
96
102
  sx={{
@@ -142,9 +148,9 @@ export const Multiselect = ({
142
148
  </div>
143
149
  )}
144
150
  </MenuItem>
145
- {console.log("usuario", user.idUser, "grupos", user.groups)}
146
- {user.groups &&
147
- user.groups
151
+ {console.log("usuario", idUser, "grupos", groups)}
152
+ {groups &&
153
+ groups
148
154
  .filter((group) => group.groupId !== "Sin id")
149
155
  .map((group) => (
150
156
  <MenuItem
@@ -161,7 +167,7 @@ export const Multiselect = ({
161
167
  >
162
168
  <Checkbox
163
169
  checked={
164
- (selectValues[user.idUser] || []).indexOf(
170
+ (selectValues[idUser] || []).indexOf(
165
171
  group.groupName
166
172
  ) > -1 && group.userContentGroup === 1
167
173
  }
@@ -176,7 +182,7 @@ export const Multiselect = ({
176
182
  },
177
183
  }}
178
184
  />
179
- {console.log("nombre grupo", group.groupName)}
185
+ {console.log("userContent", group.userContentGroup)}
180
186
  <ListItemText
181
187
  primary={group.groupName}
182
188
  sx={{
@@ -193,7 +199,7 @@ export const Multiselect = ({
193
199
  sx={{
194
200
  minHeight: "34px",
195
201
  paddingLeft: "10px",
196
- ".btn-edit": {
202
+ ".btn-edit-group": {
197
203
  color: "#E33AA9",
198
204
  border: "none",
199
205
  background: "transparent",
@@ -208,7 +214,7 @@ export const Multiselect = ({
208
214
  }}
209
215
  >
210
216
  <button
211
- className="btn-edit"
217
+ className="btn-edit-group"
212
218
  onClick={() => {
213
219
  setIsItemListVisible(false);
214
220
  setIsEditGroupVisible(true);
@@ -219,8 +225,7 @@ export const Multiselect = ({
219
225
  </button>
220
226
  </MenuItem>
221
227
  </Select>
222
- </>
223
- ))}
228
+ )}
224
229
  <EditGroup
225
230
  token={token}
226
231
  show={isEditGroupVisible}
package/src/components/atoms/Multiselect/styles.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import styled from "styled-components";
2
2
 
3
3
  export const Container = styled.div`
4
- width:100%;
5
- height:auto;
4
+ min-width:250px;
5
+ max-height:34px;
6
6
  .search-bar-filter {
7
7
  display: flex;
8
8
  align-items: center;
package/src/components/organisms/EditGroup/index.js CHANGED
@@ -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={`contentModal`}>
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
package/src/components/organisms/EditGroup/styles.js CHANGED
@@ -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
- .contentModal {
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