guys. I'm working on a modular admin system, based on Codeigniter 4 (as backend) and Vue.JS as frontend.
The main requirement for Codeigniter is that the system be completely modular, that is, by deleting a folder – you can remove, say, blog (news) management, or vice versa - add a file module and manage files (let's say – it's plugins, a bit like wordpress).
The main problem is that I want to make a SPA (single page app), and vue router requires a list of routes when it's init. At the login stage, I know that there are only standard (mandatory) pages: login, forgot (password reset), dashboard, settings (user settings). The backend will show other plugins only after successful authorization (example): news, pages manager, items (manage shop items) etc. And each of them can have several more routes for managing inside: create (add new record to database), edit, delete, view (card of record).
Is it possible to implement this with Vue router so that we get a SPA? Or can SPA be implemented only with a static (when it is clear how many pages there will be) project?
For better understanding, my plugins have all the necessary structure and are completely independent. Previously, when I didn’t use the Vue.js router, PHP went through all the plugin folders and collected a link (it creates array with links and at the header template I go through this array) to them for the menu , let's say from a file menu.php, in which was link (for example only):
<?php
$menu['main'][] = array(
'type' => 'item', // item or sub-item for menu
'link' => MODULES_URL.'pages/items', // link to main page of plugin (by default list of records for this plugin)
'title' => 'Pages Manager', // name of page
'active' => ($this->uri->segment(3) == 'pages'), // is active link? for menu
'icon' => 'fa fa-pencil-square' // icon for menu
);
?>
Related
I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you
I am working on an application using react-admin, where each registered user will have it's own set of resources which are dynamically loaded, we don't know the exact resources upfront. Users register and login using Auth0. The data is fetched from Hasura. The solution is based on the following example to load the resources: https://marmelab.com/react-admin/Admin.html#unplugging-the-admin-using-admincontext-and-adminui
Loading the resources dynamically is working (see snippet below), however i need to refresh the page manually in order to see the resources in the sidebar menu, while the sidebar menu must be updated as soon as the dynamic resources are available. After logging out and logging back in, the resources are again not visible and a refresh is required again.
function AsyncResources() {
...
return (
<AdminUI
title="Hasura Dashboard"
dashboard={Dashboard}
history={history}
loginPage={LoginPage}
layout={Layout}
>
{resources.map(resource => (
<Resource name={resource.name} key={resource.name} options={getOptions(resource.name)} list={getList(resource.name)} />
))}
<Resource /> { /* Without this Resource, the initial page doesn't load */ }
</AdminUI>
);
}
I had a look at the following issues regarding the same topic, but i couldn't find a definite solution to my specific problem: https://github.com/marmelab/react-admin/issues/5177
with answer: "Basically you write components for every resource but only enable what you want." This is not a solution for me because that would mean i have to manually add every single resource of every new registered user.
I already created a custom Menu to see if that would help, but shows the same behaviour as the default Menu.
How can i make sure the dynamic loaded resources are visible in the menu without the user having to refresh the window after logging in?
I've developed an Ext JS 4.0.7 app for my company. It has various modules for different team's needs. Now, the company want to make sure only relevant people have access to relevant modules in an app. It's an ERP application which has CRM, MRP, Engineering, HR and Finance modules. Now, respective team members should have access to respective menus and pages and super admin will have access to everything.
I know how to control the menus based on user login. But not sure how to integrate user login screen into my app. I know basics of Ext JS and able to design a Login screen using form panel ...... but not sure how to make it as my app's first screen and upon successful login, let the user in and able to logout from there.
If anyone already developed such functionality, i request to share the solution here. Any pointers or code snippets will be a great help.
Thanks very much in advance.
My application has a header (company logo and app title - horizontal on north) and left menu and content panel.
So, here is how login/logout screen implemented.
When app is loaded, when viewport is loaded, on render, I load menu store and load 'Login' and 'Change Password' menu items in them.
When user enters login/pwd, via ajax call , will call servlet and process login data. Upon login successful, based on user role, respective menu json built in server side and menu store is loaded with this json. This json has 'Logout' menu by default. So, when user logs out, will load Login screen in content panel.
Not sure whether any other best ways to implement the same. But this is working well.
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
I got some code of Laravel where confide (https://github.com/Zizaco/confide) is used. Now I would like to add CSS in these Web Pages of Laravel.
Can anyone say how can I do that ??
Unless I am mistaken I'm pretty sure the question the poster was trying to ask is how to style the forms that reside outside of the app\viewsfolder. The forms confide uses by default are in the \vendor\zizaco\confide\src\views folder.
You can change the default forms and use custom ones by editing the config.php and style them like any other view.
Change this
*\vendor\zizaco\confide\src\config\config.php
'login_form' => 'confide::login',
'signup_form' => 'confide::signup',
'forgot_password_form' => 'confide::forgot_password',
'reset_password_form' => 'confide::reset_password',
To this
*\vendor\zizaco\confide\src\config\config.php
'login_form' => 'user.login',
'signup_form' => 'user.register',
'forgot_password_form' => 'user.password',
'reset_password_form' => 'user.reset',
I think you misunderstood what confide is or how laravel works.
Confide is a package to manage the authentication process in your website it has nothing to do with the front-end design of your website. It serves the back end operations to authenticate a model.
You must first pass the model through a controller and in to a view.
After that you can use blade templating to present the models and their attributes
and you can use whatever styling you want in your views.
Those are basic principles of the MVC design pattern if you don't understand what I'm trying to explain to you should read the laravel documentation