Adding New Page or Component in Laravel Admin

by Jigesh Raval

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/users

So 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.