I want to make the sidebar active even after reloading a page.
For e.g In user sidebar there are 2 sub-menu of user. When I click on user sidebar menu it expands and show below 2 fields with active menu:
User name
User address
Like I selected user address option it is active now which is working properly. But I want to remain active even after reloading a page. For now, on reloading page, user sidebar will collapsed and not active. In data file, I have defined the menu as mentioned below:
{
action: 'zmdi-widgets',
title: 'message.widgets',
items: [
{ title: 'message.username', path: '/widgets/user-name' },
{ title: 'message.useraddress', path: '/widgets/user-address' }
]
}
When above data contains an active field(boolean) which is true, sidebar menu shows active. I want to make an active field dynamically. On giving static value of active field it works fine even after reloading a page but on giving dynamically it does't work. Why Anyone knows? I am managing all this with vuex.
Related
I would like to have custom links and different sidebar for every single page I don't want my headings render as table of contents in sidebar I would like to have custom content like this.
Node JS
-Lecture 1 Introduction
--Sub Lecture
-Lecture 2 Basics
--Sub Lecture
---Nested Lecture
Where all the lectures are custom links. So how can I do that.
sidebar
Type: false | 'auto' | SidebarConfigArray | SidebarConfigObject
Default: 'auto'
Details:
Configuration of sidebar.
You can override this global option via sidebar frontmatter in your pages.
Set to false to disable sidebar.
If you set it to 'auto', the sidebar will be automatically generated from the page headers.
To configure the sidebar items manually, you can set this option to a sidebar array, each item of which could be a SidebarItem object or a string:
A SidebarItem object should have a text field, could have an optional link field and an optional children field. The children field should be a sidebar array.
A string should be the path to the target page file. It will be converted to a SidebarItem object, whose text is the page title, link is the page route path, and children is automatically generated from the page headers.
If you want to set different sidebar for different sub paths, you can set this option to a sidebar object:
The key should be the path prefix.
The value should be a sidebar array.
In order to add custom links external as well as internal see this:
module.exports = {
themeConfig: {
// sidebar object
// pages under different sub paths will use different sidebar
sidebar: {
'/guide/': [
{
text: 'Guide',
children: ['/guide/README.md', '/guide/getting-started.md'],
},
],
'/reference/': [
{
text: 'Reference',
children: ['/reference/cli.md', '/reference/config.md'],
},
],
},
},
}
For more info see Sidebar Config
I have a list of interventions on my "first page". When I click on one, I navigate to its details, "second page", and there, is a button that allows me to start the events. When I click on that button it fills an object from a route : api/current
{
"interventionSummary": {some object}
}
When there's no intervention started :
{
"interventionSummary": null
}
When an intervention is started, it should be ended too so if the users doesn't I want to show a reminder message in the interventions list ("page 1") using: if interventionSummary !== null -> display the message to remind to end the intervention.
The problem is that my object interventionSummary is not updated when I go back on my interventionsList, unless I reload. For another page I was able to use :
this.props.navigation.addListener('focus', doStuff);
But the button and the route used were in the same page. I have tried, forceUpdate, simulate a state change : this.setState({state : this.state}) from solution on google, but nothing is working, I don't know how to make the component interventionsList see the update, or just re render after the click on the "second page"...
I hope that's clear, if anyone knows a way to do that
in your first page create your function.
myMethod() {
//function i want to call in second page
}
in your first page when navigating to second page(in my case when user presses a button) pass a function as a parameter like below:
onPress={() => this.props.navigation.navigate('SecondPage', {
rerenderOutputTitles: () => this.myMethod(),
})}
then in second page call this method wherever you want like below:
this.props.navigation.state.params.rerenderOutputTitles();
I am developing a web site selling web hosting and domain registration so I am using WHMCS but I am facing a problem I want to make a custom page under WHMCS directory to allow the admin user to change product's details without showing the top navigation bar which created by WHMCS.
Not sure by Admin user, but if you mean you want to remove the primary menu from client area, add this code to a php file inside: whmcs_dir/includes/hooks (say nomenu.php)
add_hook('ClientAreaNavbars', 1, function ()
{
// Get the current navigation bars.
$primaryNavbar = Menu::primaryNavbar();
$secondaryNavbar = Menu::secondaryNavbar();
$children = $primaryNavbar->getChildren();
if (!is_null($children)) {
foreach ($children as $child) {
$primaryNavbar->removeChild($child);
}
}
$children = $secondaryNavbar->getChildren();
if (!is_null($children)) {
foreach ($children as $child) {
$secondaryNavbar->removeChild($child);
}
}
});
Also, add css code to hide the menubar remaining after removing the items:
#main-menu {display: none}
One note though: even if you hide the menu items, if logged in user knows the page link, which is not secret, he can type the URL directly in the address bar to visit it.
For example, to access my domains page in whmcs: http://whmcs-url.com/clientarea.php?action=domains
Your option to have better control is to check the API functions.
I have an user entity in the system and the following route fetches it from server and displays its details:
routerConfiguration.map([
// ...
{route: 'user/:id', name: 'user-details', moduleId: './user-details'}
]);
Now I want to display an edit form for the displayed user. I have the following requirements:
Edit form should have a separate URL address, so it can be sent to others easily.
When user clicks the Edit button on the user's details page, the edit form should use an already loaded instance of the user (i.e. it should not contact the API again for user details).
When user clicks the Edit button on the user's details page and then the Back button in the browser, he should see the details page without edit form again.
1st attempt
I tried to define the edit form as a separate page:
routerConfiguration.map([
// ...
{route: 'user/:id/edit', name: 'user-edit', moduleId: './user-edit'}
]);
This passes the #1 and #3 requirement but it has to load the user again when the edit form is opened.
I don't know any way to smuggle some custom data between the routes. It would be perfect if I could pass the preloaded user instance to the edit route and the edit component would use it or load a new one if it is not given (e.g. user accesses the URL directly). I have only found how to pass strings to the routes in a slighlty hacky way.
2nd attempt
I decided to display the edit form in a modal and show it automatically when there is a ?action=edit GET parameter. The code inspired by this and this question:
export class UserDetails {
// constructor
activate(params, routeConfig) {
this.user = /* fetch user */;
this.editModalVisible = params.action == 'edit';
}
}
and when the user clicks the Edit button, the following code is executed:
displayEditForm() {
this.router.navigateToRoute('user/details', {id: this.user.id, action: 'edit'});
this.editModalVisible = true;
}
This passes #1 (the edit url is user/123?action=edit) and #2 (the user instance is loaded only once). However, when user clicks the Back browser button, the URL changes as desired from user/123?action=edit to user/123 but I have no idea how to detect it and hide the edit form (the activate method is not called again). Therefore, this solution fails the #3 requirement.
EDIT:
In fact, I have found that I can detect the URL change and hide the edit form with event aggregator:
ea.subscribe("router:navigation:success",
(event) => this.editModalVisible = event.instruction.queryParams.action == 'edit');
But still, I want to know if there is a better way to achieve this.
The question is
How to cope with this situation in a clean and intuitive way?
How about adding a User class that will serve as the model and use dependency injection to use it in your view-models?
export class User {
currentUserId = 0;
userData = null;
retrieve(userId) {
if (userId !== this.currentUserId) {
retrieve the user data from the server;
place it into this.userData;
}
return this.userData;
}
}
I am looking for a way to set the page of a jqGrid to x...
My use case is someone is using my grid...
They click on a patient to edit that patient (I am not using jqGrids modal edit screen... to many modal windows already)...
When the save what they did to that patient, I want to redirect the browser back to the screen where they clicked on that patient, and back to the SAME PAGE...
The thing to keep in mind.
I am using asp.net MVC4. I call the first page via an action method. The url variable of my grid is another action in the same controller. That action is what I send my page and row variables down to. I am sure that this can be done, However, I have no idea of how to achieve it. So far I have tried to set the page variable and rows variable in my document.ready before I call the jqGrid...
tbl.jqGrid({
loadBeforeSend: function () {
page: pageFromTemp;
rows: rowFromTemp
}
});
basically I have tried different ways to do it. The above is just one of them.
I have tried to reload the grid in the document.ready. But that doesn't make any sense. Why reload the grid when you haven't given it any of the parameters it needs...
I have tried to set the variable in the beforeRequest event. I have a function that I try and set it in...
beforeRequest: function () {
if ((rowFromTemp != "") && (pageFromTemp != "")) {
$(this).trigger('reloadGrid', [{ page: pageFromTemp, rowNum: rowFromTemp, url: '/Encounters/GetAjaxPagedGridData/' }]);
//$.extend($(this).setGridParam({ page: pageFromTemp })),
//$.extend($(this).setGridParam({ rowNum: rowFromTemp })),
//$.extend($(this).setGridParam({ url: '/Encounters/GetAjaxPagedGridData/' }))
//$.trigger('reloadGrid', [{ page: pageFromTemp, rowNum: rowFromTemp, url: '/Encounters/GetAjaxPagedGridData/'}]);
}
},
But that doesn't work either. I am obviously missing something. What am I doing wrong...
Got it to change to the right page using loadComplete and $("frTable").trigger({})
But now I am getting a flashing Loading screen which indicates to me that it is still loading the data...
If I set a breakpoint in my code, I can confirm that it is loading the data. I am not doing something right here.
Load the grid in document ready, have it's datatype set to local, have it's url unassigned, and have it hidden. When you want to have it load, trigger the load after setting the parameters and then show it to the user.