contentoh-components-library 21.3.36 → 21.3.38
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/components/organisms/TableResizable/TableResizable.stories.js +35 -0
- package/dist/components/organisms/TableResizable/index.js +159 -0
- package/dist/components/organisms/TableResizable/styles.js +28 -0
- package/dist/components/organisms/TableResizable/utils.js +24 -0
- package/dist/components/pages/Dashboard/Dashboard.stories.js +48 -37
- package/dist/components/pages/Dashboard/dashboardUtils.js +7 -3
- package/dist/components/pages/Dashboard/index.js +1 -1
- package/package.json +7 -6
- package/src/components/organisms/TableResizable/TableResizable.stories.js +17 -0
- package/src/components/organisms/TableResizable/index.js +121 -0
- package/src/components/organisms/TableResizable/styles.js +133 -0
- package/src/components/organisms/TableResizable/utils.js +46 -0
- package/src/components/pages/Dashboard/Dashboard.stories.js +50 -35
- package/src/components/pages/Dashboard/dashboardUtils.js +7 -2
- package/src/components/pages/Dashboard/index.js +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
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.DefaultTableResizable = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _ = require(".");
|
|
13
|
+
|
|
14
|
+
var _utils = require("./utils.js");
|
|
15
|
+
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
|
|
18
|
+
var _default = {
|
|
19
|
+
title: "Components/organisms/TableResizable",
|
|
20
|
+
component: _.TableResizable
|
|
21
|
+
};
|
|
22
|
+
exports.default = _default;
|
|
23
|
+
|
|
24
|
+
var Template = function Template(args) {
|
|
25
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TableResizable, (0, _objectSpread2.default)({}, args));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
var DefaultTableResizable = Template.bind({});
|
|
29
|
+
exports.DefaultTableResizable = DefaultTableResizable;
|
|
30
|
+
DefaultTableResizable.args = {
|
|
31
|
+
headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
|
|
32
|
+
tableContent: _utils.data,
|
|
33
|
+
minCellWidth: 120,
|
|
34
|
+
withResetSizeButton: true
|
|
35
|
+
};
|
|
@@ -0,0 +1,159 @@
|
|
|
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.TableResizable = void 0;
|
|
11
|
+
|
|
12
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _iconsMaterial = require("@mui/icons-material");
|
|
19
|
+
|
|
20
|
+
var _styles = require("./styles.js");
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
var createHeaders = function createHeaders(headers) {
|
|
25
|
+
return headers.map(function (item) {
|
|
26
|
+
return {
|
|
27
|
+
text: item,
|
|
28
|
+
ref: (0, _react.useRef)()
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
/*
|
|
33
|
+
* Read the blog post here:
|
|
34
|
+
* https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
var TableResizable = function TableResizable(props) {
|
|
39
|
+
var gridTemplateColumns = props.gridTemplateColumns,
|
|
40
|
+
headers = props.headers,
|
|
41
|
+
minCellWidth = props.minCellWidth,
|
|
42
|
+
tableContent = props.tableContent,
|
|
43
|
+
withResetSizeButton = props.withResetSizeButton; // const [tableHeight, setTableHeight] = useState("auto");
|
|
44
|
+
|
|
45
|
+
var _useState = (0, _react.useState)(null),
|
|
46
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
47
|
+
activeIndex = _useState2[0],
|
|
48
|
+
setActiveIndex = _useState2[1];
|
|
49
|
+
|
|
50
|
+
var tableElement = (0, _react.useRef)(null);
|
|
51
|
+
var columns = createHeaders(headers); // useEffect(() => {
|
|
52
|
+
// setTableHeight(tableElement.current.offsetHeight);
|
|
53
|
+
// }, []);
|
|
54
|
+
|
|
55
|
+
var mouseDown = function mouseDown(index) {
|
|
56
|
+
return setActiveIndex(index);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
var mouseMove = (0, _react.useCallback)(function (e) {
|
|
60
|
+
var gridColumns = columns.map(function (col, i) {
|
|
61
|
+
if (i === activeIndex) {
|
|
62
|
+
var width = e.clientX - col.ref.current.offsetLeft;
|
|
63
|
+
if (width >= minCellWidth) return "".concat(width, "px");
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return "".concat(col.ref.current.offsetWidth, "px");
|
|
67
|
+
});
|
|
68
|
+
var gridTemplateColumns = "".concat(gridColumns.join(" "));
|
|
69
|
+
tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
|
|
70
|
+
}, [activeIndex, columns, minCellWidth]);
|
|
71
|
+
var removeListeners = (0, _react.useCallback)(function () {
|
|
72
|
+
window.removeEventListener("mousemove", mouseMove);
|
|
73
|
+
window.removeEventListener("mouseup", removeListeners);
|
|
74
|
+
}, [mouseMove]);
|
|
75
|
+
var mouseUp = (0, _react.useCallback)(function () {
|
|
76
|
+
setActiveIndex(null);
|
|
77
|
+
removeListeners();
|
|
78
|
+
}, [setActiveIndex, removeListeners]);
|
|
79
|
+
(0, _react.useEffect)(function () {
|
|
80
|
+
if (activeIndex > -1) {
|
|
81
|
+
window.addEventListener("mousemove", mouseMove);
|
|
82
|
+
window.addEventListener("mouseup", mouseUp);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return function () {
|
|
86
|
+
return removeListeners();
|
|
87
|
+
};
|
|
88
|
+
}, [activeIndex, mouseMove, mouseUp, removeListeners]);
|
|
89
|
+
|
|
90
|
+
var resetTableCells = function resetTableCells() {
|
|
91
|
+
tableElement.current.style.gridTemplateColumns = "";
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
95
|
+
gridTemplateColumns: gridTemplateColumns,
|
|
96
|
+
totalColumns: columns === null || columns === void 0 ? void 0 : columns.length,
|
|
97
|
+
totalRows: tableContent === null || tableContent === void 0 ? void 0 : tableContent.length,
|
|
98
|
+
children: [withResetSizeButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
99
|
+
className: "reset-button",
|
|
100
|
+
onClick: resetTableCells,
|
|
101
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.RestartAlt, {
|
|
102
|
+
sx: {
|
|
103
|
+
fontSize: 18
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
107
|
+
className: "table-wrapper",
|
|
108
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
|
|
109
|
+
className: "resizeable-table",
|
|
110
|
+
ref: tableElement,
|
|
111
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
|
|
112
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
|
|
113
|
+
children: [console.log({
|
|
114
|
+
columns: columns
|
|
115
|
+
}), columns === null || columns === void 0 ? void 0 : columns.map(function (_ref, i) {
|
|
116
|
+
var ref = _ref.ref,
|
|
117
|
+
text = _ref.text;
|
|
118
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
|
|
119
|
+
ref: ref,
|
|
120
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
121
|
+
children: text
|
|
122
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
123
|
+
style: {
|
|
124
|
+
height: "50px"
|
|
125
|
+
/* tableHeight */
|
|
126
|
+
|
|
127
|
+
},
|
|
128
|
+
onMouseDown: function onMouseDown() {
|
|
129
|
+
return mouseDown(i);
|
|
130
|
+
},
|
|
131
|
+
className: "resize-handle ".concat(activeIndex === i ? "active" : "idle")
|
|
132
|
+
})]
|
|
133
|
+
}, i);
|
|
134
|
+
})]
|
|
135
|
+
})
|
|
136
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
|
|
137
|
+
children: [console.log({
|
|
138
|
+
tableContent: tableContent
|
|
139
|
+
}), tableContent.map(function (row) {
|
|
140
|
+
var _row$columns;
|
|
141
|
+
|
|
142
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
|
|
143
|
+
children: row === null || row === void 0 ? void 0 : (_row$columns = row.columns) === null || _row$columns === void 0 ? void 0 : _row$columns.map(function (column, indexColumn) {
|
|
144
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
|
|
145
|
+
className: (0, _typeof2.default)(column) === "object" ? "noOverflow" : "",
|
|
146
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
147
|
+
children: column
|
|
148
|
+
})
|
|
149
|
+
}, "".concat(row.key, "-").concat(indexColumn));
|
|
150
|
+
})
|
|
151
|
+
}, row.key);
|
|
152
|
+
})]
|
|
153
|
+
})]
|
|
154
|
+
})
|
|
155
|
+
})]
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
exports.TableResizable = TableResizable;
|
|
@@ -0,0 +1,28 @@
|
|
|
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 defaultTemplateColumns = function defaultTemplateColumns(totalColumns) {
|
|
17
|
+
return "minmax(100px, 1fr) ".repeat(totalColumns);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n overflow: hidden; /* Clips any scrollbars that appear */\n font-family: Avenir Next;\n font-size: 13px;\n width: 90%;\n\n .reset-button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n cursor: pointer;\n padding: 3px;\n border: 0;\n background: #f5f5f5;\n position: absolute;\n top: 5px;\n left: 5px;\n margin: 0;\n z-index: 10;\n }\n\n .table-wrapper {\n border-radius: 6px;\n background: #fff;\n }\n\n table {\n width: 100%;\n height: calc(100vh - 250px);\n overflow: auto; /* Allow scrolling within the table */\n display: grid;\n grid-template-columns: ", ";\n grid-template-rows: ", ";\n }\n\n table th {\n font-size: 15px;\n }\n\n table th,\n table td {\n text-align: left;\n padding: 5px;\n }\n\n table th span,\n table td span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n border-right: 1px solid #ccc;\n text-align: center;\n height: 100%;\n }\n\n table th:last-child span,\n table td:last-child span {\n border-right: 0px;\n }\n\n table tr td {\n border-bottom: 1px solid #ccc;\n }\n\n table tr th {\n border-bottom: 1px solid #ccc;\n }\n\n table thead,\n table tbody,\n table tr {\n display: contents;\n background: red;\n }\n\n table thead {\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10 and IE 11 */\n user-select: none; /* Standard syntax */\n }\n\n th {\n position: sticky;\n top: 0;\n background-color: #fff;\n line-height: 40px;\n z-index: 8;\n }\n\n td {\n line-height: 40px;\n height: 50px;\n }\n\n .resize-handle {\n display: block;\n position: absolute;\n cursor: col-resize;\n width: 8px;\n right: 0;\n top: 0;\n z-index: 1;\n border-right: 1px solid transparent;\n }\n\n .resize-handle:hover {\n border-color: #ccc;\n }\n\n .resize-handle.active {\n border-color: #517ea5;\n }\n\n .resizeable-table {\n width: 100%;\n }\n\n .noOverflow {\n overflow: inherit;\n span {\n overflow: inherit;\n }\n }\n"])), function (props) {
|
|
21
|
+
var _props$gridTemplateCo;
|
|
22
|
+
|
|
23
|
+
return (_props$gridTemplateCo = props.gridTemplateColumns) !== null && _props$gridTemplateCo !== void 0 ? _props$gridTemplateCo : defaultTemplateColumns(props.totalColumns);
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return "repeat(".concat(props.totalRows + 2, ", 50px)");
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
exports.Container = Container;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.data = void 0;
|
|
7
|
+
var data = [{
|
|
8
|
+
key: 1,
|
|
9
|
+
object: {},
|
|
10
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
11
|
+
}, {
|
|
12
|
+
key: 2,
|
|
13
|
+
object: {},
|
|
14
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
15
|
+
}, {
|
|
16
|
+
key: 3,
|
|
17
|
+
object: {},
|
|
18
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
19
|
+
}, {
|
|
20
|
+
key: 4,
|
|
21
|
+
object: {},
|
|
22
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
23
|
+
}];
|
|
24
|
+
exports.data = data;
|
|
@@ -27,43 +27,43 @@ var DashboardDeafult = Template.bind({});
|
|
|
27
27
|
exports.DashboardDeafult = DashboardDeafult;
|
|
28
28
|
DashboardDeafult.args = {
|
|
29
29
|
user: {
|
|
30
|
-
id_user:
|
|
31
|
-
name: "
|
|
32
|
-
last_name: "
|
|
33
|
-
email: "
|
|
34
|
-
position: "
|
|
35
|
-
telephone: "+
|
|
30
|
+
id_user: 59,
|
|
31
|
+
name: "Cadena",
|
|
32
|
+
last_name: "Comercial",
|
|
33
|
+
email: "cadena.ismael@allfreemail.net",
|
|
34
|
+
position: "Admin",
|
|
35
|
+
telephone: "+523111366336",
|
|
36
36
|
country: "México",
|
|
37
|
-
id_company:
|
|
38
|
-
id_cognito: "
|
|
37
|
+
id_company: 817,
|
|
38
|
+
id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
|
|
39
39
|
birth_Date: null,
|
|
40
|
-
about_me:
|
|
41
|
-
zip_code:
|
|
42
|
-
address:
|
|
43
|
-
job:
|
|
44
|
-
id_stripe:
|
|
40
|
+
about_me: "",
|
|
41
|
+
zip_code: "",
|
|
42
|
+
address: "",
|
|
43
|
+
job: "",
|
|
44
|
+
id_stripe: "",
|
|
45
45
|
id_role: 0,
|
|
46
46
|
active: 1,
|
|
47
|
-
is_retailer:
|
|
48
|
-
email_notify:
|
|
49
|
-
|
|
47
|
+
is_retailer: 1,
|
|
48
|
+
email_notify: 0,
|
|
49
|
+
is_user_tech: null,
|
|
50
50
|
membership: {
|
|
51
|
-
id:
|
|
52
|
-
start_date: "2022-
|
|
53
|
-
end_date: "2023-
|
|
54
|
-
planID:
|
|
55
|
-
plan: "
|
|
56
|
-
name: "Plan
|
|
57
|
-
user_limit: "
|
|
58
|
-
products_limit: "
|
|
59
|
-
type: "
|
|
51
|
+
id: 47,
|
|
52
|
+
start_date: "2022-05-25T14:31:12.000Z",
|
|
53
|
+
end_date: "2023-05-25T14:31:12.000Z",
|
|
54
|
+
planID: 5,
|
|
55
|
+
plan: "prod_Ktl6B5Ou2gqTB2",
|
|
56
|
+
name: "Plan Pro",
|
|
57
|
+
user_limit: "5",
|
|
58
|
+
products_limit: "500",
|
|
59
|
+
type: "PyMES"
|
|
60
60
|
},
|
|
61
|
-
src: "https://content-management-profile
|
|
61
|
+
src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1681406304781"
|
|
62
62
|
},
|
|
63
63
|
company: {
|
|
64
|
-
id_company:
|
|
65
|
-
trade_name: "
|
|
66
|
-
company_name: "
|
|
64
|
+
id_company: 817,
|
|
65
|
+
trade_name: "Retailer acc",
|
|
66
|
+
company_name: "Retailer acc",
|
|
67
67
|
rfc: "ASER12345",
|
|
68
68
|
adress: "Av. Insurgentes",
|
|
69
69
|
about_company: null,
|
|
@@ -72,20 +72,31 @@ DashboardDeafult.args = {
|
|
|
72
72
|
zip_code: null,
|
|
73
73
|
email: null,
|
|
74
74
|
social_link: null,
|
|
75
|
-
is_retailer:
|
|
75
|
+
is_retailer: 1,
|
|
76
76
|
financedRetailers: [{
|
|
77
|
-
id:
|
|
78
|
-
name: "The Home Depot
|
|
77
|
+
id: 68,
|
|
78
|
+
name: "The Home Depot Merchants",
|
|
79
79
|
country: "México",
|
|
80
80
|
id_region: 1,
|
|
81
81
|
active: 1
|
|
82
|
-
},
|
|
82
|
+
}],
|
|
83
|
+
retailers: [{
|
|
83
84
|
id: 59,
|
|
84
85
|
name: "The Home Depot Platinum",
|
|
85
|
-
country: "México"
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
country: "México"
|
|
87
|
+
}, {
|
|
88
|
+
id: 60,
|
|
89
|
+
name: "The Home Depot Resizing",
|
|
90
|
+
country: "México"
|
|
91
|
+
}, {
|
|
92
|
+
id: 61,
|
|
93
|
+
name: "Home Depot TAB",
|
|
94
|
+
country: "México"
|
|
95
|
+
}, {
|
|
96
|
+
id: 68,
|
|
97
|
+
name: "The Home Depot Merchants",
|
|
98
|
+
country: "México"
|
|
88
99
|
}]
|
|
89
100
|
},
|
|
90
|
-
jwt: "
|
|
101
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyNDlhMjJkMC00Y2VhLTRjNGEtYTNjYS0zM2ZjN2VmNjAwOTEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjI0OWEyMmQwLTRjZWEtNGM0YS1hM2NhLTMzZmM3ZWY2MDA5MSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI0MzRhODBmZi0yZmNiLTQyMmItOGI5ZC0wNzU4OGQ3NGQyNmIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MTQyNjgyOCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MTQzMDQyOCwiaWF0IjoxNjgxNDI2ODI4LCJlbWFpbCI6Im1lcmNoYW50c2lsdW1pbmFjaW9uQGFsbGZyZWVtYWlsLm5ldCJ9.IJNkSNUBmeOFQiDzyR2R0dDtwqg7U5GbXIwtW60cpxVBXj5Lr4zRdPuQnW3o02PxVR189IX2S3jcGgHhnvGMMKh4jRr-YM_eFpXYRQL_279tjG_rlZjwYFC333XMOcHViB8rEqNAti1PnuphCzqNiWH1z_b6aynxlbAeR23-P3VhSb0v6z_EWTdnuEw7ETXLFu2V6qaZTJCx6l7CZKECG2UExbaA0Be5_Ju56Q5cSNSf-lngetTvlb5DGeCge4nQ36y2qy9HnjAPDtP6c1v7KrT6zE74qh_L6u-xrdwYlaP5KBg4B3qJobtI9bgtKiqY1AZSTjWp4vr0T0_5M6GA7Q"
|
|
91
102
|
};
|
|
@@ -65,7 +65,7 @@ var transformProvidersArray = function transformProvidersArray(array) {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
var getCategories = /*#__PURE__*/function () {
|
|
68
|
-
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(user, company) {
|
|
68
|
+
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(jwt, user, company) {
|
|
69
69
|
var _JSON$parse3;
|
|
70
70
|
|
|
71
71
|
var isTHDUser, _ref4, financedRetailers, key, query, response, categories, finalArray;
|
|
@@ -81,7 +81,11 @@ var getCategories = /*#__PURE__*/function () {
|
|
|
81
81
|
return ret.id;
|
|
82
82
|
}).join(","))) : "";
|
|
83
83
|
_context2.next = 6;
|
|
84
|
-
return _axios.default.get("".concat(process.env.REACT_APP_CATEGORY_ENDPOINT).concat(query)
|
|
84
|
+
return _axios.default.get("".concat(process.env.REACT_APP_CATEGORY_ENDPOINT).concat(query), {
|
|
85
|
+
headers: {
|
|
86
|
+
Authorization: jwt
|
|
87
|
+
}
|
|
88
|
+
});
|
|
85
89
|
|
|
86
90
|
case 6:
|
|
87
91
|
response = _context2.sent;
|
|
@@ -97,7 +101,7 @@ var getCategories = /*#__PURE__*/function () {
|
|
|
97
101
|
}, _callee2);
|
|
98
102
|
}));
|
|
99
103
|
|
|
100
|
-
return function getCategories(_x4, _x5) {
|
|
104
|
+
return function getCategories(_x4, _x5, _x6) {
|
|
101
105
|
return _ref3.apply(this, arguments);
|
|
102
106
|
};
|
|
103
107
|
}();
|
|
@@ -383,7 +383,7 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
383
383
|
(0, _context4.t0)(_context4.t1);
|
|
384
384
|
_context4.t2 = setCategories;
|
|
385
385
|
_context4.next = 8;
|
|
386
|
-
return (0, _dashboardUtils.getCategories)(user, company);
|
|
386
|
+
return (0, _dashboardUtils.getCategories)(jwt, user, company);
|
|
387
387
|
|
|
388
388
|
case 8:
|
|
389
389
|
_context4.t3 = _context4.sent;
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "contentoh-components-library",
|
|
3
|
-
"version": "21.3.
|
|
3
|
+
"version": "21.3.38",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@aws-amplify/auth": "^4.5.3",
|
|
6
6
|
"@aws-amplify/datastore": "^3.11.0",
|
|
7
7
|
"@aws-amplify/ui-react": "^2.17.0",
|
|
8
8
|
"@babel/runtime": "^7.17.2",
|
|
9
|
-
"@emotion/react": "^11.10.
|
|
10
|
-
"@emotion/styled": "^11.10.
|
|
9
|
+
"@emotion/react": "^11.10.6",
|
|
10
|
+
"@emotion/styled": "^11.10.6",
|
|
11
11
|
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
|
12
12
|
"@fortawesome/free-regular-svg-icons": "^6.2.0",
|
|
13
13
|
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
|
14
14
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
15
|
-
"@mui/material": "^5.11.
|
|
16
|
-
"@mui/
|
|
15
|
+
"@mui/icons-material": "^5.11.16",
|
|
16
|
+
"@mui/material": "^5.12.0",
|
|
17
|
+
"@mui/styled-engine-sc": "^5.12.0",
|
|
17
18
|
"@storybook/addon-postcss": "^2.0.0",
|
|
18
19
|
"@testing-library/jest-dom": "^5.11.4",
|
|
19
20
|
"@testing-library/react": "^11.1.0",
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
"react-scroll": "^1.8.8",
|
|
44
45
|
"react-transition-group": "^4.4.5",
|
|
45
46
|
"storybook-addon-external-links": "^2.0.3",
|
|
46
|
-
"styled-components": "^5.3.
|
|
47
|
+
"styled-components": "^5.3.9",
|
|
47
48
|
"swiper": "^8.4.4",
|
|
48
49
|
"uuid": "^8.3.2",
|
|
49
50
|
"web-vitals": "^1.0.1"
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TableResizable } from ".";
|
|
2
|
+
import { data } from "./utils.js";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "Components/organisms/TableResizable",
|
|
6
|
+
component: TableResizable,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const Template = (args) => <TableResizable {...args} />;
|
|
10
|
+
|
|
11
|
+
export const DefaultTableResizable = Template.bind({});
|
|
12
|
+
DefaultTableResizable.args = {
|
|
13
|
+
headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
|
|
14
|
+
tableContent: data,
|
|
15
|
+
minCellWidth: 120,
|
|
16
|
+
withResetSizeButton: true,
|
|
17
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React, { useState, useCallback, useEffect, useRef } from "react";
|
|
2
|
+
import { RestartAlt } from "@mui/icons-material";
|
|
3
|
+
import { Container } from "./styles.js";
|
|
4
|
+
|
|
5
|
+
const createHeaders = (headers) => {
|
|
6
|
+
return headers.map((item) => ({
|
|
7
|
+
text: item,
|
|
8
|
+
ref: useRef(),
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* Read the blog post here:
|
|
14
|
+
* https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
|
|
15
|
+
*/
|
|
16
|
+
export const TableResizable = (props) => {
|
|
17
|
+
const {
|
|
18
|
+
gridTemplateColumns,
|
|
19
|
+
headers,
|
|
20
|
+
minCellWidth,
|
|
21
|
+
tableContent,
|
|
22
|
+
withResetSizeButton,
|
|
23
|
+
} = props;
|
|
24
|
+
// const [tableHeight, setTableHeight] = useState("auto");
|
|
25
|
+
const [activeIndex, setActiveIndex] = useState(null);
|
|
26
|
+
const tableElement = useRef(null);
|
|
27
|
+
const columns = createHeaders(headers);
|
|
28
|
+
|
|
29
|
+
// useEffect(() => {
|
|
30
|
+
// setTableHeight(tableElement.current.offsetHeight);
|
|
31
|
+
// }, []);
|
|
32
|
+
|
|
33
|
+
const mouseDown = (index) => setActiveIndex(index);
|
|
34
|
+
|
|
35
|
+
const mouseMove = useCallback(
|
|
36
|
+
(e) => {
|
|
37
|
+
const gridColumns = columns.map((col, i) => {
|
|
38
|
+
if (i === activeIndex) {
|
|
39
|
+
const width = e.clientX - col.ref.current.offsetLeft;
|
|
40
|
+
if (width >= minCellWidth) return `${width}px`;
|
|
41
|
+
}
|
|
42
|
+
return `${col.ref.current.offsetWidth}px`;
|
|
43
|
+
});
|
|
44
|
+
const gridTemplateColumns = `${gridColumns.join(" ")}`;
|
|
45
|
+
tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
|
|
46
|
+
},
|
|
47
|
+
[activeIndex, columns, minCellWidth]
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
const removeListeners = useCallback(() => {
|
|
51
|
+
window.removeEventListener("mousemove", mouseMove);
|
|
52
|
+
window.removeEventListener("mouseup", removeListeners);
|
|
53
|
+
}, [mouseMove]);
|
|
54
|
+
|
|
55
|
+
const mouseUp = useCallback(() => {
|
|
56
|
+
setActiveIndex(null);
|
|
57
|
+
removeListeners();
|
|
58
|
+
}, [setActiveIndex, removeListeners]);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (activeIndex > -1) {
|
|
62
|
+
window.addEventListener("mousemove", mouseMove);
|
|
63
|
+
window.addEventListener("mouseup", mouseUp);
|
|
64
|
+
}
|
|
65
|
+
return () => removeListeners();
|
|
66
|
+
}, [activeIndex, mouseMove, mouseUp, removeListeners]);
|
|
67
|
+
|
|
68
|
+
const resetTableCells = () => {
|
|
69
|
+
tableElement.current.style.gridTemplateColumns = "";
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Container
|
|
74
|
+
gridTemplateColumns={gridTemplateColumns}
|
|
75
|
+
totalColumns={columns?.length}
|
|
76
|
+
totalRows={tableContent?.length}
|
|
77
|
+
>
|
|
78
|
+
{withResetSizeButton ? (
|
|
79
|
+
<button className="reset-button" onClick={resetTableCells}>
|
|
80
|
+
<RestartAlt sx={{ fontSize: 18 }} />
|
|
81
|
+
</button>
|
|
82
|
+
) : null}
|
|
83
|
+
<div className="table-wrapper">
|
|
84
|
+
<table className="resizeable-table" ref={tableElement}>
|
|
85
|
+
<thead>
|
|
86
|
+
<tr>
|
|
87
|
+
{console.log({ columns })}
|
|
88
|
+
{columns?.map(({ ref, text }, i) => (
|
|
89
|
+
<th ref={ref} key={i}>
|
|
90
|
+
<span>{text}</span>
|
|
91
|
+
<div
|
|
92
|
+
style={{ height: "50px" /* tableHeight */ }}
|
|
93
|
+
onMouseDown={() => mouseDown(i)}
|
|
94
|
+
className={`resize-handle ${
|
|
95
|
+
activeIndex === i ? "active" : "idle"
|
|
96
|
+
}`}
|
|
97
|
+
/>
|
|
98
|
+
</th>
|
|
99
|
+
))}
|
|
100
|
+
</tr>
|
|
101
|
+
</thead>
|
|
102
|
+
<tbody>
|
|
103
|
+
{console.log({ tableContent })}
|
|
104
|
+
{tableContent.map((row) => (
|
|
105
|
+
<tr key={row.key}>
|
|
106
|
+
{row?.columns?.map((column, indexColumn) => (
|
|
107
|
+
<td
|
|
108
|
+
className={typeof column === "object" ? "noOverflow" : ""}
|
|
109
|
+
key={`${row.key}-${indexColumn}`}
|
|
110
|
+
>
|
|
111
|
+
<span>{column}</span>
|
|
112
|
+
</td>
|
|
113
|
+
))}
|
|
114
|
+
</tr>
|
|
115
|
+
))}
|
|
116
|
+
</tbody>
|
|
117
|
+
</table>
|
|
118
|
+
</div>
|
|
119
|
+
</Container>
|
|
120
|
+
);
|
|
121
|
+
};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
const defaultTemplateColumns = (totalColumns) =>
|
|
4
|
+
`minmax(100px, 1fr) `.repeat(totalColumns);
|
|
5
|
+
|
|
6
|
+
export const Container = styled.div`
|
|
7
|
+
position: absolute;
|
|
8
|
+
overflow: hidden; /* Clips any scrollbars that appear */
|
|
9
|
+
font-family: Avenir Next;
|
|
10
|
+
font-size: 13px;
|
|
11
|
+
width: 90%;
|
|
12
|
+
|
|
13
|
+
.reset-button {
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
padding: 3px;
|
|
20
|
+
border: 0;
|
|
21
|
+
background: #f5f5f5;
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 5px;
|
|
24
|
+
left: 5px;
|
|
25
|
+
margin: 0;
|
|
26
|
+
z-index: 10;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.table-wrapper {
|
|
30
|
+
border-radius: 6px;
|
|
31
|
+
background: #fff;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
table {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: calc(100vh - 250px);
|
|
37
|
+
overflow: auto; /* Allow scrolling within the table */
|
|
38
|
+
display: grid;
|
|
39
|
+
grid-template-columns: ${(props) =>
|
|
40
|
+
props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
|
|
41
|
+
grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
table th {
|
|
45
|
+
font-size: 15px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
table th,
|
|
49
|
+
table td {
|
|
50
|
+
text-align: left;
|
|
51
|
+
padding: 5px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
table th span,
|
|
55
|
+
table td span {
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
text-overflow: ellipsis;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
display: block;
|
|
60
|
+
border-right: 1px solid #ccc;
|
|
61
|
+
text-align: center;
|
|
62
|
+
height: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
table th:last-child span,
|
|
66
|
+
table td:last-child span {
|
|
67
|
+
border-right: 0px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
table tr td {
|
|
71
|
+
border-bottom: 1px solid #ccc;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
table tr th {
|
|
75
|
+
border-bottom: 1px solid #ccc;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
table thead,
|
|
79
|
+
table tbody,
|
|
80
|
+
table tr {
|
|
81
|
+
display: contents;
|
|
82
|
+
background: red;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
table thead {
|
|
86
|
+
-webkit-user-select: none; /* Safari */
|
|
87
|
+
-ms-user-select: none; /* IE 10 and IE 11 */
|
|
88
|
+
user-select: none; /* Standard syntax */
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
th {
|
|
92
|
+
position: sticky;
|
|
93
|
+
top: 0;
|
|
94
|
+
background-color: #fff;
|
|
95
|
+
line-height: 40px;
|
|
96
|
+
z-index: 8;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
td {
|
|
100
|
+
line-height: 40px;
|
|
101
|
+
height: 50px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.resize-handle {
|
|
105
|
+
display: block;
|
|
106
|
+
position: absolute;
|
|
107
|
+
cursor: col-resize;
|
|
108
|
+
width: 8px;
|
|
109
|
+
right: 0;
|
|
110
|
+
top: 0;
|
|
111
|
+
z-index: 1;
|
|
112
|
+
border-right: 1px solid transparent;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.resize-handle:hover {
|
|
116
|
+
border-color: #ccc;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.resize-handle.active {
|
|
120
|
+
border-color: #517ea5;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.resizeable-table {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.noOverflow {
|
|
128
|
+
overflow: inherit;
|
|
129
|
+
span {
|
|
130
|
+
overflow: inherit;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
`;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export const data = [
|
|
2
|
+
{
|
|
3
|
+
key: 1,
|
|
4
|
+
object: {},
|
|
5
|
+
columns: [
|
|
6
|
+
"Large Detroit Style Pizza",
|
|
7
|
+
3213456785,
|
|
8
|
+
"$31.43",
|
|
9
|
+
"Pending",
|
|
10
|
+
"Dave",
|
|
11
|
+
],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
key: 2,
|
|
15
|
+
object: {},
|
|
16
|
+
columns: [
|
|
17
|
+
"Large Detroit Style Pizza",
|
|
18
|
+
3213456785,
|
|
19
|
+
"$31.43",
|
|
20
|
+
"Pending",
|
|
21
|
+
"Dave",
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
key: 3,
|
|
26
|
+
object: {},
|
|
27
|
+
columns: [
|
|
28
|
+
"Large Detroit Style Pizza",
|
|
29
|
+
3213456785,
|
|
30
|
+
"$31.43",
|
|
31
|
+
"Pending",
|
|
32
|
+
"Dave",
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
key: 4,
|
|
37
|
+
object: {},
|
|
38
|
+
columns: [
|
|
39
|
+
"Large Detroit Style Pizza",
|
|
40
|
+
3213456785,
|
|
41
|
+
"$31.43",
|
|
42
|
+
"Pending",
|
|
43
|
+
"Dave",
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
];
|
|
@@ -9,43 +9,43 @@ const Template = (args) => <Dashboard {...args} />;
|
|
|
9
9
|
export const DashboardDeafult = Template.bind({});
|
|
10
10
|
DashboardDeafult.args = {
|
|
11
11
|
user: {
|
|
12
|
-
id_user:
|
|
13
|
-
name: "
|
|
14
|
-
last_name: "
|
|
15
|
-
email: "
|
|
16
|
-
position: "
|
|
17
|
-
telephone: "+
|
|
12
|
+
id_user: 59,
|
|
13
|
+
name: "Cadena",
|
|
14
|
+
last_name: "Comercial",
|
|
15
|
+
email: "cadena.ismael@allfreemail.net",
|
|
16
|
+
position: "Admin",
|
|
17
|
+
telephone: "+523111366336",
|
|
18
18
|
country: "México",
|
|
19
|
-
id_company:
|
|
20
|
-
id_cognito: "
|
|
19
|
+
id_company: 817,
|
|
20
|
+
id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
|
|
21
21
|
birth_Date: null,
|
|
22
|
-
about_me:
|
|
23
|
-
zip_code:
|
|
24
|
-
address:
|
|
25
|
-
job:
|
|
26
|
-
id_stripe:
|
|
22
|
+
about_me: "",
|
|
23
|
+
zip_code: "",
|
|
24
|
+
address: "",
|
|
25
|
+
job: "",
|
|
26
|
+
id_stripe: "",
|
|
27
27
|
id_role: 0,
|
|
28
28
|
active: 1,
|
|
29
|
-
is_retailer:
|
|
30
|
-
email_notify:
|
|
31
|
-
|
|
29
|
+
is_retailer: 1,
|
|
30
|
+
email_notify: 0,
|
|
31
|
+
is_user_tech: null,
|
|
32
32
|
membership: {
|
|
33
|
-
id:
|
|
34
|
-
start_date: "2022-
|
|
35
|
-
end_date: "2023-
|
|
36
|
-
planID:
|
|
37
|
-
plan: "
|
|
38
|
-
name: "Plan
|
|
39
|
-
user_limit: "
|
|
40
|
-
products_limit: "
|
|
41
|
-
type: "
|
|
33
|
+
id: 47,
|
|
34
|
+
start_date: "2022-05-25T14:31:12.000Z",
|
|
35
|
+
end_date: "2023-05-25T14:31:12.000Z",
|
|
36
|
+
planID: 5,
|
|
37
|
+
plan: "prod_Ktl6B5Ou2gqTB2",
|
|
38
|
+
name: "Plan Pro",
|
|
39
|
+
user_limit: "5",
|
|
40
|
+
products_limit: "500",
|
|
41
|
+
type: "PyMES",
|
|
42
42
|
},
|
|
43
|
-
src: "https://content-management-profile
|
|
43
|
+
src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1681406304781",
|
|
44
44
|
},
|
|
45
45
|
company: {
|
|
46
|
-
id_company:
|
|
47
|
-
trade_name: "
|
|
48
|
-
company_name: "
|
|
46
|
+
id_company: 817,
|
|
47
|
+
trade_name: "Retailer acc",
|
|
48
|
+
company_name: "Retailer acc",
|
|
49
49
|
rfc: "ASER12345",
|
|
50
50
|
adress: "Av. Insurgentes",
|
|
51
51
|
about_company: null,
|
|
@@ -54,23 +54,38 @@ DashboardDeafult.args = {
|
|
|
54
54
|
zip_code: null,
|
|
55
55
|
email: null,
|
|
56
56
|
social_link: null,
|
|
57
|
-
is_retailer:
|
|
57
|
+
is_retailer: 1,
|
|
58
58
|
financedRetailers: [
|
|
59
59
|
{
|
|
60
|
-
id:
|
|
61
|
-
name: "The Home Depot
|
|
60
|
+
id: 68,
|
|
61
|
+
name: "The Home Depot Merchants",
|
|
62
62
|
country: "México",
|
|
63
63
|
id_region: 1,
|
|
64
64
|
active: 1,
|
|
65
65
|
},
|
|
66
|
+
],
|
|
67
|
+
retailers: [
|
|
66
68
|
{
|
|
67
69
|
id: 59,
|
|
68
70
|
name: "The Home Depot Platinum",
|
|
69
71
|
country: "México",
|
|
70
|
-
|
|
71
|
-
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: 60,
|
|
75
|
+
name: "The Home Depot Resizing",
|
|
76
|
+
country: "México",
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
id: 61,
|
|
80
|
+
name: "Home Depot TAB",
|
|
81
|
+
country: "México",
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id: 68,
|
|
85
|
+
name: "The Home Depot Merchants",
|
|
86
|
+
country: "México",
|
|
72
87
|
},
|
|
73
88
|
],
|
|
74
89
|
},
|
|
75
|
-
jwt: "
|
|
90
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyNDlhMjJkMC00Y2VhLTRjNGEtYTNjYS0zM2ZjN2VmNjAwOTEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjI0OWEyMmQwLTRjZWEtNGM0YS1hM2NhLTMzZmM3ZWY2MDA5MSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI0MzRhODBmZi0yZmNiLTQyMmItOGI5ZC0wNzU4OGQ3NGQyNmIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MTQyNjgyOCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MTQzMDQyOCwiaWF0IjoxNjgxNDI2ODI4LCJlbWFpbCI6Im1lcmNoYW50c2lsdW1pbmFjaW9uQGFsbGZyZWVtYWlsLm5ldCJ9.IJNkSNUBmeOFQiDzyR2R0dDtwqg7U5GbXIwtW60cpxVBXj5Lr4zRdPuQnW3o02PxVR189IX2S3jcGgHhnvGMMKh4jRr-YM_eFpXYRQL_279tjG_rlZjwYFC333XMOcHViB8rEqNAti1PnuphCzqNiWH1z_b6aynxlbAeR23-P3VhSb0v6z_EWTdnuEw7ETXLFu2V6qaZTJCx6l7CZKECG2UExbaA0Be5_Ju56Q5cSNSf-lngetTvlb5DGeCge4nQ36y2qy9HnjAPDtP6c1v7KrT6zE74qh_L6u-xrdwYlaP5KBg4B3qJobtI9bgtKiqY1AZSTjWp4vr0T0_5M6GA7Q",
|
|
76
91
|
};
|
|
@@ -28,7 +28,7 @@ const transformProvidersArray = (array) => {
|
|
|
28
28
|
return newArray;
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
export const getCategories = async (user, company) => {
|
|
31
|
+
export const getCategories = async (jwt, user, company) => {
|
|
32
32
|
const isTHDUser = user.is_retailer === 1;
|
|
33
33
|
const { financedRetailers } = company || {};
|
|
34
34
|
const key = financedRetailers ? "financedRetailers" : "retailers";
|
|
@@ -37,7 +37,12 @@ export const getCategories = async (user, company) => {
|
|
|
37
37
|
? `?id=${encodeURIComponent(company[key].map((ret) => ret.id).join(","))}`
|
|
38
38
|
: "";
|
|
39
39
|
const response = await axios.get(
|
|
40
|
-
`${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}
|
|
40
|
+
`${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}`,
|
|
41
|
+
{
|
|
42
|
+
headers: {
|
|
43
|
+
Authorization: jwt,
|
|
44
|
+
},
|
|
45
|
+
}
|
|
41
46
|
);
|
|
42
47
|
const categories = JSON.parse(response.data.body)?.data || {};
|
|
43
48
|
const finalArray = getCategoriesRecursive(categories);
|
|
@@ -202,7 +202,7 @@ export const Dashboard = ({ jwt, user, company }) => {
|
|
|
202
202
|
|
|
203
203
|
useEffect(async () => {
|
|
204
204
|
setProviders(await getProviders(jwt, user));
|
|
205
|
-
setCategories(await getCategories(user, company));
|
|
205
|
+
setCategories(await getCategories(jwt, user, company));
|
|
206
206
|
await getRetailers();
|
|
207
207
|
datesSelect();
|
|
208
208
|
const today = new Date();
|