@topconsultnpm/sdkui-react 6.20.0-dev1.76 → 6.20.0-dev1.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/NewComponents/ContextMenu/TMContextMenu.js +25 -12
- package/lib/components/NewComponents/ContextMenu/hooks.d.ts +3 -1
- package/lib/components/NewComponents/ContextMenu/hooks.js +42 -4
- package/lib/components/NewComponents/ContextMenu/styles.d.ts +4 -0
- package/lib/components/NewComponents/ContextMenu/styles.js +101 -9
- package/lib/components/features/tasks/TMTasksUtils.d.ts +2 -2
- package/lib/components/features/tasks/TMTasksUtils.js +52 -62
- package/lib/components/features/tasks/TMTasksView.js +4 -4
- package/lib/components/query/TMQueryEditor.d.ts +2 -1
- package/lib/components/query/TMQueryEditor.js +92 -92
- package/package.json +1 -1
|
@@ -19,7 +19,9 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
19
19
|
const submenuTimeoutRef = useRef(null);
|
|
20
20
|
const longPressTimeoutRef = useRef(null);
|
|
21
21
|
const touchStartPos = useRef(null);
|
|
22
|
-
|
|
22
|
+
// Get current menu to pass items count to positioning hook
|
|
23
|
+
const currentMenu = menuState.submenuStack.at(-1) || items;
|
|
24
|
+
const { openLeft, openUp, isCalculated, needsScroll, maxHeight } = useMenuPosition(menuRef, menuState.position, currentMenu.length);
|
|
23
25
|
const handleClose = () => {
|
|
24
26
|
if (externalControl) {
|
|
25
27
|
externalControl.onClose();
|
|
@@ -232,20 +234,26 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
232
234
|
};
|
|
233
235
|
document.addEventListener('mousedown', handleClickOutside);
|
|
234
236
|
document.addEventListener('touchstart', handleClickOutside);
|
|
237
|
+
document.addEventListener('contextmenu', handleClickOutside); // Close on right-click outside
|
|
235
238
|
return () => {
|
|
236
239
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
237
240
|
document.removeEventListener('touchstart', handleClickOutside);
|
|
241
|
+
document.removeEventListener('contextmenu', handleClickOutside);
|
|
238
242
|
};
|
|
239
243
|
}, [menuState.visible]);
|
|
240
244
|
const handleContextMenu = (e) => {
|
|
241
245
|
if (trigger === 'right') {
|
|
242
246
|
e.preventDefault();
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
247
|
+
e.stopPropagation(); // Prevent event from bubbling to close other menus prematurely
|
|
248
|
+
// Small delay to ensure other menus receive the contextmenu event and close first
|
|
249
|
+
setTimeout(() => {
|
|
250
|
+
setMenuState({
|
|
251
|
+
visible: true,
|
|
252
|
+
position: { x: e.clientX, y: e.clientY },
|
|
253
|
+
submenuStack: [items],
|
|
254
|
+
parentNames: [],
|
|
255
|
+
});
|
|
256
|
+
}, 0);
|
|
249
257
|
}
|
|
250
258
|
};
|
|
251
259
|
const handleClick = (e) => {
|
|
@@ -343,13 +351,17 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
343
351
|
submenuTimeoutRef.current = null;
|
|
344
352
|
}
|
|
345
353
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
346
|
-
// Calculate
|
|
347
|
-
// Estimate submenu height: ~35px per item (accounting for smaller padding) + container padding
|
|
354
|
+
// Calculate submenu height dynamically
|
|
348
355
|
const estimatedSubmenuHeight = (item.submenu.length * 35) + 8;
|
|
349
356
|
const spaceBelow = window.innerHeight - rect.top;
|
|
350
357
|
const spaceAbove = rect.bottom;
|
|
351
|
-
|
|
358
|
+
const padding = 8;
|
|
359
|
+
// Determine if submenu should open upward
|
|
352
360
|
const shouldOpenUp = spaceBelow < estimatedSubmenuHeight && spaceAbove > spaceBelow;
|
|
361
|
+
// Calculate if submenu needs scroll and max-height
|
|
362
|
+
const availableSpace = shouldOpenUp ? spaceAbove : spaceBelow;
|
|
363
|
+
const needsScroll = estimatedSubmenuHeight > availableSpace - padding;
|
|
364
|
+
const maxHeight = needsScroll ? availableSpace - padding : undefined;
|
|
353
365
|
// Remove all submenus at this depth and deeper
|
|
354
366
|
setHoveredSubmenus(prev => {
|
|
355
367
|
const filtered = prev.filter(sub => sub.depth < depth);
|
|
@@ -362,6 +374,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
362
374
|
parentRect: rect,
|
|
363
375
|
depth: depth,
|
|
364
376
|
openUp: shouldOpenUp,
|
|
377
|
+
needsScroll,
|
|
378
|
+
maxHeight,
|
|
365
379
|
}
|
|
366
380
|
];
|
|
367
381
|
});
|
|
@@ -413,7 +427,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
413
427
|
return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
|
|
414
428
|
});
|
|
415
429
|
};
|
|
416
|
-
const currentMenu = menuState.submenuStack.at(-1) || items;
|
|
417
430
|
const currentParentName = menuState.parentNames.at(-1) || '';
|
|
418
431
|
return (_jsxs(_Fragment, { children: [!externalControl && children && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, onKeyDown: (e) => {
|
|
419
432
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -423,6 +436,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
|
|
|
423
436
|
display: 'inline-block',
|
|
424
437
|
WebkitTouchCallout: isIOS ? 'none' : undefined,
|
|
425
438
|
WebkitUserSelect: isIOS ? 'none' : undefined,
|
|
426
|
-
}, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
|
|
439
|
+
}, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
|
|
427
440
|
};
|
|
428
441
|
export default TMContextMenu;
|
|
@@ -5,10 +5,12 @@ interface Position {
|
|
|
5
5
|
x: number;
|
|
6
6
|
y: number;
|
|
7
7
|
}
|
|
8
|
-
export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
|
|
8
|
+
export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position, itemsCount?: number) => {
|
|
9
9
|
isCalculated: boolean;
|
|
10
10
|
openLeft: boolean;
|
|
11
11
|
openUp: boolean;
|
|
12
|
+
needsScroll: boolean;
|
|
13
|
+
maxHeight: number | undefined;
|
|
12
14
|
};
|
|
13
15
|
export declare const getContextMenuTarget: <T extends {
|
|
14
16
|
id: string;
|
|
@@ -38,8 +38,8 @@ export const useClickOutside = (callback) => {
|
|
|
38
38
|
}, [callback]);
|
|
39
39
|
return ref;
|
|
40
40
|
};
|
|
41
|
-
export const useMenuPosition = (menuRef, position) => {
|
|
42
|
-
const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
|
|
41
|
+
export const useMenuPosition = (menuRef, position, itemsCount) => {
|
|
42
|
+
const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false, needsScroll: false, maxHeight: undefined });
|
|
43
43
|
const [isCalculated, setIsCalculated] = useState(false);
|
|
44
44
|
useLayoutEffect(() => {
|
|
45
45
|
if (!menuRef.current) {
|
|
@@ -49,14 +49,52 @@ export const useMenuPosition = (menuRef, position) => {
|
|
|
49
49
|
const menuRect = menuRef.current.getBoundingClientRect();
|
|
50
50
|
const viewportWidth = window.innerWidth;
|
|
51
51
|
const viewportHeight = window.innerHeight;
|
|
52
|
+
const isMobile = viewportWidth <= 768;
|
|
52
53
|
const spaceRight = viewportWidth - position.x;
|
|
53
54
|
const spaceBottom = viewportHeight - position.y;
|
|
55
|
+
const spaceAbove = position.y;
|
|
56
|
+
const padding = 8; // Minimal padding from viewport edges - be more aggressive about using available space
|
|
57
|
+
// Use scrollHeight to get natural content height, not constrained height
|
|
58
|
+
const menuHeight = menuRef.current.scrollHeight;
|
|
59
|
+
// Mobile: Always calculate max-height based on position to prevent overflow
|
|
60
|
+
if (isMobile) {
|
|
61
|
+
const maxHeightFromBottom = spaceBottom - padding;
|
|
62
|
+
const maxHeightFromTop = spaceAbove - padding;
|
|
63
|
+
const mobileMaxHeight = Math.max(maxHeightFromBottom, maxHeightFromTop);
|
|
64
|
+
setAdjustedPosition({
|
|
65
|
+
openLeft: spaceRight < menuRect.width + 20,
|
|
66
|
+
openUp: maxHeightFromTop > maxHeightFromBottom && menuHeight > maxHeightFromBottom,
|
|
67
|
+
needsScroll: menuHeight > mobileMaxHeight,
|
|
68
|
+
maxHeight: mobileMaxHeight,
|
|
69
|
+
});
|
|
70
|
+
setIsCalculated(true);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
// Desktop: Check if menu is too tall to fit in either direction
|
|
74
|
+
const fitsBelow = menuHeight + padding <= spaceBottom;
|
|
75
|
+
const fitsAbove = menuHeight + padding <= spaceAbove;
|
|
76
|
+
const needsScroll = !fitsBelow && !fitsAbove;
|
|
77
|
+
// Calculate max height when scrolling is needed
|
|
78
|
+
let maxHeight = undefined;
|
|
79
|
+
let shouldOpenUp = false;
|
|
80
|
+
if (needsScroll) {
|
|
81
|
+
// When scrolling is needed, open in the direction with MORE space
|
|
82
|
+
const availableSpace = Math.max(spaceBottom, spaceAbove);
|
|
83
|
+
maxHeight = availableSpace - padding;
|
|
84
|
+
shouldOpenUp = spaceAbove > spaceBottom; // Open upward if more space above
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
// Normal behavior: open up only if it fits above but not below
|
|
88
|
+
shouldOpenUp = !fitsBelow && fitsAbove;
|
|
89
|
+
}
|
|
54
90
|
setAdjustedPosition({
|
|
55
91
|
openLeft: spaceRight < menuRect.width + 20,
|
|
56
|
-
openUp:
|
|
92
|
+
openUp: shouldOpenUp,
|
|
93
|
+
needsScroll,
|
|
94
|
+
maxHeight,
|
|
57
95
|
});
|
|
58
96
|
setIsCalculated(true);
|
|
59
|
-
}, [position, menuRef]);
|
|
97
|
+
}, [position, menuRef, itemsCount]); // Added itemsCount to recalculate when menu content changes
|
|
60
98
|
return { ...adjustedPosition, isCalculated };
|
|
61
99
|
};
|
|
62
100
|
export const getContextMenuTarget = (event, focusedItem, selectedItem, dataSource, idPrefix, isMobile) => {
|
|
@@ -5,6 +5,8 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
|
|
|
5
5
|
$openUp: boolean;
|
|
6
6
|
$isPositioned: boolean;
|
|
7
7
|
$externalControl?: boolean;
|
|
8
|
+
$needsScroll?: boolean;
|
|
9
|
+
$maxHeight?: number;
|
|
8
10
|
}>> & string;
|
|
9
11
|
export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
10
12
|
$disabled?: boolean;
|
|
@@ -23,6 +25,8 @@ export declare const SubmenuIndicator: import("styled-components/dist/types").IS
|
|
|
23
25
|
export declare const Submenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
24
26
|
$parentRect: DOMRect;
|
|
25
27
|
$openUp?: boolean;
|
|
28
|
+
$needsScroll?: boolean;
|
|
29
|
+
$maxHeight?: number;
|
|
26
30
|
}>> & string;
|
|
27
31
|
export declare const MobileMenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
28
32
|
export declare const BackButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
|
|
@@ -38,6 +38,35 @@ export const MenuContainer = styled.div `
|
|
|
38
38
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
39
39
|
opacity: ${props => props.$isPositioned ? 1 : 0};
|
|
40
40
|
transition: opacity 0.05s ease-in;
|
|
41
|
+
|
|
42
|
+
/* Add scrolling when menu is too tall to fit in either direction */
|
|
43
|
+
${props => props.$needsScroll && props.$maxHeight && `
|
|
44
|
+
max-height: ${props.$maxHeight}px;
|
|
45
|
+
overflow-y: auto;
|
|
46
|
+
overflow-x: hidden;
|
|
47
|
+
|
|
48
|
+
/* Smooth scrolling */
|
|
49
|
+
scroll-behavior: smooth;
|
|
50
|
+
|
|
51
|
+
/* Custom scrollbar styling */
|
|
52
|
+
&::-webkit-scrollbar {
|
|
53
|
+
width: 8px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&::-webkit-scrollbar-track {
|
|
57
|
+
background: rgba(0, 0, 0, 0.05);
|
|
58
|
+
border-radius: 4px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&::-webkit-scrollbar-thumb {
|
|
62
|
+
background: rgba(0, 0, 0, 0.2);
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
67
|
+
background: rgba(0, 0, 0, 0.3);
|
|
68
|
+
}
|
|
69
|
+
`}
|
|
41
70
|
|
|
42
71
|
/* Reset color inheritance from parent with !important to override panel header styles */
|
|
43
72
|
& *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
|
|
@@ -57,9 +86,9 @@ export const MenuContainer = styled.div `
|
|
|
57
86
|
|
|
58
87
|
${props => props.$externalControl && `
|
|
59
88
|
@media (max-width: 768px) {
|
|
60
|
-
left:
|
|
61
|
-
right:
|
|
62
|
-
max-width: calc(100vw -
|
|
89
|
+
left: 75px !important;
|
|
90
|
+
right: 75px !important;
|
|
91
|
+
max-width: calc(100vw - 150px);
|
|
63
92
|
width: auto;
|
|
64
93
|
min-width: auto;
|
|
65
94
|
}
|
|
@@ -74,7 +103,7 @@ export const MenuItem = styled.div `
|
|
|
74
103
|
transition: all 0.15s ease;
|
|
75
104
|
position: relative;
|
|
76
105
|
user-select: none;
|
|
77
|
-
font-size: 13px;
|
|
106
|
+
font-size: var(--base-font-size, 13px);
|
|
78
107
|
color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
|
|
79
108
|
font-weight: 500;
|
|
80
109
|
${props => props.$beginGroup && `
|
|
@@ -134,7 +163,7 @@ export const MenuItem = styled.div `
|
|
|
134
163
|
|
|
135
164
|
@media (max-width: 768px) {
|
|
136
165
|
padding: 4px 10px;
|
|
137
|
-
font-size:
|
|
166
|
+
font-size: calc(var(--base-font-size, 13px) * 0.92);
|
|
138
167
|
}
|
|
139
168
|
`;
|
|
140
169
|
export const MenuItemContent = styled.div `
|
|
@@ -147,7 +176,7 @@ export const IconWrapper = styled.span `
|
|
|
147
176
|
display: flex;
|
|
148
177
|
align-items: center;
|
|
149
178
|
justify-content: center;
|
|
150
|
-
font-size:
|
|
179
|
+
font-size: calc(var(--base-font-size, 13px) * 1.08);
|
|
151
180
|
width: 18px;
|
|
152
181
|
height: 18px;
|
|
153
182
|
`;
|
|
@@ -170,7 +199,7 @@ export const RightIconButton = styled.button.attrs({
|
|
|
170
199
|
padding: 4px 8px;
|
|
171
200
|
margin-left: 8px;
|
|
172
201
|
border-radius: 6px;
|
|
173
|
-
font-size:
|
|
202
|
+
font-size: calc(var(--base-font-size, 13px) * 1.08);
|
|
174
203
|
opacity: 0 !important;
|
|
175
204
|
transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
|
|
176
205
|
|
|
@@ -192,7 +221,7 @@ export const RightIconButton = styled.button.attrs({
|
|
|
192
221
|
export const SubmenuIndicator = styled.span `
|
|
193
222
|
display: flex;
|
|
194
223
|
align-items: center;
|
|
195
|
-
font-size:
|
|
224
|
+
font-size: calc(var(--base-font-size, 13px) * 0.92);
|
|
196
225
|
margin-left: 8px;
|
|
197
226
|
opacity: 0.6;
|
|
198
227
|
transition: transform 0.15s ease;
|
|
@@ -272,6 +301,69 @@ export const Submenu = styled.div `
|
|
|
272
301
|
[data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
|
|
273
302
|
color: #e0e0e0 !important;
|
|
274
303
|
}
|
|
304
|
+
|
|
305
|
+
/* Dynamic scroll handling when submenu is too tall */
|
|
306
|
+
${props => props.$needsScroll && props.$maxHeight ? `
|
|
307
|
+
max-height: ${props.$maxHeight}px;
|
|
308
|
+
overflow-y: auto;
|
|
309
|
+
overflow-x: hidden;
|
|
310
|
+
|
|
311
|
+
/* Custom scrollbar styling for submenus */
|
|
312
|
+
&::-webkit-scrollbar {
|
|
313
|
+
width: 8px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
&::-webkit-scrollbar-track {
|
|
317
|
+
background: rgba(0, 0, 0, 0.05);
|
|
318
|
+
border-radius: 4px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
&::-webkit-scrollbar-thumb {
|
|
322
|
+
background: rgba(0, 0, 0, 0.2);
|
|
323
|
+
border-radius: 4px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
327
|
+
background: rgba(0, 0, 0, 0.3);
|
|
328
|
+
}
|
|
329
|
+
` : `
|
|
330
|
+
/* Fallback max-height for submenus that fit */
|
|
331
|
+
max-height: calc(100vh - 40px);
|
|
332
|
+
overflow-y: auto;
|
|
333
|
+
overflow-x: hidden;
|
|
334
|
+
|
|
335
|
+
&::-webkit-scrollbar {
|
|
336
|
+
width: 8px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
&::-webkit-scrollbar-track {
|
|
340
|
+
background: rgba(0, 0, 0, 0.05);
|
|
341
|
+
border-radius: 4px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
&::-webkit-scrollbar-thumb {
|
|
345
|
+
background: rgba(0, 0, 0, 0.2);
|
|
346
|
+
border-radius: 4px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
350
|
+
background: rgba(0, 0, 0, 0.3);
|
|
351
|
+
}
|
|
352
|
+
`}
|
|
353
|
+
|
|
354
|
+
[data-theme='dark'] & {
|
|
355
|
+
&::-webkit-scrollbar-track {
|
|
356
|
+
background: rgba(255, 255, 255, 0.05);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
&::-webkit-scrollbar-thumb {
|
|
360
|
+
background: rgba(255, 255, 255, 0.2);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
364
|
+
background: rgba(255, 255, 255, 0.3);
|
|
365
|
+
}
|
|
366
|
+
}
|
|
275
367
|
`;
|
|
276
368
|
export const MobileMenuHeader = styled.div `
|
|
277
369
|
display: flex;
|
|
@@ -307,7 +399,7 @@ export const BackButton = styled.button `
|
|
|
307
399
|
`;
|
|
308
400
|
export const HeaderTitle = styled.h3 `
|
|
309
401
|
margin: 0;
|
|
310
|
-
font-size:
|
|
402
|
+
font-size: calc(var(--base-font-size, 13px) * 1.23);
|
|
311
403
|
font-weight: 600;
|
|
312
404
|
color: #1a1a1a;
|
|
313
405
|
flex: 1;
|
|
@@ -2,7 +2,7 @@ import { Appointment } from 'devextreme/ui/scheduler';
|
|
|
2
2
|
import { ContextMenuTypes } from 'devextreme-react/context-menu';
|
|
3
3
|
import { TaskDescriptor, Task_States, PdGs, Priorities, ValidationItem } from '@topconsultnpm/sdk-ts';
|
|
4
4
|
import { FormModes, TaskContext } from '../../../ts';
|
|
5
|
-
import {
|
|
5
|
+
import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
|
|
6
6
|
export declare const TEXT_SELECTED_COLOR = "#ff5e1a";
|
|
7
7
|
export declare const BG_COLOR_INACTIVE_WIDGET = "#fff";
|
|
8
8
|
export declare const BG_COLOR_ACTIVE_WIDGET = "#fff0b7";
|
|
@@ -100,7 +100,7 @@ export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1
|
|
|
100
100
|
export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
|
|
101
101
|
export declare const formatDate: (date: Date) => string;
|
|
102
102
|
export declare const areDifferentIDs: (fromID: number | undefined, userID: number | undefined) => boolean;
|
|
103
|
-
export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) =>
|
|
103
|
+
export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
|
|
104
104
|
export declare const checkIfNew: (fromId: number | undefined, isNew: number | undefined) => boolean;
|
|
105
105
|
export declare const getNewTaskCount: (tasks: Array<TaskDescriptor>) => number;
|
|
106
106
|
export declare const isTaskAssignedToAnotherUser: (task: TaskDescriptor) => boolean;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { Task_States, PdGs, Priorities, ValidationItem, SDK_Localizator, ResultTypes, SDK_Globals } from '@topconsultnpm/sdk-ts';
|
|
3
2
|
import { TMColors } from '../../../utils/theme';
|
|
4
3
|
import { SDKUI_Localizator } from '../../../helper';
|
|
@@ -402,116 +401,107 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
|
|
|
402
401
|
const isTaskFromAnotherUser = isTaskDescriptorDefined && areDifferentIDs(taskDescriptor.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
|
|
403
402
|
const menuItems = [
|
|
404
403
|
{
|
|
405
|
-
name: SDKUI_Localizator.CreateContextualTask,
|
|
406
|
-
icon: _jsx("span", { className: "dx-icon-plus" }),
|
|
407
|
-
onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
|
|
408
|
-
disabled: false,
|
|
409
404
|
id: 'createContextualTask',
|
|
410
|
-
|
|
405
|
+
text: SDKUI_Localizator.CreateContextualTask,
|
|
406
|
+
icon: 'plus',
|
|
407
|
+
onClick: () => { openTaskForm(FormModes.Create, undefined, true); },
|
|
408
|
+
disabled: false
|
|
411
409
|
},
|
|
412
410
|
{
|
|
413
|
-
|
|
414
|
-
icon:
|
|
411
|
+
text: SDKUI_Localizator.Create,
|
|
412
|
+
icon: 'plus',
|
|
415
413
|
onClick: () => { openTaskForm(FormModes.Create, undefined, false); },
|
|
416
|
-
disabled: false
|
|
417
|
-
operationType: 'singleRow'
|
|
414
|
+
disabled: false
|
|
418
415
|
},
|
|
419
416
|
{
|
|
420
|
-
|
|
421
|
-
icon:
|
|
417
|
+
text: SDKUI_Localizator.Update,
|
|
418
|
+
icon: 'edit',
|
|
422
419
|
onClick: openEditTaskForm,
|
|
423
|
-
|
|
424
|
-
|
|
420
|
+
operationType: 'singleRow',
|
|
421
|
+
disabled: fromDatagrid ? false : !isTaskDescriptorDefined
|
|
425
422
|
},
|
|
426
423
|
{
|
|
427
|
-
|
|
428
|
-
icon:
|
|
424
|
+
text: SDKUI_Localizator.Duplicate,
|
|
425
|
+
icon: 'copy',
|
|
429
426
|
onClick: openDuplicateTaskForm,
|
|
430
|
-
|
|
431
|
-
|
|
427
|
+
operationType: 'singleRow',
|
|
428
|
+
disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
|
|
432
429
|
},
|
|
433
430
|
{
|
|
434
|
-
|
|
435
|
-
icon:
|
|
431
|
+
text: SDKUI_Localizator.Delete,
|
|
432
|
+
icon: 'trash',
|
|
436
433
|
onClick: onDeleteCallback,
|
|
437
|
-
|
|
438
|
-
|
|
434
|
+
operationType: 'multiRow',
|
|
435
|
+
disabled: fromDatagrid ? isTaskFromAnotherUser : !isTaskDescriptorDefined || isTaskFromAnotherUser
|
|
439
436
|
},
|
|
440
437
|
{
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
|
|
438
|
+
icon: 'optionsgear',
|
|
439
|
+
text: SDKUI_Localizator.MarkAs,
|
|
444
440
|
id: "markAs",
|
|
445
441
|
operationType: 'multiRow',
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
{
|
|
449
|
-
{
|
|
450
|
-
{
|
|
451
|
-
{
|
|
442
|
+
disabled: fromDatagrid ? false : !isTaskDescriptorDefined,
|
|
443
|
+
items: [
|
|
444
|
+
{ icon: 'product', text: SDKUI_Localizator.NewFemale, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.NotStarted) },
|
|
445
|
+
{ icon: 'refresh', text: SDKUI_Localizator.InProgress, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.InProgress) },
|
|
446
|
+
{ icon: 'check', text: SDKUI_Localizator.Completed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Completed) },
|
|
447
|
+
{ icon: 'taskstop', text: SDKUI_Localizator.Pending, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Waiting) },
|
|
448
|
+
{ icon: 'clock', text: SDKUI_Localizator.Postponed, operationType: 'multiRow', onClick: (rowIds) => markAsStatus(rowIds, Task_States.Deferred) }
|
|
452
449
|
]
|
|
453
450
|
},
|
|
454
451
|
{
|
|
455
|
-
|
|
456
|
-
|
|
452
|
+
id: 'wgContextFilter',
|
|
453
|
+
text: showContextualWG ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
|
|
454
|
+
icon: 'filter',
|
|
457
455
|
onClick: () => { setShowContextualWG(prev => !prev); },
|
|
458
456
|
disabled: false,
|
|
459
457
|
beginGroup: true,
|
|
460
|
-
visible: fromWG
|
|
461
|
-
id: 'wgContextFilter',
|
|
462
|
-
operationType: 'singleRow'
|
|
458
|
+
visible: fromWG
|
|
463
459
|
},
|
|
464
460
|
{
|
|
465
|
-
|
|
466
|
-
|
|
461
|
+
id: 'dossierContextFilter',
|
|
462
|
+
text: showContextualDossier ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
|
|
463
|
+
icon: 'filter',
|
|
467
464
|
onClick: () => { setShowContextualDossier(prev => !prev); },
|
|
468
465
|
disabled: false,
|
|
469
466
|
beginGroup: !fromWG && !fromDocument,
|
|
470
|
-
visible: fromDossier
|
|
471
|
-
id: 'dossierContextFilter',
|
|
472
|
-
operationType: 'singleRow'
|
|
467
|
+
visible: fromDossier
|
|
473
468
|
},
|
|
474
469
|
{
|
|
475
|
-
|
|
476
|
-
|
|
470
|
+
id: 'documentContextFilter',
|
|
471
|
+
text: showContextualDocument ? SDKUI_Localizator.RemoveContextualFilter : SDKUI_Localizator.ApplyContextualFilter,
|
|
472
|
+
icon: 'filter',
|
|
477
473
|
onClick: () => { setShowContextualDocument(prev => !prev); },
|
|
478
474
|
disabled: false,
|
|
479
475
|
beginGroup: !fromDossier && !fromWG,
|
|
480
|
-
visible: fromDocument
|
|
481
|
-
id: 'documentContextFilter',
|
|
482
|
-
operationType: 'singleRow'
|
|
476
|
+
visible: fromDocument
|
|
483
477
|
},
|
|
484
478
|
{
|
|
485
|
-
|
|
486
|
-
icon: _jsx("span", { className: "dx-icon-event" }),
|
|
479
|
+
icon: "event",
|
|
487
480
|
onClick: () => { if (handleGoToToday) {
|
|
488
481
|
handleGoToToday();
|
|
489
482
|
} },
|
|
483
|
+
text: SDKUI_Localizator.GoToToday,
|
|
490
484
|
disabled: false,
|
|
491
485
|
beginGroup: true,
|
|
492
|
-
operationType: 'singleRow'
|
|
493
486
|
},
|
|
494
487
|
{
|
|
495
|
-
name: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
|
|
496
|
-
icon: _jsx("span", { className: showSearch ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
|
|
497
|
-
onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
|
|
498
|
-
disabled: false,
|
|
499
488
|
beginGroup: true,
|
|
500
|
-
|
|
489
|
+
icon: showSearch ? "eyeclose" : "eyeopen",
|
|
490
|
+
onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
|
|
491
|
+
text: showSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
|
|
492
|
+
disabled: false
|
|
501
493
|
},
|
|
502
494
|
{
|
|
503
|
-
|
|
504
|
-
icon: _jsx("span", { className: showId ? "dx-icon-eyeclose" : "dx-icon-eyeopen" }),
|
|
495
|
+
icon: showId ? "eyeclose" : "eyeopen",
|
|
505
496
|
onClick: () => setShowId(prevShowId => !prevShowId),
|
|
506
|
-
|
|
507
|
-
|
|
497
|
+
text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
|
|
498
|
+
disabled: false
|
|
508
499
|
},
|
|
509
500
|
{
|
|
510
|
-
|
|
511
|
-
icon:
|
|
501
|
+
text: SDKUI_Localizator.Refresh,
|
|
502
|
+
icon: 'refresh',
|
|
512
503
|
onClick: () => getAllTasks(),
|
|
513
504
|
disabled: false,
|
|
514
|
-
operationType: 'multiRow'
|
|
515
505
|
},
|
|
516
506
|
];
|
|
517
507
|
// Apply filters
|
|
@@ -539,7 +529,7 @@ export const createTasksMenuItems = (taskDescriptor, showId, setShowId, showSear
|
|
|
539
529
|
item.visible === undefined);
|
|
540
530
|
}
|
|
541
531
|
if (showGoToToday === false) {
|
|
542
|
-
filteredMenuItems = filteredMenuItems.filter(item => item.
|
|
532
|
+
filteredMenuItems = filteredMenuItems.filter(item => item.text !== SDKUI_Localizator.GoToToday);
|
|
543
533
|
}
|
|
544
534
|
return filteredMenuItems;
|
|
545
535
|
};
|
|
@@ -5,6 +5,7 @@ import { TabPanel, Item } from 'devextreme-react/tab-panel';
|
|
|
5
5
|
import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
|
|
6
6
|
import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
|
|
7
7
|
import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
|
|
8
|
+
import ContextMenu from 'devextreme-react/context-menu';
|
|
8
9
|
import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
|
|
9
10
|
import { useDeviceType } from "../../base/TMDeviceProvider";
|
|
10
11
|
import { FormModes } from "../../../ts";
|
|
@@ -16,7 +17,6 @@ import { TMResultManager } from "../../forms/TMResultDialog";
|
|
|
16
17
|
import TMTasksCalendar from "./TMTasksCalendar";
|
|
17
18
|
import TMTasksAgenda from "./TMTasksAgenda";
|
|
18
19
|
import TMTaskForm from "./TMTaskForm";
|
|
19
|
-
import { ContextMenu as TMContextMenu } from "../../NewComponents/ContextMenu";
|
|
20
20
|
let abortController = new AbortController();
|
|
21
21
|
const TMTasksView = (props) => {
|
|
22
22
|
const { id, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, visualizedTasks, activeComponent, activeTabIndex, setActiveTabIndex, currentTask, setCurrentTask, assignedToMeCount, assignedByMeCount, allTasksFilteredCount, showId, setShowId, showSearch, setShowSearch, showContextualWG, setShowContextualWG, showContextualDossier, setShowContextualDossier, showContextualDocument, setShowContextualDocument, handleNavigateToWGs, handleNavigateToDossiers, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved, } = props;
|
|
@@ -519,13 +519,13 @@ const TMTasksView = (props) => {
|
|
|
519
519
|
];
|
|
520
520
|
}, [showId]);
|
|
521
521
|
const getFromOrToDatagridElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
|
|
522
|
-
return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick,
|
|
522
|
+
return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
|
|
523
523
|
};
|
|
524
524
|
const getFromOrToAgendaElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
|
|
525
|
-
return
|
|
525
|
+
return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-agenda-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }) })] });
|
|
526
526
|
};
|
|
527
527
|
const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
|
|
528
|
-
return
|
|
528
|
+
return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-calendar-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) })] });
|
|
529
529
|
};
|
|
530
530
|
return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: onSelectedIndexChange, id: "task-centered-tab-title", children: [_jsx(Item, { title: SDKUI_Localizator.AssignedToMe, icon: "user", tabRender: (params) => {
|
|
531
531
|
return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedToMe, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
|
|
3
3
|
import { ITMApplyFormProps, FormModes } from '../../ts';
|
|
4
|
+
import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
|
|
4
5
|
export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
6
|
export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
6
7
|
$borderRadius?: string;
|
|
@@ -54,5 +55,5 @@ export interface ITMQdDropDownMenuProps {
|
|
|
54
55
|
backgroundColor?: string;
|
|
55
56
|
disabled?: boolean;
|
|
56
57
|
borderRadius?: string;
|
|
57
|
-
items?:
|
|
58
|
+
items?: TMContextMenuItemProps[];
|
|
58
59
|
}
|
|
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
|
|
|
3
3
|
import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import Accordion, { Item } from 'devextreme-react/accordion';
|
|
6
|
-
import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight,
|
|
6
|
+
import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, SDKUI_Globals } from '../../helper';
|
|
7
7
|
import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd, IsParametricQuery, prepareQdForSearchAsync } from '../../helper/queryHelper';
|
|
8
8
|
import { useOutsideClick } from '../../hooks/useOutsideClick';
|
|
9
9
|
import { FormModes, SearchResultContext } from '../../ts';
|
|
@@ -27,7 +27,7 @@ import { useApplyForm } from '../../hooks/useForm';
|
|
|
27
27
|
import ShowAlert from '../base/TMAlert';
|
|
28
28
|
import { TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
|
|
29
29
|
import TMMetadataEditor from '../editors/TMMetadataEditor';
|
|
30
|
-
import { ContextMenu } from '
|
|
30
|
+
import { ContextMenu } from '../NewComponents/ContextMenu';
|
|
31
31
|
import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
|
|
32
32
|
import TMSearchResult from '../features/search/TMSearchResult';
|
|
33
33
|
export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
|
|
@@ -244,11 +244,11 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
|
|
|
244
244
|
};
|
|
245
245
|
const getJoinTypesMenuItems = (index) => {
|
|
246
246
|
let items = [
|
|
247
|
-
{
|
|
248
|
-
{
|
|
249
|
-
{
|
|
250
|
-
{
|
|
251
|
-
{
|
|
247
|
+
{ name: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
|
|
248
|
+
{ name: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
|
|
249
|
+
{ name: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
|
|
250
|
+
{ name: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
|
|
251
|
+
{ name: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
|
|
252
252
|
];
|
|
253
253
|
return items;
|
|
254
254
|
};
|
|
@@ -335,24 +335,24 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
|
|
|
335
335
|
};
|
|
336
336
|
const getQueryFunctionsMenuItems = (si, index) => {
|
|
337
337
|
let items = [];
|
|
338
|
-
items.push({
|
|
339
|
-
items.push({
|
|
340
|
-
items.push({
|
|
341
|
-
items.push({
|
|
338
|
+
items.push({ name: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
|
|
339
|
+
items.push({ name: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
|
|
340
|
+
items.push({ name: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
|
|
341
|
+
items.push({ name: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
|
|
342
342
|
let dataType = getMetadataDataType(si.tid, si.mid);
|
|
343
343
|
if (dataType == MetadataDataTypes.Number)
|
|
344
|
-
items.push({
|
|
344
|
+
items.push({ name: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
|
|
345
345
|
return items;
|
|
346
346
|
};
|
|
347
347
|
const getSelectMenuItems = (index) => {
|
|
348
348
|
let items = [];
|
|
349
|
-
items.push({
|
|
350
|
-
items.push({
|
|
349
|
+
items.push({ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
|
|
350
|
+
items.push({ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
|
|
351
351
|
for (const tid_alias of qdTIDs) {
|
|
352
|
-
items.push({
|
|
352
|
+
items.push({ name: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
|
|
353
353
|
}
|
|
354
|
-
items.push({
|
|
355
|
-
items.push({
|
|
354
|
+
items.push({ name: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
|
|
355
|
+
items.push({ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
|
|
356
356
|
return items;
|
|
357
357
|
};
|
|
358
358
|
// #endregion
|
|
@@ -441,59 +441,59 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
|
|
|
441
441
|
const onRemove_WhereItem = (index) => { setFormData({ ...formData, where: formData?.where?.filter((o, i) => i !== index) }); };
|
|
442
442
|
const getQueryOperatorsMenuItems = (wi, index) => {
|
|
443
443
|
let items = [];
|
|
444
|
-
items.push({
|
|
445
|
-
items.push({
|
|
446
|
-
items.push({
|
|
447
|
-
items.push({
|
|
448
|
-
items.push({
|
|
449
|
-
items.push({
|
|
444
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
|
|
445
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
|
|
446
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
|
|
447
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
|
|
448
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
|
|
449
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
|
|
450
450
|
let mdDataType = getMetadataDataType(wi.tid, wi.mid);
|
|
451
451
|
if (mdDataType != MetadataDataTypes.Varchar) {
|
|
452
|
-
items.push({
|
|
453
|
-
items.push({
|
|
454
|
-
items.push({
|
|
455
|
-
items.push({
|
|
456
|
-
items.push({
|
|
457
|
-
items.push({
|
|
458
|
-
items.push({
|
|
459
|
-
items.push({
|
|
452
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
|
|
453
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
|
|
454
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
|
|
455
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
|
|
456
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
|
|
457
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
|
|
458
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
|
|
459
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
|
|
460
460
|
}
|
|
461
461
|
else {
|
|
462
|
-
items.push({
|
|
463
|
-
items.push({
|
|
464
|
-
items.push({
|
|
465
|
-
items.push({
|
|
466
|
-
items.push({
|
|
467
|
-
items.push({
|
|
468
|
-
items.push({
|
|
469
|
-
items.push({
|
|
462
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
|
|
463
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
|
|
464
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
|
|
465
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
|
|
466
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
|
|
467
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
|
|
468
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
|
|
469
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
|
|
470
470
|
}
|
|
471
|
-
items.push({
|
|
471
|
+
items.push({ name: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
|
|
472
472
|
if (mdDataType == MetadataDataTypes.DateTime) {
|
|
473
473
|
items.push({
|
|
474
|
-
|
|
475
|
-
{
|
|
476
|
-
{
|
|
477
|
-
{
|
|
478
|
-
{
|
|
479
|
-
{
|
|
480
|
-
{
|
|
481
|
-
{
|
|
482
|
-
{
|
|
483
|
-
{
|
|
484
|
-
{
|
|
485
|
-
{
|
|
486
|
-
{
|
|
487
|
-
{
|
|
488
|
-
{
|
|
489
|
-
{
|
|
490
|
-
{
|
|
491
|
-
{
|
|
492
|
-
{
|
|
493
|
-
{
|
|
494
|
-
{
|
|
495
|
-
{
|
|
496
|
-
{
|
|
474
|
+
name: "Operatori speciali", submenu: [
|
|
475
|
+
{ name: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
|
|
476
|
+
{ name: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
|
|
477
|
+
{ name: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
|
|
478
|
+
{ name: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
|
|
479
|
+
{ name: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
|
|
480
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
|
|
481
|
+
{ name: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
|
|
482
|
+
{ name: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
|
|
483
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
|
|
484
|
+
{ name: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
|
|
485
|
+
{ name: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
|
|
486
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
|
|
487
|
+
{ name: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
|
|
488
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
|
|
489
|
+
{ name: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
|
|
490
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
|
|
491
|
+
{ name: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
|
|
492
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
|
|
493
|
+
{ name: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
|
|
494
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
|
|
495
|
+
{ name: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
|
|
496
|
+
{ name: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
|
|
497
497
|
]
|
|
498
498
|
});
|
|
499
499
|
}
|
|
@@ -713,23 +713,23 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
|
|
|
713
713
|
}
|
|
714
714
|
}
|
|
715
715
|
}, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
|
|
716
|
-
{ icon:
|
|
717
|
-
{ icon:
|
|
716
|
+
{ icon: showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon }), name: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
|
|
717
|
+
{ icon: showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary }), name: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
|
|
718
718
|
] }) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: formData.from?.tid, alias: undefined }), values: [formData.from?.tid], validationItems: validationItems.filter((o) => o.PropertyName === TMPropertyNames.fromTid), onValueChanged: (tids) => { let qd = SearchEngine.NewQueryDescriptor(); qd.from.tid = tids[0]; setFormData({ ...qd }); onFromTIDChanged?.(tids[0]); } })] }), formData?.join?.map((ji, index) => {
|
|
719
719
|
return (_jsxs("div", { style: { width: 'max-content', padding: isReadOnly ? '0px 20px' : 0 }, children: [_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropJoin(e, ji), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, ji), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
|
|
720
|
-
{
|
|
721
|
-
{
|
|
722
|
-
{
|
|
723
|
-
{
|
|
724
|
-
{
|
|
720
|
+
{ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
|
|
721
|
+
{ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
|
|
722
|
+
{ name: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
|
|
723
|
+
{ name: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
|
|
724
|
+
{ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
|
|
725
725
|
] }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryJoinTypes(ji.joinType) }), items: getJoinTypesMenuItems(index) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: ji.tid, alias: ji.alias }), values: ji.tid ? [ji.tid] : [], onValueChanged: (newValues) => onChange_JoinItem_TID(newValues[0], index) }), ji.alias &&
|
|
726
726
|
_jsx(StyledItemWrapper, { style: { fontStyle: 'italic', color: TMColors.primary }, children: `AS ${getDisplayAlias(getDcmtTypeName(ji.tid), ji.alias)}` })] }), ji.on?.map((onItem, indexOn) => {
|
|
727
727
|
return (_jsxs(StyledRowItem, { style: { marginLeft: '40px' }, children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
|
|
728
|
-
{
|
|
729
|
-
{
|
|
730
|
-
{
|
|
728
|
+
{ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
|
|
729
|
+
{ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
|
|
730
|
+
{ name: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
|
|
731
731
|
{
|
|
732
|
-
|
|
732
|
+
name: SDKUI_Localizator.RemoveAll, onClick: () => {
|
|
733
733
|
if (!formData.join)
|
|
734
734
|
return;
|
|
735
735
|
const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
|
|
@@ -742,36 +742,36 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
|
|
|
742
742
|
}), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
|
|
743
743
|
_jsxs(StyledRowItem, { children: [_jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_SelectItem }), dcmtTypesList.length == 1
|
|
744
744
|
? _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls, onClick: () => { onAddAll_SelectItem(qdTIDs[0]); } })
|
|
745
|
-
: _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({
|
|
745
|
+
: _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ name: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
|
|
746
746
|
return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropSelect(e, si), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, si), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: getSelectMenuItems(index) }), (!isReadOnly || (si.function && si.function != QueryFunctions.None)) && _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: si.function === QueryFunctions.None ? "..." : LocalizeQueryFunctions(si.function) }), items: getQueryFunctionsMenuItems(si, index) }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: si.tid, alias: si.alias }), qd: formData, values: [{ tid: si.tid, mid: si.mid, aliasTID: si.alias }], onValueChanged: (values) => { values.length > 0 && onChange_SelectItem_MID(values[0], index); } }), (!isReadOnly || si.as) && _jsx(TMQdEditableItem, { value: si.as, backgroundColor: colorValue, placeHolder: `<${SDKUI_Localizator.Query_EnterAlias}...>`, width: '100%', onValueChanged: (value) => { onChange_SelectItem_As(value, index); } })] }, `${si.tid}_${si.mid}_${index}`));
|
|
747
747
|
})] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
|
|
748
748
|
_jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_WhereItem }) }), formData?.where?.map((wi, index) => {
|
|
749
749
|
return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropWhere(e, wi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, wi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
|
|
750
|
-
{
|
|
751
|
-
{
|
|
752
|
-
{
|
|
753
|
-
{
|
|
750
|
+
{ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
|
|
751
|
+
{ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
|
|
752
|
+
{ name: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
|
|
753
|
+
{ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
|
|
754
754
|
{
|
|
755
|
-
|
|
756
|
-
{
|
|
757
|
-
{
|
|
758
|
-
{
|
|
755
|
+
name: "Imposta parametro", submenu: [
|
|
756
|
+
{ name: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
|
|
757
|
+
{ name: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
|
|
758
|
+
{ name: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
|
|
759
759
|
]
|
|
760
760
|
},
|
|
761
761
|
] }), _jsx(TMQdDropDownMenu, { disabled: index == 0, color: 'green', content: _jsx("div", { style: { fontSize: '1rem' }, children: wi.or ? 'OR' : 'AND' }), items: [
|
|
762
|
-
{
|
|
763
|
-
{
|
|
762
|
+
{ name: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
|
|
763
|
+
{ name: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
|
|
764
764
|
] }), _jsx(TMQdEditableItem, { value: wi.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: wi.tid, alias: wi.alias }), qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); } }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }), _jsx(TMQdWhereItemValue, { whereItem: wi, index: index, onValueChanged: (values) => { onChange_WhereItem_Values(values[0], values[1], index); } }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
|
|
765
765
|
})] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
|
|
766
766
|
_jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_OrderByItem }) }), formData?.orderBy?.map((oi, index) => {
|
|
767
767
|
return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropOrderBy(e, oi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, oi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
|
|
768
|
-
{
|
|
769
|
-
{
|
|
770
|
-
{
|
|
771
|
-
{
|
|
768
|
+
{ name: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
|
|
769
|
+
{ name: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
|
|
770
|
+
{ name: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
|
|
771
|
+
{ name: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, orderBy: undefined }) },
|
|
772
772
|
] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, showId: showId, borderRadius: borderRadius, backgroundColor: getColorIndex({ tid: oi.tid, alias: oi.alias }), qd: formData, values: [{ tid: oi.tid, mid: oi.mid, aliasTID: oi.alias }], onValueChanged: (values) => onChange_OrderByItem_MID(values[0], index) }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: oi.asc ? 'ASC' : 'DESC' }), items: [
|
|
773
|
-
{
|
|
774
|
-
{
|
|
773
|
+
{ name: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
|
|
774
|
+
{ name: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
|
|
775
775
|
] })] }, `${oi.tid}_${oi.mid}_${index}`));
|
|
776
776
|
})] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { children: [" ", renderResultSearchForm, " "] })] }));
|
|
777
777
|
};
|
|
@@ -997,5 +997,5 @@ const StyledContent = styled.div `
|
|
|
997
997
|
const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
|
|
998
998
|
const [id, setID] = useState('');
|
|
999
999
|
useEffect(() => { setID(genUniqueId()); }, [content]);
|
|
1000
|
-
return (
|
|
1000
|
+
return (_jsx(ContextMenu, { target: `#idContainer${id}`, items: items || [], trigger: "left", children: _jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
|
|
1001
1001
|
};
|