@m4l/components 0.1.36 → 0.1.37

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 (61) hide show
  1. package/dist/{commonjs.bcc6b707.js → commonjs.565e6834.js} +0 -1
  2. package/dist/components/CommonActions/components/ActionCancel/{index.4b36950f.js → index.9230c57b.js} +1 -1
  3. package/dist/components/CommonActions/components/ActionFormCancel/{index.945e9887.js → index.ab514bd9.js} +9 -7
  4. package/dist/components/CommonActions/components/ActionIntro/{index.35a0d240.js → index.a0a341c7.js} +1 -1
  5. package/dist/components/CommonActions/components/Actions/index.d3e1f36e.js +54 -0
  6. package/dist/components/DataGrid/{index.156cc30c.js → index.67260455.js} +663 -15
  7. package/dist/components/DynamicFilter/{index.32f84995.js → index.071aa795.js} +92 -18
  8. package/dist/components/Icon/{index.1dbd3e58.js → index.8d754623.js} +62 -5
  9. package/dist/components/LanguagePopover/index.cbc4b282.js +144 -0
  10. package/dist/components/Loadable/{index.8c6006be.js → index.117eaced.js} +1 -1
  11. package/dist/components/ModalDialog/{index.91777582.js → index.a684827f.js} +5 -5
  12. package/dist/components/ObjectLogs/{index.9d3fc2ae.js → index.4a859658.js} +12 -10
  13. package/dist/components/PaperForm/{index.218a6c4b.js → index.c5948756.js} +1 -1
  14. package/dist/components/Period/{index.74f35862.js → index.abe445bd.js} +9 -7
  15. package/dist/components/Resizeable/{index.44a0dd46.js → index.c96c0f09.js} +1 -1
  16. package/dist/components/SplitLayout/{index.81fc4750.js → index.5a8355d8.js} +1 -1
  17. package/dist/components/animate/PropagateLoader/index.be5b02c3.js +30 -0
  18. package/dist/components/areas/components/AreasAdmin/index.6794b22f.js +112 -0
  19. package/dist/components/areas/components/AreasContainer/index.a2f8899b.js +43 -0
  20. package/dist/components/areas/components/GridLayout/index.b9c1e846.js +92 -0
  21. package/dist/components/areas/components/Window/index.252fbf4e.js +646 -0
  22. package/dist/components/areas/components/WindowPopUp/index.214cf099.js +120 -0
  23. package/dist/components/areas/components/index.7d6cd649.js +67 -0
  24. package/dist/components/areas/contexts/AreaContext/index.4894cf23.js +286 -0
  25. package/dist/components/areas/contexts/AreasContext/index.cd8e4bee.js +158 -0
  26. package/dist/components/areas/contexts/DynamicMFParmsContext/index.668bc2e2.js +17 -0
  27. package/dist/components/areas/contexts/index.f9196fb2.js +1 -0
  28. package/dist/components/areas/hooks/useArea/index.9b85ce24.js +19 -0
  29. package/dist/components/areas/hooks/useDynamicMFParameters/index.e6a44ae3.js +11 -0
  30. package/dist/components/areas/index.d1bf612c.js +16 -0
  31. package/dist/components/formatters/BooleanFormatter/{index.efc8ffc2.js → index.3a9b16c8.js} +1 -1
  32. package/dist/components/formatters/{index.c3f4b687.js → index.0b5f95d0.js} +1 -1
  33. package/dist/components/hook-form/RHFPeriod/{index.2b8e63a2.js → index.3772295b.js} +1 -1
  34. package/dist/components/hook-form/RHFTextField/{index.7feaec71.js → index.b17d68f4.js} +1 -1
  35. package/dist/components/modal/WindowBase.04439b8e.js +120 -0
  36. package/dist/components/modal/WindowConfirm.0b8a6818.js +115 -0
  37. package/dist/components/modal/index.8387e90e.js +18 -0
  38. package/dist/components/mui_extended/Accordion/{index.8e123c57.js → index.a541c71c.js} +2 -2
  39. package/dist/components/mui_extended/Button/index.86a155a2.js +101 -0
  40. package/dist/components/mui_extended/IconButton/{index.e3adaa33.js → index.82f16572.js} +5 -62
  41. package/dist/components/mui_extended/MenuActions/index.ee17bddd.js +112 -0
  42. package/dist/components/mui_extended/Pager/{index.d245f821.js → index.74d3f5fc.js} +66 -1
  43. package/dist/components/mui_extended/Popover/index.53c77d23.js +137 -0
  44. package/dist/components/mui_extended/index.85dfadf1.js +16 -0
  45. package/dist/contexts/ModalContext/{index.0797eb17.js → index.b90eec94.js} +1 -1
  46. package/dist/hooks/useModal/{index.32da4dcb.js → index.d14edee3.js} +1 -1
  47. package/dist/index.js +128 -1691
  48. package/dist/{components/animate/PropagateLoader/index.eb401503.js → node_modules.416f1da3.js} +59 -28
  49. package/dist/package.json +2 -1
  50. package/dist/{react-draggable.3b5b6680.js → react-draggable.84d6b038.js} +1 -1
  51. package/dist/{react-json-view.03ae95f5.js → react-json-view.57125fcf.js} +1 -1
  52. package/dist/{react-resizable.6eae0397.js → react-resizable.1d00271d.js} +3 -4
  53. package/dist/{react-splitter-layout.873aece3.js → react-splitter-layout.8b1655c8.js} +1 -1
  54. package/dist/style.css +0 -114
  55. package/dist/utils/{index.9dce2e2f.js → index.899eb67b.js} +28 -460
  56. package/package.json +3 -1
  57. package/vite.config.ts +201 -129
  58. package/dist/components/CommonActions/components/Actions/index.ba86f72f.js +0 -868
  59. package/dist/components/mui_extended/Button/index.55fc70dc.js +0 -178
  60. package/dist/components/mui_extended/Popover/index.97cf3a3e.js +0 -275
  61. package/dist/node_modules.e0b84fac.js +0 -2154
