contentoh-components-library 21.4.87 → 21.4.89

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 (9) hide show
  1. package/dist/components/atoms/Multiselect/Multiselect.stories.js +168 -1
  2. package/dist/components/atoms/Multiselect/index.js +165 -150
  3. package/dist/components/atoms/Multiselect/styles.js +1 -1
  4. package/dist/components/organisms/EditGroup/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/Multiselect/Multiselect.stories.js +215 -0
  7. package/src/components/atoms/Multiselect/index.js +44 -28
  8. package/src/components/atoms/Multiselect/styles.js +1 -1
  9. package/src/components/organisms/EditGroup/index.js +1 -1
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 _objectSpread5 = _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,54 @@ 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;
80
+
81
+ (0, _react.useEffect)(function () {
82
+ var hasUserContentGroup1 = groups.some(function (group) {
83
+ return group.userContentGroup === 1;
84
+ });
76
85
 
77
- var _useState11 = (0, _react.useState)(true),
78
- _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
79
- isItemListVisible = _useState12[0],
80
- setIsItemListVisible = _useState12[1];
86
+ if (hasUserContentGroup1) {
87
+ var initialSelectedValues = groups.filter(function (group) {
88
+ return group.userContentGroup === 1;
89
+ }).map(function (group) {
90
+ return group.groupName;
91
+ }) || [];
92
+ setSelectValues(function (prevValues) {
93
+ return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, idUser, initialSelectedValues));
94
+ });
95
+ } else {
96
+ setSelectValues(function (prevValues) {
97
+ return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, idUser, ["Sin grupos asignados"]));
98
+ });
99
+ }
100
+ }, [idUser, groups]);
81
101
 
82
102
  var onChange = function onChange(evt) {
83
103
  setText(evt.target.value);
@@ -86,19 +106,19 @@ var Multiselect = function Multiselect(_ref) {
86
106
  var handleChange = function handleChange(userId) {
87
107
  return function (event) {
88
108
  var value = event.target.value;
89
- var updatedValues = value.filter(function (group) {
109
+ var updatedValues = value.filter(function (groupName) {
90
110
  var groupInfo = groups.find(function (g) {
91
- return g.groupName === group;
111
+ return g.groupName === groupName;
92
112
  });
93
- return groupInfo && groupInfo.userContentGroup === 1;
113
+ return groupInfo;
94
114
  });
95
115
  setSelectValues(function (prevValues) {
96
- return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
116
+ return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevValues), {}, (0, _defineProperty2.default)({}, userId, updatedValues));
97
117
  });
98
- setIsCheckboxChecked(updatedValues.length > 0);
99
118
  };
100
119
  };
101
120
 
121
+ (0, _react.useEffect)(function () {}, [selectValues]);
102
122
  (0, _react.useEffect)(function () {
103
123
  var filteredArray = (groups === null || groups === void 0 ? void 0 : groups.slice()) || [];
104
124
 
@@ -108,153 +128,148 @@ var Multiselect = function Multiselect(_ref) {
108
128
  });
109
129
  }
110
130
  }, [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
131
  var ITEM_HEIGHT = 48;
118
132
  var ITEM_PADDING_TOP = 8;
119
133
  var MenuProps = {
120
134
  PaperProps: {
121
135
  style: {
122
136
  maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
123
- width: 250,
124
- display: isItemListVisible ? "block" : "none"
137
+ width: "auto",
138
+ display: isItemListVisible ? "block" : "none",
139
+ left: "1013px"
125
140
  }
126
141
  }
127
142
  };
128
143
  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,
144
+ children: [currentUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
145
+ labelId: "demo-multiple-checkbox-label-".concat(idUser),
146
+ id: "demo-multiple-checkbox-".concat(idUser),
147
+ multiple: true,
148
+ value: selectValues[idUser] || [],
149
+ onChange: handleChange(idUser),
150
+ input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
147
151
  sx: {
148
152
  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
- }
153
+ height: "34px",
154
+ paddingBottom: "1px solid #F0F0F0",
155
+ color: "#707070",
156
+ fontSize: "12px"
157
+ }
158
+ }),
159
+ renderValue: function renderValue(selected) {
160
+ return selected.join(", ");
161
+ },
162
+ MenuProps: MenuProps,
163
+ sx: {
164
+ width: "80%",
165
+ height: "24px"
166
+ },
167
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
168
+ sx: {
169
+ maxHeight: "34px",
170
+ paddingLeft: "10px",
171
+ "& .search-bar-filter": {
172
+ display: "flex",
173
+ gap: "10px",
174
+ input: {
175
+ border: "none",
176
+ background: "transparent",
177
+ "::placeholder": {
178
+ fontSize: "12px",
179
+ color: "#CBCBCB"
170
180
  },
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
181
  ":focus-visible, :hover": {
197
182
  border: "none",
198
- background: "transparent"
183
+ background: "transparent",
184
+ outline: "none"
199
185
  }
200
186
  },
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, {
187
+ ":focus-visible, :hover": {
188
+ background: "transparent"
189
+ }
190
+ }
191
+ },
192
+ children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
193
+ className: "search-bar-filter",
194
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
195
+ src: _search.default,
196
+ alt: "search icon"
197
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
198
+ type: "text",
199
+ placeholder: placeHolder,
200
+ value: text,
201
+ onChange: onChange
202
+ })]
203
+ })
204
+ }), groups && groups.filter(function (group) {
205
+ return group.groupId !== "Sin id";
206
+ }).map(function (group) {
207
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
208
+ value: group.groupName,
228
209
  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
- },
210
+ paddingLeft: "0px",
211
+ maxHeight: "34px",
239
212
  ":focus-visible, :hover": {
240
213
  border: "none",
241
214
  background: "transparent"
242
215
  }
243
216
  },
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
- });
217
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
218
+ checked: (selectValues[idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
219
+ sx: {
220
+ maxHeight: "34px",
221
+ "&.Mui-checked": {
222
+ color: "#85BC5B"
223
+ },
224
+ "input, svg": {
225
+ maxWidth: "12px",
226
+ maxHeight: "12px"
227
+ }
228
+ }
229
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
230
+ primary: group.groupName,
231
+ sx: {
232
+ span: {
233
+ fontSize: "12px",
234
+ color: "#000000"
235
+ },
236
+ "input, svg": {
237
+ maxWidth: "12px",
238
+ maxHeight: "12px"
239
+ }
240
+ }
241
+ })]
242
+ }, group.groupId);
243
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
244
+ sx: {
245
+ minHeight: "34px",
246
+ paddingLeft: "10px",
247
+ ".btn-edit-group": {
248
+ color: "#E33AA9",
249
+ border: "none",
250
+ background: "transparent",
251
+ display: "flex",
252
+ gap: "10px",
253
+ alignItems: "center"
254
+ },
255
+ ":focus-visible, :hover": {
256
+ border: "none",
257
+ background: "transparent"
258
+ }
259
+ },
260
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
261
+ className: "btn-edit-group",
262
+ onClick: function onClick() {
263
+ setIsItemListVisible(false);
264
+ setIsEditGroupVisible(true);
265
+ },
266
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
267
+ src: _settings.default,
268
+ className: "icon",
269
+ alt: "search icon"
270
+ }), textButton]
271
+ })
272
+ })]
258
273
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
259
274
  token: token,
