@m4l/components 0.1.12 → 0.1.13

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 (143) hide show
  1. package/assets/Logo/index.228dcb5a.js +86 -0
  2. package/commonjs.565e6834.js +12 -0
  3. package/components/CommonActions/components/ActionCancel/index.cba1b460.js +17 -0
  4. package/components/CommonActions/components/ActionFormCancel/index.be2fe891.js +49 -0
  5. package/components/CommonActions/components/ActionFormIntro/index.ca4d2674.js +31 -0
  6. package/components/CommonActions/components/ActionIntro/index.cc4b1e0e.js +18 -0
  7. package/components/CommonActions/components/Actions/index.e8148d98.js +743 -0
  8. package/components/CompanyLogo/{index.js → index.f81c179c.js} +42 -48
  9. package/components/DataGrid/index.b688877d.js +894 -0
  10. package/components/DynamicFilter/index.82ce857e.js +1158 -0
  11. package/components/ErrorLabel/index.c8615f16.js +19 -0
  12. package/components/Icon/index.cbca79b0.js +70 -0
  13. package/components/Image/index.e790b50b.js +122 -0
  14. package/components/LanguagePopover/index.3d9611cb.js +87 -0
  15. package/components/Loadable/index.f5518558.js +15 -0
  16. package/components/ModalDialog/index.3850c053.js +168 -0
  17. package/components/NoItemSelected/{index.js → index.12f0ca67.js} +43 -50
  18. package/components/ObjectLogs/index.27ef875d.js +266 -0
  19. package/components/Page/index.6d69977e.js +35 -0
  20. package/components/Page/index.d.ts +1 -1
  21. package/components/PaperForm/index.d7c74064.js +105 -0
  22. package/components/Period/index.5e68286a.js +160 -0
  23. package/components/PropertyValue/index.ab3dd7e9.js +116 -0
  24. package/components/Resizeable/{index.js → index.45995d2b.js} +21 -19
  25. package/components/ScrollBar/index.39eeb2de.js +49 -0
  26. package/components/ScrollToTop/index.e06f98f6.js +11 -0
  27. package/components/SplitLayout/{index.js → index.4032673d.js} +35 -35
  28. package/components/animate/IconButtonAnimate/index.d.ts +1 -1
  29. package/components/animate/LoadingScreen/{index.js → index.f1cec7db.js} +29 -27
  30. package/components/animate/MotionContainer/index.8d9f9d80.js +30 -0
  31. package/components/animate/MotionLazyContainer/index.572dd012.js +15 -0
  32. package/components/animate/features.0fbf41e1.js +5 -0
  33. package/components/animate/variants/{bounce.js → bounce.784aaaaa.js} +15 -16
  34. package/components/animate/variants/container.11f82b76.js +20 -0
  35. package/components/animate/variants/fade.b561c0fc.js +59 -0
  36. package/components/animate/variants/{index.js → index.7a912140.js} +0 -0
  37. package/components/animate/variants/transition.bd46b9ce.js +15 -0
  38. package/components/formatters/BooleanFormatter/index.cca53b7f.js +42 -0
  39. package/components/formatters/DateFormatter/index.ad8d9b8e.js +57 -0
  40. package/components/formatters/index.55856d65.js +106 -0
  41. package/components/hook-form/FormProvider/index.257acd9f.js +55 -0
  42. package/components/hook-form/RHFAutocomplete/index.6ed76d4c.js +122 -0
  43. package/components/hook-form/RHFAutocompleteAsync/index.8f2c97ea.js +153 -0
  44. package/components/hook-form/RHFCheckbox/index.f9ce6c39.js +59 -0
  45. package/components/hook-form/RHFDateTime/index.fc5cbafe.js +68 -0
  46. package/components/hook-form/RHFMultiCheckbox/index.2680b3b6.js +34 -0
  47. package/components/hook-form/RHFPeriod/index.23c254e9.js +45 -0
  48. package/components/hook-form/RHFRadioGroup/index.b3335e13.js +43 -0
  49. package/components/hook-form/RHFSelect/index.b6ca8bb2.js +36 -0
  50. package/components/hook-form/RHFTextField/index.4c455f75.js +77 -0
  51. package/components/hook-form/RHFTextField/index.d.ts +1 -1
  52. package/components/hook-form/RHFUpload/index.ed3d739f.js +244 -0
  53. package/components/mui_extended/Accordion/index.2116e423.js +103 -0
  54. package/components/mui_extended/Avatar/index.0a2a4523.js +32 -0
  55. package/components/mui_extended/Avatar/index.d.ts +1 -1
  56. package/components/mui_extended/BoxIcon/index.e638ecc8.js +22 -0
  57. package/components/mui_extended/Breadcrumbs/index.5e37d903.js +89 -0
  58. package/components/mui_extended/Button/index.84d8898c.js +110 -0
  59. package/components/mui_extended/IconButton/index.88f3aadb.js +98 -0
  60. package/components/mui_extended/LinkWithRoute/index.d4b263de.js +28 -0
  61. package/components/mui_extended/MenuPopover/index.488fc536.js +131 -0
  62. package/components/mui_extended/Pager/index.0576814f.js +126 -0
  63. package/components/mui_extended/Tab/index.e0653a0a.js +28 -0
  64. package/components/mui_extended/Typography/index.0c4604b3.js +22 -0
  65. package/contexts/ModalContext/index.2188b69e.js +150 -0
  66. package/hooks/useFormAddEdit/index.d4845f1a.js +26 -0
  67. package/hooks/useModal/index.6571d2d9.js +6 -0
  68. package/index.js +162 -70
  69. package/lodash.e09401f0.js +32 -0
  70. package/node_modules.168cb897.js +55 -0
  71. package/package.json +1 -1
  72. package/react-data-grid.d46d625e.js +2115 -0
  73. package/react-draggable.20e95c61.js +714 -0
  74. package/react-json-view.f56a7f8e.js +2762 -0
  75. package/react-lazy-load-image-component.45b56650.js +784 -0
  76. package/react-resizable.5277deaf.js +371 -0
  77. package/react-splitter-layout.7810ac1b.js +165 -0
  78. package/utils/index.214d9542.js +435 -0
  79. package/assets/Logo/index.js +0 -91
  80. package/commonjs.js +0 -9
  81. package/components/CommonActions/components/ActionCancel/index.js +0 -15
  82. package/components/CommonActions/components/ActionFormCancel/index.js +0 -62
  83. package/components/CommonActions/components/ActionFormIntro/index.js +0 -35
  84. package/components/CommonActions/components/ActionIntro/index.js +0 -16
  85. package/components/CommonActions/components/Actions/index.js +0 -859
  86. package/components/DataGrid/index.js +0 -1067
  87. package/components/DynamicFilter/index.js +0 -1573
  88. package/components/ErrorLabel/index.js +0 -18
  89. package/components/Icon/index.js +0 -80
  90. package/components/Image/index.js +0 -128
  91. package/components/LanguagePopover/index.js +0 -93
  92. package/components/Loadable/index.js +0 -13
  93. package/components/ModalDialog/index.js +0 -180
  94. package/components/ObjectLogs/index.js +0 -284
  95. package/components/Page/index.js +0 -36
  96. package/components/PaperForm/index.js +0 -110
  97. package/components/Period/index.js +0 -230
  98. package/components/PropertyValue/index.js +0 -142
  99. package/components/ScrollBar/index.js +0 -52
  100. package/components/ScrollToTop/index.js +0 -10
  101. package/components/animate/MotionContainer/index.js +0 -31
  102. package/components/animate/MotionLazyContainer/index.js +0 -13
  103. package/components/animate/features.js +0 -2
  104. package/components/animate/variants/container.js +0 -20
  105. package/components/animate/variants/fade.js +0 -61
  106. package/components/animate/variants/transition.js +0 -16
  107. package/components/formatters/BooleanFormatter/index.js +0 -52
  108. package/components/formatters/DateFormatter/index.js +0 -66
  109. package/components/formatters/index.js +0 -112
  110. package/components/hook-form/FormProvider/index.js +0 -61
  111. package/components/hook-form/RHFAutocomplete/index.js +0 -144
  112. package/components/hook-form/RHFAutocompleteAsync/index.js +0 -191
  113. package/components/hook-form/RHFCheckbox/index.js +0 -65
  114. package/components/hook-form/RHFDateTime/index.js +0 -79
  115. package/components/hook-form/RHFMultiCheckbox/index.js +0 -32
  116. package/components/hook-form/RHFPeriod/index.js +0 -47
  117. package/components/hook-form/RHFRadioGroup/index.js +0 -41
  118. package/components/hook-form/RHFSelect/index.js +0 -34
  119. package/components/hook-form/RHFTextField/index.js +0 -87
  120. package/components/hook-form/RHFUpload/index.js +0 -255
  121. package/components/mui_extended/Accordion/index.js +0 -105
  122. package/components/mui_extended/Avatar/index.js +0 -33
  123. package/components/mui_extended/BoxIcon/index.js +0 -20
  124. package/components/mui_extended/Breadcrumbs/index.js +0 -92
  125. package/components/mui_extended/Button/index.js +0 -131
  126. package/components/mui_extended/IconButton/index.js +0 -108
  127. package/components/mui_extended/LinkWithRoute/index.js +0 -30
  128. package/components/mui_extended/MenuPopover/index.js +0 -135
  129. package/components/mui_extended/Pager/index.js +0 -137
  130. package/components/mui_extended/Tab/index.js +0 -30
  131. package/components/mui_extended/Typography/index.js +0 -21
  132. package/contexts/ModalContext/index.js +0 -165
  133. package/hooks/useFormAddEdit/index.js +0 -42
  134. package/hooks/useModal/index.js +0 -4
  135. package/lodash.js +0 -62
  136. package/node_modules.js +0 -54
  137. package/react-data-grid.js +0 -2652
  138. package/react-draggable.js +0 -960
  139. package/react-json-view.js +0 -2764
  140. package/react-lazy-load-image-component.js +0 -792
  141. package/react-resizable.js +0 -541
  142. package/react-splitter-layout.js +0 -165
  143. package/utils/index.js +0 -572
