Adding New Page or Component in Laravel Admin
Introduction
Usually, any admin component would require List, Add, and Edit. In this tutorial, we will List, Add, and Edit Users.
Basic Routing
_vApp is the base directory of AdLara Bootstrap Admin Application. All the routes are defined in routes.js file in the base directory (_vApp).
In most cases, you can access defined routes by accessing urls in the browser along with your AdLara Route path. For example, you may access the following routes by entering https://your-app.com/admin/users:
{
path: '/users',
component: UserListing
}Component Declaration and Usage
The defined component "UserListing" should be imported in the top of the file:
import UserListing from './pages/users/list.vue' Routing Parameters
You will need to add route with parameters to capture information from the route. For example, you may want to capture User's ID from the given url: https://your-site.com/admin/user/2:
{
path: '/user/:id',
component: UserEdit
}In the component, UserEdit, You can access the User's ID using this.$route.params.id in the Vue beforeCreate, created, or mounted events. For more information on how Vue Routing works, please visit https://router.vuejs.org/
Adding List Component File
Now, create list.vue file under _vApp/pages/users folder:
<template>
<div>
<Header
heading="Admin Users"
>
<v-btn
to="/user/add"
color="info"
>
<v-icon left>mdi-view-list</v-icon>
Add User
</v-btn>
</Header>
<Listing
endpoint="/users"
slug="/user"
component="user"
>
</Listing>
</div>
</template>In the above file, Listing component accepts endpoint which will resolve:
http://your-site.com/admin/api/usersSo now, we need to define the route 'users' in Laravel Route File routes/admin.php
Route::group(['prefix' => 'api', 'middleware' => 'admin_user'], function () {
Route::get('users', 'AdminUserController@initListing');
});Next, the method initListing of AdminControllers/AdminUserController.php looks like this
public function initListing()
{
$this->initProcessFilter();
$admin_user = AdminUser::select('id', 'name', 'email')
->orderBy('id', 'desc');
if ($this->filter) {
$admin_user->where($this->filter_search);
}
$this->obj = $admin_user->paginate($this->paginate);
$keys = [
'id' => [
'text' => 'ID',
'filter' => true
],
'name' => [
'text' => 'Name',
'filter' => true
],
'email' => [
'text' => 'Email',
'filter' => true
]
];
return array(
'obj' => $this->obj,
'keys' => $keys
);
}This method returns 'obj' and 'keys'. The keys are the definition of the listing columns and the 'obj' is consisting the records from the database.