ui-soxo-bootstrap-core 2.5.0 → 2.5.2

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 (12) hide show
  1. package/core/components/external-window/external-window.js +178 -167
  2. package/core/components/extra-info/extra-info-details.js +109 -126
  3. package/core/lib/components/sidemenu/sidemenu.js +193 -238
  4. package/core/lib/components/sidemenu/sidemenu.scss +39 -26
  5. package/core/lib/pages/profile/theme-config.js +1 -1
  6. package/core/modules/index.js +0 -4
  7. package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js +53 -13
  8. package/core/modules/steps/action-buttons.js +29 -41
  9. package/core/modules/steps/action-buttons.scss +16 -0
  10. package/core/modules/steps/steps.js +71 -57
  11. package/core/modules/steps/steps.scss +4 -3
  12. package/package.json +1 -1
package/core/components/external-window/external-window.js CHANGED
@@ -18,64 +18,69 @@ import { message } from 'antd';
18
18
  * @param {Function} onMaximize - Callback when window is maximized
19
19
  */
20
20
  export function ExternalWindow({
21
- children,
22
- onClose,
23
- title = 'New Window',
24
- width = 600,
25
- height = 400,
26
- left,
27
- top,
28
- copyStyles = true,
29
- centerScreen = false,
30
- shortcuts = {},
31
- onMinimize,
32
- onMaximize
21
+ children,
22
+ onClose,
23
+ onWindowReady,
24
+ title = 'New Window',
25
+ width = 600,
26
+ height = 400,
27
+ left,
28
+ top,
29
+ copyStyles = true,
30
+ centerScreen = false,
31
+ shortcuts = {},
32
+ onMinimize,
33
+ onMaximize,
33
34
  }) {
34
- const [container, setContainer] = useState(null);
35
- const windowRef = useRef(null);
36
-
37
- // Default shortcuts
38
- const defaultShortcuts = useMemo(() => ({
39
- close: 'Escape',
40
- focus: 'Ctrl+Shift+F',
41
- ...shortcuts
42
- }), [shortcuts]);
43
-
44
- // Calculate window position
45
- const { posX, posY } = useMemo(() => {
46
- let posX = left;
47
- let posY = top;
48
-
49
- if (centerScreen) {
50
- const screenWidth = window.screen.availWidth;
51
- const screenHeight = window.screen.availHeight;
52
-
53
- if (centerScreen === 'both' || centerScreen === 'horizontal') {
54
- posX = (screenWidth - width) / 2;
55
- }
56
- if (centerScreen === 'both' || centerScreen === 'vertical') {
57
- posY = (screenHeight - height) / 2;
58
- }
59
- }
60
-
61
- return {
62
- posX: posX ?? 200,
63
- posY: posY ?? 200
64
- };
65
- }, [left, top, width, height, centerScreen]);
66
-
67
- const windowFeatures = useMemo(() =>
68
- `width=${width},height=${height},left=${posX},top=${posY},resizable=yes,scrollbars=yes`,
69
- [width, height, posX, posY]
70
- );
71
-
72
- // Initialize window document
73
- const initializeWindow = useCallback((win) => {
74
- const doc = win.document;
75
-
76
- // Write minimal HTML structure (like your working example)
77
- doc.open();
78
- doc.write(`
35
+ const [container, setContainer] = useState(null);
36
+ const windowRef = useRef(null);
37
+
38
+ // Default shortcuts
39
+ const defaultShortcuts = useMemo(
40
+ () => ({
41
+ close: 'Escape',
42
+ focus: 'Ctrl+Shift+F',
43
+ ...shortcuts,
44
+ }),
45
+ [shortcuts]
46
+ );
47
+
48
+ // Calculate window position
49
+ const { posX, posY } = useMemo(() => {
50
+ let posX = left;
51
+ let posY = top;
52
+
53
+ if (centerScreen) {
54
+ const screenWidth = window.screen.availWidth;
55
+ const screenHeight = window.screen.availHeight;
56
+
57
+ if (centerScreen === 'both' || centerScreen === 'horizontal') {
58
+ posX = (screenWidth - width) / 2;
59
+ }
60
+ if (centerScreen === 'both' || centerScreen === 'vertical') {
61
+ posY = (screenHeight - height) / 2;
62
+ }
63
+ }
64
+
65
+ return {
66
+ posX: posX ?? 200,
67
+ posY: posY ?? 200,
68
+ };
69
+ }, [left, top, width, height, centerScreen]);
70
+
71
+ const windowFeatures = useMemo(
72
+ () => `width=${width},height=${height},left=${posX},top=${posY},resizable=yes,scrollbars=yes`,
73
+ [width, height, posX, posY]
74
+ );
75
+
76
+ // Initialize window document
77
+ const initializeWindow = useCallback(
78
+ (win) => {
79
+ const doc = win.document;
80
+
81
+ // Write minimal HTML structure (like your working example)
82
+ doc.open();
83
+ doc.write(`
79
84
  <!DOCTYPE html>
80
85
  <html>
81
86
  <head>
@@ -112,114 +117,120 @@ export function ExternalWindow({
112
117
  </body>
113
118
  </html>
114
119
  `);
115
- doc.close();
116
-
117
- return doc.getElementById('root');
118
- }, [title]);
119
-
120
- // Copy styles from parent window
121
- const copyStylesToWindow = useCallback((targetWindow) => {
122
- if (!copyStyles) return;
123
-
124
- const fragment = targetWindow.document.createDocumentFragment();
125
-
126
- // Copy all stylesheets from parent
127
- Array.from(document.styleSheets).forEach(sheet => {
128
- try {
129
- if (sheet.href) {
130
- // External stylesheet
131
- const link = targetWindow.document.createElement('link');
132
- link.rel = 'stylesheet';
133
- link.href = sheet.href;
134
- fragment.appendChild(link);
135
- } else if (sheet.cssRules) {
136
- // Inline stylesheet
137
- const style = targetWindow.document.createElement('style');
138
- const cssText = Array.from(sheet.cssRules).map(r => r.cssText).join('\n');
139
- style.textContent = cssText;
140
- fragment.appendChild(style);
141
- }
142
- } catch (e) {
143
- // Silently ignore cross-origin stylesheet errors
144
- console.warn('Could not copy stylesheet:', e);
145
- }
146
- });
147
-
148
- targetWindow.document.head.appendChild(fragment);
149
- }, [copyStyles]);
150
-
151
- // Keyboard shortcut handler
152
- const createKeyDownHandler = useCallback((win) => (e) => {
153
- const key = [
154
- e.ctrlKey && 'Ctrl',
155
- e.shiftKey && 'Shift',
156
- e.altKey && 'Alt',
157
- e.metaKey && 'Meta',
158
- e.key
159
- ].filter(Boolean).join('+');
160
-
161
- if (defaultShortcuts.close && key === defaultShortcuts.close) {
162
- e.preventDefault();
163
- onClose();
164
- } else if (defaultShortcuts.focus && key === defaultShortcuts.focus) {
165
- e.preventDefault();
166
- win.focus();
167
- } else if (defaultShortcuts.minimize && key === defaultShortcuts.minimize) {
168
- e.preventDefault();
169
- win.blur();
170
- onMinimize?.();
171
- } else if (defaultShortcuts.maximize && key === defaultShortcuts.maximize) {
172
- e.preventDefault();
173
- win.moveTo(0, 0);
174
- win.resizeTo(screen.availWidth, screen.availHeight);
175
- onMaximize?.();
120
+ doc.close();
121
+
122
+ return doc.getElementById('root');
123
+ },
124
+ [title]
125
+ );
126
+
127
+ // Copy styles from parent window
128
+ const copyStylesToWindow = useCallback(
129
+ (targetWindow) => {
130
+ if (!copyStyles) return;
131
+
132
+ const fragment = targetWindow.document.createDocumentFragment();
133
+
134
+ // Copy all stylesheets from parent
135
+ Array.from(document.styleSheets).forEach((sheet) => {
136
+ try {
137
+ if (sheet.href) {
138
+ // External stylesheet
139
+ const link = targetWindow.document.createElement('link');
140
+ link.rel = 'stylesheet';
141
+ link.href = sheet.href;
142
+ fragment.appendChild(link);
143
+ } else if (sheet.cssRules) {
144
+ // Inline stylesheet
145
+ const style = targetWindow.document.createElement('style');
146
+ const cssText = Array.from(sheet.cssRules)
147
+ .map((r) => r.cssText)
148
+ .join('\n');
149
+ style.textContent = cssText;
150
+ fragment.appendChild(style);
151
+ }
152
+ } catch (e) {
153
+ // Silently ignore cross-origin stylesheet errors
154
+ console.warn('Could not copy stylesheet:', e);
176
155
  }
177
- }, [defaultShortcuts, onClose, onMinimize, onMaximize]);
178
-
179
- useEffect(() => {
180
- const win = window.open('', '', windowFeatures);
181
-
182
- if (!win) {
183
- message.error('Please allow popups for this site');
184
- onClose();
185
- return;
186
- }
187
-
188
- windowRef.current = win;
189
-
190
- // Initialize window document structure
191
- const root = initializeWindow(win);
192
-
193
- // Copy styles from parent (async to not block)
194
- requestAnimationFrame(() => {
195
- copyStylesToWindow(win);
196
- });
197
-
198
- // Set container for portal immediately
199
- setContainer(root);
200
-
201
- // Setup keyboard shortcuts
202
- const handleKeyDown = createKeyDownHandler(win);
203
- window.addEventListener('keydown', handleKeyDown);
204
- win.addEventListener('keydown', handleKeyDown);
205
-
206
- // Handle window close
207
- const handleClose = () => {
208
- setContainer(null);
209
- onClose();
210
- };
211
- win.addEventListener('beforeunload', handleClose);
212
-
213
- // Cleanup
214
- return () => {
215
- window.removeEventListener('keydown', handleKeyDown);
216
- win.removeEventListener('keydown', handleKeyDown);
217
- win.removeEventListener('beforeunload', handleClose);
218
- if (!win.closed) win.close();
219
- };
220
- // Only re-run if window features change, not on every render
221
- // eslint-disable-next-line react-hooks/exhaustive-deps
222
- }, [windowFeatures]);
223
-
224
- return container ? createPortal(children, container) : null;
225
- }
156
+ });
157
+
158
+ targetWindow.document.head.appendChild(fragment);
159
+ },
160
+ [copyStyles]
161
+ );
162
+
163
+ // Keyboard shortcut handler
164
+ const createKeyDownHandler = useCallback(
165
+ (win) => (e) => {
166
+ const key = [e.ctrlKey && 'Ctrl', e.shiftKey && 'Shift', e.altKey && 'Alt', e.metaKey && 'Meta', e.key].filter(Boolean).join('+');
167
+
168
+ if (defaultShortcuts.close && key === defaultShortcuts.close) {
169
+ e.preventDefault();
170
+ onClose();
171
+ } else if (defaultShortcuts.focus && key === defaultShortcuts.focus) {
172
+ e.preventDefault();
173
+ win.focus();
174
+ } else if (defaultShortcuts.minimize && key === defaultShortcuts.minimize) {
175
+ e.preventDefault();
176
+ win.blur();
177
+ onMinimize?.();
178
+ } else if (defaultShortcuts.maximize && key === defaultShortcuts.maximize) {
179
+ e.preventDefault();
180
+ win.moveTo(0, 0);
181
+ win.resizeTo(screen.availWidth, screen.availHeight);
182
+ onMaximize?.();
183
+ }
184
+ },
185
+ [defaultShortcuts, onClose, onMinimize, onMaximize]
186
+ );
187
+
188
+ useEffect(() => {
189
+ const win = window.open('', '', windowFeatures);
190
+
191
+ if (!win) {
192
+ message.error('Please allow popups for this site');
193
+ onClose();
194
+ return;
195
+ }
196
+ // 🔥 GIVE PARENT ACCESS + FOCUS
197
+ onWindowReady?.(win);
198
+
199
+ windowRef.current = win;
200
+
201
+ // Initialize window document structure
202
+ const root = initializeWindow(win);
203
+
204
+ // Copy styles from parent (async to not block)
205
+ requestAnimationFrame(() => {
206
+ copyStylesToWindow(win);
207
+ });
208
+
209
+ // Set container for portal immediately
210
+ setContainer(root);
211
+
212
+ // Setup keyboard shortcuts
213
+ const handleKeyDown = createKeyDownHandler(win);
214
+ window.addEventListener('keydown', handleKeyDown);
215
+ win.addEventListener('keydown', handleKeyDown);
216
+
217
+ // Handle window close
218
+ const handleClose = () => {
219
+ setContainer(null);
220
+ onClose();
221
+ };
222
+ win.addEventListener('beforeunload', handleClose);
223
+
224
+ // Cleanup
225
+ return () => {
226
+ window.removeEventListener('keydown', handleKeyDown);
227
+ win.removeEventListener('keydown', handleKeyDown);
228
+ win.removeEventListener('beforeunload', handleClose);
229
+ if (!win.closed) win.close();
230
+ };
231
+ // Only re-run if window features change, not on every render
232
+ // eslint-disable-next-line react-hooks/exhaustive-deps
233
+ }, [windowFeatures]);
234
+
235
+ return container ? createPortal(children, container) : null;
236
+ }
package/core/components/extra-info/extra-info-details.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo
2
+ * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo
3
3
  *
4
- * @description
4
+ * @description
5
5
  * @author Sneha T
6
6
  */
7
7
 
@@ -21,152 +21,135 @@ import ExtraInfo from './extra-info';
21
21
 
22
22
  const { TabPane } = Tabs;
23
23
 
24
- export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition='left',showDrawerData,dbPtr,callback,...record}) {
25
- // State to control drawer
26
- const [open, setOpen] = useState(false);
24
+ export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition = 'left', showDrawerData, dbPtr, callback, ...record }) {
25
+ // State to control drawer
26
+ const [open, setOpen] = useState(false);
27
27
 
28
- // To set extra info data
29
- const [info, setInfo] = useState([]);
30
- //Setting active key for tabs
31
- const [activeKey, setActiveKey] = useState(null);
28
+ // To set extra info data
29
+ const [info, setInfo] = useState([]);
30
+ //Setting active key for tabs
31
+ const [activeKey, setActiveKey] = useState(null);
32
32
 
33
- // To strore selected item
34
- const [selectedItem, setSelectedItem] = useState(null);
33
+ // To strore selected item
34
+ const [selectedItem, setSelectedItem] = useState(null);
35
35
 
36
- const [loading, setLoading] = useState(true);
36
+ const [loading, setLoading] = useState(true);
37
37
 
38
- /**
39
- * Show Drawer
40
- */
41
- const showDrawer = () => {
42
-
43
- setActiveKey(null); // Reset activeKey before fetching new info
44
-
45
- getExtraInfo();
38
+ /**
39
+ * Show Drawer
40
+ */
41
+ const showDrawer = () => {
42
+ setActiveKey(null); // Reset activeKey before fetching new info
46
43
 
47
- setOpen(true);
44
+ getExtraInfo();
48
45
 
49
- };
46
+ setOpen(true);
47
+ };
50
48
 
51
- /**
52
- * Function to close
53
- */
54
- const onClose = () => {
55
- if (typeof callback === 'function') {
56
- // Only call if it exists
57
- callback(false);
58
- }
59
- setOpen(false);
60
- };
49
+ /**
50
+ * Function to close
51
+ */
52
+ const onClose = () => {
53
+ if (typeof callback === 'function') {
54
+ // Only call if it exists
55
+ callback(false);
56
+ }
57
+ setOpen(false);
58
+ };
61
59
 
62
- /**
63
- * Function to get Info
64
- */
65
- async function getExtraInfo() {
60
+ /**
61
+ * Function to get Info
62
+ */
63
+ async function getExtraInfo() {
64
+ setSelectedItem();
66
65
 
67
- setSelectedItem()
66
+ setLoading(true);
68
67
 
69
- setLoading(true);
68
+ let mode = modeValue;
70
69
 
71
- let mode = modeValue
70
+ const result = await Dashboard.getExtraInfo(mode);
72
71
 
73
- const result = await Dashboard.getExtraInfo(mode);
72
+ setInfo(result);
74
73
 
75
- setInfo(result);
74
+ setSelectedItem(result[0]);
76
75
 
77
- setSelectedItem(result[0])
76
+ setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id
78
77
 
79
- setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id
78
+ setLoading(false);
79
+ }
80
80
 
81
- setLoading(false);
81
+ useEffect(() => {
82
+ // If showDrawerData is true then call showDrawer function
83
+ if (showDrawerData) {
84
+ showDrawer();
82
85
  }
86
+ }, [showDrawerData]);
83
87
 
84
- useEffect(() => {
85
- // If showDrawerData is true then call showDrawer function
86
- if (showDrawerData) {
87
- showDrawer();
88
- }
89
- }, [showDrawerData]);
90
-
91
- /**
88
+ /**
92
89
  * Function to render icon or button
93
90
  */
94
- const renderIconOrButton = () => {
95
- switch (icon) {
96
- case 'InfoCircleFilled':
97
- return <InfoCircleFilled onClick={showDrawer} />;
98
- case 'Button':
99
- return <Button size="small" onClick={showDrawer}>Show Info</Button>;
100
- default:
101
- return null;
102
- }
103
- };
104
-
105
-
106
-
107
- return (
108
- <>
109
- {/* {loading ? (
91
+ const renderIconOrButton = () => {
92
+ switch (icon) {
93
+ case 'InfoCircleFilled':
94
+ return <InfoCircleFilled onClick={showDrawer} />;
95
+ case 'Button':
96
+ return (
97
+ <Button size="small" onClick={showDrawer}>
98
+ Show Info
99
+ </Button>
100
+ );
101
+ default:
102
+ return null;
103
+ }
104
+ };
105
+
106
+ return (
107
+ <>
108
+ {/* {loading ? (
110
109
  <>
111
110
  <Skeleton active />
112
111
  </>
113
112
  ) : ( */}
114
- <>
115
- {/* */}
116
- {/* <Button onClick={showDrawer}> */}
117
-
118
- {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}
119
-
120
- {renderIconOrButton()}
121
- {/* </Button> */}
122
- {/* */}
123
-
124
- {/* */}
125
- <Drawer
126
-
127
- width={'85%'}
128
-
129
- title={title} onClose={onClose} open={open}>
130
-
131
- <div className="main-drawer-content">
132
-
133
- <div className="drawer-container">
134
-
135
- <div className="drawer-click"> {/* Flexbox approach */}
136
- <Tabs
137
- tabPosition={tabPosition}
138
-
139
- activeKey={activeKey} // Set activeKey to control the active tab
140
-
141
- onChange={(key) => {
142
-
143
- const selectedItem = info.find(item => item.id.toString() === key);
144
-
145
- setSelectedItem(selectedItem);
146
-
147
- setActiveKey(key);
148
- }}
149
- >
150
- {info.map(item => (
151
- <TabPane tab={item.caption} key={item.id.toString()} />
152
- ))}
153
- </Tabs>
154
- </div>
155
-
156
- <div className="right-drawer">
157
-
158
- {selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record} dbPtr={dbPtr}/> : null}
159
-
160
- </div>
161
-
162
- </div>
163
-
164
- </div>
165
-
166
- </Drawer>
167
-
168
- </>
169
- {/* )} */}
170
- </>
171
- );
113
+ <>
114
+ {/* */}
115
+ {/* <Button onClick={showDrawer}> */}
116
+
117
+ {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}
118
+
119
+ {renderIconOrButton()}
120
+ {/* </Button> */}
121
+ {/* */}
122
+
123
+ {/* */}
124
+ <Drawer width={'35%'} title={title} onClose={onClose} open={open}>
125
+ <div className="main-drawer-content">
126
+ <div className="drawer-container">
127
+ <div className="drawer-click">
128
+ {' '}
129
+ {/* Flexbox approach */}
130
+ <Tabs
131
+ tabPosition={tabPosition}
132
+ activeKey={activeKey} // Set activeKey to control the active tab
133
+ onChange={(key) => {
134
+ const selectedItem = info.find((item) => item.id.toString() === key);
135
+
136
+ setSelectedItem(selectedItem);
137
+
138
+ setActiveKey(key);
139
+ }}
140
+ >
141
+ {info.map((item) => (
142
+ <TabPane tab={item.caption} key={item.id.toString()} />
143
+ ))}
144
+ </Tabs>
145
+ </div>
146
+
147
+ <div className="right-drawer">{selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record} dbPtr={dbPtr} /> : null}</div>
148
+ </div>
149
+ </div>
150
+ </Drawer>
151
+ </>
152
+ {/* )} */}
153
+ </>
154
+ );
172
155
  }