@@ -1,868 +0,0 @@
1
- import { styled } from "@mui/material/styles";
2
- import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.e3adaa33.js";
3
- import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
4
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
- import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
6
- import "@mui/material/Button";
7
- import "react-hook-form";
8
- import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
9
- import "../../../../contexts/ModalContext/index.0797eb17.js";
10
- import "../../../../react-draggable.3b5b6680.js";
11
- import "../../../ModalDialog/index.91777582.js";
12
- import "../../../Resizeable/index.44a0dd46.js";
13
- import { useResponsiveDesktop } from "@m4l/graphics";
14
- import { WindowBase } from "../../../../index.js";
15
- import "@mui/lab";
16
- import { I as Icon } from "../../../Icon/index.1dbd3e58.js";
17
- import { u as useDataGrid, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.156cc30c.js";
18
- import { P as Pager } from "../../../mui_extended/Pager/index.d245f821.js";
19
- import { D as DataGrid$1 } from "../../../../react-data-grid.d46d625e.js";
20
- import { u as useModal } from "../../../../hooks/useModal/index.32da4dcb.js";
21
- import { A as ActionCancel } from "../ActionCancel/index.4b36950f.js";
22
- import { A as ActionIntro } from "../ActionIntro/index.35a0d240.js";
23
- import { P as Popover } from "../../../mui_extended/Popover/index.97cf3a3e.js";
24
- const WrapperMenuActions = styled(IconButton)(() => ({}));
25
- const LabelMemuItem = styled("div")(({
26
- theme
27
- }) => ({
28
- height: "22px",
29
- marginLeft: theme.spacing(1.5),
30
- display: "flex",
31
- alignItems: "center"
32
- }));
33
- function MenuActions(props) {
34
- const {
35
- menuActions,
36
- objItem = {},
37
- url_icon: urlIcon,
38
- toolTip = "",
39
- marginTop = -1,
40
- marginBottom,
41
- marginLeft,
42
- marginRight,
43
- width = 200,
44
- arrowType: arrow = "right-top",
45
- ...other
46
- } = props;
47
- const {
48
- host_static_assets,
49
- environment_assets
50
- } = useEnvironment();
51
- const {
52
- getLabel
53
- } = useModuleDictionary();
54
- const [open, setOpen] = useState(null);
55
- const handleOpen = (event) => {
56
- setOpen(event.currentTarget);
57
- };
58
- const urlFinalIcon = useMemo(() => {
59
- if (urlIcon)
60
- return urlIcon;
61
- return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
62
- }, [urlIcon, host_static_assets, environment_assets]);
63
- const handleClose = () => {
64
- setOpen(null);
65
- };
66
- const handleClick = (menuAction) => {
67
- setOpen(null);
68
- menuAction.onClick();
69
- };
70
- const finalActions = useMemo(() => {
71
- let ret;
72
- if (typeof menuActions !== "function") {
73
- ret = menuActions;
74
- } else {
75
- ret = menuActions(objItem);
76
- }
77
- return ret;
78
- }, [menuActions, objItem]);
79
- return /* @__PURE__ */ jsxs(Fragment, {
80
- children: [/* @__PURE__ */ jsx(Tooltip, {
81
- title: toolTip,
82
- children: /* @__PURE__ */ jsx(WrapperMenuActions, {
83
- id: "WrapperMenuActions",
84
- size: "small",
85
- onClick: handleOpen,
86
- children: /* @__PURE__ */ jsx(Icon, {
87
- src: urlFinalIcon
88
- })
89
- })
90
- }), /* @__PURE__ */ jsx(Popover, {
91
- id: "Popover",
92
- open: Boolean(open),
93
- anchorEl: open,
94
- onClose: handleClose,
95
- arrowType: arrow,
96
- sx: {
97
- marginTop,
98
- marginBottom,
99
- marginLeft,
100
- marginRight,
101
- width,
102
- "& .MuiMenuItem-root": {
103
- px: 1,
104
- typography: "body2",
105
- borderRadius: 0.75
106
- }
107
- },
108
- ...other,
109
- children: open && finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
110
- dense: true,
111
- onClick: () => handleClick(menuAction),
112
- sx: {
113
- color: menuAction.color ?? "text.main"
114
- },
115
- disabled: menuAction.disabled,
116
- children: [/* @__PURE__ */ jsx(Icon, {
117
- src: menuAction.urlIcon
118
- }), /* @__PURE__ */ jsx(LabelMemuItem, {
119
- children: menuAction.label || getLabel(menuAction.dictionaryField)
120
- })]
121
- }, `menu_action_${index}`))
122
- })]
123
- });
124
- }
125
- const WrapperPagerActions = styled("div")(({ theme }) => ({
126
- width: "100%",
127
- justifyContent: "center",
128
- display: "flex",
129
- marginLeft: 0,
130
- [theme.breakpoints.up("sm")]: {
131
- display: "flex",
132
- alignItems: "center",
133
- marginLeft: theme.spacing(3)
134
- }
135
- }));
136
- function PagerActions(props) {
137
- const {
138
- count,
139
- page,
140
- rowsPerPage,
141
- onPageChange
142
- } = props;
143
- const {
144
- host_static_assets,
145
- environment_assets
146
- } = useEnvironment();
147
- const handleFirstPageButtonClick = (event) => {
148
- onPageChange(event, 0);
149
- };
150
- const handleBackButtonClick = (event) => {
151
- onPageChange(event, page - 1);
152
- };
153
- const handleNextButtonClick = (event) => {
154
- onPageChange(event, page + 1);
155
- };
156
- const handleLastPageButtonClick = (event) => {
157
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
158
- };
159
- return /* @__PURE__ */ jsxs(WrapperPagerActions, {
160
- id: "WrapperPagerActions",
161
- children: [/* @__PURE__ */ jsx(IconButton$1, {
162
- id: "test_bruce",
163
- dictionaryTooltip: "pager.first",
164
- onClick: handleFirstPageButtonClick,
165
- disabled: page === 0,
166
- "aria-label": "first page",
167
- src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
168
- }), /* @__PURE__ */ jsx(IconButton$1, {
169
- dictionaryTooltip: "pager.previous",
170
- onClick: handleBackButtonClick,
171
- disabled: page === 0,
172
- "aria-label": "first page",
173
- src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
174
- }), /* @__PURE__ */ jsx(IconButton$1, {
175
- dictionaryTooltip: "pager.next",
176
- onClick: handleNextButtonClick,
177
- disabled: page >= Math.ceil(count / rowsPerPage) - 1,
178
- "aria-label": "next page",
179
- src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
180
- }), /* @__PURE__ */ jsx(IconButton$1, {
181
- dictionaryTooltip: "pager.last",
182
- onClick: handleLastPageButtonClick,
183
- disabled: page >= Math.ceil(count / rowsPerPage) - 1,
184
- "aria-label": "last page",
185
- src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
186
- })]
187
- });
188
- }
189
- const WrapperStandarActions = styled("div")(({
190
- theme
191
- }) => ({
192
- paddingTop: theme.spacing(3),
193
- margin: theme.spacing(0, 1.5),
194
- display: "flex",
195
- flexDirection: "row",
196
- justifyContent: "flex-end",
197
- "& > button": {
198
- marginLeft: "10px"
199
- }
200
- }));
201
- const Actions$1 = (props) => {
202
- const {
203
- children
204
- } = props;
205
- return /* @__PURE__ */ jsx(WrapperStandarActions, {
206
- id: "WrapperStandarActions",
207
- children
208
- });
209
- };
210
- function getCommonActionsDictionary() {
211
- return ["common_actions"];
212
- }
213
- const defaultCommonActionsDictionary = {
214
- common_actions: {
215
- cancel: "Cancel",
216
- intro: "Intro",
217
- confirm_quit_title: "Confirm",
218
- confirm_quit_msg: "Are your sure exit?"
219
- }
220
- };
221
- const ACTIONS_COLUMN_KEY = "actions-row";
222
- function ActionsFormatter(props) {
223
- const {
224
- rowActionsGetter
225
- } = useDataGrid();
226
- if (rowActionsGetter === void 0) {
227
- return /* @__PURE__ */ jsx(Fragment, {});
228
- }
229
- return /* @__PURE__ */ jsx(MenuActions, {
230
- arrowType: "top-left",
231
- objItem: props.row,
232
- menuActions: rowActionsGetter,
233
- marginTop: 1,
234
- marginLeft: "-11px",
235
- anchorOrigin: {
236
- vertical: "bottom",
237
- horizontal: "left"
238
- },
239
- transformOrigin: {
240
- vertical: "top",
241
- horizontal: "left"
242
- }
243
- });
244
- }
245
- const ActionsColumn = {
246
- key: ACTIONS_COLUMN_KEY,
247
- name: "Actions",
248
- width: 60,
249
- withFilter: false,
250
- resizable: true,
251
- sortable: false,
252
- frozen: true,
253
- type: "custom",
254
- formatter: ActionsFormatter
255
- };
256
- const SKTWrapperFilter = styled("div")(({
257
- theme
258
- }) => ({
259
- display: "flex",
260
- justifyContent: "center",
261
- alignItems: "center",
262
- minWidth: theme.spacing(3.75),
263
- height: theme.spacing(3.75)
264
- }));
265
- function Filter() {
266
- const isSkeleton = useModuleSkeleton();
267
- const {
268
- activeFilters,
269
- setActiveFilters
270
- } = useFilters();
271
- const {
272
- host_static_assets,
273
- environment_assets
274
- } = useEnvironment();
275
- const toggleIcon = () => {
276
- setActiveFilters(!activeFilters);
277
- };
278
- if (isSkeleton) {
279
- return /* @__PURE__ */ jsx(SKTWrapperFilter, {
280
- children: /* @__PURE__ */ jsx(Skeleton, {
281
- variant: "circular",
282
- width: 20,
283
- height: 20
284
- })
285
- });
286
- }
287
- return /* @__PURE__ */ jsx(IconButton$1, {
288
- dictionaryTooltip: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
289
- onClick: toggleIcon,
290
- "aria-label": "filter",
291
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
292
- });
293
- }
294
- const WrapperColumnsConfig = styled("div")(({ theme }) => ({
295
- color: theme.palette.text.primary,
296
- position: "relative",
297
- display: "flex",
298
- flexDirection: "column",
299
- height: "100%",
300
- width: "100%"
301
- }));
302
- styled("div")(({ theme }) => ({
303
- color: theme.palette.text.primary,
304
- fontSize: theme.typography.h4.fontSize
305
- }));
306
- const DivSelColumns = styled("div")(({ theme }) => ({
307
- ...theme.typography.subtitle2,
308
- color: theme.palette.text.primary,
309
- padding: `${theme.spacing(3)} ${theme.spacing(1)}`
310
- }));
311
- const WrapperDataGrid = styled("div")(() => ({
312
- position: "relative",
313
- display: "flex",
314
- flexDirection: "column",
315
- flexGrow: 1
316
- }));
317
- styled("div")(() => ({
318
- display: "flex",
319
- flexDirection: "row"
320
- }));
321
- const ColumnActions = styled("div")(({ theme }) => ({
322
- paddingTop: theme.spacing(3),
323
- display: "flex",
324
- flexDirection: "row"
325
- }));
326
- styled("div")(({ theme }) => ({
327
- paddingTop: theme.spacing(3),
328
- display: "flex",
329
- flexDirection: "row",
330
- justifyContent: "flex-end",
331
- "& > button": {
332
- marginLeft: "10px"
333
- }
334
- }));
335
- function FormatterColumn({
336
- row,
337
- onRowChange,
338
- column
339
- }) {
340
- const handleChange = () => {
341
- const newRow = {
342
- ...row
343
- };
344
- newRow[column.key] = !row[column.key];
345
- onRowChange(newRow);
346
- };
347
- return /* @__PURE__ */ jsx(Checkbox, {
348
- size: "small",
349
- checked: row[column.key],
350
- onChange: handleChange
351
- });
352
- }
353
- function getRowsFromColumnsConfig(columnsConfig) {
354
- return columnsConfig.filter((column) => !column.hidden).map((column) => ({
355
- key: column.key,
356
- name: column.name,
357
- visible: column.visible === void 0 ? true : column.visible,
358
- frozen: column.frozen === void 0 ? false : column.frozen,
359
- originalIndex: column.orginalIndex,
360
- originalFrozen: column.originalFrozen,
361
- originalVisible: column.originalVisible
362
- }));
363
- }
364
- const ColumnsConfig = forwardRef((props, ref) => {
365
- const refdata_grid = useRef(null);
366
- const {
367
- onCloseSettings,
368
- columnsConfig,
369
- onChangeColumnsConfig
370
- } = props;
371
- const {
372
- getLabel
373
- } = useModuleDictionary();
374
- const [isInit, setIsInit] = useState(true);
375
- const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
376
- const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
377
- const divRef = useRef(null);
378
- const {
379
- host_static_assets,
380
- environment_assets
381
- } = useEnvironment();
382
- useImperativeHandle(ref, () => ({
383
- onClickIntro: handleIntro,
384
- current: divRef.current
385
- }));
386
- const columnsdata_grid = useMemo(() => [{
387
- key: "name",
388
- name: getLabel("data_grid.settings_column_name"),
389
- width: 200,
390
- resizable: true,
391
- type: "string"
392
- }, {
393
- key: "originalIndex",
394
- name: getLabel("data_grid.settings_column_position"),
395
- width: 50,
396
- type: "number",
397
- cellClass: "rdg-cell-align-center"
398
- }, {
399
- key: "visible",
400
- name: getLabel("data_grid.settings_column_visible"),
401
- width: 80,
402
- type: "boolean",
403
- formatter: FormatterColumn,
404
- cellClass: "rdg-cell-align-center"
405
- }, {
406
- key: "frozen",
407
- name: getLabel("data_grid.settings_column_frozen"),
408
- width: 80,
409
- type: "boolean",
410
- formatter: FormatterColumn,
411
- cellClass: "rdg-cell-align-center"
412
- }], [getLabel]);
413
- const checkAll = () => {
414
- setRows(rows.map((row) => ({
415
- ...row,
416
- visible: true
417
- })));
418
- };
419
- const unCheckAll = () => {
420
- setRows(rows.map((row) => ({
421
- ...row,
422
- visible: false
423
- })));
424
- };
425
- const restoreAll = () => {
426
- setRows(rows.map((row) => ({
427
- ...row,
428
- visible: row.originalVisible,
429
- frozen: row.originalFrozen,
430
- index: row.originalIndex
431
- })).sort((a, b) => a.index - b.index));
432
- };
433
- useEffect(() => {
434
- if (isInit === false) {
435
- setRows(getRowsFromColumnsConfig(columnsConfig));
436
- }
437
- setIsInit(false);
438
- }, [columnsConfig]);
439
- const rowSelectedIndex = useMemo(() => {
440
- let rowIndex = -1;
441
- if (selRows.size !== 1)
442
- return rowIndex;
443
- const iterator = selRows.entries();
444
- const entry = iterator.next().value[1];
445
- rowIndex = rows.findIndex((row) => row.key === entry);
446
- return rowIndex;
447
- }, [rows, selRows]);
448
- const handleMoveFirst = () => {
449
- if (rowSelectedIndex === -1)
450
- return -1;
451
- const newRows = [...rows];
452
- newRows.splice(rowSelectedIndex, 1);
453
- newRows.splice(0, 0, rows[rowSelectedIndex]);
454
- refdata_grid.current?.selectCell({
455
- idx: 0,
456
- rowIdx: 0
457
- });
458
- setRows(newRows);
459
- };
460
- const handleMoveLast = () => {
461
- if (rowSelectedIndex === -1)
462
- return -1;
463
- const newRows = [...rows];
464
- newRows.splice(rowSelectedIndex, 1);
465
- newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
466
- refdata_grid.current?.selectCell({
467
- idx: 0,
468
- rowIdx: newRows.length - 1
469
- });
470
- setRows(newRows);
471
- };
472
- const handleMoveUpDownd = (position) => {
473
- if (rowSelectedIndex === -1)
474
- return -1;
475
- const newRows = [...rows];
476
- const element = newRows[rowSelectedIndex];
477
- newRows.splice(rowSelectedIndex, 1);
478
- newRows.splice(rowSelectedIndex + position, 0, element);
479
- refdata_grid.current?.selectCell({
480
- idx: 0,
481
- rowIdx: rowSelectedIndex + position
482
- });
483
- setRows(newRows);
484
- };
485
- const getColumnConfigByKey = (key) => {
486
- const rowIndexFinded = rows.findIndex((row) => row.key === key);
487
- if (rowIndexFinded > -1) {
488
- return {
489
- visible: rows[rowIndexFinded].visible,
490
- frozen: rows[rowIndexFinded].frozen
491
- };
492
- }
493
- return void 0;
494
- };
495
- const getRowIndex = (column) => {
496
- const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
497
- if (rowIndexFinded > -1) {
498
- return rowIndexFinded;
499
- }
500
- return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
501
- };
502
- const handleIntro = () => {
503
- const newColumnsConfig = columnsConfig.map((columnConfig) => {
504
- const newColumnConfig = {
505
- ...columnConfig
506
- };
507
- if (!columnConfig.hidden) {
508
- const columnConfigRow = getColumnConfigByKey(columnConfig.key);
509
- if (columnConfigRow) {
510
- newColumnConfig.visible = columnConfigRow.visible;
511
- newColumnConfig.frozen = columnConfigRow.frozen;
512
- }
513
- }
514
- return newColumnConfig;
515
- }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
516
- onChangeColumnsConfig(newColumnsConfig);
517
- onCloseSettings();
518
- };
519
- const onInternalSelectedRowsChange = () => {
520
- };
521
- const onInternalRowsChange = (newRows) => {
522
- setRows(newRows);
523
- };
524
- const onRowClick = (row) => {
525
- if (selRows.has(row.key))
526
- return;
527
- const mySet = /* @__PURE__ */ new Set([row.key]);
528
- setSelRows(mySet);
529
- };
530
- return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
531
- id: "WrapperColumnsConfig",
532
- ref: divRef,
533
- children: [/* @__PURE__ */ jsx(DivSelColumns, {
534
- id: "divInfo",
535
- children: getLabel("data_grid.settings_sel_columns")
536
- }), /* @__PURE__ */ jsx(WrapperDataGrid, {
537
- id: "WrapperDataGrid",
538
- children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
539
- id: "Originaldata_gridWrapperStyled",
540
- children: /* @__PURE__ */ jsx(DataGrid$1, {
541
- className: "fill-data_grid rdg-light",
542
- ref: refdata_grid,
543
- columns: columnsdata_grid,
544
- rows,
545
- onRowsChange: onInternalRowsChange,
546
- selectedRows: selRows,
547
- onSelectedRowsChange: onInternalSelectedRowsChange,
548
- onRowClick,
549
- rowKeyGetter: (row) => row.key,
550
- cellNavigationMode: "CHANGE_ROW",
551
- defaultColumnOptions: {
552
- resizable: true,
553
- sortable: true
554
- }
555
- })
556
- })
557
- }), /* @__PURE__ */ jsxs(ColumnActions, {
558
- children: [/* @__PURE__ */ jsx(IconButton$1, {
559
- dictionaryTooltip: "data_grid.settings_move_first",
560
- onClick: handleMoveFirst,
561
- "aria-label": "move first place",
562
- disabled: rowSelectedIndex < 1,
563
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
564
- }), /* @__PURE__ */ jsx(IconButton$1, {
565
- dictionaryTooltip: "data_grid.settings_move_up",
566
- onClick: () => handleMoveUpDownd(-1),
567
- "aria-label": "move up place",
568
- disabled: rowSelectedIndex < 1,
569
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
570
- }), /* @__PURE__ */ jsx(IconButton$1, {
571
- dictionaryTooltip: "data_grid.settings_move_last",
572
- onClick: handleMoveLast,
573
- "aria-label": "move last place",
574
- disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
575
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
576
- }), /* @__PURE__ */ jsx(IconButton$1, {
577
- dictionaryTooltip: "data_grid.settings_move_down",
578
- onClick: () => handleMoveUpDownd(1),
579
- "aria-label": "move down place",
580
- disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
581
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
582
- }), /* @__PURE__ */ jsx(IconButton$1, {
583
- dictionaryTooltip: "data_grid.settings_visible_all",
584
- onClick: checkAll,
585
- "aria-label": "check visible all",
586
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
587
- }), /* @__PURE__ */ jsx(IconButton$1, {
588
- dictionaryTooltip: "data_grid.settings_no_visible_all",
589
- onClick: unCheckAll,
590
- "aria-label": "un check all",
591
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
592
- }), /* @__PURE__ */ jsx(IconButton$1, {
593
- dictionaryTooltip: "data_grid.settings_restore",
594
- onClick: restoreAll,
595
- "aria-label": "Restore columns",
596
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
597
- })]
598
- })]
599
- });
600
- });
601
- ColumnsConfig.displayName = "ColumnsConfig";
602
- const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
603
- display: "flex",
604
- justifyContent: "center",
605
- alignItems: "center",
606
- minWidth: theme.spacing(3.75),
607
- height: theme.spacing(3.75)
608
- }));
609
- function Settings() {
610
- const {
611
- openModal,
612
- closeModal
613
- } = useModal();
614
- const {
615
- columnsConfig,
616
- onChangeColumnsConfig
617
- } = useDataGrid();
618
- const {
619
- getLabel
620
- } = useModuleDictionary();
621
- const {
622
- host_static_assets,
623
- environment_assets
624
- } = useEnvironment();
625
- const isSkeleton = useModuleSkeleton();
626
- const ref = useRef(null);
627
- const onCloseSettings = useCallback(() => {
628
- closeModal();
629
- }, [closeModal]);
630
- const onClickIntro = useCallback(() => {
631
- if (ref.current?.onClickIntro) {
632
- ref.current?.onClickIntro();
633
- }
634
- }, []);
635
- const onClickSettings = useCallback(() => {
636
- openModal({
637
- initialWidth: 500,
638
- initialHeigth: 680,
639
- window: /* @__PURE__ */ jsxs(WindowBase, {
640
- title: getLabel("data_grid.settings_title"),
641
- children: [/* @__PURE__ */ jsx(ColumnsConfig, {
642
- ref,
643
- columnsConfig,
644
- onChangeColumnsConfig,
645
- onCloseSettings
646
- }), /* @__PURE__ */ jsxs(Actions$1, {
647
- children: [/* @__PURE__ */ jsx(ActionCancel, {
648
- onClick: closeModal
649
- }), /* @__PURE__ */ jsx(ActionIntro, {
650
- onClick: onClickIntro
651
- })]
652
- })]
653
- })
654
- });
655
- }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
656
- if (isSkeleton) {
657
- return /* @__PURE__ */ jsx(SKTWrapperColumnsSettings, {
658
- children: /* @__PURE__ */ jsx(Skeleton, {
659
- variant: "circular",
660
- width: 20,
661
- height: 20
662
- })
663
- });
664
- }
665
- return /* @__PURE__ */ jsx(IconButton$1, {
666
- dictionaryTooltip: "data_grid.tooltip_settings",
667
- onClick: onClickSettings,
668
- "aria-label": "settings",
669
- src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
670
- });
671
- }
672
- const Container = styled("div")(() => ({
673
- display: "flex",
674
- alignItems: "center"
675
- }));
676
- const RowsLabel = styled("span")(() => ({}));
677
- const InsetLabel = styled("span")(({ theme }) => ({
678
- marginLeft: theme.spacing(2),
679
- paddingTop: "2px",
680
- paddingBottom: "2px",
681
- paddingLeft: "4px",
682
- paddingRight: "4px",
683
- border: `1px solid ${theme.palette.divider}`
684
- }));
685
- function RowsCount() {
686
- const {
687
- rowsCount
688
- } = useDataGrid();
689
- const {
690
- getLabel
691
- } = useModuleDictionary();
692
- const isSkeleton = useModuleSkeleton();
693
- if (isSkeleton) {
694
- return /* @__PURE__ */ jsxs(Container, {
695
- children: [/* @__PURE__ */ jsx(RowsLabel, {
696
- children: /* @__PURE__ */ jsx(Skeleton, {
697
- variant: "text",
698
- width: "40px",
699
- height: "16px"
700
- })
701
- }), /* @__PURE__ */ jsx(InsetLabel, {
702
- children: /* @__PURE__ */ jsx(Skeleton, {
703
- variant: "text",
704
- width: "20px",
705
- height: "16px"
706
- })
707
- })]
708
- });
709
- }
710
- return /* @__PURE__ */ jsxs(Container, {
711
- className: "rows-count",
712
- id: "RowsCount",
713
- children: [/* @__PURE__ */ jsx(RowsLabel, {
714
- children: getLabel("data_grid.rows")
715
- }), /* @__PURE__ */ jsx(InsetLabel, {
716
- children: rowsCount
717
- })]
718
- });
719
- }
720
- const WrapperDensity = styled("div")(({ theme }) => ({
721
- marginLeft: 0,
722
- [theme.breakpoints.up("sm")]: {
723
- marginLeft: theme.spacing(3)
724
- }
725
- }));
726
- const SKTWrapperDensity = styled("div")(({ theme }) => ({
727
- display: "flex",
728
- justifyContent: "center",
729
- alignItems: "center",
730
- minWidth: theme.spacing(3.75),
731
- height: theme.spacing(3.75)
732
- }));
733
- function Density() {
734
- const {
735
- host_static_assets,
736
- environment_assets
737
- } = useEnvironment();
738
- const {
739
- rowHeights,
740
- currentRowHeightVariant,
741
- setRowHeightVariant
742
- } = useDataGrid();
743
- const {
744
- getLabel
745
- } = useModuleDictionary();
746
- const isSkeleton = useModuleSkeleton();
747
- const menuActions = useMemo(() => {
748
- if (typeof rowHeights === "number") {
749
- return [];
750
- }
751
- return [{
752
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
753
- onClick: () => setRowHeightVariant("compact"),
754
- disabled: currentRowHeightVariant === "compact",
755
- dictionaryField: "data_grid.density_compact"
756
- }, {
757
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
758
- onClick: () => setRowHeightVariant("standard"),
759
- disabled: currentRowHeightVariant === "standard",
760
- dictionaryField: "data_grid.density_standard"
761
- }, {
762
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
763
- onClick: () => setRowHeightVariant("confortable"),
764
- disabled: currentRowHeightVariant === "confortable",
765
- dictionaryField: "data_grid.density_confortable"
766
- }];
767
- }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
768
- const currenViewIcon = useMemo(() => {
769
- if (currentRowHeightVariant === "compact") {
770
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
771
- }
772
- if (currentRowHeightVariant === "standard") {
773
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
774
- }
775
- return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
776
- }, [currentRowHeightVariant, host_static_assets, environment_assets]);
777
- if (menuActions.length === 0) {
778
- return /* @__PURE__ */ jsx(Fragment, {});
779
- }
780
- if (isSkeleton) {
781
- return /* @__PURE__ */ jsx(SKTWrapperDensity, {
782
- children: /* @__PURE__ */ jsx(Skeleton, {
783
- variant: "circular",
784
- width: "20px",
785
- height: "20px"
786
- })
787
- });
788
- }
789
- return /* @__PURE__ */ jsx(WrapperDensity, {
790
- id: "WrapperDensity",
791
- children: /* @__PURE__ */ jsx(MenuActions, {
792
- arrowType: "right-top",
793
- anchorOrigin: {
794
- vertical: "top",
795
- horizontal: "left"
796
- },
797
- transformOrigin: {
798
- vertical: "top",
799
- horizontal: "right"
800
- },
801
- menuActions,
802
- url_icon: currenViewIcon,
803
- toolTip: getLabel("data_grid.tooltip_density")
804
- })
805
- });
806
- }
807
- const WrapperActions = styled("div")(({ theme }) => ({
808
- ...theme.typography.caption,
809
- position: "absolute",
810
- left: "0px",
811
- right: "0px",
812
- top: "0px",
813
- height: theme.spacing(5.5),
814
- padding: 0,
815
- display: "flex",
816
- flexDirection: "row",
817
- alignItems: "center",
818
- justifyContent: "flex-end",
819
- [theme.breakpoints.up("sm")]: {
820
- padding: theme.spacing(0, 1.5)
821
- },
822
- "&.with-no-pager .rows-count": {
823
- flexGrow: 1
824
- },
825
- "& .MuiTablePagination-root": {
826
- flexGrow: 1,
827
- display: "flex",
828
- justifyContent: "center",
829
- overflow: "hidden"
830
- }
831
- }));
832
- function Actions(props) {
833
- const isDesktop = useResponsiveDesktop();
834
- const {
835
- rowHeights
836
- } = useDataGrid();
837
- const isSkeleton = useModuleSkeleton();
838
- const {
839
- withRowsCount = true,
840
- withPager = true,
841
- pagerOptions,
842
- withSettings = true,
843
- settingsProps,
844
- withLocalFilters
845
- } = props;
846
- return /* @__PURE__ */ jsxs(WrapperActions, {
847
- id: "WrapperActions",
848
- className: withPager && pagerOptions ? "with-pager" : "with-no-pager",
849
- children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
850
- ...pagerOptions,
851
- totalRecords: pagerOptions.totalRecords,
852
- isSkeleton,
853
- isDesktop
854
- }), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
855
- ...settingsProps
856
- })]
857
- });
858
- }
859
- export {
860
- ActionsColumn as A,
861
- LabelMemuItem as L,
862
- MenuActions as M,
863
- PagerActions as P,
864
- Actions as a,
865
- Actions$1 as b,
866
- defaultCommonActionsDictionary as d,
867
- getCommonActionsDictionary as g
868
- };