260
275
  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 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"])));
16
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width:200px;\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
@@ -439,7 +439,7 @@ var EditGroup = function EditGroup(_ref) {
439
439
  timeout: 400,
440
440
  style: {
441
441
  backgroundColor: "transparent",
442
- zIndex: 10
442
+ zIndex: show ? 10 : -1
443
443
  },
444
444
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
445
445
  in: show,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.4.87",
3
+ "version": "21.4.89",
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,37 @@ 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 hasUserContentGroup1 = groups.some((group) => group.userContentGroup === 1);
33
+
34
+ if (hasUserContentGroup1) {
35
+ const initialSelectedValues = groups
36
+ .filter((group) => group.userContentGroup === 1)
37
+ .map((group) => group.groupName) || [];
38
+ setSelectValues((prevValues) => ({
39
+ ...prevValues,
40
+ [idUser]: initialSelectedValues,
41
+ }));
42
+ } else {
43
+ setSelectValues((prevValues) => ({
44
+ ...prevValues,
45
+ [idUser]: ["Sin grupos asignados"],
46
+ }));
47
+ }
48
+ }, [idUser, groups]);
29
49
 
30
50
  const onChange = (evt) => {
31
51
  setText(evt.target.value);
@@ -37,9 +57,10 @@ export const Multiselect = ({
37
57
  target: { value },
38
58
  } = event;
39
59
 
40
- const updatedValues = value.filter((group) => {
41
- const groupInfo = groups.find((g) => g.groupName === group);
42
- return groupInfo && groupInfo.userContentGroup === 1;
60
+ const updatedValues = value.filter((groupName) => {
61
+ const groupInfo = groups.find((g) => g.groupName === groupName);
62
+ return groupInfo;
63
+
43
64
  });
44
65
 
45
66
  setSelectValues((prevValues) => ({
@@ -47,9 +68,11 @@ export const Multiselect = ({
47
68
  [userId]: updatedValues,
48
69
  }));
49
70
 
50
- setIsCheckboxChecked(updatedValues.length > 0);
51
71
  };
52
72
 
73
+ useEffect(() => {
74
+ },[selectValues])
75
+
53
76
  useEffect(() => {
54
77
  let filteredArray = groups?.slice() || [];
55
78
  if (text.length > 0) {
@@ -59,41 +82,36 @@ export const Multiselect = ({
59
82
  }
60
83
  }, [text]);
61
84
 
62
- useEffect(() => {
63
- console.log("userData", userData);
64
- }, [userData]);
65
-
66
- useEffect(() => {
67
- console.log("groups", groups);
68
- }, [groups]);
69
-
70
85
  const ITEM_HEIGHT = 48;
71
86
  const ITEM_PADDING_TOP = 8;
72
87
  const MenuProps = {
73
88
  PaperProps: {
74
89
  style: {
75
90
  maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
76
- width: 250,
91
+ width: "auto",
77
92
  display: isItemListVisible ? "block" : "none",
93
+ left:"1013px"
78
94
  },
79
95
  },
80
96
  };
81
97
 
82
98
  return (
83
99
  <Container>
84
- {arrayData.map((user) => (
100
+ {currentUser && (
85
101
  <Select
86
- labelId={`demo-multiple-checkbox-label-${user.idUser}`}
87
- id={`demo-multiple-checkbox-${user.idUser}`}
102
+ labelId={`demo-multiple-checkbox-label-${idUser}`}
103
+ id={`demo-multiple-checkbox-${idUser}`}
88
104
  multiple
89
- value={selectValues[user.idUser] || []}
90
- onChange={handleChange(user.idUser)}
105
+ value={selectValues[idUser] || []}
106
+ onChange={handleChange(idUser)}
91
107
  input={
92
108
  <OutlinedInput
93
109
  sx={{
94
110
  width: "80%",
95
111
  height: "34px",
96
112
  paddingBottom: "1px solid #F0F0F0",
113
+ color:"#707070",
114
+ fontSize:"12px"
97
115
  }}
98
116
  />
99
117
  }
@@ -139,9 +157,8 @@ export const Multiselect = ({
139
157
  </div>
140
158
  )}
141
159
  </MenuItem>
142
- {console.log("usuario", user.idUser, "grupos", user.groups)}
143
- {user.groups &&
144
- user.groups
160
+ {groups &&
161
+ groups
145
162
  .filter((group) => group.groupId !== "Sin id")
146
163
  .map((group) => (
147
164
  <MenuItem
@@ -158,7 +175,7 @@ export const Multiselect = ({
158
175
  >
159
176
  <Checkbox
160
177
  checked={
161
- (selectValues[user.idUser] || []).indexOf(
178
+ (selectValues[idUser] || []).indexOf(
162
179
  group.groupName
163
180
  ) > -1 && group.userContentGroup === 1
164
181
  }
@@ -173,7 +190,6 @@ export const Multiselect = ({
173
190
  },
174
191
  }}
175
192
  />
176
- {console.log("nombre grupo", group.groupName)}
177
193
  <ListItemText
178
194
  primary={group.groupName}
179
195
  sx={{
@@ -190,7 +206,7 @@ export const Multiselect = ({
190
206
  sx={{
191
207
  minHeight: "34px",
192
208
  paddingLeft: "10px",
193
- ".btn-edit": {
209
+ ".btn-edit-group": {
194
210
  color: "#E33AA9",
195
211
  border: "none",
196
212
  background: "transparent",
@@ -205,7 +221,7 @@ export const Multiselect = ({
205
221
  }}
206
222
  >
207
223
  <button
208
- className="btn-edit"
224
+ className="btn-edit-group"
209
225
  onClick={() => {
210
226
  setIsItemListVisible(false);
211
227
  setIsEditGroupVisible(true);
@@ -216,7 +232,7 @@ export const Multiselect = ({
216
232
  </button>
217
233
  </MenuItem>
218
234
  </Select>
219
- ))}
235
+ )}
220
236
  <EditGroup
221
237
  token={token}
222
238
  show={isEditGroupVisible}
package/src/components/atoms/Multiselect/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styled from "styled-components";
2
2
 
3
3
  export const Container = styled.div`
4
- min-width:250px;
4
+ min-width:200px;
5
5
  max-height:34px;
6
6
  .search-bar-filter {
7
7
  display: flex;
package/src/components/organisms/EditGroup/index.js CHANGED
@@ -232,7 +232,7 @@ export const EditGroup = ({ token, show, onClose }) => {
232
232
  timeout={400}
233
233
  style={{
234
234
  backgroundColor: "transparent",
235
- zIndex: 10,
235
+ zIndex: show ? 10 : -1,
236
236
  }}
237
237
  >
238
238
  <Fade in={show} timeout={400}>