238 comments found.
Thanks for your support.
I noticed that clicking on a link such as:
<Route exact path=”/app/system/activity” component={withAuthorizationRouter(SystemActivity, [‘ROLE_SUPER_ADMIN’])} />
causes componentDidMount (for the component) to be called twice, but called only once whenever I refresh.
Any help or suggestion will be appreciated.
Hi golfexodus,
This issue probably from Fade transition, so in template i.e: /app/containers/Templates/layouts/*.js remove mountOnEnter and unmountOnExit props
<Fade
in={pageLoaded}
mountOnEnter
unmountOnExit
{...(pageLoaded ? { timeout: 700 } : {})}
>
<div classname="{!pageLoaded" classes.hideapp="" :="">
{/* Application content will load here */}
{ children }
</div>
</Fade>
change to
<Fade
in={pageLoaded}
{...(pageLoaded ? { timeout: 700 } : {})}
>
<div classname="{!pageLoaded" classes.hideapp="" :="">
{/* Application content will load here */}
{ children }
</div>
</Fade>
Hope this can help.
Regards.
What is the version of Material UI you work with? And do you have hooks implemented?
This template use Material UI 4.7.0 and we haven’t upgrade to hooks yet.
Please is SweetAlert or any alternative for modal confirmation available in this template??
The alert confirmation is here http://enlite.ux-maestro.com/app/ui/dialog-modal.
Best regards.
Hi, good theme, kindly,small guide on how to integrate the same with .net core will be highly appreciated.
Hi danxo,
Thanks for purchasing and the appreciation.
If you want to use with .net you can try https://reactjs.net/ All the components itself are in app/component including the styling and the container pages are in app/containers.
For the rest is global scss assets in app/styles and image assets in public/ So you can take out them to your asp project. Don’t forget to install the dependencies that related to each component you use.
Feel free if you have any further queries.
Regards.
Hi,
Maybe it need to register the application in cpanel. Here’s the guide to node js configuration https://docs.cpanel.net/knowledge-base/web-services/how-to-install-a-node.js-application/#register-the-application and here’s the forum may can support this issue https://forums.cpanel.net/threads/installing-a-node-js-application-on-cpanel-verison-80.652903/
regards.
Is there any other way to contact you to have a more fluid communication? Maybe discord, skype or telegram?
Regarding the error message is Cannot find module because missing internals/scripts/npmcheckversion.js Please make sure to copy or clone all necessary files to server.
Thanks always for your support.
Please how do I dispatch user detail into authReducer from Pages/User/Login after form submission or authentication inside the function:
submitForm(values) { const { valueForm } = this.state; setTimeout(() => { this.setState({ valueForm: values }); console.log(`You submitted:\n\n${valueForm}`); window.location.href = ’/app’; }, 500); // simulate server latency }
Also how do I use or where do I reference withAuthorizationRouter in app/containers/Session/ to check authorization before page view
Hi golfexodus,
To get user detail after submission you can use
const reducerAuth = 'authReducer';
const mapStateToProps = state => ({
user: state.get(reducerAuth).user,
})
render() {
<div>
{user.photoURL}
{user.displayName}
</div>
}
For example in app/containers/Templates/Dashboard.js
And for auth checking is in /app/containers/Session/withAuthorizationRouter.js in const authenticating
Hope this can help.
Regards.
Thank you for your response. What I meant was how do I set user detail after form submission inside the submitForm method
Hi golfexodus,
First the method to set user reducer state detail only available in firebase auth pages with redux-saga. To set it is in /app/redux/modules/authSagas.js in loginSaga function.
Hope this can help.
Regards.
Thanks for the last support, everything works fine now, except that after login /app/containers/Session/withAuthorizationRouter.js checks and authenticates user but after page refresh, user is redirected to login page… meaning the user detail does not persist. How can I make the user detail in authReducer persist even after page refresh.
Hi golfexodus,
The user details should be stored in local storage with firebase, you can check in authReducer.js with
case SYNC_USER:
console.log(action.user);
Regards.
Hi,
One question … i need to get the firebase user token inside my component. I saw theres a authReducer that already bring user object from firebase… what is the proper way to use authReducer in my component?
I saw one example in Dashboard component (to show in the header if user is logged or not) but it seens if i try to use inside my component, it does not contain any user.
Maybe i need some trigger to be fetched in my component from the Dashboard.
But at the end, what i need is simply getting the current logged user in firebase.
Hi vsmori
To use authReducer, that mean get user data and logged status you can call from reducer state in your component like in Dashboard.js
const mapStateToProps = state => ({
isAuthenticated: state.get(reducerAuth).loggedIn,
user: state.get(reducerAuth).user,
...state,
});
By default user and loggedIn state is null for non-registered user.
But we recommend to call reducer state in containers only to keep components clean from dynamic data. Just in case future you need a same components imported in different container with different data as well.
Hope this can help.
Regards,
Hi,
Is there an way i can configure react to redirect the user to login page when not logged?
In other words, i will not have a public page.
Regards, VM
Hi vsmori,
To restrict page and return user to login you can use withAuthorizationRouter in app/containers/Session/
Then please use it in routing app/containers/App/Application.js like this example http://enlite.ux-maestro.com/app/pages/authenticated-pages
Feel free if you have any further queries.
Regards.
thanks
What minimum or how much cloud space configuration (RAM and vCPU) would you recommend for production deployment of all features on the template including google maps.
Hi golfexodus,
For system information app with node js, the recommendation is to use 2-4 CPU’s and 4GB-8GB RAM. The price around 20-80 USD / month. But if you have a larger environment such as big data app, that might be need more.
Regards.
Hi,
I am trying to use widget in the starter project. But even after npm install and npm run build:dll I still get this error: Can’t resolve ‘enl-api/palette/colorfull’ in Widgets/widget-jss.js. I am not sure how to proceed further. Its a critical blocker for me. Can you pls tell me where I am going wrong. Thanks
Hi vigenshveeran,
Thanks for purchasing.
That mean you miss colorfull.js Please copy api/palette/colorfull.js from /enlite-boiler/app/api/palette/colorfull.js to starter-project in same folder structure.
Hope this can help. Feel free if you have any further queries.
Regards.
Hi,
Is it possible to use injectReducer and injectSaga functions to dynamically load a reducer and saga?
Do you have any simple example?
I have tried using the ‘npm run generate container’ (yes to all the options), and run the container as it is, but I received an error ‘Uncaught Invariant Violation: (app/utils…) injectors: Expected a valid redux store’. Any ideas?
Thanks
Hi anhrisn,
Terimaksih telah membeli Enlite Prime.
Untuk npm run generate hanya bisa untuk generate container dan compnent saja. Untuk register ke reducer (app/redux/reducers.js) dan saga (app/utils/saga.js).
Dan dari error tersebut, kami tidak bisa reproducenya, kemungkinan ada kesalahan import path di folder tests nya https://github.com/react-boilerplate/react-boilerplate/issues/2628
Semoga bisa membantu. Silahkan jika ada pertanyaan lebih lanjut.
Salam.
I think you need to update the documentation, I tried to create a component as explained in the documentation and it doesn’t work.
Ok we will check and update it.
Thanks for the report.
Hi,
Very nice theme 
How to use it with .NET core 3 app?
We don’t use Redux.js, Firebase … just React components and styles
.
Thanks
Hi maljabi44,
Thanks for purchasing and the appreciation.
If you want to use with .net you can try https://reactjs.net/ All the components itself are in app/component including the styling and the container pages are in app/containers. And the rest is global scss assets in app/styles and image assets in public/ So you can take out them to your asp project. Don’t forget to install the dependencies that related to each component you use.
Feel free if you have any further queries.
Regards.
Is it possible to keep only buttons using the sidebar? Since it comes with a sub menu and I don’t need them because I don’t want categories
Hi Aeternus185,
Yes you can modify app/components/SidebarBig/MainMenuBig.js First please remove sub menu container renderChildMenu
<nav className={classNames(classes.listMenu, !drawerPaper && classes.drawerPaperClose)}>
{renderChildMenu()}
</nav>
And in getMenus constant, you can add link component in ButtonBase component.
<ButtonBase
component={LinkBtn}
to={item.link}
>
Then in app/api/ui/menu.js create menu object with link attribute, but without child attribute. like this
{
key: 'no_child',
name: 'One Level Menu',
icon: 'ios-document-outline',
link: '/app/pages/blank-page',
}
Hope this can help.
Regards.
I’m talking about sidebar not big-sidebar
Hi Aeternus,
Sorry for missunderstanding.
The sidebar has designed that icon only for parent(has children) menu. For one menu level can be applied for sidebar-layout. So you need make a modification a bit like this sidebar example.
app/api/ui/menu.js // add parent menu with linkParent property
{ key: ‘home2’, name: ‘Home’, icon: ‘ios-home-outline’, linkParent: ’/sample-link’, },
app/components/Sidebar/MainMenu.js // make menu type condition in getMenus constant
if (item.child || item.linkParent) { return ( {/** Attention to this */} <ListItem component={LinkBtn} to={item.linkParent ? item.linkParent : ’#’} button className={ classNames( classes.head, item.icon ? classes.iconed : ’’, open.indexOf(item.key) > -1 ? classes.opened : ’’, ) } onClick={() => openSubMenu(item.key, item.keyParent)} > {item.icon && ( <ListItemIcon className={classes.icon}> <Ionicon icon={item.icon} /> </ListItemIcon> )} <ListItemText classes={{ primary: classes.primary }} variant=”inset” primary={item.name} /> {/ Attention to this /} { !item.linkParent && ( { open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> } )} </ListItem> {/ Attention to this */} { !item.linkParent && ( <Collapse component=”div” className={classNames( classes.nolist, (item.keyParent ? classes.child : ’’), )} in={open.indexOf(item.key) > -1} timeout=”auto” unmountOnExit > <List className={classes.dense} component=”nav” dense> { getMenus(item.child, ‘key’) } </List> </Collapse> )} ); }
Hope this can help.
Regards.
I saw that you had already answered that to someone else so I had already tried, but it doesn’t work.
Could you upload the MainMenu.js file with the modifications? or make an update
Thank you very much, it worked very well, I just need to change the style because even though it is only one level it still shows in the children position. Nice support!
Although the menu is already one level, each button is in the sub-level position, how can I change it?
Hi Aeternus185,
Please check https://gist.github.com/ilhammeidi/3d06a1399e80ff77f1830a1dcc40d522
You can remove sub-level menu, for your case just remove <Collapse> component. And to change main menu to llink button please add “component”, “button” and “to” attribute
<ListItem
component={LinkBtn}
to={item.linkParent ? item.linkParent : '#'}
button
>
Hope this can help.
Regards.
I don’t think we’re understanding each other, I mean there’s a space left, like it’s still a sub-menu.
Hi Aeternus185,
That need some styling adjustment in app/components/Sidebar/sidebar-jss.js In latest update we have add one level menu feature. Here’s the code https://pastebin.com/MNJn33M7 and here’s the diff changes https://www.diffchecker.com/cBCD7fcV
Regards.
And where’s that latest update?
In your purchase history.
Could you tell me everything I need to have installed for the system to work? Because when I do the “npm install” I get too many errors
Hi Aeternus,
Thanks for purchasing.
Please try to remove node modules and try npm.install again. Also you can check the docs how to troubleshoot for the common errros https://ilhammeidi.github.io/enlite-docs/#shoot
Regards.
Hi,
1. How can I hide second level menu on load? I tried to change “drawerPaper={open}” to “drawerPaper={!open}” on the SidebarBig class. It hides the second level menu, but then when I press some of the items on the first level menu, it doesn’t show again the second level menu.
2. How can I hide the second level menu after clicking one of its items?
Thanks
Hi bbbeeennn,
Here’s out answers bellow
1. To make submenu hide by default In app/redux/modules/uiReducer.js in const initialState please change to sidebarOpen: false
2. In app/redux/modules/uiReducer.js in case TOGGLE_SIDEBAR: set the sidebarOpen to false
mutableState.set('sidebarOpen',false);
Then in app/components/SidebarBig/index.js add toggleDrawerOpen={toggleDrawerOpen} attribute in all MainMenuBig component.
Hope this can help.
Regards.
How can I make editable table without “Availability”, “Edit” and “Done” icons, but I still want the table to be full screen width and with 10px padding.
Also, how do I change this rows’ table colors?
Thank you!
Hi bbbeeennn,
To make cell table always editable please update in /app/components/Tables/tableParts/EditableCell.js you can remove disabled={!edited} attribute. And also for the rest input DatePickerCell, SelectableCell, and TimePickerCell
Then to change row colors, please open/app/components/Tables/tableParts/Row.js around line 125 inside main return component and use jss or scss class to styling the tr element like http://enlite.ux-maestro.com/app/tables/basic-table > Coloured Row sample
Feel free if you have any further queries.
Regards.
Thanks for your answer!
Unfortunately it didn’t work. I just need an editable table (i.e. all the fields are ‘edited = true’ without the “Availability”, “Edit” and “Done” icons.
Please advise.
Hi bbbeeennn,
Please enable class editing in app/components/Tables/tableParts/Row.js in main return. So the input border will show and make it easier to identify that it’s editable.
<tr className={css.editing}/>
Then please make sure to remove all disabled={!edited} in DatePickerCell, SelectableCell, and the rest mentioned components as well. If you just remove in EditableCell you can see the changes only for column “Name”.
To remove the icon button in app/components/Tables/tableParts/Row.js In main return please remove TableCell component around line:127
Hope this can help.
Regards.
Bootstrap not included?
Not
I appreciate your last response, it worked.
I use the google maps to load tens of thousands of locations represented by markers… but panning and dragging with cooperative gesture handling is way too slow; most times dragging does not even work at all. Does this have anything to do with many markers being displayed on the map? Is there a workaround.
Hi golfexodus,
You can use marker cluster to display a large number of markers on a map. Here’s the about gmap marker cluster https://developers.google.com/maps/documentation/javascript/marker-clustering
And here’s implementation in react-google-maps https://tomchentw.github.io/react-google-maps/#!/MarkerClusterer/1 with sample data https://gist.githubusercontent.com/farrrr/dfda7dd7fccfec5474d3/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json
Hope this can help.
Regards.
Hi,
Thanks for this awesome theme! I just wonder how can I configure my theme to start with arabic language properly? I mean – I changed the DEFAULT language to ‘ar’, but it still initialize with ltr. I tried to change the direction on uiReducer to ‘rtl’ but it doesn’t work well.
Please advice, Thanks!
Hi bbbeeennn
Thanks for purchasing and the appreciation.
To set default lang and direction please open /app/index.html and change the html dir tor “rtl”
<html lang="ar" dir="rtl">
And rest setup is same as in the docs https://ilhammeidi.github.io/enlite-docs/code_flow/ui_lang.html#lang
We will update the documentation for this issue soon.
Hope this can help. Feel free if you any further queries.
Regards.