@@ -1,1573 +0,0 @@
1
- import { S as ScrollBar } from "../ScrollBar/index.js";
2
- import { styled } from "@mui/material/styles";
3
- import React, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
4
- import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
5
- import * as Yup from "yup";
6
- import { useFormContext, useWatch } from "react-hook-form";
7
- import { F as FormProvider } from "../hook-form/FormProvider/index.js";
8
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
9
- import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.js";
10
- import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
11
- import "../hook-form/RHFAutocompleteAsync/index.js";
12
- import "../hook-form/RHFCheckbox/index.js";
13
- import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
14
- import "@mui/x-date-pickers";
15
- import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
16
- import "../hook-form/RHFPeriod/index.js";
17
- import "../ErrorLabel/index.js";
18
- import "../Period/index.js";
19
- import { I as Icon } from "../Icon/index.js";
20
- import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
21
- import "@mui/material/Button";
22
- import { F as FilterButton } from "../mui_extended/Button/index.js";
23
- import "react-router-dom";
24
- import "../../contexts/ModalContext/index.js";
25
- import "@mui/lab";
26
- import "../../lodash.js";
27
- import "react-dropzone";
28
- import "../../react-lazy-load-image-component.js";
29
- import "../Image/index.js";
30
- import "../hook-form/RHFUpload/index.js";
31
- import { I as IconButton } from "../mui_extended/IconButton/index.js";
32
- import "simplebar/dist/simplebar.min.css";
33
- import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
34
- import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
35
- import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
36
- import { useResponsiveDesktop } from "@m4l/graphics";
37
- const WrapperApplyedFilters = styled("div")(({
38
- theme
39
- }) => ({
40
- width: "100%",
41
- margin: theme.spacing(0, 1),
42
- paddingLeft: theme.spacing(1),
43
- borderLeft: `1px solid ${theme.palette.divider}`
44
- }));
45
- const ContainerApplyedFilters = styled("div")(({
46
- theme
47
- }) => ({
48
- width: "100%",
49
- display: "flex",
50
- justifyContent: "flex-start",
51
- alignItems: "center",
52
- height: "auto",
53
- gap: theme.spacing(1.5)
54
- }));
55
- const STRING_OPERATORS = ["c", "nc"];
56
- const NUMBER_OPERATORS = ["b", "e", "ne", "gt", "gte", "lt", "lte"];
57
- const BOOLEAN_OPERATORS = ["e", "ne"];
58
- const DATE_TIME_OPERATORS = [
59
- "b",
60
- "e",
61
- "ne",
62
- "gt",
63
- "gte",
64
- "lt",
65
- "lte"
66
- ];
67
- const ALL_FIELDS = {
68
- name: "all",
69
- label: "dynamic_filter.all_fields",
70
- urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg",
71
- type: "string",
72
- multiple: true,
73
- presence: "optional"
74
- };
75
- const WrapperStringFilter$1 = styled("div")(({
76
- theme
77
- }) => ({
78
- display: "flex",
79
- flexDirection: "column",
80
- justifyContent: "center",
81
- alignItems: "center",
82
- width: "100%",
83
- minWidth: theme.spacing(3.75),
84
- padding: theme.spacing(3, 0),
85
- gap: theme.spacing(3)
86
- }));
87
- const WrapperAutoComplete$3 = styled("div")(() => ({
88
- width: "100%"
89
- }));
90
- const getDefaultStringFilter = (field, fixed, getLabel) => {
91
- const dfop1 = field.defaultOperand1;
92
- const defaultFilter = {
93
- id: 0,
94
- n: field.name,
95
- fixed,
96
- isSetted: false,
97
- o: "c",
98
- labelOperator: "",
99
- o1: "",
100
- o2: "",
101
- labelOperands: ""
102
- };
103
- if (dfop1 !== void 0 && typeof dfop1 === "string") {
104
- defaultFilter.o1 = dfop1;
105
- }
106
- defaultFilter.labelOperands = defaultFilter.o1 + "";
107
- defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
108
- return defaultFilter;
109
- };
110
- function StringFilter() {
111
- const {
112
- popupData: {
113
- filter,
114
- field
115
- },
116
- setPoupEditValidationSchema,
117
- setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
118
- getLabelOperator
119
- } = useBase();
120
- const {
121
- getLabel
122
- } = useModuleDictionary();
123
- const inputRef = useRef(null);
124
- const {
125
- setValue
126
- } = useFormContext();
127
- const [isLoaded, setIsLoaded] = useState(false);
128
- const options = useMemo(() => STRING_OPERATORS.map((o) => ({
129
- id: o,
130
- label: getLabelOperator(o)
131
- })), [getLabelOperator]);
132
- const transformFunctionFormValuesToValues = useCallback((data) => {
133
- if (!filter || !field)
134
- return void 0;
135
- const newFilter = {
136
- id: filter.id,
137
- n: field.name,
138
- fixed: filter.fixed,
139
- isSetted: true,
140
- o: data.valueOperator.id,
141
- labelOperator: data.valueOperator.label,
142
- o1: data.valueOperand1,
143
- labelOperands: data.valueOperand1
144
- };
145
- return newFilter;
146
- }, []);
147
- useEffect(() => {
148
- if (!isLoaded) {
149
- setPoupEditValidationSchema({
150
- valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
151
- valueOperand1: Yup.string().required(getLabel(`operand_required`))
152
- });
153
- }
154
- setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
155
- if (filter && field) {
156
- setValue("valueOperand1", filter.o1, {
157
- shouldTouch: false,
158
- shouldValidate: false
159
- });
160
- }
161
- setIsLoaded(true);
162
- }, [getLabel, filter, field]);
163
- useEffect(() => {
164
- inputRef.current?.focus();
165
- }, [isLoaded]);
166
- return /* @__PURE__ */ jsx(WrapperStringFilter$1, {
167
- children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
168
- children: [/* @__PURE__ */ jsx(WrapperAutoComplete$3, {
169
- children: /* @__PURE__ */ jsx(RHFAutocomplete, {
170
- name: "valueOperator",
171
- autoComplete: "off",
172
- options,
173
- getOptionLabel: (option) => option.label,
174
- isOptionEqualToValue: (option, value) => option.id === value.id,
175
- label: ""
176
- })
177
- }), /* @__PURE__ */ jsx(RHFTextField, {
178
- name: "valueOperand1",
179
- ref: inputRef,
180
- focused: true
181
- })]
182
- })
183
- });
184
- }
185
- const WrapperAllFieldsFilter$1 = styled("div")(({
186
- theme
187
- }) => ({
188
- display: "flex",
189
- flexDirection: "column",
190
- justifyContent: "center",
191
- alignItems: "center",
192
- width: "100%",
193
- minWidth: theme.spacing(3.75),
194
- height: "100%",
195
- padding: theme.spacing(3, 0),
196
- gap: theme.spacing(3)
197
- }));
198
- const WrapperAutoComplete$2 = styled("div")(() => ({
199
- width: "100%"
200
- }));
201
- const getDefaultBooleanFilter = (field, fixed, getLabel) => {
202
- const dfop1 = field.defaultOperand1;
203
- const defaultFilter = {
204
- id: 0,
205
- n: field.name,
206
- fixed,
207
- isSetted: true,
208
- o: "e",
209
- labelOperator: "",
210
- o1: true,
211
- o2: "",
212
- labelOperands: ""
213
- };
214
- defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
215
- if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
216
- defaultFilter.o1 = dfop1;
217
- }
218
- defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.o1}`);
219
- return defaultFilter;
220
- };
221
- function BooleanFilter() {
222
- const {
223
- setPoupEditValidationSchema,
224
- setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
225
- getLabelOperator
226
- } = useBase();
227
- const {
228
- getLabel
229
- } = useModuleDictionary();
230
- const {
231
- popupData: {
232
- filter,
233
- field
234
- }
235
- } = useBase();
236
- const {
237
- setValue
238
- } = useFormContext();
239
- const [isLoaded, setIsLoaded] = useState(false);
240
- const operators = useMemo(() => BOOLEAN_OPERATORS.map((o) => ({
241
- id: o,
242
- label: getLabelOperator(o)
243
- })), [getLabelOperator]);
244
- const optionsYesNo = useMemo(() => [{
245
- value: true,
246
- label: getLabel("dynamic_filter.operand_true")
247
- }, {
248
- value: false,
249
- label: getLabel("dynamic_filter.operand_false")
250
- }], [getLabel]);
251
- const transformFunctionFormValuesToValues = useCallback((data) => {
252
- if (!filter || !field)
253
- return void 0;
254
- const newFilter = {
255
- id: filter.id,
256
- n: field.name,
257
- fixed: filter.fixed,
258
- isSetted: true,
259
- o: data.valueOperator.id,
260
- labelOperator: data.valueOperator.label,
261
- o1: data.valueOperand1.value,
262
- labelOperands: data.valueOperand1.label
263
- };
264
- return newFilter;
265
- }, []);
266
- useEffect(() => {
267
- if (!isLoaded) {
268
- setPoupEditValidationSchema({
269
- valueOperator: Yup.object().nullable().required(getLabel(`error_operator_required`)),
270
- valueOperand1: Yup.object().nullable().required(getLabel(`error_operand_required`))
271
- });
272
- }
273
- setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
274
- if (filter && field) {
275
- setValue("valueOperand1", {
276
- value: filter.o1,
277
- label: getLabel(`dynamic_filter.operand_${filter.o1}`)
278
- }, {
279
- shouldTouch: false,
280
- shouldValidate: false
281
- });
282
- }
283
- setIsLoaded(true);
284
- }, [getLabel]);
285
- return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
286
- id: "WrapperAllFieldsFilter",
287
- children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
288
- children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
289
- children: /* @__PURE__ */ jsx(RHFAutocomplete, {
290
- name: "valueOperator",
291
- autoComplete: "off",
292
- options: operators,
293
- getOptionLabel: (option) => option.label,
294
- isOptionEqualToValue: (option, value) => option.id === value.id,
295
- label: ""
296
- })
297
- }), /* @__PURE__ */ jsx(WrapperAutoComplete$2, {
298
- children: /* @__PURE__ */ jsx(RHFAutocomplete, {
299
- name: "valueOperand1",
300
- autoComplete: "off",
301
- options: optionsYesNo,
302
- getOptionLabel: (option) => option.label,
303
- isOptionEqualToValue: (option, value) => option.value === value.value,
304
- label: ""
305
- })
306
- })]
307
- })
308
- });
309
- }
310
- const WrapperAllFieldsFilter = styled("div")(({
311
- theme
312
- }) => ({
313
- display: "flex",
314
- flexDirection: "column",
315
- justifyContent: "center",
316
- alignItems: "center",
317
- width: "100%",
318
- minWidth: theme.spacing(3.75),
319
- padding: theme.spacing(3, 0),
320
- gap: theme.spacing(3)
321
- }));
322
- const WrapperAutoComplete$1 = styled("div")(() => ({
323
- width: "100%"
324
- }));
325
- function isValidDate(d) {
326
- return d && d instanceof Date;
327
- }
328
- const verifyStringFilter = (filter) => {
329
- if (typeof filter.o !== "string") {
330
- return false;
331
- }
332
- if (STRING_OPERATORS.findIndex((f) => f === filter.o) === -1) {
333
- return false;
334
- }
335
- if (typeof filter.o1 !== "string") {
336
- return false;
337
- }
338
- return true;
339
- };
340
- const verifyNumberFilter = (filter) => {
341
- if (typeof filter.o !== "number") {
342
- return false;
343
- }
344
- if (NUMBER_OPERATORS.findIndex((f) => f === filter.o) === -1) {
345
- return false;
346
- }
347
- if (typeof filter.o1 !== "number") {
348
- return false;
349
- }
350
- if (filter.o === "b" && typeof filter.o2 !== "number") {
351
- return false;
352
- }
353
- return true;
354
- };
355
- const verifyBooleanFilter = (filter) => {
356
- if (typeof filter.o !== "string") {
357
- return false;
358
- }
359
- if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.o) === -1) {
360
- return false;
361
- }
362
- if (typeof filter.o1 !== "boolean") {
363
- return false;
364
- }
365
- return true;
366
- };
367
- const verifyDateTime = (filter) => {
368
- if (typeof filter.o !== "string") {
369
- return false;
370
- }
371
- if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.o) === -1) {
372
- return false;
373
- }
374
- if (typeof filter.o1 !== "string") {
375
- return false;
376
- }
377
- if (filter.o === "b" && typeof filter.o2 !== "string") {
378
- return false;
379
- }
380
- return true;
381
- };
382
- const getDefaultDateTimeFilter = (field, fixed, getLabel, hostTools) => {
383
- const defaultStartDate = new Date();
384
- const defaultEndDate = new Date();
385
- let dfop1 = field.defaultOperand1;
386
- let dfop2 = field.defaultOperand2;
387
- const defaultFilter = {
388
- id: 0,
389
- n: field.name,
390
- fixed,
391
- isSetted: true,
392
- o: "b",
393
- labelOperator: "",
394
- o1: dfop1,
395
- o2: dfop2,
396
- labelOperands: ""
397
- };
398
- if (dfop1) {
399
- if (isValidDate(dfop1)) {
400
- defaultStartDate.setDate(dfop1.getDate());
401
- } else {
402
- dfop1 = void 0;
403
- }
404
- }
405
- if (dfop1 === void 0) {
406
- defaultStartDate.setHours(0, 0, 0, 0);
407
- }
408
- if (dfop2) {
409
- if (isValidDate(dfop2)) {
410
- defaultEndDate.setDate(dfop2.getDate());
411
- } else {
412
- dfop2 = void 0;
413
- }
414
- }
415
- if (dfop2 === void 0) {
416
- defaultEndDate.setHours(23, 59, 59, 999);
417
- }
418
- defaultFilter.o1 = defaultStartDate.toISOString();
419
- defaultFilter.o2 = defaultEndDate.toISOString();
420
- defaultFilter.labelOperands = `${hostTools.formatDate(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${hostTools.formatDate(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
421
- defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
422
- return defaultFilter;
423
- };
424
- function DateTimeFilter() {
425
- const {
426
- setPoupEditValidationSchema,
427
- setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
428
- getLabelOperator
429
- } = useBase();
430
- const {
431
- getLabel
432
- } = useModuleDictionary();
433
- const {
434
- formatDate
435
- } = useHostTools();
436
- const {
437
- dfnsFormat: {
438
- datetime_format
439
- }
440
- } = useEnvironment();
441
- const {
442
- popupData: {
443
- filter,
444
- field
445
- }
446
- } = useBase();
447
- const {
448
- control,
449
- setValue
450
- } = useFormContext();
451
- const operator = useWatch({
452
- control,
453
- name: "valueOperator"
454
- });
455
- const [isLoaded, setIsLoaded] = useState(false);
456
- const options = useMemo(() => DATE_TIME_OPERATORS.map((o) => ({
457
- id: o,
458
- label: getLabelOperator(o)
459
- })), [getLabelOperator]);
460
- const transformFunctionFormValuesToValues = useCallback((data) => {
461
- if (!filter || !field)
462
- return void 0;
463
- const newFilter = {
464
- id: filter.id,
465
- n: field.name,
466
- fixed: filter.fixed,
467
- isSetted: true,
468
- o: data.valueOperator.id,
469
- o1: data.valueOperand1.toISOString(),
470
- labelOperator: data.valueOperator.label,
471
- labelOperands: ""
472
- };
473
- if (data.valueOperator.id === "b") {
474
- newFilter.o2 = data.valueOperand2.toISOString();
475
- newFilter.labelOperands = `${formatDate(data.valueOperand1, datetime_format)} - ${formatDate(data.valueOperand2, datetime_format)}`;
476
- } else {
477
- newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
478
- newFilter.labelOperands = formatDate(data.valueOperand1, datetime_format);
479
- }
480
- return newFilter;
481
- }, []);
482
- useEffect(() => {
483
- if (!isLoaded) {
484
- setPoupEditValidationSchema({
485
- valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
486
- valueOperand1: Yup.date().test("valueOperand1", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
487
- return Boolean(value);
488
- }),
489
- valueOperand2: Yup.date().when(["valueOperator.id"], {
490
- is: "b",
491
- then: Yup.date().test("DOB", getLabel(`dynamic_filter.error_invalid_date`), (value) => {
492
- return Boolean(value);
493
- })
494
- })
495
- });
496
- }
497
- if (filter && field) {
498
- setValue("valueOperand1", new Date(filter.o1), {
499
- shouldTouch: false,
500
- shouldValidate: false
501
- });
502
- setValue("valueOperand2", new Date(filter.o2), {
503
- shouldTouch: false,
504
- shouldValidate: false
505
- });
506
- }
507
- setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
508
- setIsLoaded(true);
509
- }, [getLabel, filter, field]);
510
- return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
511
- children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
512
- children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
513
- children: /* @__PURE__ */ jsx(RHFAutocomplete, {
514
- name: "valueOperator",
515
- autoComplete: "off",
516
- options,
517
- getOptionLabel: (option) => option.label,
518
- isOptionEqualToValue: (option, value) => option.id === value.id,
519
- label: ""
520
- })
521
- }), /* @__PURE__ */ jsx(RHFDateTime, {
522
- name: "valueOperand1",
523
- autoComplete: "off",
524
- label: "",
525
- focused: true
526
- }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
527
- name: "valueOperand2",
528
- autoComplete: "off",
529
- label: ""
530
- })]
531
- })
532
- });
533
- }
534
- const WrapperStringFilter = styled("div")(({
535
- theme
536
- }) => ({
537
- display: "flex",
538
- flexDirection: "column",
539
- justifyContent: "center",
540
- alignItems: "center",
541
- width: "100%",
542
- minWidth: theme.spacing(3.75),
543
- padding: theme.spacing(3, 0),
544
- gap: theme.spacing(3)
545
- }));
546
- const WrapperAutoComplete = styled("div")(() => ({
547
- width: "100%"
548
- }));
549
- const getDefaultNumberFilter = (field, fixed, getLabel) => {
550
- const dfop1 = field.defaultOperand1;
551
- const dfop2 = field.defaultOperand2;
552
- const defaultFilter = {
553
- id: 0,
554
- n: field.name,
555
- fixed,
556
- isSetted: false,
557
- o: "e",
558
- labelOperator: "",
559
- o1: "",
560
- o2: "",
561
- labelOperands: ""
562
- };
563
- if (dfop1 !== void 0 && typeof dfop1 === "number") {
564
- defaultFilter.o1 = dfop1;
565
- defaultFilter.labelOperands = defaultFilter.o1;
566
- }
567
- if (dfop2 !== void 0 && typeof dfop2 === "number") {
568
- defaultFilter.o2 = dfop2;
569
- }
570
- defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
571
- return defaultFilter;
572
- };
573
- function NumberFilter() {
574
- const {
575
- popupData: {
576
- filter,
577
- field
578
- },
579
- setPoupEditValidationSchema,
580
- setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
581
- getLabelOperator
582
- } = useBase();
583
- const {
584
- getLabel
585
- } = useModuleDictionary();
586
- const inputRef = useRef(null);
587
- const {
588
- control,
589
- setValue
590
- } = useFormContext();
591
- const [isLoaded, setIsLoaded] = useState(false);
592
- const operator = useWatch({
593
- control,
594
- name: "valueOperator"
595
- });
596
- const options = useMemo(() => NUMBER_OPERATORS.map((o) => ({
597
- id: o,
598
- label: getLabelOperator(o)
599
- })), [getLabelOperator]);
600
- const transformFunctionFormValuesToValues = useCallback((data) => {
601
- if (!filter || !field)
602
- return void 0;
603
- const newFilter = {
604
- id: filter.id,
605
- n: field.name,
606
- fixed: filter.fixed,
607
- isSetted: true,
608
- o: data.valueOperator.id,
609
- o1: Number(data.valueOperand1),
610
- o2: data.valueOperand2,
611
- labelOperator: data.valueOperator.label,
612
- labelOperands: data.valueOperand1
613
- };
614
- if (data.valueOperator.id === "b") {
615
- newFilter.labelOperands = `${data.valueOperand1} - ${data.valueOperand2}`;
616
- newFilter.o2 = Number(data.valueOperand2);
617
- } else {
618
- newFilter.o2 = void 0;
619
- }
620
- return newFilter;
621
- }, []);
622
- useEffect(() => {
623
- if (!isLoaded) {
624
- setPoupEditValidationSchema({
625
- valueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
626
- valueOperand1: Yup.number().typeError(getLabel(`dynamic_filter.error_operand_mustbe_number`)),
627
- valueOperand2: Yup.string().when("valueOperator", {
628
- is: (o) => {
629
- return o.id === "b";
630
- },
631
- then: Yup.string().test("DOB", getLabel(`dynamic_filter.error_operand_mustbe_number`), (value) => {
632
- if (value === "")
633
- return false;
634
- return !isNaN(Number(value));
635
- })
636
- })
637
- });
638
- }
639
- setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
640
- if (filter && field) {
641
- setValue("valueOperand1", filter.o1, {
642
- shouldTouch: false,
643
- shouldValidate: false
644
- });
645
- setValue("valueOperand2", filter.o2, {
646
- shouldTouch: false,
647
- shouldValidate: false
648
- });
649
- }
650
- setIsLoaded(true);
651
- }, [getLabel, filter, field]);
652
- useEffect(() => {
653
- inputRef.current?.focus();
654
- }, [isLoaded]);
655
- return /* @__PURE__ */ jsx(WrapperStringFilter, {
656
- children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
657
- children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
658
- children: /* @__PURE__ */ jsx(RHFAutocomplete, {
659
- name: "valueOperator",
660
- autoComplete: "off",
661
- options,
662
- getOptionLabel: (option) => option.label,
663
- isOptionEqualToValue: (option, value) => option.id === value.id,
664
- label: ""
665
- })
666
- }), /* @__PURE__ */ jsx(RHFTextField, {
667
- name: "valueOperand1",
668
- ref: inputRef,
669
- focused: true
670
- }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
671
- name: "valueOperand2",
672
- ref: inputRef
673
- })]
674
- })
675
- });
676
- }
677
- const strategiesDefaultFilterValues = {
678
- string: getDefaultStringFilter,
679
- number: getDefaultNumberFilter,
680
- boolean: getDefaultBooleanFilter,
681
- datetime: getDefaultDateTimeFilter,
682
- __default__: () => {
683
- throw new Error("Type no defined");
684
- }
685
- };
686
- const getDefaultFilterValues = (field, fixed, getLabel, hostTools) => {
687
- const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
688
- return transformer(field, fixed, getLabel, hostTools);
689
- };
690
- const strategiesEditFilterComponent = {
691
- string: StringFilter,
692
- number: NumberFilter,
693
- boolean: BooleanFilter,
694
- datetime: DateTimeFilter,
695
- __default__: React.Fragment
696
- };
697
- const PopupEditFilterComponent = (props) => {
698
- const {
699
- getFieldByName
700
- } = useBase();
701
- const field = getFieldByName(props.filter.n);
702
- if (!field)
703
- return /* @__PURE__ */ jsx(Fragment, {});
704
- const Component = strategiesEditFilterComponent[field.type] ?? strategiesEditFilterComponent.__default__;
705
- return /* @__PURE__ */ jsx(Component, {});
706
- };
707
- const initialState = {
708
- fields: [],
709
- withAllField: true,
710
- isDirty: false,
711
- isValid: true,
712
- automatic: false,
713
- availableFields: [],
714
- getFieldByName: () => void 0,
715
- getLabelOperator: () => "",
716
- applyedFilters: [],
717
- addFilter: voidFunction,
718
- updateFilter: voidFunction,
719
- removeFilter: voidFunction,
720
- clearFilters: voidFunction,
721
- fireOnChangeFilters: voidFunction,
722
- openAnchorEl: null,
723
- openMenuFields: voidFunction,
724
- closeMenuFields: voidFunction,
725
- popupData: {
726
- popupAnchorEl: null,
727
- filter: null,
728
- field: null
729
- },
730
- popupValidationSchema: {},
731
- setPoupEditValidationSchema: voidFunction,
732
- showPopupForAddFilter: voidFunction,
733
- showPopupForEditFilter: voidFunction,
734
- hidePopupEdit: voidFunction,
735
- setInEdition: voidFunction,
736
- inEdition: false,
737
- setFnTransformFormValuesIntoValues: voidFunction,
738
- fnTransformFormValuesIntoRawValues: () => void 0
739
- };
740
- const BaseContext = createContext(initialState);
741
- const getMaxId = (applyedFilters) => {
742
- return applyedFilters.reduce((prev, n) => {
743
- return n.id > prev ? n.id : prev;
744
- }, 0);
745
- };
746
- const getFilterById = (id, applyedFilters) => {
747
- return applyedFilters.findIndex((f) => f.id === id);
748
- };
749
- const formatToInitialFilters = (applyedFilter) => {
750
- return applyedFilter.map((af) => ({
751
- n: af.n,
752
- o: af.o,
753
- labelOperands: af.labelOperands,
754
- o1: af.o1,
755
- o2: af.o2
756
- }));
757
- };
758
- const formatToRawFilter = (applyedFilter) => {
759
- return applyedFilter.map((af) => ({
760
- n: af.n,
761
- o: af.o,
762
- o1: af.o1,
763
- o2: af.o2
764
- }));
765
- };
766
- const getInitialFilters = (fields, filters, getFieldByName, getLabel, hostTools) => {
767
- const newFilters = [];
768
- const fixedFields = [];
769
- for (let index = 0; index < filters.length; index++) {
770
- let add;
771
- const filter = {
772
- ...filters[index],
773
- id: 0,
774
- isSetted: true,
775
- fixed: false,
776
- labelOperator: ""
777
- };
778
- const field = getFieldByName(filter.n);
779
- if (!field)
780
- continue;
781
- switch (field.type) {
782
- case "string":
783
- add = verifyStringFilter(filter);
784
- break;
785
- case "number":
786
- add = verifyNumberFilter(filter);
787
- break;
788
- case "boolean":
789
- add = verifyBooleanFilter(filter);
790
- break;
791
- case "datetime":
792
- add = verifyDateTime(filter);
793
- break;
794
- default:
795
- add = false;
796
- }
797
- if (add) {
798
- if (field.presence === "fixed") {
799
- if (fixedFields.findIndex((f) => f === field.name) === -1) {
800
- filter.fixed = true;
801
- fixedFields.push(field.name);
802
- } else {
803
- filter.fixed = false;
804
- }
805
- }
806
- filter.isSetted = true;
807
- filter.id = newFilters.length + 1;
808
- filter.labelOperator = getLabel(`dynamic_filter.operator_${filter.o}`);
809
- newFilters.push(filter);
810
- }
811
- }
812
- for (let index = 0; index < fields.length; index++) {
813
- const field = fields[index];
814
- if (field.presence === "initialized" || field.presence === "fixed") {
815
- if (!filters.find((f) => f.n === field.name)) {
816
- const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel, hostTools);
817
- newFilter.id = newFilters.length + 1;
818
- newFilters.push(newFilter);
819
- }
820
- }
821
- }
822
- return newFilters;
823
- };
824
- function BaseProvider(props) {
825
- const {
826
- isSkeleton = false,
827
- fields,
828
- initialFilters = [],
829
- withAllField = true,
830
- onChangeFilter,
831
- automatic = true,
832
- children
833
- } = props;
834
- const [openAnchorEl, setOpenAnchorEl] = useState(null);
835
- const [popupData, setPopupData] = useState({
836
- popupAnchorEl: null,
837
- filter: null,
838
- field: null
839
- });
840
- const {
841
- getLabel
842
- } = useModuleDictionary();
843
- const [popupValidationSchema, setInternalPopupValidationSchema] = useState(Yup.object().shape({}));
844
- const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] = useState(() => void 0);
845
- const {
846
- host_static_assets,
847
- environment_assets
848
- } = useEnvironment();
849
- const hostTools = useHostTools();
850
- const all_fields = useMemo(() => {
851
- return {
852
- ...ALL_FIELDS,
853
- label: getLabel("dynamic_filter.all_fields"),
854
- urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
855
- };
856
- }, [getLabel, host_static_assets, environment_assets]);
857
- const [inEdition, setInEdition] = useState(false);
858
- const [isDirty, setIsDirty] = useState(!automatic);
859
- const [isValid, setIsValid] = useState(false);
860
- const {
861
- toast
862
- } = useHostTools();
863
- const getFieldByName = useCallback((name) => {
864
- return fields.concat(all_fields).find((f) => {
865
- return f.name === name;
866
- });
867
- }, [fields, all_fields]);
868
- const getLabelOperator = useCallback((operator) => {
869
- return getLabel(`dynamic_filter.operator_${operator}`);
870
- }, [getLabel]);
871
- const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel, hostTools));
872
- const availableFields = useMemo(() => {
873
- const newFields = [];
874
- for (let index = 0; index < fields.length; index++) {
875
- let add;
876
- const field = fields[index];
877
- add = true;
878
- if (field.multiple !== void 0 && field.multiple === false) {
879
- const fIndx = applyedFilters.findIndex((f) => f.n === field.name);
880
- if (fIndx > -1) {
881
- add = false;
882
- }
883
- }
884
- if (add) {
885
- newFields.push(field);
886
- }
887
- }
888
- return newFields;
889
- }, [fields, applyedFilters]);
890
- const fireOnChangeFilters = useCallback(() => {
891
- if (isValid) {
892
- if (!automatic)
893
- setIsDirty(false);
894
- onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
895
- } else {
896
- toast(getLabel("dynamic_filter.error_filters_no_setted"), {
897
- type: "error",
898
- autoClose: 1e4
899
- });
900
- }
901
- }, [isValid, applyedFilters, onChangeFilter]);
902
- useEffect(() => {
903
- const NoValid = applyedFilters.findIndex((f) => !f.isSetted) > -1;
904
- if (NoValid) {
905
- setIsValid(false);
906
- } else {
907
- setIsValid(true);
908
- }
909
- if (!automatic) {
910
- setIsDirty(true);
911
- return;
912
- }
913
- if (!NoValid) {
914
- setIsDirty(false);
915
- onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
916
- }
917
- }, [applyedFilters]);
918
- const addFilter = useCallback((newFilter) => {
919
- setApplyedFilters((lastApplyedFilters) => {
920
- const newArray = [...lastApplyedFilters];
921
- const newFilterFull = {
922
- ...newFilter,
923
- id: getMaxId(lastApplyedFilters) + 1,
924
- labelOperator: getLabelOperator(newFilter.o)
925
- };
926
- newArray.push(newFilterFull);
927
- return newArray;
928
- });
929
- }, []);
930
- const updateFilter = useCallback((newFilter) => {
931
- setApplyedFilters((lastApplyedFilters) => {
932
- const newArray = [...lastApplyedFilters];
933
- const findedFilter = getFilterById(newFilter.id, newArray);
934
- if (findedFilter > -1) {
935
- newArray.splice(findedFilter, 1, {
936
- ...newFilter,
937
- labelOperator: getLabelOperator(newFilter.o)
938
- });
939
- }
940
- return newArray;
941
- });
942
- }, []);
943
- const clearFilters = useCallback(() => {
944
- setApplyedFilters((lastFilters) => {
945
- const newFilters = [];
946
- for (let index = 0; index < lastFilters.length; index++) {
947
- const filter = lastFilters[index];
948
- if (filter.fixed) {
949
- newFilters.push(filter);
950
- }
951
- }
952
- return newFilters;
953
- });
954
- }, []);
955
- const openMenuFields = useCallback((anchorEl) => {
956
- setOpenAnchorEl(anchorEl);
957
- setInEdition(true);
958
- }, [applyedFilters]);
959
- const closeMenuFields = useCallback(() => {
960
- setOpenAnchorEl(null);
961
- setInEdition(false);
962
- }, []);
963
- const hidePopupEdit = useCallback((stayInEditon) => {
964
- if (popupData.popupAnchorEl) {
965
- setPopupData({
966
- popupAnchorEl: null,
967
- filter: null,
968
- field: null
969
- });
970
- }
971
- if (!stayInEditon && inEdition) {
972
- setInEdition(false);
973
- }
974
- }, [popupData, inEdition]);
975
- const showPopupForAddFilter = useCallback((anchorEl, field) => {
976
- setPopupData({
977
- popupAnchorEl: anchorEl,
978
- filter: getDefaultFilterValues(field, false, getLabel, hostTools),
979
- field
980
- });
981
- setInEdition(true);
982
- }, []);
983
- const showPopupForEditFilter = useCallback((anchorEl, filterToEdit) => {
984
- setPopupData({
985
- popupAnchorEl: anchorEl,
986
- filter: filterToEdit,
987
- field: getFieldByName(filterToEdit.n)
988
- });
989
- setInEdition(true);
990
- }, []);
991
- const removeFilter = useCallback((id) => {
992
- setApplyedFilters((lastApplyedFilters) => {
993
- const newArray = [...lastApplyedFilters];
994
- const index_to_remove = lastApplyedFilters.findIndex((filter) => id === filter.id);
995
- if (index_to_remove > -1) {
996
- if (!newArray[index_to_remove].fixed) {
997
- newArray.splice(index_to_remove, 1);
998
- }
999
- }
1000
- return newArray;
1001
- });
1002
- }, []);
1003
- const setPoupEditValidationSchema = useCallback((validationSchema) => {
1004
- setInternalPopupValidationSchema(Yup.object().shape({
1005
- ...validationSchema
1006
- }));
1007
- }, []);
1008
- const setFnTransformFormValuesIntoValues = useCallback((fn) => {
1009
- setInternalfnTransormFormValuesIntoRawValues(() => fn);
1010
- }, []);
1011
- return /* @__PURE__ */ jsx(BaseContext.Provider, {
1012
- value: {
1013
- isSkeleton,
1014
- inEdition,
1015
- automatic,
1016
- isDirty,
1017
- isValid,
1018
- withAllField,
1019
- fields,
1020
- availableFields,
1021
- getFieldByName,
1022
- getLabelOperator,
1023
- applyedFilters,
1024
- addFilter,
1025
- updateFilter,
1026
- removeFilter,
1027
- clearFilters,
1028
- fireOnChangeFilters,
1029
- openAnchorEl,
1030
- openMenuFields,
1031
- closeMenuFields,
1032
- popupData,
1033
- popupValidationSchema,
1034
- showPopupForAddFilter,
1035
- showPopupForEditFilter,
1036
- hidePopupEdit,
1037
- setInEdition,
1038
- setPoupEditValidationSchema,
1039
- fnTransformFormValuesIntoRawValues,
1040
- setFnTransformFormValuesIntoValues
1041
- },
1042
- children
1043
- });
1044
- }
1045
- const useBase = () => useContext(BaseContext);
1046
- const WrapperApplyedFilter = styled("div")(({
1047
- theme
1048
- }) => ({
1049
- width: "auto",
1050
- display: "flex",
1051
- justifyContent: "center",
1052
- alignItems: "center",
1053
- height: "100%",
1054
- minHeight: theme.spacing(3),
1055
- paddingLeft: theme.spacing(1),
1056
- backgroundColor: theme.palette.grid?.sectionHeader,
1057
- border: "1px solid",
1058
- borderColor: alpha(`${theme.palette.divider}`, 0.1),
1059
- overflow: "visible",
1060
- borderRadius: theme.spacing(1),
1061
- "&.waf_no_setted": {
1062
- border: `1px solid ${theme.palette.error.main}`
1063
- }
1064
- }));
1065
- const AplyedFilterStyled = styled("div")(({
1066
- theme
1067
- }) => ({
1068
- ...theme.typography.body2,
1069
- display: "flex",
1070
- justifyContent: "center",
1071
- alignItems: "center",
1072
- width: "auto",
1073
- height: "100%",
1074
- marginRight: theme.spacing(1),
1075
- marginLeft: theme.spacing(1),
1076
- whiteSpace: "nowrap"
1077
- }));
1078
- const ContainerField = styled("span")(({
1079
- theme
1080
- }) => ({
1081
- ...theme.typography.subtitle2
1082
- }));
1083
- const ContainerOperator = styled("span")(({
1084
- theme
1085
- }) => ({
1086
- ...theme.typography.body2,
1087
- marginLeft: theme.spacing(1.5),
1088
- fontStyle: "italic"
1089
- }));
1090
- const ContainerOperands = styled("span")(({
1091
- theme
1092
- }) => ({
1093
- ...theme.typography.body2,
1094
- marginLeft: theme.spacing(1.5)
1095
- }));
1096
- function ApplyedFilter(props) {
1097
- const {
1098
- n: fieldName,
1099
- id,
1100
- isSetted,
1101
- fixed,
1102
- labelOperator,
1103
- labelOperands
1104
- } = props;
1105
- const {
1106
- removeFilter,
1107
- showPopupForEditFilter,
1108
- hidePopupEdit,
1109
- getFieldByName
1110
- } = useBase();
1111
- const {
1112
- host_static_assets,
1113
- environment_assets
1114
- } = useEnvironment();
1115
- const field = useMemo(() => {
1116
- return getFieldByName(fieldName);
1117
- }, [getFieldByName]);
1118
- const urlIcon = useMemo(() => {
1119
- if (!field)
1120
- return;
1121
- if (field && field.urlIcon !== "") {
1122
- return field.urlIcon;
1123
- }
1124
- return "";
1125
- }, [field]);
1126
- const onDelete = () => {
1127
- hidePopupEdit(false);
1128
- removeFilter(id);
1129
- };
1130
- const onClick = (event) => {
1131
- showPopupForEditFilter(event.currentTarget, props);
1132
- };
1133
- if (!field) {
1134
- return /* @__PURE__ */ jsx(Fragment, {});
1135
- }
1136
- return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
1137
- id: "WrapperApplyedFilter",
1138
- className: !isSetted ? "waf_no_setted" : "",
1139
- children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
1140
- src: urlIcon,
1141
- onClick
1142
- }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
1143
- onClick,
1144
- children: [/* @__PURE__ */ jsx(ContainerField, {
1145
- children: field.label
1146
- }), /* @__PURE__ */ jsx(ContainerOperator, {
1147
- children: labelOperator
1148
- }), /* @__PURE__ */ jsx(ContainerOperands, {
1149
- children: labelOperands
1150
- })]
1151
- }), !fixed && /* @__PURE__ */ jsx(IconButton, {
1152
- size: "small",
1153
- src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
1154
- onClick: onDelete,
1155
- dictionaryTooltip: "dynamic_filter.tooltip_clear_filter"
1156
- })]
1157
- });
1158
- }
1159
- function ApplyedFilters() {
1160
- const {
1161
- applyedFilters,
1162
- isSkeleton
1163
- } = useBase();
1164
- if (isSkeleton) {
1165
- return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
1166
- id: "WrapperApplyedFilters"
1167
- });
1168
- }
1169
- return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
1170
- className: "WrapperApplyedFilters",
1171
- children: /* @__PURE__ */ jsx(ScrollBar, {
1172
- children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
1173
- id: "WrapperApplyedFilters",
1174
- children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
1175
- ...filter
1176
- }, filter.id))
1177
- })
1178
- })
1179
- });
1180
- }
1181
- const SKTClearFilters = styled$1("div")(({
1182
- theme
1183
- }) => ({
1184
- display: "flex",
1185
- justifyContent: "center",
1186
- alignItems: "center",
1187
- minWidth: theme.spacing(3.75),
1188
- height: theme.spacing(3.75)
1189
- }));
1190
- const WrapperClearFilters = styled$1("div")(({
1191
- theme
1192
- }) => ({
1193
- paddingLeft: theme.spacing(0.5),
1194
- borderLeft: `1px solid ${theme.palette.divider}`
1195
- }));
1196
- const ClearFilters = () => {
1197
- const {
1198
- host_static_assets,
1199
- environment_assets
1200
- } = useEnvironment();
1201
- const {
1202
- clearFilters,
1203
- isSkeleton,
1204
- applyedFilters
1205
- } = useBase();
1206
- if (isSkeleton) {
1207
- return /* @__PURE__ */ jsx(SKTClearFilters, {
1208
- children: /* @__PURE__ */ jsx(Skeleton, {
1209
- variant: "circular",
1210
- width: "20px",
1211
- height: "20px"
1212
- })
1213
- });
1214
- }
1215
- if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
1216
- return /* @__PURE__ */ jsx(WrapperClearFilters, {
1217
- children: /* @__PURE__ */ jsx(IconButton, {
1218
- src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
1219
- onClick: clearFilters,
1220
- dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
1221
- })
1222
- });
1223
- }
1224
- return /* @__PURE__ */ jsx(Fragment, {});
1225
- };
1226
- const WrapperInputFilter = styled("div")(({
1227
- theme
1228
- }) => ({
1229
- display: "flex",
1230
- justifyContent: "center",
1231
- alignItems: "center",
1232
- width: "100%",
1233
- height: theme.spacing(3),
1234
- borderLeft: `1px solid ${theme.palette.divider}`,
1235
- paddingLeft: theme.spacing(1),
1236
- marginLeft: theme.spacing(1),
1237
- [theme.breakpoints.up("sm")]: {
1238
- width: theme.spacing(25)
1239
- }
1240
- }));
1241
- const StyledInputFilter = styled("input")(({
1242
- theme
1243
- }) => ({
1244
- background: "transparent",
1245
- display: "flex",
1246
- justifyContent: "center",
1247
- alignItems: "center",
1248
- minWidth: theme.spacing(3.75),
1249
- width: "100%",
1250
- "&": {
1251
- outline: "none",
1252
- border: "none"
1253
- },
1254
- [theme.breakpoints.up("sm")]: {
1255
- width: "auto"
1256
- }
1257
- }));
1258
- function InputFilter() {
1259
- const {
1260
- isSkeleton,
1261
- withAllField,
1262
- availableFields,
1263
- showPopupForAddFilter,
1264
- addFilter,
1265
- openAnchorEl,
1266
- openMenuFields,
1267
- closeMenuFields,
1268
- hidePopupEdit
1269
- } = useBase();
1270
- const [valueFilter, setValueFilter] = useState("");
1271
- const finalFields = useMemo(() => {
1272
- if (!openAnchorEl) {
1273
- return [];
1274
- }
1275
- return availableFields.filter((field) => field.label.includes(valueFilter));
1276
- }, [valueFilter, openAnchorEl]);
1277
- if (isSkeleton) {
1278
- return /* @__PURE__ */ jsx(WrapperInputFilter, {
1279
- id: "SKTWrapperInputFilter",
1280
- children: /* @__PURE__ */ jsx(Skeleton, {
1281
- variant: "text",
1282
- width: "100%",
1283
- height: 24
1284
- })
1285
- });
1286
- }
1287
- const handleClose = () => {
1288
- closeMenuFields();
1289
- };
1290
- const handleClickItem = (field) => {
1291
- closeMenuFields();
1292
- showPopupForAddFilter(openAnchorEl, field);
1293
- };
1294
- const onClickFilter = (event) => {
1295
- openMenuFields(event.currentTarget);
1296
- };
1297
- const onChangeFilter = (event) => {
1298
- setValueFilter(event.target.value);
1299
- if (!openAnchorEl) {
1300
- openMenuFields(event.currentTarget);
1301
- }
1302
- hidePopupEdit(true);
1303
- };
1304
- const handleKeyPressMenu = (event) => {
1305
- if (event.key !== "Enter")
1306
- return;
1307
- if (valueFilter.trim() === "") {
1308
- closeMenuFields();
1309
- return;
1310
- }
1311
- if (withAllField) {
1312
- addFilter({
1313
- n: ALL_FIELDS.name,
1314
- isSetted: true,
1315
- fixed: false,
1316
- o: "c",
1317
- o1: valueFilter,
1318
- labelOperands: valueFilter
1319
- });
1320
- setValueFilter("");
1321
- closeMenuFields();
1322
- }
1323
- };
1324
- if (!withAllField && availableFields.length == 0) {
1325
- return /* @__PURE__ */ jsx(Fragment, {});
1326
- }
1327
- return /* @__PURE__ */ jsxs(WrapperInputFilter, {
1328
- id: "WrapperInputFilter",
1329
- children: [/* @__PURE__ */ jsx(StyledInputFilter, {
1330
- type: "text",
1331
- value: valueFilter,
1332
- placeholder: "filter",
1333
- onClick: onClickFilter,
1334
- onChange: onChangeFilter,
1335
- onKeyPress: handleKeyPressMenu
1336
- }), availableFields.length > 0 && /* @__PURE__ */ jsx(MenuPopover, {
1337
- id: "MenuPopover",
1338
- open: Boolean(openAnchorEl),
1339
- anchorEl: openAnchorEl,
1340
- onClose: handleClose,
1341
- disableAutoFocus: true,
1342
- arrow: "right-top",
1343
- sx: {
1344
- "& .MuiMenuItem-root": {
1345
- px: 1,
1346
- typography: "body2",
1347
- borderRadius: 0.75
1348
- }
1349
- },
1350
- children: Boolean(openAnchorEl) && finalFields.map((field, index) => /* @__PURE__ */ jsxs(MenuItem, {
1351
- dense: true,
1352
- onClick: () => handleClickItem(field),
1353
- children: [/* @__PURE__ */ jsx(Icon, {
1354
- src: field.urlIcon
1355
- }), /* @__PURE__ */ jsx(LabelMemuItem, {
1356
- children: field.label
1357
- })]
1358
- }, `menu_action_${index}`))
1359
- })]
1360
- });
1361
- }
1362
- const WrapperPopupEditFilter = styled("div")(({
1363
- theme
1364
- }) => ({
1365
- display: "flex",
1366
- flexDirection: "column",
1367
- justifyContent: "center",
1368
- alignItems: "center",
1369
- padding: theme.spacing(1.4, 3, 3, 3),
1370
- backgroundColor: theme.palette.background.default,
1371
- borderRadius: theme.spacing(1)
1372
- }));
1373
- styled("div")(({
1374
- theme
1375
- }) => ({
1376
- display: "flex",
1377
- justifyContent: "center",
1378
- gap: theme.spacing(3),
1379
- paddingTop: theme.spacing(3)
1380
- }));
1381
- const TitleContainer = styled("div")(({
1382
- theme
1383
- }) => ({
1384
- ...theme.typography.subtitle2,
1385
- width: "100%",
1386
- display: "flex",
1387
- justifyContent: "flex-start",
1388
- alignItems: "center",
1389
- padding: theme.spacing(2, 0),
1390
- marginLeft: theme.spacing(1.5)
1391
- }));
1392
- const HeaderContainer = styled("div")(({
1393
- theme
1394
- }) => ({
1395
- width: "100%",
1396
- display: "flex",
1397
- justifyContent: "flex-start",
1398
- alignItems: "center",
1399
- borderBottom: `1px solid ${theme.palette.divider}`
1400
- }));
1401
- const PopupEditFilter = () => {
1402
- const {
1403
- popupValidationSchema,
1404
- popupData: {
1405
- popupAnchorEl,
1406
- filter,
1407
- field
1408
- },
1409
- hidePopupEdit,
1410
- addFilter,
1411
- updateFilter,
1412
- getLabelOperator,
1413
- fnTransformFormValuesIntoRawValues
1414
- } = useBase();
1415
- const theme = useTheme();
1416
- const {
1417
- getLabel
1418
- } = useModuleDictionary();
1419
- const values = useMemo(() => {
1420
- if (!filter || !field)
1421
- return {};
1422
- const valuesFilter = {
1423
- ...filter,
1424
- valueOperator: {
1425
- id: filter.o,
1426
- label: getLabelOperator(filter.o)
1427
- }
1428
- };
1429
- return valuesFilter;
1430
- }, [filter, field, getLabelOperator, getLabel]);
1431
- const onSubmit = async (data) => {
1432
- if (!filter || !field)
1433
- return;
1434
- const newFilter = fnTransformFormValuesIntoRawValues(data);
1435
- if (!newFilter)
1436
- return;
1437
- if (filter.id === 0) {
1438
- addFilter(newFilter);
1439
- } else {
1440
- updateFilter(newFilter);
1441
- }
1442
- hidePopupEdit(false);
1443
- };
1444
- const onClose = () => {
1445
- hidePopupEdit(false);
1446
- };
1447
- return /* @__PURE__ */ jsx(Popper, {
1448
- id: "MenuPopover",
1449
- open: Boolean(popupAnchorEl),
1450
- anchorEl: popupAnchorEl,
1451
- sx: {
1452
- boxShadow: theme.customShadows.dropdown,
1453
- borderRadius: 1
1454
- },
1455
- children: /* @__PURE__ */ jsx(Fragment, {
1456
- children: filter && /* @__PURE__ */ jsx(FormProvider, {
1457
- onSubmit,
1458
- values,
1459
- validationSchema: popupValidationSchema,
1460
- children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
1461
- children: [/* @__PURE__ */ jsxs(HeaderContainer, {
1462
- children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
1463
- src: field.urlIcon
1464
- }), /* @__PURE__ */ jsx(TitleContainer, {
1465
- children: field?.label
1466
- })]
1467
- }), /* @__PURE__ */ jsx(PopupEditFilterComponent, {
1468
- filter
1469
- }), /* @__PURE__ */ jsxs(Actions, {
1470
- children: [/* @__PURE__ */ jsx(ActionCancel, {
1471
- onClick: onClose
1472
- }), /* @__PURE__ */ jsx(ActionIntro, {})]
1473
- })]
1474
- })
1475
- })
1476
- })
1477
- });
1478
- };
1479
- const WrapperFilter = styled("div", {
1480
- shouldForwardProp: (prop) => prop !== "inEdition"
1481
- })(({
1482
- theme,
1483
- inEdition
1484
- }) => ({
1485
- display: "flex",
1486
- alignItems: "center",
1487
- justifyContent: "flex-start",
1488
- height: "auto",
1489
- width: "100%",
1490
- padding: theme.spacing(0.5),
1491
- borderRadius: theme.spacing(1),
1492
- border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
1493
- }));
1494
- const WrapperFilterMobile = styled("div", {
1495
- shouldForwardProp: (prop) => prop !== "inEdition"
1496
- })(({
1497
- theme,
1498
- inEdition
1499
- }) => ({
1500
- display: "flex",
1501
- flexDirection: "column",
1502
- alignItems: "center",
1503
- justifyContent: "space-between",
1504
- minWidth: theme.spacing(25),
1505
- height: "auto",
1506
- width: "100%",
1507
- padding: theme.spacing(0.5),
1508
- borderRadius: theme.spacing(1),
1509
- border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
1510
- gap: theme.spacing(0.75),
1511
- "& .WrapperApplyedFilters": {
1512
- margin: "0px",
1513
- padding: "0px",
1514
- border: "0px"
1515
- }
1516
- }));
1517
- const ContainerFistRow = styled("div")(() => ({
1518
- width: "100%",
1519
- display: "flex",
1520
- justifyContent: "space-between"
1521
- }));
1522
- const DynamicFilter = (props) => {
1523
- const isDesktop = useResponsiveDesktop();
1524
- const render = useFlagsPresent(["dictionary_loaded"]);
1525
- if (!render) {
1526
- return /* @__PURE__ */ jsx(Fragment, {});
1527
- }
1528
- return /* @__PURE__ */ jsx(BaseProvider, {
1529
- ...props,
1530
- children: /* @__PURE__ */ jsx(BaseContext.Consumer, {
1531
- children: ({
1532
- inEdition
1533
- }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
1534
- id: "WrapperFilter",
1535
- inEdition,
1536
- children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
1537
- }) : /* @__PURE__ */ jsxs(WrapperFilterMobile, {
1538
- id: "WrapperFilterMobile",
1539
- inEdition,
1540
- children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
1541
- id: "ContainerFistRow",
1542
- children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
1543
- }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {})]
1544
- })
1545
- })
1546
- });
1547
- };
1548
- function getDynamicFilterComponentsDictionary() {
1549
- return ["dynamic_filter"].concat(getCommonActionsDictionary());
1550
- }
1551
- const defaultDynamicFilterDictionary = {
1552
- dynamic_filter: {
1553
- filter_tooltip: "Search",
1554
- operator_b: "between",
1555
- operator_e: "=",
1556
- operator_ne: "!=",
1557
- operator_gt: ">",
1558
- operator_gte: ">=",
1559
- operator_lt: "<",
1560
- operator_lte: "<=",
1561
- operator_c: "contains",
1562
- operator_nc: "not contains",
1563
- all_fields: "all_fields",
1564
- operand_true: "true",
1565
- operand_false: "false",
1566
- error_operator_required: "Operator required",
1567
- error_operand_required: "Operand required",
1568
- error_invalid_date: "Invalid date",
1569
- error_operand_mustbe_number: "Invalid number",
1570
- error_filters_no_setted: "Filters not yet set"
1571
- }
1572
- };
1573
- export { DynamicFilter as D, defaultDynamicFilterDictionary as d, getDynamicFilterComponentsDictionary as g, useBase as u };