ui-soxo-bootstrap-core 2.6.1-dev.21 → 2.6.1-dev.22

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.
@@ -17,7 +17,6 @@ import ReportingDashboard from '../../modules/reporting/components/reporting-das
17
17
  import PropTypes from 'prop-types';
18
18
 
19
19
  import { MenusAPI, CoreScripts } from '../../models';
20
- import LicenseAlert from '../license-management/license-alert';
21
20
 
22
21
  const motivatingMessages = [
23
22
  'Setting things up for a great start...',
@@ -68,6 +67,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
68
67
  // const [reports, setReports] = useState([]);
69
68
 
70
69
  var config = {};
70
+
71
71
  //fetch license summary
72
72
 
73
73
  // Variable decides the control of homepage
@@ -3,61 +3,46 @@
3
3
  * Global header component
4
4
  */
5
5
 
6
- import React, { useState, useEffect, useContext,useRef } from "react";
6
+ import React, { useState, useEffect, useContext, useRef } from 'react';
7
7
 
8
- import { animationControls, motion, useAnimation } from "framer-motion";
8
+ import { animationControls, motion, useAnimation } from 'framer-motion';
9
9
 
10
- import {
11
- boxVariants,
12
- } from "./animations"
10
+ import { boxVariants } from './animations';
13
11
 
14
- import { GlobalContext } from "./../../Store";
12
+ import { GlobalContext } from './../../Store';
15
13
 
16
- import { Link, useLocation } from "react-router-dom";
14
+ import { Link, useLocation } from 'react-router-dom';
17
15
 
18
- import { Typography, Avatar ,Input} from "antd";
16
+ import { Typography, Avatar, Input } from 'antd';
19
17
 
18
+ import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
20
19
 
20
+ import { Button } from '../../elements';
21
21
 
22
- import ProgressBar from "../progress-bar/progress-bar"; // Adjust the path as needed
22
+ import GenericHeader from '../header/generic-header';
23
23
 
24
- import { Button } from "../../elements";
24
+ import { MenuOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
25
25
 
26
+ import { Drawer } from 'antd';
26
27
 
28
+ import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
27
29
 
28
- import GenericHeader from "../header/generic-header";
30
+ import SideMenu from './../sidemenu/sidemenu';
29
31
 
30
- import {
31
- MenuOutlined,
32
- UserOutlined,
33
- SettingOutlined,
34
- } from "@ant-design/icons";
32
+ import './global-header.scss';
35
33
 
36
- import { Drawer } from "antd";
34
+ import LanguageSwitcher from '../language-switcher/language-switcher';
37
35
 
38
- import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
39
-
40
- import SideMenu from "./../sidemenu/sidemenu";
41
-
42
- import "./global-header.scss";
43
-
44
- import LanguageSwitcher from "../language-switcher/language-switcher";
45
-
46
- import { useTranslation } from "react-i18next";
47
-
48
-
49
- import BorderStyle from "pdf-lib/cjs/core/annotation/BorderStyle";
50
-
51
- import SettingsUtil from "../../../utils/settings.utils";
52
- import SpotlightSearch from "../spotlight-search/spotlight-search.component";
36
+ import { useTranslation } from 'react-i18next';
53
37
 
38
+ import BorderStyle from 'pdf-lib/cjs/core/annotation/BorderStyle';
54
39
 
40
+ import SettingsUtil from '../../../utils/settings.utils';
41
+ import SpotlightSearch from '../spotlight-search/spotlight-search.component';
42
+ import LicenseAlert from '../../../components/license-management/license-alert';
55
43
 
56
44
  const { Title } = Typography;
57
45
 
58
-
59
-
60
-
61
46
  export default function GlobalHeader({
62
47
  loading,
63
48
  appSettings,
@@ -68,48 +53,36 @@ export default function GlobalHeader({
68
53
  sidemenu = [],
69
54
  reload,
70
55
  meta = {},
56
+ licAlert,
57
+ licenseData,
71
58
  ...props
72
59
  }) {
73
-
74
60
  let location = useLocation();
75
61
  // let location = {};
76
62
 
77
-
78
-
79
63
  const { isMobile, user = { locations: [] }, kiosk, state } = useContext(GlobalContext);
80
64
 
81
-
82
-
83
65
  const [visible, setVisible] = useState(false);
84
66
 
85
67
  // Variable to handle toggling of menu
86
68
  const [collapsed, setCollapsed] = useState(false);
87
- // varibale handle branch switcher
88
69
 
89
-
70
+ // varibale handle branch switcher
90
71
 
91
72
  // const [searchModalVisible, setSearchModalVisible] = useState(false);
92
73
 
93
-
94
- const { globalCustomerHeader = () => { } } = appSettings;
74
+ const { globalCustomerHeader = () => {} } = appSettings;
95
75
 
96
76
  const { t, i18n } = useTranslation();
97
77
 
98
78
  const spotlightRef = useRef();
99
79
 
100
80
  useEffect(() => {
101
-
102
81
  setTimeout(() => {
103
-
104
82
  i18n.changeLanguage(localStorage.selectedLanguage);
105
-
106
- }, 0)
107
-
108
-
83
+ }, 0);
84
+ fetchSummary();
109
85
  }, []);
110
-
111
-
112
-
113
86
 
114
87
  /**
115
88
  * Function to handle toggling of menu
@@ -125,9 +98,6 @@ export default function GlobalHeader({
125
98
  // input to avoid typing
126
99
  SettingsUtil.openSpotlightModal();
127
100
  };
128
-
129
-
130
-
131
101
 
132
102
  /**
133
103
  * Function to remove toggling on mobile view
@@ -156,79 +126,42 @@ export default function GlobalHeader({
156
126
  const boxControls = useAnimation();
157
127
 
158
128
  async function animate() {
159
- await boxControls.start("entered");
129
+ await boxControls.start('entered');
160
130
 
161
131
  //await boxControls.start("show");
162
132
  }
163
133
 
164
134
  useEffect(() => {
165
-
166
135
  animate();
167
- }, [])
168
-
169
- useEffect(() => {
170
-
171
- }, [state.theme]);
172
-
173
-
174
-
175
-
176
-
136
+ }, []);
177
137
 
138
+ useEffect(() => {}, [state.theme]);
178
139
 
179
140
  return (
180
- <div
181
- className={`global-header ${process.env.REACT_APP_THEME} ${isConnected && !kiosk ? "connected" : ""
182
- }`}
183
- style={{
184
-
185
- // background: state.theme.colors.bodyBackground,
186
-
187
- height: 10,
188
-
189
- }}
190
- >
191
- {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
192
-
193
- <div className="layout-content">
194
- <div
195
-
196
- //whileHover="hover"
197
- //whileTap="tap"
198
- className={`left-bar ${!isConnected && !isMobile ? "" : "hide"}${!collapsed ? "open" : "close"}${kiosk && !isConnected ? "kioskon" : ""}`}
199
- // style={{ background: state.theme.colors.leftSectionBackground }}
200
- >
201
-
202
- {!isMobile && !isConnected ? (
203
- <motion.div
204
- variants={boxVariants}
205
- initial={["entering"]}
206
- animate={boxControls}
207
- className={`sidebar-container ${!collapsed ? "open" : "close"}${kiosk ? "" : "kioskon"}`}
208
-
209
- >
210
-
211
- <SideMenu
212
- // isOpen={isOpen}
213
- collapsed={collapsed}
214
- setCollapsed={setCollapsed}
215
- loading={loading}
216
- appSettings={appSettings}
217
- callback={onClose}
218
- modules={modules}
219
- history={history}
220
- />
221
-
222
- </motion.div>
223
- ) : (
224
- <Drawer
225
- placement="left"
226
- onClose={onClose}
227
- visible={visible}
228
- className="side-drawer-content"
229
- >
230
- <div
231
- className={`sidebar-container ${!collapsed ? "open" : "close"}`}
141
+ <>
142
+ <div
143
+ className={`global-header ${process.env.REACT_APP_THEME} ${isConnected && !kiosk ? 'connected' : ''}`}
144
+ style={{
145
+ // background: state.theme.colors.bodyBackground,
146
+
147
+ height: 10,
148
+ }}
149
+ >
150
+ {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
151
+
152
+ <div className="layout-content">
153
+ <div
154
+ //whileHover="hover"
155
+ //whileTap="tap"
156
+ className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
157
+ // style={{ background: state.theme.colors.leftSectionBackground }}
158
+ >
159
+ {!isMobile && !isConnected ? (
160
+ <motion.div
161
+ variants={boxVariants}
162
+ initial={['entering']}
163
+ animate={boxControls}
164
+ className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
232
165
  >
233
166
  <SideMenu
234
167
  // isOpen={isOpen}
@@ -240,168 +173,169 @@ export default function GlobalHeader({
240
173
  modules={modules}
241
174
  history={history}
242
175
  />
243
- </div>
244
- </Drawer>
245
- )}
246
- </div>
176
+ </motion.div>
177
+ ) : (
178
+ <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
179
+ <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
180
+ <SideMenu
181
+ // isOpen={isOpen}
182
+ collapsed={collapsed}
183
+ setCollapsed={setCollapsed}
184
+ loading={loading}
185
+ appSettings={appSettings}
186
+ callback={onClose}
187
+ modules={modules}
188
+ history={history}
189
+ />
190
+ </div>
191
+ </Drawer>
192
+ )}
193
+ </div>
194
+
195
+ {/* Right Section of the Component Loader */}
196
+ <div
197
+ className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
198
+ style={{ background: state.theme.colors.bodyBackground }}
199
+ >
200
+ {/* For not connected section */}
201
+ {!isConnected && !kiosk ? (
202
+ <div
203
+ className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
204
+ // style={{ background: state.theme.colors.headerBg }}
205
+ >
206
+ {/* */}
207
+ <div className="page-header-name">
208
+ <ProgressBar isLoading={loading} />
247
209
 
248
- {/* Right Section of the Component Loader */}
249
- <div className={`right-section ${!collapsed ? "open" : "close"} ${kiosk ? "kioskon" : ""}`} style={{ background: state.theme.colors.bodyBackground }}>
250
- {/* For not connected section */}
251
- {!isConnected && !kiosk ? (
252
-
253
- <div className={`page-wrapper ${!collapsed ? "open" : "close"}`}
254
- // style={{ background: state.theme.colors.headerBg }}
255
- >
256
- {/* */}
257
- <div className="page-header-name">
258
-
259
- <ProgressBar isLoading={loading} />
260
-
261
- <span type
262
- onClick={!isMobile ? toggleCollapsed : hideToggle}
263
- className="toggle-box toggle-menu"
264
- >
265
- <MenuOutlined />
266
-
267
- </span>
268
-
269
- {/* Back Button */}
270
- {location.pathname !== "/" ? (
271
- <span
272
- className="toggle-box"
273
- onClick={() => {
274
- history && history.goBack();
275
- }}
276
- >
277
- <GenericHeader />
210
+ <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
211
+ <MenuOutlined />
278
212
  </span>
279
- ) : null}
280
- {/* Back Button Ends */}
281
-
282
-
283
- {location.pathname !== "/" ? (
284
- <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
285
- {menu.caption}
286
- </h4>
287
- ) : null}
288
- </div>
289
-
290
- {/* Page Menu Actions */}
291
-
292
- {user.role || user.id ? (
293
- <div className="page-menu">
294
- {/* Search Input in header start */}
295
- { !isMobile && (
296
-
297
- <div>
298
- <Input
299
- placeholder="Search (Shift + F)"
300
- prefix={<SearchOutlined />}
301
- onClick={openSearchModal}
302
-
303
- readOnly
304
- style={{ width: 250 }}
305
- />
306
-
307
-
308
- <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props}/>
309
-
310
- </div>
311
- )}
312
- {/* Search Input in header start */}
313
-
314
- {/** branchswitcher Option */}
315
- {/* branch switcher controlled with env for matria and nura */}
316
- {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
317
- <div className="branch-switcher">{globalCustomerHeader()}</div>
318
- ):null}
319
- {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
320
-
321
-
322
- {/* Search Option */}
323
213
 
324
- {/* <ModalSearch /> */}
325
-
326
- {/* Search Option Ends */}
214
+ {/* Back Button */}
215
+ {location.pathname !== '/' ? (
216
+ <span
217
+ className="toggle-box"
218
+ onClick={() => {
219
+ history && history.goBack();
220
+ }}
221
+ >
222
+ <GenericHeader />
223
+ </span>
224
+ ) : null}
225
+ {/* Back Button Ends */}
327
226
 
328
- {/* Configurator Actions */}
329
- {user.isAdmin ? (
330
- <>
331
- {/* Models */}
332
- {menu && menu.id ? (
333
- <Link to={`/menus/${menu.id}`}>
227
+ {location.pathname !== '/' ? (
228
+ <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
229
+ {menu.caption}
230
+ </h4>
231
+ ) : null}
232
+ </div>
334
233
 
335
- <Button type="default" size={"small"} icon={<SettingOutlined />}>
234
+ {/* Page Menu Actions */}
336
235
 
337
- </Button>
338
- </Link>
339
- ) : null}
340
- {/* Models Ends */}
341
- </>
342
- ) : null}
343
- {/* Configurator Actions Ends */}
236
+ {user.role || user.id ? (
237
+ <div className="page-menu">
238
+ {/* Search Input in header start */}
239
+ {!isMobile && (
240
+ <div>
241
+ <Input
242
+ placeholder="Search (Shift + F)"
243
+ prefix={<SearchOutlined />}
244
+ onClick={openSearchModal}
245
+ readOnly
246
+ style={{ width: 250 }}
247
+ />
248
+
249
+ <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
250
+ </div>
251
+ )}
252
+ {/* Search Input in header start */}
344
253
 
345
-
254
+ {/** branchswitcher Option */}
255
+ {/* branch switcher controlled with env for matria and nura */}
256
+ {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
257
+ {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
346
258
 
259
+ {/* Search Option */}
347
260
 
261
+ {/* <ModalSearch /> */}
348
262
 
263
+ {/* Search Option Ends */}
349
264
 
350
- {/* Reload Button */}
265
+ {/* Configurator Actions */}
266
+ {user.isAdmin ? (
267
+ <>
268
+ {/* Models */}
269
+ {menu && menu.id ? (
270
+ <Link to={`/menus/${menu.id}`}>
271
+ <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
272
+ </Link>
273
+ ) : null}
274
+ {/* Models Ends */}
275
+ </>
276
+ ) : null}
277
+ {/* Configurator Actions Ends */}
351
278
 
352
- <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
279
+ {/* Reload Button */}
353
280
 
354
- </Button>
281
+ <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
355
282
 
356
- {/* Reload Button Ends */}
283
+ {/* Reload Button Ends */}
357
284
 
358
- {/** Switch Languages starts */}
359
- {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
360
- {/** Switch Languages ends */}
285
+ {/** Switch Languages starts */}
286
+ {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
287
+ {/** Switch Languages ends */}
361
288
 
362
- {/* User Profile */}
363
- <div style={{ padding: "10px" }}>
364
- <ProfileAvatar />
365
- <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
289
+ {/* User Profile */}
290
+ <div style={{ padding: '10px' }}>
291
+ <ProfileAvatar />
292
+ <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
293
+ </div>
294
+ {/* User Profile Ends */}
366
295
  </div>
367
- {/* User Profile Ends */}
368
- </div>
369
- ) : null}
296
+ ) : null}
370
297
 
371
- {/* Page Menu Actions Ends */}
372
- </div>
373
- ) : null}
298
+ {/* Page Menu Actions Ends */}
299
+ </div>
300
+ ) : null}
374
301
 
375
- {/* The children is rendered */}
376
- {children}
377
- {/* The children is rendered */}
302
+ {/* The children is rendered */}
303
+ {children}
304
+ {/* The children is rendered */}
305
+ </div>
306
+ {/* Right Section of the Component Loader Ends */}
378
307
  </div>
379
- {/* Right Section of the Component Loader Ends */}
380
308
  </div>
381
- </div>
309
+ {licAlert && licenseData && (
310
+ <div
311
+ style={{
312
+ marginTop: '3rem',
313
+ right: '2%',
314
+ position: 'absolute',
315
+ zIndex: 999,
316
+ }}
317
+ >
318
+ <LicenseAlert data={licenseData} />
319
+ </div>
320
+ )}
321
+ </>
382
322
  );
383
323
  }
384
324
 
385
-
386
325
  /**
387
- *
388
- * @returns
326
+ *
327
+ * @returns
389
328
  */
390
329
  function ProfileAvatar() {
391
-
392
330
  const { user = { locations: [] } } = useContext(GlobalContext);
393
331
 
394
- useEffect(() => { }, []);
332
+ useEffect(() => {}, []);
395
333
 
396
334
  return (
397
335
  <Link className="profile-avatar" to="/profile">
398
336
  {user.photograph ? (
399
337
  <>
400
- <img
401
- className="profile-picture"
402
- src={user.photograph}
403
- alt={"user photograph"}
404
- />
338
+ <img className="profile-picture" src={user.photograph} alt={'user photograph'} />
405
339
  </>
406
340
  ) : (
407
341
  <Avatar shape="square" size="small" icon={<UserOutlined />} />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-soxo-bootstrap-core",
3
- "version": "2.6.1-dev.21",
3
+ "version": "2.6.1-dev.22",
4
4
  "description": "All the Core Components for you to start",
5
5
  "keywords": [
6
6
  "all in one"