santigarcor/laravel-vuetable

Vuetable laravel backend package

0.1.1 2020-02-20 16:29 UTC

This package is auto-updated.

Last update: 2020-02-20 16:31:55 UTC


README

Build Status Latest Stable Version Total Downloads StyleCI License

Laravel Vuetable is the backend component that can work with the Vuetable component.

Installation

  1. Run the composer require command from your terminal:

     composer require "santigarcor/laravel-vuetable:0.1.*"
    
  2. If you have disabled the package discovery in your config/app.php:

    • In the providers array add:

        Vuetable\VuetableServiceProvider::class,
      
    • In the aliases array add:

        'Vuetable' => Vuetable\VuetableFacade::class,
      

Usage

Your request to the controller should have this data:

{
    sort: '', // column_name|asc or column_name|desc
    page: 1,
    per_page: 10,
    searchable: [
        // This array should have the names of the columns in the database
    ],
    filter: '' //The text that is going to be used to filter the data
}

So for example lets create the table for the users with their companies. Then in the javascript we should have:

data = {
    sort: 'users.name|asc',
    page: 1,
    per_page: 10,
    searchable: [ // This means the 'users.name', 'users.email' and 'companies.name' columns can be filtered through the 'filter' attribute in the data.
        'users.name',
        'users.email',
        'companies.name',
    ]
}

axios.get('http://url.com/users-with-companies', data)

In Controller we can provide Eloquent:

class UsersDataController extends Controller
{
    public function index() {

        $query = User::select([
                'users.id',
                'users.name',
                'users.email',
                'companies.name as company',
                'companies.company_id'
            ])
            ->leftJoin('companies', 'users.company_id', '=', 'companies.id');

        return Vuetable::of($query)
            ->editColumn('company', function ($user) {
                if ($user->company) {
                    return $user->company;
                }

                return '-';
            })
            ->addColumn('urls', function ($user) {
                return [
                    'edit' => route('users.edit', $user->id),
                    'delete' => route('users.destroy', $user->id),
                ];
            })
            ->make();
    }
}

Or Collection

class UsersDataController extends Controller
{
    public function index() {

        $query = new Collection([
             ['name' => 'John Doe', 'email' => 'john@mail.com'],
             ['name' => 'Jane Doe', 'email' => 'jane@mail.com'],
             ['name' => 'Test John', 'email' => 'test@mail.com']
        ]);

        return Vuetable::of($query)
            ->editColumn('name', function ($user) {
                return Str::lower($user['name']);
            })
            ->addColumn('urls', function ($user) {
                return [
                    'edit' => route('users.edit', $user['id']),
                    'delete' => route('users.destroy', $user['id']),
                ];
            })
            ->make();
    }
}

This controller is going to return:

{
  "current_page": 1,
  "from": 1,
  "to": 10,
  "total": 150,
  "per_page": 10,
  "last_page": 15,
  "first_page_url": "http://url.com/users-with-companies?page=1",
  "last_page_url": "http://url.com/users-with-companies?page=15",
  "next_page_url": "http://url.com/users-with-companies?page=2",
  "prev_page_url": null,
  "path": "http://url.com/users-with-companies",
  "data": [
    {
      "id": 1,
      "name": "Administrator",
      "email": "administrator@app.com",
      "company": "-",
      "company_id": null,
      "urls": {
        "edit": "http://url.com//users/1/edit",
        "delete": "http://url.com//users/1"
      },
    },
    {
      "id": 2,
      "name": "Company Administrator",
      "email": "company_administrator@app.com",
      "company": "-",
      "company_id": null,
      "urls": {
        "edit": "http://url.com//users/2/edit",
        "delete": "http://url.com//users/2"
      },
      ...
    }
  ],
}

What does Laravel Vuetable support?

Using the Eloquent Builder you can:

  • Filter/Sort by model columns.
  • Make joins and filter/sort by them.
  • Define the length of the pagination.
  • Add columns.
  • Edit columns (if the column has a cast defined, it doesn't work).

Using the Collection you can:

  • Filter/Sort by model columns.
  • Define the length of the pagination.
  • Add columns.
  • Edit columns.

License

Laravel Vuetable is open-sourced software licensed under the MIT license.

Contributing

Please report any issue you find in the issues page. Pull requests are more than welcome.